Kotlin/JS + Filament.js WASM

One Line 3D for the Web

The lightest way to add interactive 3D models to any website. One script tag. One function call. Powered by the same Filament engine as Android SceneView.

<!-- That's it. Two lines. --> <script src="https://cdn.jsdelivr.net/npm/sceneview-web@3.6.2/sceneview.js"></script> <script> SceneView.modelViewer("canvas", "model.glb") </script>

Live demo

The DamagedHelmet model rendered in real-time with Filament.js WASM. Drag to orbit. Scroll to zoom.

bolt Filament.js WASM

Powered by the same Filament engine used in Android SceneView

Why SceneView Web?

Production-quality rendering at a fraction of the bundle size. The same Filament engine that powers Android SceneView.

Feature SceneView Web Three.js model-viewer
Library size ~25 KB ~600 KB ~200 KB
Rendering engine Filament (WASM) Custom WebGL Three.js
PBR quality Production (matches Android) Good Good
Setup complexity 1 function call ~50 lines boilerplate 1 HTML tag
glTF / GLB Native Plugin (GLTFLoader) Native
Auto-rotate / orbit Built-in Manual (OrbitControls) Built-in
Programmatic API Full JS API Full JS API Limited (attributes)
WebXR AR/VR Planned Yes AR only

Features

bolt

Filament.js WASM

Production-quality PBR rendering via Google Filament compiled to WebAssembly. The same engine powering Android SceneView, now in the browser.

code

Kotlin/JS

Written in Kotlin, compiled to JavaScript. Share types, models, and logic with your Android codebase. Full npm distribution.

deployed_code

One function call

No boilerplate. Call SceneView.modelViewer() and get orbit camera, auto-rotation, IBL lighting, and glTF/GLB loading out of the box.

view_in_ar

WebXR ready

Built-in support for WebXR AR and VR sessions. Immersive 3D experiences directly in the browser with compatible devices.

speed

~25 KB lightweight

The sceneview.js wrapper is only ~25 KB. Filament WASM loads on demand. 24x smaller than Three.js for basic model viewing.

palette

PBR materials

Full physically-based rendering with image-based lighting, environment maps, metallic-roughness workflow, and tone-mapped HDR output.

Install

Pick whatever fits your stack.

CDN (fastest)
<script src="https://cdn.jsdelivr.net/npm/sceneview-web@3.6.2/sceneview.js"></script>
npm
npm install sceneview-web
ES Module import
import SceneView from "sceneview-web";
Script tag + init
<canvas id="viewer"></canvas> <script src="https://cdn.jsdelivr.net/npm/sceneview-web@3.6.2/sceneview.js"></script> <script> SceneView.modelViewer("viewer", "model.glb", { autoRotate: true }); </script>

API reference

A compact surface that covers model loading, primitives, lights, animation and AR.

SceneView.modelViewer
modelViewer(canvasOrId, modelUrl, options?)

All-in-one: creates a viewer, loads Filament.js from CDN, loads your glTF/GLB model, sets up orbit camera and auto-rotation. Returns a viewer instance.

SceneView.create
create(canvasOrId, options?)

Creates an empty viewer without loading a model. Call loadModel(url) later. Useful when the model URL is dynamic.

viewer.loadModel
loadModel(url) → Promise

Loads a glTF or GLB model from any URL. Replaces the current model. Returns a promise that resolves when the model is ready.

viewer.setAutoRotate
setAutoRotate(enabled)

Enables or disables automatic Y-axis rotation. Pauses on user interaction, resumes after idle.

viewer.setCameraDistance
setCameraDistance(distance)

Sets the orbit camera distance from the model center. Useful for controlling the initial zoom level.

viewer.loadEnvironment
loadEnvironment(ktxUrl, intensity?) → Promise

Loads a KTX IBL environment for physically-based lighting and reflections. Works with any KTX2 cubemap exported from cmgen or a baked HDR.

viewer.addLight
addLight({type, color, intensity, direction, position, falloff})

Adds a directional, point, or spot light to the scene. Returns an entity handle you can pass to removeLight().

viewer.clearLights
clearLights() → viewer

Removes every light from the scene, including the default 3-point studio rig. Use this when you want a fully custom lighting setup.

viewer.createBox / Sphere / Cylinder
createBox(center, [w,h,d], [r,g,b,a])

Procedural primitives built as inline glTF — no external model file needed. Perfect for quick prototypes, physics placeholders, or ground planes.

viewer.playAnimation
playAnimation(index=0, loop=true)

Plays a glTF keyframe animation with full skinning and morph-target support. Use stopAnimation() to return to the rest pose.

viewer.setBloom
setBloom(true | false | {strength, resolution, threshold})

Toggles the bloom post-processing effect for cinematic highlights on emissive materials. Fine-tune strength and threshold for dramatic looks.

viewer.createText / Image / Video
createText({text, fontSize, color, position, billboard})

In-scene HUD elements: rich text billboards, 2D images, and looping videos rendered as world-space quads.

viewer.clearScene
clearScene() → viewer

Removes all loaded models, primitives, and media nodes from the scene. Lights, IBL, and camera are preserved.

viewer.dispose
dispose()

Cleans up all GPU resources, removes event listeners, and stops the render loop. Call when removing the viewer.

Browser compatibility

SceneView Web requires WebGL2 and WebAssembly support.

public
Chrome
Fully supported
public
Firefox
Fully supported
public
Edge
Fully supported
public
Safari
WebGL2 (15.2+)
Powered by bolt Filament.js WASM — the same engine behind Android SceneView