Polygon Streaming Web Player for PlayCanvas

Usage

Install the package with:

npm install -S @polygon-streaming/web-player-playcanvas

You will also need to install PlayCanvas:

npm install -S playcanvas

You will need to generate a XRG file from your 3D model which you can do in the console.

In your code you need to import registerComponents function:

import * as pc from 'playcanvas';
import { registerComponents } from '@polygon-streaming/web-player-playcanvas';

And execute the function:

registerComponents();

You will need to load the Basis library so it can decode KTX2 textures:

pc.basisInitialize({
    glueUrl: '/lib/basis/basis.wasm.js',
    wasmUrl: '/lib/basis/basis.wasm.wasm',
    fallbackUrl: '/lib/basis/basis.js'
});

You can download the files using these links:

• basis.wasm.js
• basis.wasm.wasm
• basis.js

Next need to create an entity with a camera component:

const camera = new pc.Entity('camera');
camera.addComponent('camera');

Your page must contain an entity that has a stream controller script component. The camera entity created above is passed in as an attribute to the stream controller:

const streamController = new pc.Entity('Stream Controller');
streamController.addComponent('script');
streamController.script.create('streamController', {
  attributes: {
    camera,
    cameraType: 'nonPlayer',
    triangleBudget: 5000000,
    mobileTriangleBudget: 3000000
  }
});

Next you need to create an entity that has a streaming model script component - one for each of your streaming models where you pass in the URL to your XRG file. You can get the URL by going to the models section of the console and clicking on the three dots next to your model and selecting "Copy asset ID"

const streamingModel = new pc.Entity('Streaming Model');
streamingModel.addComponent('script');
streamingModel.script.create('streamableModel', {
  attributes: {
    path: '<Model URL>',
    qualityPriority: 1
  }
});

The streaming model entity needs to be a child of the stream controller entity:

streamController.addChild(streamingModel);

And then you need to add the stream controller entity to the scene:

app.root.addChild(streamController);

Stream Controller Attributes

All attributes are optional apart from those marked required.

• camera (Required): The camera entity in your scene.
• cameraType: 'nonPlayer' | 'player', default: 'nonPlayer'
  • nonPlayer: A camera that is not attached to a player e.g. a camera that orbits an object.
  • player: A camera that is attached to a player.
• occlusionCulling: boolean, default: false. Whether occlusion culling is enabled. Requires that device supports WebGL 2.
• occlusionGeometry: 'boundingBox' | 'mesh', default: 'boundingBox'
  • boundingBox: Use the bounding box of the mesh to check if it's occluded. It's slower but more accurate in determining whether a mesh is occluded.
  • mesh: Use the mesh to check if it's occlused. It's quicker but less accurate in determining whether a mesh is occluded.
• occlusionQueryFrequency: number, default: 8. Value is in times per second. A value of 0 means will it run on every frame.
• triangleBudget: number, default: 5000000. The maximum amount of triangles that you want to be in the scene at any single point.
• mobileTriangleBudget: number, default: 3000000. The triangle budget used on a mobile device. If it is set to 0 it will use the non-mobile triangle budget.
• minimumDistance: number, default: 0.01. The smallest possible distance to the camera.
• distanceFactor: number, default: 1.1. Preference for nearby objects over objects further away. Values above one mean a preference for nearby objects. Values below one mean a preference for objects further away. One is neutral.
• maximumQuality: number, default: 15000. Stops improving geometry that exceeds the maximum quality. This can be used to stop far away objects from showing more detail which can be wasteful. Setting it to 0 means there is no maximum quality.
• closeUpDistance: number, default: 3. The distance where it starts using close-up distance factor. Set it to 0 to not use close-up distance factor.
• closeUpDistanceFactor: number, default: 5. The distance factor used when close-up to an object. Should be higher than the standard distance factor.

Streaming Model Attributes

All attributes are optional apart from those marked required.

• path (Required): string, default: '/model.xrg'. Path or URL of the model.
• qualityPriority: number, default: 1. How much to prioritize the quality of this model relative to the quality of other models in the scene. This parameter does nothing if this is the only model in the scene.
• initialTrianglePercent: number, default: 0.1. Percentage of triangle budget to initialize the model with.
• castShadows: boolean, default: true. Whether the model should cast shadows.
• receiveShadows: boolean, default: true. Whether the model should receive shadows.
• forceDoubleSided: boolean, default: false. Render the model double sided regardless of the setting in the model file.
• useAlpha: boolean, default: true. Whether to render semi-transparency in materials. You might turn this off to increase performance but all your materials will render opaque.
• useEmbeddedCollider: boolean, default: true. Wether to use the embedded collider.
• playAnimationAutomatically: boolean, default: true. Whether to play the embedded animation automatically.
• animation: string or number, default: null. The name or index of the embedded animation to play. An index value of 0 is the first animation. If not value is supplied it will play the first animation.
• animationStateGraph: asset, default: null. Supply a state graph if you want more advanced control over the animations. Use toAnimStateGraphAsset function to convert a JavaScript object of the state graph to an asset.
• animationStateMappings: array, default: []. If you supply an animation state graph you will also need to supply an array of objects that map states to the embedded animations.
  • state: string. The state name used in the state graph.
  • animation: string or number. The name or index of the embedded animation.
  • layer: string, default: null. The layer name used in the state graph. If it's omitted it will default to the base layer.
• environmentAsset: asset. Use either a cubemap asset with a prefiltered image or the prefiltered image as a texture asset.
• hashCode: string, default: ''. Hash code to validate streaming model.