RedCube

The GLTF viewer with WebGL2 and WebGPU backends.

WebGL2 demo | WebGPU demo

The javascript rendering library for Khronos glTF 2.0 format.

Features

• glTF 2.0 Specification

• KHR_draco_mesh_compression

• KHR_materials_dispersion

• KHR_materials_anisotropy

• KHR_materials_diffuse_transmission

• KHR_materials_diffuse_transmission + subsurface scatering

• KHR_lights_punctual

• KHR_materials_clearcoat

• KHR_materials_pbrSpecularGlossiness

• KHR_materials_sheen

• KHR_materials_transmission

• KHR_materials_volume

• KHR_materials_emissive_strength

• KHR_materials_iridescence

• KHR_materials_unlit

• KHR_materials_variants

• KHR_mesh_quantization

• KHR_texture_basisu

• KHR_texture_transform

• EXT_lights_image_based

• KHR_materials_ior

Check list

Platforms

• Browsers with WebGL 2.0 support

• Browsers with WebGPU support (Chrome 113 and above)

• Node.js renderless

How to convert 3D model to gltf

• Blender 2.80 File -> Export -> glTF 2.0

• Sketchfab 100,000+ models

Install

npm install redcube.js

Usage

Runnable versions of all three examples below live in examples/.

WebGL (browser)

<canvas id="canvas" style="width: 600px; height: 600px;"></canvas>
<script src="node_modules/redcube.js/dist/redcube.js"></script>
<script>
    const canvas = document.getElementById('canvas');
    const renderer = new redcube.RedCube('./box.gltf', canvas);
    renderer.init((scene) => {
        console.log('loaded', scene);
    });
</script>

WebGPU (browser, Chrome 113+)

<canvas id="canvas" style="width: 600px; height: 600px;"></canvas>
<script src="node_modules/redcube.js/dist/redcube.webgpu.js"></script>
<script>
    const canvas = document.getElementById('canvas');
    const renderer = new redcube.RedCube('./box.gltf', canvas, [], 'env.hdr');
    renderer.init((scene) => {
        console.log('loaded', scene);
    });
</script>

Node.js (headless, no canvas/GPU)

import redcube from 'redcube.js/node';

const renderer = new redcube.RedCube('./box.gltf');
renderer.init((scene) => {
    console.log('loaded', scene);
});

The WebGL and WebGPU bundles (dist/redcube.js / dist/redcube.webgpu.js) are plain <script> globals, not ES modules — load one or the other depending on which backend you want, they both expose the same redcube.RedCube global. The Node build (dist/redcube.node.cjs, importable via the redcube.js/node subpath) is a real CommonJS module for headless parsing/validation use cases. TypeScript consumers get full type declarations from all three (redcube.js, redcube.js/webgpu, redcube.js/node).

Known limitations

• One RedCube instance per page. The renderer currently keeps its WebGL/WebGPU context and related state in module-level variables rather than per-instance. Creating a second RedCube (e.g. a second canvas on the same page) will have its init() overwrite the first instance's rendering state, causing silent corruption rather than an error. This is a known architectural issue, not an intentional design choice — fixing it (moving to per-instance state) is on the roadmap.