Option 3: HTML Scripting

This document provides a guide for using HTML Scripting to integrate Polygon Streaming into a PlayCanvas project that does not target publication to VIVERSE.

---

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.

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