pissang / claygl Goto Github PK

Hi,

I'm trying to render pbr gltf2 model with hdri panorama and the scene seems to be overexposed compared with BabylonJS or PEX.

Code: https://github.com/vorg/pbr-compare and https://github.com/vorg/pbr-compare/blob/master/claygl/index.js

Live demo:
https://vorg.github.io/pbr-compare/index.html

I tried to display BoxTexturedNonPowerOfTwo.gltf with the latest ClayGL.
However, the texture does not seem to be displayed.

ClayGL + BoxTexturedNonPowerOfTwo.gltf result:

The correct display result is as follows.
ClayGL + BoxTextured.gltf result:

Recommend to add eslint config to avoid typos or unused varibles in the first place, like the one in PR #36

探讨：

目前standard.glsl中，TBN是在fragment shader中计算和应用的。

如果转为在vertex shader中计算TBN，并将所需的normal/light direction/eye direction等在vertex shader中提前转换为TBN坐标后再传递给fragment shader, 这样fragment shader中就不需要做TBN矩阵乘法，应该能提升一些性能。

只是我一点不成熟的想法，不知道是否可行：

• 如果有parallax occlusion或normal map时，在vertex shader中计算TBN，并将相关的uniform和TBN相乘，传递给fragment shader，例如light direction，view direction等
• 在fragment shader中计算时，直接应用vertex shader中提前计算好的TBN uniform

祝好

Looks like the ByteStride attribute was never finished for the bufferview output (line 1155), or was for some reason commented out? I cannot find where the stride is computed or recorded, so I guess this is still a todo. But this library, as nice as it is, will not work without the bytestride being output.

Technically i guess you don't need stride if you're creating a separate buffer view for each accessor type, but I don't see that happening either...looks like its just incomplete implementation of the GLTF spec...

有没有考虑给qtek增加CI tests?

测试的难点是如何测试结果判定(特别是需要比对绘制结果时), 我想可以如下进行:

• 每个案例都尽量简单, 保证运行结果不会有随机性
• 如果案例无需比对绘制结果, 用断言函数正常测试即可
• 如果案例需比对绘制结果, 可以预先给案例生成正确的基准fixture图片, 以后每次运行测试时, 都实时生成新的fixture图片并与基准fixture作比对

上述的fixture比对测试, 可以基于headless-gl来做. 测试过程类似于这个webgl测试框架jest-gl里的例子.

如果有了测试, 就能放心大胆的重构/增加新功能了.

如果有兴趣增加回归测试, 愿效犬马之劳~

为什么没有中文api呢 这么高大上的东东！我想学习，求带路。。

The applications createAmbientLight does some parsing and checking to create an AmbientLight.

This code can more less directly go into the AmbientLight constructor. As it checks for null this means no change to the api. Just easier to use the class.

If you want i can make the change

Hi,

On the KhronosGroup page it is mentioned that your converter also accepts OBJ and COLLADA files. However, when I use an OBJ as input file, the glTF or GLB output never contains the texture, see bunny.zip

This makes the converter unusable for OBJ files.

Nick

Hi, just updated to the latest fbx2gltf.py (thanks again!), but my test FBX file now returns TypeError: 'int' object is not iterable. Here is the stack trace:

$ python fbx2gltf.py /tests/test.FBX
Traceback (most recent call last):
  File "fbx2gltf.py", line 1474, in <module>
    args.binary
  File "fbx2gltf.py", line 1329, in Convert
    lSceneIdx = ConvertScene(lScene, poseTime)
  File "fbx2gltf.py", line 904, in ConvertScene
    lNodeIdx = ConvertSceneNode(pScene, lRoot.GetChild(i), pPoseTime)
  File "fbx2gltf.py", line 889, in ConvertSceneNode
    lChildNodeIdx = ConvertSceneNode(pScene, pNode.GetChild(i), pPoseTime)
  File "fbx2gltf.py", line 854, in ConvertSceneNode
    lGLTFMesh['primitives'] += ConvertMesh(pScene, lNodeAttribute, pNode, lGLTFSkin, lClusters)
  File "fbx2gltf.py", line 639, in ConvertMesh
    lTmpIndex, lScaleU, lScaleV, lTranslationU, lTranslationV = ConvertToPBRMaterial(lMaterial)
TypeError: 'int' object is not iterable

This same FBX file worked with the previous version of fbx2gltf.py, and this FBX file can be opened with the official FBX Review tool. I tried different FBX files, and those did convert correctly and without errors.

Any idea what the problem could be?

目前clay.math.Matrix4中默认用Float32Array创建的array，造成矩阵计算过程中，如果中间结果的精度超过32位float时，会出现精度丢失的问题。

是否考虑把Matrix4改为用普通的数组来实现，在调用gl方法时，再转为Float32Array？

其他的math下的类同理（Matrix*， Vector*）

作为参考，THREE中的Matrix4是基于普通数组来实现的

当我试图加载两个或以上模型的时候，FPS降低到只有5，有没有什么方式可以解决么？？

OS: Windows 10.1709 (64 bits)
Browser: Firefox 59.0.2 (64 bits)
ClayGL: 1.2.0

First, thanks for your great library!

I have an issue with orbit control:
Zoom doesn't work on Firefox. I found this error in console but I suppose it is not related: Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.

Note: Zoom works on Chrome 😮

I installed python 3.6.4,
I run script with command: python3 fbx2gltf.py
I have message:
"You need to copy the content in compatible subfolder under /lib/python into your python install folder such as "/Library/Frameworks/Python.framework/Versions/3.3/lib/python3.3/site-packages" folder."

Hi,
I saw you've added PBR support and it is standard shader now, it is fully implemented?
I saw functions like G_Smith, D_GGX never called?
Whats missing?

Thanks

I tried to display VoxelCorgi.gltf output by Three.js glTF Exporter with ClayGL.
QTEK displays it without problems, but ClayGL seems to get darker.

ClayGL + VoxelCorgi.gltf result:

QTEK + VoxelCorgi.gltf result:

Is it a problem with the setting of the light?

I tried to make a sample to put the ball in the box.
However, I did not know how to make the box transparent.
I wanted to make a sample that would give results similar to Three.js.
Could you tell me how to make the box transparent?

QTEK + Ball in the Box sample:

Three.js + Ball in the Box sample:

I am trying to display basic primitives using various WebGL libraries.
https://qiita.com/cx20/items/0fa19c96aa6470d98807

I would like to add qtek to the list, but I did not know how to display the triangle.
Will you give me triangle samples by qtek if possible?

I tried to display the glTF sample below with ClayGL.
https://ft-lab.github.io/gltf.html

However, some glTF seems to be displayed in white. (For example, apple.glb, grass.glb, rocks_trees_ao.glb)

ClayGL + rocks_trees_ao.glb result:

Three.js + rocks_trees_ao.glb result:

Because it displays correctly in other libraries, I think that it is a problem of ClayGL.

I tested the following model with gltf-test.
However, since the environment map is not applied correctly, part of the model is displayed in black.

ClayGL + NormalTangentTest.gltf result:

Expected result of NormalTangentTest.gltf:

Please tell me how to apply environment map to glTF if you like.

When converting a FBX to a GLTF file, either binary or JSON gltf, the script(fbx2gltf.py) should do image transformation to PNG or JPEG in order to support most rendering engines. To reproduce the bug, try to transform a FBX with reference to a TGA image.

I tested the Samba Dancing glTF model used in the sample below with glTF-Validator.

http://examples.claygl.xyz/examples/basicModelAnimation.html
https://github.com/pissang/claygl/blob/master/example/assets/models/SambaDancing/SambaDancing.gltf

However, the Samba Dancing glTF model seems to report many errors.
For reference below I will post the first 3 errors.

I do not know the cause of this error, but there seem to be cases in which Samba Dancing glTF Model can not be displayed in other libraries.
CesiumGS/cesium#6433

hi， Yi Shen，你好，请教你一个echarts的问题。

我现在的一个需求是图表的可以在X轴方向上可以拖动，在Y轴不可以。

我的dataZoom事件设置‘inside’（因为项目需求，只能用inside，不能用slider），设置了zoomLock 为true后，现在我发现在移动端，Y轴方向拖动屏幕时，dataZoom事件会跟原生的拖动事件冲突，造成在图表区域内Y轴方向拖动时，不能拖动屏幕。我想取消dataZoom在Y轴上的事件，请问我改怎么做呢。
盼回复，谢谢！！

I'm attempting to convert a fbx file and I come up with this error. I'm running python 3.6 because 3.3 is EOL. I'm not sure if this is the issue or not. Not sure where the issue lies.

Traceback (most recent call last):
  File "/Users/rsfpgd/Desktop/HololensStuff/claygl/tools/fbx2gltf.py", line 1461, in
    lPoseTime.SetSecondDouble(float(args.pose))
AttributeError: 'FbxTime' object has no attribute 'SetSecondDouble'

现在是2017-7-11 18:43

我刚刚给项目装了一下node modules，安装的依赖中有对qtek最低0.4.0版本的依赖，但npm上(https://www.npmjs.com/package/qtek )没有更新最新版本。

Just noticed that the method takes three arguments, but

• it doesn't really need the first two, as they are instance variables
• it doesn't use the third parameter

Again, this is simple enough, i could do it if you want

Uncaught TypeError: Cannot read property 'create' of undefined
at claygl.html:10

Here is my code.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="claygl.min.js"></script>
</head>
<body>
    <canvas id="main"></canvas>

    <script>
        clay.application.create('#main', {

            width: window.innerWidth,

            height: window.innerHeight,

            init: function (renderer, scene, timeline) {
                // Create camera
                var camera = new clay.camera.Perspective();
                camera.position.set(0, 2, 5);
                camera.lookAt(clay.math.Vector3.ZERO);
                scene.add(camera);

                // Create cube
                this._cube = clay.application.createCube();
                scene.add(this._cube);

                // Create light
                var light = new clay.light.Directional();
                light.position.set(1, 1, 1);
                light.lookAt(this._cube.position);
                scene.add(light);
            },

            loop: function (renderer, scene, timeline) {
                this._cube.rotation.rotateY(this.frameTime / 1000);
            }
        });
    </script>
</body>
</html>

I tried to display a new test model AlphaBlendModeTest.gltf with the latest version of ClayGL.
However, it seems that some cases are not displayed properly.

ClayGL + AlphaBlendModeTest.gltf result:

The expected display results are as follows.

Hi
this looks like a great project, thanks for sharing.

It doesn't look to big for starters, but i was curious how to achieve the 40k zipped.
I'm not a js buff (don't know the tooling, like rollup), maybe you could share a simple example.

I have been coding for a while, if there is any small boring tasks you want to offload, just say.

调用scene.removeFromScene(mesh)后，mesh没被移除，依然继续会被绘制
以下就能正常移除：

scene.removeFromScene(mesh);
scene.remove(mesh);

是不是应该在removeFromScene中调用一下 this.remove(node) ？

There is no try/catch to try and fix or report on this error. On line 425, in the ConvertToPBRMaterial function, there is an early return that does not follow the method signature of returning a tuple of 5 values. The calling line 638 in the function ConvertMesh requires a tuple return value. If this does not happen, EG, the early return executes in ConvertToPBRMaterial, the python script throws a TypeError: 'int' object is not iterable.

Not sure what the intention was here, but if you are expecting a the 'unknown' material shading type and doing an early return, at a minimum the calling code should check for that and either try/catch with a descriptive error message, better yet, write the code to recover and continue on. As it is I cannot decipher what the code-writer's intent was from reading the functions, so some code-comments in there would also be a big improvement.

这个很厉害啊，要是能有个教程就更完美了

I tried to display project_polly.gltf with ClayGL.

However, it seems that the display results are different between QTEK and ClayGL.

ClayGL + project_polly.gltf result:

QTEK(QMV.js) + project_polly.gltf result:

Is there a problem with how to use the library?

I am currently trying to port samples from QTEK to ClayGL.

The triangle could be displayed with shaders without problems.
http://jsdo.it/cx20/KVOj

However, the rectangle was not displayed.
http://jsdo.it/cx20/ulYh

I expected the following results.

Could you tell me how to fix it?

How to use claygl to load the model of the dota2 hero ?

在Scene中添加shadowMap后, 在第一帧中计算平行光源的位置, 坐标均为NaN
原因是因为scene的viewBoundingBoxLastFrame是空的, 所以intersection时计算结果为NaN

代码:
https://github.com/pissang/qtek/blob/master/src/prePass/ShadowMap.js#L769

重现代码:
https://jsfiddle.net/fuzhenn/fvj77xkw/

Any plan to add fog support? Linear, exp, exp2 etc?

I tried to animate the following ROME glTF model with ClayGL.
https://mrdoob.github.io/rome-gltf/

However, it seems that it is not animated.
http://jsdo.it/cx20/suPw

Is it a usage problem?

Below is a sample of Quaternion using Three.js.
http://jsdo.it/cx20/qqSi

function render() {

    // rotate
    mesh1.rotation.x += Math.PI / 180;
    mesh1.rotation.y += Math.PI / 180;
    mesh1.rotation.z += Math.PI / 180;
    
    // quaternion
    var axis = new THREE.Vector3(1,1,1).normalize();
    angle += Math.PI / 180;
    var q = new THREE.Quaternion();
    q.setFromAxisAngle(axis,angle);
    mesh2.quaternion.copy(q);

    // render
    renderer.render( scene, camera );

}

How can I write code in QTEK to do the same?

All links for samples seem to be broken. For example, I can not see the following sample.
http://pissang.github.io/qtek/tests/triangle.html

Serialize geometry to JSON-like object with transferable list

To transfer geometry from-to web worker

这里不晓得是不是我的理解问题，生成prefilter cubemap时， 这里的roughness的是否应该是 1 / (mipmapNum - 1)

https://github.com/pissang/claygl/blob/master/src/util/cubemap.js#L127

I tried to display the drone sample with ClayGL.
However, it seems that the display results are different between QTEK and ClayGL.

ClayGL + drone sample result:

QTEK(QMV.js) + drone sample result:

While doing PR I found out that when textures are matched and the URI is changed in the non-binary GLTF, the images are not moved to the output directory.

Example: fbx2gltf.py model.fbx -o ./subdir/model.gltf

Here, all images in the local directory will stay in the local directory and not copy to ./subdir along the gltf file, which breaks the URI of the generated gltf file.

I know that MovingCamera is included in Polly glTF model.
The following is an example of using MovingCamera.
https://www.youtube.com/watch?v=l7TB1O51X_M

However, I did not know how to use that camera with ClayGL.
http://jsdo.it/cx20/O26Q

If there is a way to use that camera please tell me how to do it.

Hi,

Several examples do not work because the require.js file can't be found:

• https://pissang.github.io/qtek/example/gltf2.html
• https://pissang.github.io/qtek/example/IBL.html
• https://pissang.github.io/qtek/example/standard_material.html

No directory of lib exists with the required Require.js file.

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script type="text/javascript" src="lib/require.js"></script>
    </head>

Possible other files that are missing the lib folder can be found using the following search query:
https://github.com/pissang/qtek/search?utf8=%E2%9C%93&q=%2Flib%2Frequire.js&type=

Thank you for the great library, it has been a great inspiration.

Tim