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: 8 months 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 8 years ago)
- Default Branch: master
- Last Pushed: 2024-09-17T02:42:41.000Z (about 1 year ago)
- Last Synced: 2024-10-01T12:19:03.383Z (about 1 year ago)
- Topics: 3d-models, glsl, gltf, opengl-es, pbr, typescript, webgl, webgl2, webgpu
- Language: TypeScript
- Homepage:
- Size: 43.7 MB
- Stars: 100
- Watchers: 10
- Forks: 7
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-webgpu - RedCube - glTF viewer based on a WebGPU backend. (Libraries / Safari)
README
RedCube
The GLTF viewer with WebGL2 and WebGPU backends.
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
```