THREE.lod 和法线贴图着色器失败 [英] THREE.lod and normalmap shader fail

问题描述

我想使用三个 lod 系统，我在我的网格上应用了法线贴图材质，但它因 GL 错误而失败:

I wanted to play with THREE lod system, and I applied normal mapped material on my meshes but it failed with GL errors :

WebGLRenderingContext:GL 错误:GL_INVALID_OPERATION:glDrawElements:尝试访问属性 2 中超出范围的顶点

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

我认为任何人都可以很容易地重现它，只需编辑 webgl_lod 示例，而不是应用 MeshLambertMaterial，而是使用 misc_control_fly 示例中提供的法线贴图 ShaderMaterial.

Anyone can reproduce it quite easly I think, just edit the webgl_lod example, and instead of applying a MeshLambertMaterial use the normalmap ShaderMaterial provided in the misc_control_fly example.

我是否遗漏了什么，法线贴图着色器不是应该与 LOD 网格一起使用吗?

Am I missing something, isn't the normalmap shader supposed to work with LOD meshes ?

这是查看问题的链接.

正在工作的原始示例 webgl_lod:http://typedef.byethost8.com/examples/webgl_lod.html

original example webgl_lod that is working : http://typedef.byethost8.com/examples/webgl_lod.html

使用来自 shaderLib 的法线贴图着色器而不是 web_lod 示例的原始 meshLambertMateriel:http://typedef.byethost8.com/examples/failing_webgl_lod.html

with normalmap shader from shaderLib instead of original meshLambertMateriel of web_lod example : http://typedef.byethost8.com/examples/failing_webgl_lod.html

推荐答案

您必须为几何图形生成切线.添加:

You have to generate the tangents for your geometries. Add:

geometry[ 0 ][ 0 ].computeTangents();
geometry[ 1 ][ 0 ].computeTangents();

这将消除错误:

WebGLRenderingContext:GL 错误:GL_INVALID_OPERATION:glDrawElements:尝试访问属性 2 中超出范围的顶点

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

另外，我不得不使用sheres而不是平面来查看显示的内容=>也许没有为平面生成纹理坐标?或者法线贴图材质不适用于平面?

Also, I had to use sheres instead of planes to see something displayed => maybe texture coordinates are not generated for planes ? Or the normalmap material does not work with planes ?

这篇关于THREE.lod 和法线贴图着色器失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！