pissang / claygl Goto Github PK
View Code? Open in Web Editor NEWA WebGL graphic library for building scalable Web3D applications
Home Page: http://claygl.xyz/
License: BSD 2-Clause "Simplified" License
A WebGL graphic library for building scalable Web3D applications
Home Page: http://claygl.xyz/
License: BSD 2-Clause "Simplified" License
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
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矩阵乘法,应该能提升一些性能。
只是我一点不成熟的想法,不知道是否可行:
祝好
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比对测试, 可以基于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?
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.
Code | Message | Pointer |
---|---|---|
MESH_PRIMITIVE_ACCESSOR_WITHOUT_BYTESTRIDE | bufferView.byteStride must be defined when two or more accessors use the same buffer view. | /meshes/0/primitives/0/attributes/NORMAL |
MESH_PRIMITIVE_ACCESSOR_WITHOUT_BYTESTRIDE | bufferView.byteStride must be defined when two or more accessors use the same buffer view. | /meshes/0/primitives/0/attributes/POSITION |
MESH_PRIMITIVE_ACCESSOR_WITHOUT_BYTESTRIDE | bufferView.byteStride must be defined when two or more accessors use the same buffer view. | /meshes/0/primitives/0/attributes/TEXCOORD_0 |
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
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.
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
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.
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:
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.