https://github.com/reon90/redcube

JS renderer based on GLTF to WebGPU or WebGL backends.
https://github.com/reon90/redcube

3d-models glsl gltf opengl-es pbr typescript webgl webgl2 webgpu

Last synced: about 7 hours ago
JSON representation

JS renderer based on GLTF to WebGPU or WebGL backends.

• Host: GitHub
• URL: https://github.com/reon90/redcube
• Owner: Reon90
• License: mit
• Created: 2017-05-21T14:01:14.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-10-12T02:48:24.000Z (25 days ago)
• Last Synced: 2024-11-02T07:33:39.630Z (4 days ago)
• Topics: 3d-models, glsl, gltf, opengl-es, pbr, typescript, webgl, webgl2, webgpu
• Language: TypeScript
• Homepage:
• Size: 43.6 MB
• Stars: 101
• Watchers: 10
• Forks: 7
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  


  

  


  RedCube

  


  




The GLTF viewer with WebGL2 and WebGPU backends.





  

  

  

  

  





  


    WebGL2 demo

     | 

    WebGPU demo

  




The javascript rendering library for [Khronos glTF 2.0 format](https://github.com/KhronosGroup/glTF/tree/master/specification/2.0).

## 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](https://github.com/cx20/gltf-test)

## 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](https://sketchfab.com/models?features=downloadable&sort_by=-likeCount) 100,000+ models

## Usage

```js

const renderer = new RedCube('./box.gltf', canvas);

renderer.init(() => {

    console.log('loaded');

});

```

## Install

```

npm install redcube.js

```