Plugin Usage

This page guides you through the three options available for using VIVERSE Polygon Streaming with PlayCanvas: with the VIVERSE PlayCanvas Extension, as standalone, or with HTML scripting.

---

Plugin Usage with the VIVERSE Extension

1

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".

Adding an Empty component to the scene

2

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.

Add a PolygonStreaming component to the scene

3

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.

Previewing the object inside your scene

4

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.

Viverse scene settings

5

After you published your VIVERSE World scene, the Streaming Model will automatically start to stream inside the scene.

The Streaming Model inside the scene

Plugin Usage Standalone

1

Once you have the Polygon Streaming main script imported to your project. Start by creating a new empty entity into your scene. Give it the name "StreamController" and add a Script component to the entity.

Selecting the Script component to the entity

2

Choose the StreamController script option and that will open all the options to control your streaming models inside your project. You can check detailed information on these parameters in the Stream Controller section of this guide.

streamController options

3

Create a new empty entity and this time give the name "Streamable Model". Add a new Script component to the entity and this time choose the "streamableModel" script option. This will create the component to stream your model inside the scene.

Creating a streamableModel script to attach to your entity

4

Paste the URL address of your streaming model into the "Path or url to model" field. Once you added the URL in the field, the object will already preview inside your scene. This is just a preview, once the scene is Launched or Published, the streaming model will start actively streaming from the cloud.

5

After you published your VIVERSE World scene, the Streaming Model will automatically start to stream inside your scene.

The Streaming Model inside the scene

Playcanvas Direct HTML Plugin

In this section, we're going to go through how to implement PlayCanvas Plugin directly in HTML.

1

Installation

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

2

Plugin Usage

The script in PlayCanvas should be added to your HTML file after initializing of pc.Application, but before you attach the script component to the Entity and run Application.start()

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

3

Define an Entity

After then you need to define a new Entity, add it to the root and define the parameters (described in PlayCanvas Editor Plugin Documentation | Polygon Streaming Settings )

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

}

});

// 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,

useMetalRoughness: true,

castShadows: true,

castLightmapShadows: true,

receiveShadows: true,

 doubleSidedMaterials: true,

initialTrianglePercent: 0.1

}

});

// add model to controller

streamController.addChild(streamableModel);

app.root.addChild(streamController);