redcube icon indicating copy to clipboard operation
redcube copied to clipboard

JS renderer based on GLTF to WebGPU or WebGL backends.


redcube
RedCube

The GLTF viewer with WebGL2 and WebGPU backends.


npm downloads typescript last commit size eslint


The javascript rendering library for Khronos glTF 2.0 format.

Features

• glTF 2.0 Specification

• KHR_draco_mesh_compression

• KHR_lights_punctual

KHR_lights_punctual

• KHR_materials_clearcoat

KHR_materials_clearcoat

• KHR_materials_pbrSpecularGlossiness

• KHR_materials_sheen

• KHR_materials_transmission

KHR_materials_transmission

• KHR_materials_volume

KHR_materials_volume

• KHR_materials_emissive_strength

• KHR_materials_iridescence

KHR_materials_iridescence

• KHR_materials_unlit

• KHR_materials_variants

KHR_materials_variants

• KHR_mesh_quantization

• KHR_texture_basisu

• KHR_texture_transform

• EXT_lights_image_based

EXT_lights_image_based

• KHR_materials_ior

KHR_materials_ior

Check list

Platforms

• Browsers with WebGL 2.0 support

• Browsers with WebGPU support (Chrome Canary with --enable-unsafe-webgpu flag)

• Node.js renderless

How to convert 3D model to gltf

• Blender 2.80 File -> Export -> glTF 2.0

Sketchfab 100,000+ models

Usage

<canvas style="width: 600px; height: 600px;"></canvas>

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

Install

npm install redcube.js