Git Product home page Git Product logo

redcube's Introduction


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_materials_dispersion

• KHR_materials_anisotropy

• KHR_materials_diffuse_transmission

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

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

redcube's People

Contributors

reon90 avatar tombyrer avatar w84v2rhsq4 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

redcube's Issues

Unnatural shadows in Sheen extension model

I have tested several Sheen extension models.
Babylon.js looks good, but RedCube.js seems to show unnatural shadows.

Model Babylon.js RedCube.js
SheenChair.gltf (small) image image
SheenChair.gltf (large) image image
ToyCar.gltf (large) image image

[Feature request] Is it possible to move dist to libs?

Currently, gltf-test has the following folder structure.
https://github.com/cx20/gltf-test/

/examples
    /redcube
        /index.html
        /dist
            /xxxxx.hdr
/libs
    /redcube
         /x.x.x
             /redcube.js

However, currently, the library that Redcube.js depends on externally does not seem to work unless it is placed in the dist folder under the examples folder.
Is it possible to move this under the libs folder?

Also, since it is difficult to understand what kind of function the file name composed of numerical values is, is it possible to have the name easy to understand?

project_polly.gltf is not displayed

Project "Polly" is a model created to introduce all the new features of glTF 2.0.
https://github.com/KhronosGroup/glTF-Blender-Exporter/tree/master/polly

However, RedCube.js does not seem to be able to display Polly yet.
RedCube.js + project_polly.gltf result:
http://jsdo.it/cx20/kivX

redcube.js:8 
Uncaught (in promise) TypeError: Cannot read property 'matrixWorld' of undefined
    at d.getJointMatrix (redcube.js:8)
    at d.setSkin (redcube.js:8)
    at Be.buildPrim (redcube.js:8)
    at Array.map (<anonymous>)
    at Be.buildNode (redcube.js:8)
    at Array.forEach (<anonymous>)
    at Be.buildNode (redcube.js:8)
    at json.scenes.(anonymous function).nodes.forEach.e (https://rawcdn.githack.com/cx20/gltf-test/a9cda755ff1c6656c5b3797b8747153e9e630947/libs/redcube/20181228/redcube.js:8:1727400)
    at Array.forEach (<anonymous>)
    at Be.buildMesh (redcube.js:8)

Below is the display result of Three.js and GLTFLoader.
Three.js + project_polly.gltf result:
http://jsdo.it/cx20/qugw
image

RedCube does not support EXT_lights_image_based

I tried to display the EnvironmentTest.gltf from the EXT_lights_image_based extension in RedCube.
However, the display result was different from Babylon.js. The main difference is whether CubeMap (Skybox) is applied or not.

model EnvironmentTest/glTF-IBL
Babylon.js image
RedCube image

Since the EXT_lights_image_based extension has IBL and Cubemap, it is expected that it will be applied when it is displayed.
The following CubeMap seems to be contained in this model.
image

ToyCarSpecular.gltf is different from expected result

I tried ToyCarSpecular.gltf, a draft model of Khronos. (The model has been renamed in the gltf-test repository to distinguish it from ToyCar.gltf.)
This model demonstrates the usage of KHR_materials_specular, KHR_materials_ior, KHR_materials_transmission and KHR_materials_clearcoat.
Please note that this model is different from this sample.

I noticed about two problems when compared with Babylon.js.

  • When only IBL is on, the flame emblem and car number are specularly reflected.
  • The part of the cloth looks like a metallic luster
IBL Lights Babylon.js + ToyCarSpecular.gltf result: RedCube.js + ToyCarSpecular.gltf result:
off off image image
off on image image
on off image image
on on image image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.