three.js 病态切线与病态 VertexTangentsHelper
three.js ill formed tangents vs ill formed VertexTangentsHelper
我注意到当我在 THREE.js 中的各种几何体上启用 "vertexTangentsHelper" 时,我得到了错误的切线。
切线是否计算错误(我怀疑它们是基于我的某些着色器输出),还是 "vertexTangentsHelper" 有缺陷?
据我了解,顶点的切向量应指向 "uv" 地图的 "u" 方向,并垂直于该顶点的法线和双切线。我在下面发布了一些屏幕截图来说明我的问题:
上图说明了使用 "THREE.PlaneGeometry" 创建的网格上显示的正确切线。网格点的所有切线都沿同一方向。 (网格为 40 x 40,具有 4 个高度段和 4 个宽度段。切线长度为 10 个单位。)
上图说明了使用 "THREE.BoxGeometry" 创建的网格上显示的不正确切线。沿边的切线未与其相关面的切线对齐。 (网格为 40 x 40 x 40,每个面有 4 个高度段和 4 个宽度段。切线长度为 10 个单位。)
这种不一致的原因是什么?问题出在 "computeTangents" 代码还是 "VertexTangentsHelper" 代码中?或者还有什么我没有考虑到的吗?我正在使用 three.js re70。
THREE.VertexTangentsHelper
没有问题。
要计算单个顶点的切向量,Geometry.computeTangents()
计算共享该顶点的每个三角形的切向量的平均值。
最简单的BoxGeometry
有8个顶点,但是有12个面。将它应用于 BoxGeometry
时,唯一能正常工作的方法是盒子每个角的顶点都被复制,而不是共享。
three.js r.70
我注意到当我在 THREE.js 中的各种几何体上启用 "vertexTangentsHelper" 时,我得到了错误的切线。
切线是否计算错误(我怀疑它们是基于我的某些着色器输出),还是 "vertexTangentsHelper" 有缺陷?
据我了解,顶点的切向量应指向 "uv" 地图的 "u" 方向,并垂直于该顶点的法线和双切线。我在下面发布了一些屏幕截图来说明我的问题:
上图说明了使用 "THREE.PlaneGeometry" 创建的网格上显示的正确切线。网格点的所有切线都沿同一方向。 (网格为 40 x 40,具有 4 个高度段和 4 个宽度段。切线长度为 10 个单位。)
上图说明了使用 "THREE.BoxGeometry" 创建的网格上显示的不正确切线。沿边的切线未与其相关面的切线对齐。 (网格为 40 x 40 x 40,每个面有 4 个高度段和 4 个宽度段。切线长度为 10 个单位。)
这种不一致的原因是什么?问题出在 "computeTangents" 代码还是 "VertexTangentsHelper" 代码中?或者还有什么我没有考虑到的吗?我正在使用 three.js re70。
THREE.VertexTangentsHelper
没有问题。
要计算单个顶点的切向量,Geometry.computeTangents()
计算共享该顶点的每个三角形的切向量的平均值。
最简单的BoxGeometry
有8个顶点,但是有12个面。将它应用于 BoxGeometry
时,唯一能正常工作的方法是盒子每个角的顶点都被复制,而不是共享。
three.js r.70