VIVERSE Polygon Streaming is an intelligent visualization core technology that overcomes modern-day 3D visualization challenges. It unleashes the potential to stream spatial content from the cloud and seamlessly shares high-fidelity models and worlds on any device.

Polygon Streaming aims to provide creators, developers, designers, and enterprises with tools to build immersive, high-quality 3D content that is widely compatible with the most popular game engines and can be experienced across different platforms.

VIVERSE Polygon Streaming focuses on the next shift in computing and the future of the internet. It breaks down barriers and enables accessibility from any device (mobile, tablet, PC, and even XR headsets), allowing people to create, share experiences, and collaborate like never before.

Allow end-users to consume big 3D models rapidly by only downloading the geometry that has relevant visual impact for them at their specific position and bandwidth. With Polygon Streaming, you can stream large 3D models into your platform or projects without taking up local storage space, leveraging the number of polygons that can be shown in a cross-platform and multi-device way.

Benefits

• Only transfer geometry is needed in the user’s current position and field of view in the scene over time.

• Automatic LOD generation and texture compression. Texture compression method optimized for lightweight decompression.

• Minimal back-end server requirements, only requiring HTTP requests.

• Utilize the end-user's GPU for full rendering. No Cloud GPU is necessary at any step.

Polygon Streaming supports the following formats:

• .GLB

• .glTF (zipped)

PlayCanvas Engine Plugins

Polygon Streaming models can be added to PlayCanvas projects with the use of our PlayCanvas plugins. These plugins will help to stream high polygon models from the cloud into your projects and build for the web. The table below breaks down the plugins and their usage.

To start using the plugin, there are two Prefabs that can be found in the Plugin's folder which will be all you need to stream your models inside Unity Engine. The Stream Controller, and the Streaming Model.

You can drag and drop both prefabs inside your Unity Scene and be ready to start streaming your converted 3D model inside the engine.

The Stream Controller should only be added once, and it controls the streaming feeds inside your scene, you only need to set the Main Camera in the Camera field. The Streaming Model is a prefab to be used with all models that will be streaming from the cloud into your project, you only need to add the URL of your converted model into the URL field.

Once that's set, press play and your streaming models will already start streaming inside your project!

Polygon Streaming models can be added to JavaScript projects with the use of our JavaScript SDKs. These plugins will help to stream high polygon models from the cloud into your projects and build for the web.

To start using the plugin, there are two main classes (Actors) that can be found in the Plugin's folder, or in the Classes menu, which will be all you need to stream your models inside Unreal Engine. The Stream Controller, and the Streaming Model.

You can drag and drop both Actors inside your Unreal Scene, and be ready to start streaming your converted 3D model inside the engine.

The Stream Controller should only be added once, and it controls the streaming feeds inside your scene. The Streaming Model is an Actor to be used with all models that will be streaming from the cloud into your project, you only need to add the URL of your converted model into the URL field to start streaming. You can add as many Streaming Models as you want inside your scene.

Once that's set, press play and your streaming models will already start streaming inside your project!

PlayCanvas Direct HTML Plugin

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>

// 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);

Streamable Model Component

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.

In this guide you will find information on how to prepare your 3D models to achieve the best outcomes when converting to Polygon Streaming solutions and streaming your models within the supported platforms and devices.

PBR Standard for Material and Textures

Physically based rendering (PBR) has recently become the standard in many 3D applications, such as Unity, Unreal, 3D Studio Max and 3D Web platforms. Polygon Streaming is also fully based on this standard, for a more performant and realistic material and textures representations.

This approach differs from older approaches in that instead of using approximations for the way in which light interacts with a surface, a physically correct model is used. The idea is that, instead of tweaking materials to look good under specific lighting, a material can be created that will react correctly under all lighting scenarios.

In case your models are created using legacy standards such as Lambert, Blinn-Phong or Specular-Roughness, they should be converted to a PBR Physically Based Rendering standard before conversion, in order to achieve a correct representation of the materials and textures from the original model.

Models using legacy or custom standards can be converted, however, it’s not possible to guarantee a correct representation of the materials and textures. Using custom standard or custom shader elements may also give failed conversion, since the system won’t be able to proper translate custom elements.

Polygon Streaming maintains the origin point, position, and scale of all 3D objects. When converting entire environments with multiple objects, each object will automatically be positioned at its origin point. You need to make sure you have your objects placed at the correct origin point. If a model is far from the 0,0,0 origin point it will be incorrect for visualization needs, and the wrong origin point will still be translated after conversion. The same goes for the general scale of the model, the scale set for the model will be translated after conversion. Polygon Streaming follows meter units by default, the same as Blender, Unity or Unreal Engine. If the model scale is following another unit system or is set very small on the original model, The model will appear very small after conversion.

Make sure to have your model’s faces facing the correct orientation. In case a face is being oriented in the wrong direction (also known as flipped normals), it will appear transparent depending on the user view-point direction. Face orientation is a design choice and therefore subjective, not possible for an automated system to know which face should be oriented at which direction. The system will follow the original model’s orientation and direction. In case it’s facing the wrong direction on the original model, it will also face wrong after conversion.

Z-Fighting is a common issue in real-time rendering, it happens when two meshes are overlapping each other, and the GPU is unable to understand which one to render first. It’s very common to happen when displaying NURBS based models, like CAD or BIM models, in a real-time rendering scenario. In order to have a proper real-time display of your streaming model, make sure to avoid z-fighting by avoiding creating overlapping meshes.

Sometimes a 3D model may have data that is being hidden or enclosed by another object, which will never be seen by the final user. Although there is no issue in converting the model with hidden data, and the hidden data won’t be render, since our player plugins make use of Occlusion Culling. It’s a good practice to remove any data that will be hidden, in order to make the overall model smaller, more concise, faster to convert, and overall lighter to stream.

It’s a good practice to maintain a proper mesh topology. There is no issue in converting a model with a bad mesh topology. However, any 3D visualization issues that comes from a bad mesh topology, will be translated for the streaming model as well. Therefore, in order to obtain the best looking model, with faster and lighter stream. A concise, sensible and well done mesh topology will always give much better results than a bad mesh topology, that may contain weird looking patches, holes, weird looking triangles and faces. The best the 3D model is modeled and maintain a sensible mesh topology, the best it will be streamed.

PlayCanvas Standalone Plugin

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.

The Stream Controller manages the streaming of models and streaming parameters inside your project. There must be only one Stream Controller per scene, since it will control all Streaming Models as one.

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.

In case you use too low Triangle Budget, for example 500 thousand to stream 10 million polygons, you may reach the budget before it's possible to showcase the higher quality of the model. Resulting in only showing a lower quality version of the model in order to stay within the budget.

The Distance Factor is a factor between the distance of the camera to the object being streamed. The default value of 1.1 has a neutral preference. A higher value, such as 3 or 5, will have a preference for nearby objects over objects further away. These parameters can be changed at runtime to find the sweet spot for your scene.

The Streaming Model prefab represents the model to be streamed inside your project. A Streaming Model component always needs a reference to the Stream Controller component to function and a Source URL which is the URL of your converted model. Once those two are correctly set, your model will start streaming inside your project as soon as you press Play.

The Stream Controller is a reference to the Stream Controller inside your scene and needs to be set, and the Source URL is the URL of your converted model that needs to be pasted in the field.

In case your project is using Light Probes, you can tick the Light Probe Usage box. In case you would like to use a custom material in your streaming model, you can tick the Custom Material box, which will open a new panel that will allow you to change the material.

Unreal Engine Plugin

Polygon Streaming models can be added to Unreal Engine based projects with the use of the Unreal Engine Plugin. This will allow the streaming of models with multiple millions of polygons to stream from the cloud into your Windows-based projects and applications.

Change Log

When working with high-fidelity 3D content using Polygon Streaming, it's essential to differentiate between Preview Mode and Play Mode (also known as Runtime, Live Mode, or Launch Mode depending on the game engine). For simplicity, we will use "Play Mode" as a shared term throughout this article, although each engine may refer to it differently. Understanding these modes is crucial to ensure that developers are testing their models under realistic conditions. Below, we'll explore what to expect when using Polygon Streaming in PlayCanvas, Unity, and Unreal Engine, and provide clear instructions on how to test models effectively in each environment.

What Are Preview Mode and Play Mode?

• Preview Mode: This mode provides a quick visualization within the editor, allowing developers to see a basic representation of their models and adjust placements in the scene. It offers a rough approximation and may show visual artifacts. This mode does not fully utilize Polygon Streaming capabilities and should not be used for assessing the final quality or behavior of the models.

• Play Mode: Known by different names such as Runtime or Launch Mode in various engines, Play Mode simulates real-world conditions by running the application as it would be experienced by end-users. Polygon Streaming is fully active in Play Mode, ensuring high-quality rendering and optimal performance. Testing in Play Mode is essential for final model evaluation.

In PlayCanvas, models utilizing Polygon Streaming are treated differently between modes:

• Preview Mode: In PlayCanvas, Polygon Streaming models are not visible in Preview Mode. This mode only shows basic placeholders, making it unsuitable for evaluating the model’s quality or performance. Developers can use this mode for simple adjustments and placements, but it doesn't reflect the actual capabilities of Polygon Streaming.

• Play Mode: Known as "Launch Mode" in PlayCanvas, this mode is activated by clicking the "Launch" button. Play Mode is where Polygon Streaming becomes fully operational, streaming the model from the cloud and rendering it in high fidelity. Testing models in Play Mode is crucial for an accurate assessment of both performance and quality.

In Unity, the terminology and functionality align with industry standards, using Edit Mode and Play Mode:

• Edit Mode: Similar to Preview Mode, Edit Mode allows developers to place and adjust models within the Unity editor. While models can be viewed in this mode, the representation might include artifacts, and streaming optimizations are not fully applied. Edit Mode should not be relied upon for evaluating final model quality or performance.

• Play Mode: Activated by pressing the "Play" button in the Unity interface, this mode initiates the full capabilities of Polygon Streaming. The models are streamed in real-time from the cloud, showcasing their high-quality rendering and optimized performance. Play Mode is essential for realistic testing and accurate visualization.

Unreal Engine follows a similar structure, with Editor Mode and Play Mode being key concepts:

• Editor Mode: Referred to as Preview Mode in other contexts, this mode in Unreal Engine allows for basic visualization and placement of models. However, it does not utilize the full power of Polygon Streaming, and visual artifacts may be present. Editor Mode is useful for setup but not for final evaluation.

• Play Mode: By clicking the "Play" button in Unreal Engine, developers activate Play Mode, where the game is simulated under real-world conditions. Polygon Streaming is fully engaged, streaming high-quality models from the cloud and ensuring that the performance and appearance meet expectations. Play Mode is crucial for validating the final output.

Apart from the in-editor modes like Preview and Play Modes, it's also important to understand how the "Model Preview" feature works within the console. When you upload a model to the Polygon Streaming platform, you can access a "Model Preview" option. This preview opens in a new browser window and provides a basic visualization of your model, giving you a quick way to see the model's appearance and structure.

However, like Preview Mode in development environments, the "Model Preview" is not indicative of the final streamed quality. It serves more as a preliminary check for the model's appearance rather than a comprehensive evaluation of its streaming performance or interactive capabilities. Developers should always perform thorough testing using Play Mode in their chosen game engine to fully understand how their models will behave in a real-world application.

The Stream Controller manages the streaming of models and streaming parameters inside your project. There must be only one Stream Controller per scene, since it will control all Streaming Models as one.

The Stream Controller needs to have a reference to a Camera object which will based the distance between viewer and object. It also contains several parameters and features to assist with the best streaming quality and control.

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.

In case you use too low Triangle Budget, for example 500 thousand to stream 10 million polygons, you may reach the budget before it's possible to showcase the higher quality of the model. Resulting in only showing a lower quality version of the model in order to stay within the budget.

The Streaming Model Actor represents the model to be streamed inside your project. A Streaming Model component always needs a reference to the Stream Controller component to function and a Source URL which is the Asset ID URL of your converted model. Once those two are correctly set, your model will start streaming inside your project as soon as you press Play.

The URL field is the Asset ID address of your streaming model, once the Asset ID is pasted in this field, the model can be streamed inside your scene.

You can also set different Quality Priority options by clicking at Streaming Runtime Options Settings. This means that some models can have higher priority of streaming than others, it can use only integer numbers and it works in the following logic:

Current version: 3.1.2

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.

This is a guide to use Polygon Streaming web player for PlayCanvas using the NPM package.

You can download a sample project to get started .

To run the sample project you first need to make sure you have installed. Then run the following in a terminal:

This will open a browser window and display the 3D model.

You first need to import registerComponents function from the package:

And run it:

Next, you need to create an entity with a camera component:

If using these components in code the attribute name would be a camel case version of the attributes below unless specified in brackets.

Stream Controller

Polygon Streaming models can be added to Unity Engine based projects with the use of our Unity Plugin, being able to stream multi-million polygon models streaming from the cloud into your projects and build for desktop, mobile and VR headsets.

This is a guide to use Polygon Streaming web player for Three.js using the NPM package.

Getting Started - Sample Project

You can download a sample project to get started here.

To run the example you first need to make sure you have Node.js installed. Then run the following in a terminal:

npm install
npm run dev

It will open a browser window and display the 3D model.

Code Explanation and Usage

Import the StreamController from the package:

import { StreamController } from '@polygon-streaming/web-player-threejs';

Instantiate the stream controller:

const streamController = new StreamController(camera, renderer, scene, controls.target, {
  cameraType: 'nonPlayer',
  triangleBudget: 5000000,
  mobileTriangleBudget: 3000000
});

Add a streaming model, passing it a model URL and a Group to act as a model parent:

const modelParent = new THREE.Group();
modelParent.position.set(0, 1, 0);
scene.add(modelParent);
streamController.addModel('https://stream.viverse.com/demos/jet-engine-11m/', modelParent, {
  qualityPriority: 1
});

Call the stream controller's update method in the animation loop:

Now you have everything setup to start streaming your 3D models inside your Three.js application.

Polygon Streaming expects the service worker that is used to cache model data to be available at the web root e.g. /service-worker.js. Models use KTX2 textures so you will need to make the basis transcoder files available at the web root e.g. /lib/basis_transcoder.js and /lib/basis_transcoder.wasm. Both of these requirements are handled in Vite's config file - vite.config.js.

• Upload your 3D model to the online console:

• To get the model URL go to the models section of the console: and click on the three dots next to your model and select "Copy asset ID".

• Paste this URL as the first parameter of streamController.addModel() method.

All options are optional.

All options are optional.