This document provides a guide for using the Chrome Browser Extension to integrate Polygon Streaming into a PlayCanvas project that targets publication to VIVERSE.
Start by opening your PlayCanvas project and setup using the VIVERSE Extension. Once the extension is setup and you’re logged in, you are ready to add special components. To add a Polygon Streaming component to the scene, add an Empty component to the scene and give a name like "Streaming Model".
With the new component selected, click on EDIT VIVERSE EXTENSION. Choose a Media type of plugin, select the module PolygonStreaming and click the plus + symbol. Now you just added a Polygon Streaming component to your scene.
Paste the Asset ID of your streaming model into the Polygon Streaming URL field. Once you added the URL in the field, the object will preview inside your scene. This is just a preview; once Published, the streaming model will start actively streaming from the cloud.
That’s all you need to stream your models inside your VIVERSE Scene. You can also modify the Polygon Streaming Parameters going to Viverse Scene Settings / Polygon Streaming and change the parameters according to your preferences. You can check the Supported Parameters list below in this documentation.
After you published your VIVERSE World scene, the Streaming Model will automatically start to stream inside the scene.
Option 1: Chrome Browser Extension Plugin
PlayCanvas Chrome Browser Extension includes the Polygon Streaming Plugin.
Instructions for using the Polygon Streaming Plugin can be found here.
Option 2: Standalone Plugin
Add polygon-streaming.js to PlayCanvas project.
Instructions for using the Standalone plugin can be found here.
Option 3: HTML Scripting
Download build of PlayCanvas project to access HTML.
Instructions for using HTML Scripting can be found here.
This page details how to control the settings of individual VIVERSE Polygon Streaming models within your PlayCanvas project when using the VIVERSE PlayCanvas extension.
Polygon Streaming component settings are only available when using the VIVERSE of the PlayCanvas editor.
The Streamable Model Component or Polygon Streaming (VIVERSE SDK) component represents the model to be streamed inside your project. It will ask for a Polygon Streaming URL, which is the address of your newly converted model. Once you paste the address in that field, it's ready to be streamed inside your scene
Initial Triangle Percentage is the percentage of triangles to be first loaded in the scene. You should enter a number between 0 and 1. The lower the number the quicker the model will appear but at a lower quality though will start to update to a higher quality straight away.
Cast Shadows and Receive Shadows should be checked in order for the model to cast and receive shadows.
Force Double Sided Materials should be checked if parts of the model are not showing up. This usually resolves problems with incorrect normals on the model. If you are not encountering problems with the model you should leave this setting turned off or you will double the amount of triangles that need to be rendered.
Use Alpha should usually be turned on but can be turned off to increase performance but transparent materials will render opaque.
Play Animation Automatically determines whether to play the embedded animation when the scene is loaded.
Animation To Play is the embedded animation to play when the scene loads. This can either be the name of the animation or it's index i.e. 0 would be the first animation. If it's left blank it will play the first animation. You can view the names of the animations in a GLTF file in the . If you have supplied an animation state graph the initial animation will be the animation that is set in the default state. The default state is the one that is connected to START in the state graph editor.
Animation States map states in the animation state graph (see below) to the embedded animations. To the left of Array Size enter the number of state/animation mappings you want. State should be the state name in the state graph. Animation is the name or index of the embedded animation and layer is the layer in the state graph. If it's left blank it will use the base layer.
Scripting Polygon Streaming animations works in the same way as standard PlayCanvas animations but you shouldn't try to access the anim component in the initialize method of a script component as it's only added once the model has loaded.
Below is an example of triggering an animation using a state graph. The state graph has a running parameter and when it's set to true will transition to the Running state. You will need to setup the parameters, states and transitions in the state graph.
It is possible to change the animation without a state graph. The following switches to the idle state with a transition duration of 0.2 seconds. if no animation states are supplied it will use the embedded animation name as the state name.
Animation State Graph allows you to control the transition between different animations when triggered from code. .
Priority Level and Quality Priority affect the same setting but the first provides presets while the second allows you to enter a number. This setting affects how triangles are allocated to each model and is a ratio. For example if you have one model set to 1 and another set to 2 and both models are the same distance from the camera, the second model will receive twice as many triangles as the first.
Environment Asset allows to set a custom environment map to use for the streaming model. It expects a cubemap which . This is useful if you have not set an environment asset in the scene but still want reflections to show on the model.
This document provides a guide for using HTML Scripting to integrate Polygon Streaming into a PlayCanvas project that does not target publication to VIVERSE.
For PlayCanvas projects that are not targeting publication to VIVERSE, this PlayCanvas Direct HTML Plugin is the second path for integrating Polygon Streaming into those projects. Because these projects will not be published to VIVERSE, we've created a direct HTML version of the plugin that does not utilize the PlayCanvas VIVERSE Chrome browser extension.
// add Polygon Streaming SDK to your HTML with the correct version number
<script src="https://stream-stage.viverse.com/assets/streamablemodel/{LATEST_STABLE_VERSION}/PolygonStreaming.js"></script>After then you need to define a new Entity, add it to the root and define the attributes (described here). In the streamController only the camera attribute is required and in streamableModel only the path attribute is required but all attributes are shown below for informational purposes.
// add a camera entity for Polygon Streaming SDK to use
const camera = new pc.Entity("camera");
camera.addComponent("camera", {
farClip: 1000,
nearClip: 0.1
});
app.root.addChild(camera);// add a Polygon Streaming controller
const streamController = new pc.Entity();
streamController.addComponent("script");
streamController.script.create("streamController", {
attributes: {
camera: camera,
cameraType: "nonPlayer",
occlusionCulling: true,
occlusionGeometry: "boundingBox",
occlusionQueryFrequency: 8,
triangleBudget: 3000000
mobileTriangleBudget: 1000000,
minimumDistance: 0.01,
distanceFactor: 1.1,
distanceType: "boundingBoxCenter",
maximumQuality: 15000,
closeUpDistance: 3,
closeUpDistanceFactor: 5,
iosMemoryLimit: 0
}
});
// add a Polygon Streaming model
let streamableModel = new pc.Entity();
streamableModel.addComponent("script");
streamableModel.script.create("streamableModel", {
attributes: {
path: "/model.xrg",
qualityPriority: 1,
useAlpha: true,
castShadows: true,
receiveShadows: true,
doubleSidedMaterials: false,
initialTrianglePercent: 0.1
playAnimationAutomatically: true,
animation: 0
}
});
// add model to stream controller
streamController.addChild(streamableModel);
// add stream controller to the scene
app.root.addChild(streamController);Default
1
Higher
1.5
Highest
2
Custom
Enter a number in Quality Priority
this.entity.anim.setBoolean('running', true);this.entity.anim.baseLayer.transition('idle', 0.2);These component attributes apply to the standalone plugin and the one used in HTML scripting.
This document provides a guide for using the Standalone Plugin to integrate Polygon Streaming into a PlayCanvas project that does not target publication to VIVERSE.
For PlayCanvas projects that are not targeting publication to VIVERSE, this PlayCanvas standalone plugin is the first option for integrating Polygon Streaming into those projects. Because these projects will not be published to VIVERSE, we've created a standalone version of the plugin that does not utilize the PlayCanvas VIVERSE Chrome browser extension.
See for a description of the attributes used in the Stream Controller and Streamable Model components.
Receive Shadows
Whether the model should receive shadows.
True
Force Double Sided
Render the model double sided regardless of the setting in the model file.
False
Use Alpha
Whether to render semi-transparency in materials.
True
Use Embedded Collider
Determines whether the embedded collider should be used in physics.
True
Play Animation Automatically
Whether to play the embedded animation automatically
True
Animation To Play
The name or index of the embedded animation to play if an animation state graph is not provided. An index value of 0 is the first animation. If no value is supplied it will play the first animation.
None
Animation State Graph
Create an Anim State Graph in the Playcanvas editor and drag it onto this attribute. If no asset is provided a default state graph will be created.
None
Animation States (animationStateMappings)
Assigns animations to states in the animation state graph. Nested attributes include: state: the state in the state graph animation: The embedded animation name or index. layer: The layer in the state graph. If left blank will use the base layer.
None
Environment Asset
Use a cubemap asset if you want to provide an environment map otherwise it will use the scene's environment map.
None
Hash Code
Hash code to validate streaming model.
''
Camera Required
This is the camera used in the scene. This attribute is required.
None
Camera Type
Non-player camera ('nonPlayer'): A camera that is not attached to a player e.g. a camera that orbits an object. Player camera ('player'): A camera that is attached to a player
Non-player camera
Occlusion Culling
Whether to enable occlusion culling. When occlusion culling is enabled objects that are hidden by other objects will not be rendered. It depends on the model whether this setting will improve performance.
False
Occlusion Geometry
Bounding Box: Use the bounding box of each mesh to check if it's occluded. This is less accurate but faster. Mesh: Use the mesh to check if it's occluded. This is more accurate but slower.
Bounding Box
Occlusion Query Frequency
How many times per second to check for occlusion. A lower number will improve performance but geometry will take longer to reappear.
8 times/second
Triangle Budget
The maximum amount of triangles that you want to be in the scene.
5000000
Mobile Triangle Budget
The triangle budget used on a mobile device. If it is set to 0 it will use the non-mobile triangle budget.
3000000
Minimum Distance
The smallest possible distance to the camera.
0.01
Distance Factor
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.
1.1
Maximum Quality
Stops improving geometry that exceeds the maximum quality. This can be used to stop far away objects from showing more detail than is necessary. Setting it to 0 means there is no maximum quality.
15000
Close Up Distance Factor
The distance factor used when close-up to an object. Should be higher than the standard distance factor.
5
Close Up Distance
The distance where it starts using close-up distance factor. Set it to 0 to not use close-up distance factor.
3
iOS Memory Limit
The maximum amount of memory in MB that meshes and textures can consume on iOS devices to avoid the page crashing. Use -1 for no limit or 0 to let Polygon Streaming determine a device specific limit.
0
Model URL (path) Required
The URL of the XRG file. This attribute is required.
None
Quality Priority
How much to prioritize the quality of this model relative to the quality of other models in the scene. It is a ratio.
1
Initial Triangle Percent
Percentage of triangle budget to initialize the model with. It should be a number between 0 and 1
0.1
Cast Shadows
Whether the model should cast shadows.
True
A. Create a new entity and name it StreamController. This entity will control the streaming models inside the project.
B. Add the StreamController script to the StreamController entity. You can check detailed information on these parameters here.
C. Add the Camera entity from the project to the Camera field.
This page details how to control the global settings of VIVERSE Polygon Streaming within your PlayCanas project when using the VIVERSE PlayCanvas extension.
Polygon Streaming project settings are only available when using the VIVERSE extension of the PlayCanvas editor.
The Stream Controller or Polygon Streaming Settings (VIVERSE SDK) manages the streaming of models and streaming parameters inside your project. It can be found under Viverse Scene Settings.
When Occlusion Culling is enabled objects that are hidden by other objects will not be rendered. It depends on the model how much occlusion culling will improve performance.
Occlusion Geometry allows you to specify what is used to check if a mesh is occluded. Bounding Box option is faster but less accurate while the Mesh option is slower but more accurate. Bounding Box should be sufficient in most cases.
Occlusion Query Frequency determines how many times a second meshes are checked if they are occluded. A lower value will increase performance but meshes will take longer to reappear.
The Triangle Budget is a limit on the amount of triangles that will be drawn per frame. Increasing this will lead to better visual quality, but of course also higher processing and memory utilization. It's recommended to keep Triangle Budget to at least 30% of the full amount of polygons that you are going to stream. For example, if you are going to stream a 3D model of 10 million polygons, it's recommended to use a Triangle Budget of at least 3 million.
The Mobile Triangle Budget is the same as Triangle Budget, however it will be applied in case the system identifies the user is visiting the experience via a mobile device.
With a Distance Factor above 1 nearby objects are given preference when allocating triangles. A value below 1 gives preference to further away objects and a value of 1 is neutral.
It will stop improving geometry when it reaches the Maximum Quality. This can be used to stop far away objects from showing more detail than is necessary. Setting a value of 0 means there is no limit on quality apart from the triangle budget.
Details of parameters are also set on the Supported Parameters section.
Occlusion Geometry
Mesh: Use the mesh to check if it's occluded Bounding Box: Use the bounding box of the mesh to check if it's occluded.
Bounding Box
Bounding Box
Bounding Box
Bounding Box
Bounding Box
Bounding Box
Occlusion Query Frequency
Value is in times per second. A value of 0 means will it run on every frame.
0
8
60
5
8
12
Triangle Budget
The maximum amount of triangles that you want to be in the scene at any single point.
0
5000000
Depends on device
Mobile won't use this parameter
5000000
5000000
Mobile Triangle Budget
The triangle budget used on a mobile device. If it is set to 0 it will use the non-mobile triangle budget.
0
3000000
Depends on device
3000000
PC won't use this parameter
PC won't use this parameter
Distance Factor
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.
0
1.1
10
1.1
1.1
1.1
Maximum Quality
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. Leaving this at 0 means there is no maximum quality.
0
15000
300000
15000
15000
0
Occlusion Culling
Enable Dynamic Occlusion Culling.
FALSE
FALSE
TRUE
FALSE
FALSE
FALSE