In this section, we're going to go through how to implement PlayCanvas Plugin directly in HTML.
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>
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);
After then you need to define a new Entity, add it 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);