Reon90 / redcube

JS renderer based on GLTF to WebGPU or WebGL backends.

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_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 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