# Option 3: HTML Scripting

***

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

{% stepper %}
{% step %}

#### Installation

<pre class="language-html"><code class="lang-html"><strong>// add Polygon Streaming SDK to your HTML with the correct version number
</strong><strong>
</strong><strong>&#x3C;script src="https://stream-stage.viverse.com/assets/streamablemodel/{LATEST_STABLE_VERSION}/PolygonStreaming.js">&#x3C;/script>
</strong></code></pre>

{% endstep %}

{% step %}

#### 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()

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

{% endstep %}

{% step %}

#### Define an Entity

After then you need to define a new Entity, add it to the root and define the attributes ([described here](https://docs.viverse.com/polygon-streaming/integrations-and-plugins/polygon-streaming-playcanvas-sdk/plugin-usage/component-attributes)). 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.

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

{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.viverse.com/polygon-streaming/integrations-and-plugins/polygon-streaming-playcanvas-sdk/plugin-usage/option-3-html-scripting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.