WebGL API
NovoRender.API
A NovoRender API instance.
Properties​
animate​
• animate: FrameRequestCallback
Callback that is called on each frame just before rendering.
Remarks
Using this callback instead of in your own requestAnimationFrame() callback is recommended to ensure your updates are applied consistently and are properly synchronized. If you have disabled automatic rendering by setting run = false, this callback is not called unless you manually call update.
deviceProfile​
• deviceProfile: DeviceProfile
Performance profile for current device.
run​
• run: boolean
Enable or disable automatic rendering.
Remarks
This value is set to true by default when a new API is created. When true, the api will use requestAnimationFrame() callback to automatically update all active views and controllers. Setting it to false will have the effect of pausing all rendering and camera motion. You may still call update to manually render all views frame and update camera motion controllers.
version​
• Readonly version: string
API version string, expressed using semantic versioning https://semver.org/.
Methods​
availableEnvironments​
â–¸ availableEnvironments(indexUrl?): Promise<readonly EnvironmentDescription[]>
Retrieve list of available background/IBL environments.
Parameters​
| Name | Type | Description |
|---|---|---|
indexUrl? | string | The absolute or relative url of the index.json file. Relative url will be relative to the novorender api script url. If undefined, "/assets/env/index.json" will be used by default. |
Returns​
Promise<readonly EnvironmentDescription[]>
The controller object
â–¸ availableEnvironments(indexUrl?): Promise<readonly EnvironmentDescription[]>
Retrieve list of available background/IBL environments.
Parameters​
| Name | Type | Description |
|---|---|---|
indexUrl? | string | The absolute or relative url of the index.json file. Relative url will be relative to the novorender api script url. If undefined, "/assets/env/index.json" will be used by default. |
Returns​
Promise<readonly EnvironmentDescription[]>
The controller object
createCameraController​
â–¸ createCameraController(params): CameraController
Create a camera motion controller.
Parameters​
| Name | Type | Description |
|---|---|---|
params | StaticControllerParams | The controller parameters. |
Returns​
The controller object
â–¸ createCameraController(params): CameraController
Create a camera motion controller.
Parameters​
| Name | Type | Description |
|---|---|---|
params | TurntableControllerParams | The controller parameters. |
Returns​
The controller object
â–¸ createCameraController(params, domElement): CameraController
Create a camera motion controller.
Parameters​
| Name | Type | Description |
|---|---|---|
params | OrbitControllerParams | The controller parameters. |
domElement | HTMLElement | The HTML DOM element to listen for mouse/touch events. This can only be set when the controller is created. |
Returns​
The controller object
â–¸ createCameraController(params, domElement): CameraController
Create a camera motion controller.
Parameters​
| Name | Type | Description |
|---|---|---|
params | FlightControllerParams | The controller parameters. |
domElement | HTMLElement | The HTML DOM element to listen for mouse/touch events. This can only be set when the controller is created. |
Returns​
The controller object
â–¸ createCameraController(params, domElement): CameraController
Create a camera motion controller.
Parameters​
| Name | Type | Description |
|---|---|---|
params | OrthoControllerParams | The controller parameters. |
domElement | HTMLElement | The HTML DOM element to listen for mouse/touch events. This can only be set when the controller is created. |
Returns​
The controller object
â–¸ createCameraController(params): CameraController
Create a camera motion controller.
Parameters​
| Name | Type | Description |
|---|---|---|
params | StaticControllerParams | The controller parameters. |
Returns​
The controller object
â–¸ createCameraController(params): CameraController
Create a camera motion controller.
Parameters​
| Name | Type | Description |
|---|---|---|
params | TurntableControllerParams | The controller parameters. |
Returns​
The controller object
â–¸ createCameraController(params, domElement): CameraController
Create a camera motion controller.
Parameters​
| Name | Type | Description |
|---|---|---|
params | OrbitControllerParams | The controller parameters. |
domElement | HTMLElement | The HTML DOM element to listen for mouse/touch events. This can only be set when the controller is created. |
Returns​
The controller object
â–¸ createCameraController(params, domElement): CameraController
Create a camera motion controller.
Parameters​
| Name | Type | Description |
|---|---|---|
params | FlightControllerParams | The controller parameters. |
domElement | HTMLElement | The HTML DOM element to listen for mouse/touch events. This can only be set when the controller is created. |
Returns​
The controller object
â–¸ createCameraController(params, domElement): CameraController
Create a camera motion controller.
Parameters​
| Name | Type | Description |
|---|---|---|
params | OrthoControllerParams | The controller parameters. |
domElement | HTMLElement | The HTML DOM element to listen for mouse/touch events. This can only be set when the controller is created. |
Returns​
The controller object
createHighlight​
â–¸ createHighlight(params): Highlight
Create an object highlight
Parameters​
| Name | Type | Description |
|---|---|---|
params | NeutralHighlightParams | Highlight parameters. |
Returns​
A highlight object that can be used in objectHighlights.
â–¸ createHighlight(params): Highlight
Create an object highlight
Parameters​
| Name | Type | Description |
|---|---|---|
params | TransparentHighlightParams | Highlight parameters. |
Returns​
A highlight object that can be used in objectHighlights.
â–¸ createHighlight(params): Highlight
Create an object highlight
Parameters​
| Name | Type | Description |
|---|---|---|
params | ColorHighlightParams | Highlight parameters. |
Returns​
A highlight object that can be used in objectHighlights.
â–¸ createHighlight(params): Highlight
Create an object highlight
Parameters​
| Name | Type | Description |
|---|---|---|
params | RGBATransformHighlightParams | Highlight parameters. |
Returns​
A highlight object that can be used in objectHighlights.
â–¸ createHighlight(params): Highlight
Create an object highlight
Parameters​
| Name | Type | Description |
|---|---|---|
params | HSLATransformHighlightParams | Highlight parameters. |
Returns​
A highlight object that can be used in objectHighlights.
â–¸ createHighlight(params): Highlight
Create an object highlight
Parameters​
| Name | Type | Description |
|---|---|---|
params | NeutralHighlightParams | Highlight parameters. |
Returns​
A highlight object that can be used in objectHighlights.
â–¸ createHighlight(params): Highlight
Create an object highlight
Parameters​
| Name | Type | Description |
|---|---|---|
params | TransparentHighlightParams | Highlight parameters. |
Returns​
A highlight object that can be used in objectHighlights.
â–¸ createHighlight(params): Highlight
Create an object highlight
Parameters​
| Name | Type | Description |
|---|---|---|
params | ColorHighlightParams | Highlight parameters. |
Returns​
A highlight object that can be used in objectHighlights.
â–¸ createHighlight(params): Highlight
Create an object highlight
Parameters​
| Name | Type | Description |
|---|---|---|
params | RGBATransformHighlightParams | Highlight parameters. |
Returns​
A highlight object that can be used in objectHighlights.
â–¸ createHighlight(params): Highlight
Create an object highlight
Parameters​
| Name | Type | Description |
|---|---|---|
params | HSLATransformHighlightParams | Highlight parameters. |
Returns​
A highlight object that can be used in objectHighlights.
createView​
â–¸ createView(settings?, htmlRenderCanvas?): Promise<View>
Create a 3D View.
Parameters​
| Name | Type | Description |
|---|---|---|
settings? | Partial<Readonly<RenderSettings>> | Initial RenderSettingParams settings to use for view. |
htmlRenderCanvas? | HTMLCanvasElement | - |
Returns​
Promise<View>
A promise of a newly created View.
Remarks
It is recommend that you specify the initial display pixel width and height here to avoid unnecessary reallocation of render buffers.
â–¸ createView(settings?, htmlRenderCanvas?): Promise<View>
Create a 3D View.
Parameters​
| Name | Type | Description |
|---|---|---|
settings? | Partial<Readonly<RenderSettings>> | Initial RenderSettingParams settings to use for view. |
htmlRenderCanvas? | HTMLCanvasElement | Canvas to render to. If none is specified, an OffscreenCanvas is used instead. Beware that not all browsers support OffscreenCanvas yet. |
Returns​
Promise<View>
A promise of a newly created View.
Remarks
It is recommend that you specify the initial display pixel width and height here to avoid unnecessary reallocation of render buffers.
dispose​
â–¸ dispose(): void
Stop all rendering and release all resources.
Returns​
void
Remarks
Calling this function will effectively destroy this instance of the API and any associated scenes and views etc. This function allows you to explicitly release the associated GPU resources and memory caches used by the API without waiting for the garbage collector to do so.
â–¸ dispose(): void
Stop all rendering and release all resources.
Returns​
void
Remarks
Calling this function will effectively destroy this instance of the API and any associated scenes and views etc. This function allows you to explicitly release the associated GPU resources and memory caches used by the API without waiting for the garbage collector to do so.
loadAsset​
â–¸ loadAsset(url): Promise<DynamicAsset>
Load the specificed asset into memory.
Parameters​
| Name | Type | Description |
|---|---|---|
url | URL | The asset url. |
Returns​
Promise<DynamicAsset>
A promise of the loaded DynamicAsset.
Remarks
Assets must be passed to createDynamicObject to be rendered. Currently, this must be a glTF file (.gltf | .glb). Cross domain urls requires CORS headers to be set appropriately.
â–¸ loadAsset(url): Promise<DynamicAsset>
Load the specificed asset into memory.
Parameters​
| Name | Type | Description |
|---|---|---|
url | URL | The asset url. |
Returns​
Promise<DynamicAsset>
A promise of the loaded DynamicAsset.
Remarks
Assets must be passed to createDynamicObject to be rendered. Currently, this must be a glTF file (.gltf | .glb). Cross domain urls requires CORS headers to be set appropriately.
loadEnvironment​
â–¸ loadEnvironment(environment): Promise<Environment>
Load the specificed environment into memory.
Parameters​
| Name | Type |
|---|---|
environment | EnvironmentDescription |
Returns​
Promise<Environment>
A promise of the loaded Environment.
â–¸ loadEnvironment(environment): Promise<Environment>
Load the specificed environment into memory.
Parameters​
| Name | Type |
|---|---|
environment | EnvironmentDescription |
Returns​
Promise<Environment>
A promise of the loaded Environment.
loadScene​
â–¸ loadScene(id, db?): Promise<Scene>
Load the specificed scene into memory.
Parameters​
| Name | Type |
|---|---|
id | string | URL |
db? | ObjectDB |
Returns​
Promise<Scene>
A promise of the loaded Scene.
Remarks
The loaded scene will not include all 3D or object data immediately as these are automatically downloaded on demand.
â–¸ loadScene(id, db?): Promise<Scene>
Load the specificed scene into memory.
Parameters​
| Name | Type |
|---|---|
id | string | URL |
db? | ObjectDB |
Returns​
Promise<Scene>
A promise of the loaded Scene.
Remarks
The loaded scene will not include all 3D or object data immediately as these are automatically downloaded on demand.
update​
â–¸ update(): Promise<void>
Manually update all views and camera controllers.
Returns​
Promise<void>
Remarks
If you have disabled automatic rendering by setting run = false, you can call this function to manually update instead. This may be useful if you are using requestAnimationFrame yourself and want to have full control over the order by which state gets updated. The returned promise will resolve at the next animation frame, typically 1/60 of a second, which can be useful if you intend to run a realtime update loop.
â–¸ update(): Promise<void>
Manually update all views and camera controllers.
Returns​
Promise<void>
Remarks
If you have disabled automatic rendering by setting run = false, you can call this function to manually update instead. This may be useful if you are using requestAnimationFrame yourself and want to have full control over the order by which state gets updated. The returned promise will resolve at the next animation frame, typically 1/60 of a second, which can be useful if you intend to run a realtime update loop.