reon90 / redcube Goto Github PK

I have tried to display the RiggedSimple model on the RedCube.js online demo page.
However, the shade seem to be displayed unnaturally when the light mode is set to PBR.

https://reon90.github.io/redcube/

Light mode	image
pbr
phong

I tried to display NormalTangentTest.gltf in RedCube.js. However, it seems to be different from the expected result.

RedCube.js + NormalTangentTest.gltf result:

Expected result:
https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/NormalTangentTest

Models:
AnimatedCube
AnimatedBox

I am currently creating a sample that displays glTF files in RedCube.js.
https://github.com/cx20/gltf-test/tree/master/examples/redcube

However, I can not solve the phenomenon that half of the screen becomes gray.
RedCube.js + FlightHelmet.gltf result:

I think that usage is probably wrong. It will be helpful to get advice.

const renderer = new redcube.RedCube(
    url,
    canvas,
    ['light'],
    '../../../../textures/hdr/pisa'
);

I tried Khronos' new test model TextureEncodingTest.gltf with RedCube.js.
However, it seems to be different from the expected result.

Test model:
https://github.com/KhronosGroup/glTF-Sample-Models/tree/encoding/2.0/TextureEncodingTest

Expected result:

Current result:

I tried to display Itokawa.glb with RedCube.js v2.0.7.
However, it was not displayed. Itokawa.glb is a model of asteroids compressed in Draco format.

RedCube.js + Itokawa.glb result:

GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 6

Three.js + Itokawa.glb result:

I tried displaying the new SimpleSkin model in RedCube.js.
However, an error occurs and is not displayed.

RedCube.js v2.2.0 + SimpleSkin result:

redcube.js:8 
Uncaught (in promise) TypeError: Cannot read property 'baseColorFactor' of undefined

Probably due to the lack of pbrMetallicRoughness in this model's material, but this is not a required item.

  "materials" : [ {
    "doubleSided" : true
  } ],

I tried to display MetalRoughSpheres.gltf in RedCube.js.
However, it seems that the sphere behind is not displayed.
It is probably because RedCube.js uses Orthographic Camera instead of Perspective Camera.

RedCube.js + MetalRoughSpheres.gltf result:

Three.js + MetalRoughSpheres.gltf result:

Can I use Perspective Camera with RedCube.js?

I tried to display VoxelCorgi.gltf with RedCube.js v2.0.5.
However, it was not displayed.
RedCube.js + Voxelcorgi.gltf result:

[.WebGL-000001C702EE5CF0]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 6

The following is the display result in other libraries.
Three.js + Voxelcorgi.gltf result:

I tried to display the bear's model that was in sketchfab in RedCube.js.
https://sketchfab.com/models/f2f13a8630004b1c82730d8b9ffa0e1f

However, Bear's model is not displayed in the correct orientation

RedCube.js + Bear model result:

Three.js + Bear model result:

I would like to add RedCube.js to webgl-test and webgpu-test.
webgl-test is a repository for testing the basic usage of the WebGL/WebGL2 library, and webgpu-test is a repository for testing the WebGPU library.

However, I have not been able to find a way to create a mesh from code using RedCube.js.
It would be great if you could provide some sample code if you can.

I tried to view CesiumMan with RedCube.js v.2.5.3.
However, the mesh of the model seems to be distorted for a moment.

RedCube.js + CesiumMan.gltf result:

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
RedCube

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.

I tried to display TransmissionTest.gltf in RedCube.js.
However, when the light is only IBL, it seems to appear darker than expected.

IBL	lights	RedCube.js + TransmissionTest.gltf result
on	off
on	on

Is this the expected result?

I tried to display AlphaBlendModeTest.gltf in RedCube.js.

However, Opaque of AlphaBlendModeTest.gltf has not passed.
RedCube.js + AlphaBlendModeTest.gltf result:

Three.js + AlphaBlendModeTest.gltf resutl:

I tried to display EnvironmentTest.gltf on RedCube. However, it seems to be different from the expected result.

Expected result:

Current result:

I tried to display SheenChair.gltf in RedCube.
However, in some cases, when I re-select the Variants, a strange pattern appears.

Excepted result:

Current result:

I have tried some models of the KHR_mesh_quantization extension with the latest version of RedCube.js.
However, it doesn't seem to display as expected.

RedCube.js v2.2.0 + AnimatedMorphCube/glTF result:

RedCube.js v2.2.0 + AnimatedMorphCube/glTF-Quantized result:

Other major WebGL libraries support CubeMap (Skybox) display.
I think it will look better if RedCube can also display CubeMap.

I tried the model of a teacup in the following repository with RedCube.
However, I think that RedCube does not correctly reflect the normal scale of the teacup.

https://ft-lab.github.io/gltf.html

https://ft-lab.github.io/gltf/yunomi/Yunomi_normal_20.glb

Click the image below to go to the sample URL.

library	normal 0.5	normal 1.0	normal 2.0
Three.js
Babylon.js
RedCube

I used RedCube to display ToyCar.gltf, which is a representative model of PBR Next Phase1.
However, when using only IBL, the results of the KHR_materials_sheen extension seem to be different than expected.

IBL	Lights	Babylon.js + ToyCar.gltf result:	RedCube.js + ToyCar.gltf result:
off	off
off	on
on	off
on	on

I tried to display SheenCloth.gltf in RedCube. However, it seems to display a strange pattern.

library	result
Expected result
RedCube v2.5.12
RedCube v2.5.13

I tried to view SpecGlossVsMetalRough.gltf in RedCube.js.
However, when using only IBL for the light, the display result seems to be different from what I expected.

Expected result:

Current result:

IBL	Lights	RedCube + SpecGlossVsMetalRough.gltf result
on	off
on	on

I tried to display GlamVelvetSofa.gltf in RedCube.
However, when I changed the Variant to Pale Pink it seems to be very different from what I expected.

Expected result:

Current result:

I tried RecursiveSkeletons.gltf, a test model proposed by Khronos.
However, it seems that nothing is displayed on RedCube.

Expected result:

Current result:
Nothing is displayed

Edit 2021.05.10
Since the link destination of Current result was localhost, it was corrected.

I tried RedCube.js with gltf-test.
https://cx20.github.io/gltf-test/

However, Triangle.gltf is not displayed.
https://cx20.github.io/gltf-test/examples/redcube/index.html?category=tutorialModels&model=Triangle&scale=1&type=glTF

Is it because the light is not set correctly?

I tried to view the test model below. However, it seems to be different from what was expected.
https://ft-lab.github.io/gltf/normal_map/normal_test_02.glb

Expected result:

Current result:

I tried to display the model of the KHR_texture_basisu extension in the latest version of RedCube.js.
However, I expected the results to be the same, but the results seem to be displayed differently.

glTF	BasisU

I tried to display TextureSettingsTest.gltf in RedCube.js.

However, double-sided of TextureSettingsTest.gltf does not pass.
RedCube.js + TextureSettingTest.gltf result:

Is this a problem when using PBR? The following is the display result when using your sample.

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)
SheenChair.gltf (large)
ToyCar.gltf (large)

I have tried switching ToyCar's built-in camera on the demo page. However, selecting the camera does not seem to switch correctly.
I tried switching the camera from "10" to "3" but the screen didn't change.

https://reon90.github.io/redcube/

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?

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
off	on
on	off
on	on

I tried to use gltf-test to display the Duck model in glTF-Embedded format.
However, it seems to fail to load the resource and cannot be displayed.

RedCube.js + Duck/glTF-Embedded result:

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

I tried to display the model of Rocks and trees at the following site in RedCube.js.
https://ft-lab.github.io/gltf.html
However, the following error occurred and nothing was displayed on the screen.

RedCube.js v2.0.8 + rocks_trees_ao.glb result:

GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 6

The following is the display result of other libraries.
Three.js + rocks_trees_ao.glb result: