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