THREEJS v0.87.1:不再能够生成切线和双法线以用于法线贴图 [英] THREEJS v0.87.1: Can no longer generate tangents and binormals for use in normal mapping

问题描述

我正在尝试在ThreeJS片段着色器中实现法线贴图，但是似乎关键功能computeTangents在最新版本中已丢失.

I'm trying to implement normal maps in a ThreeJS fragment shader, but it seems as though a key feature, computeTangents, has been lost in recent versions.

这是使用旧版三"的有效演示:

Here is a working demo using an older version of Three:

http://coryg89.github.io/technical/2013/06/01/photorealistic-3d-moon-demo-in-webgl-and-javascript/

ThreeJS正在使用computeTangents()向顶点添加一个称为切线"的属性，该属性将被发送到着色器.

ThreeJS is using computeTangents() to add an attribute called "tangents" to the vertex which is sent to the shader.

因此，我进行了尽可能多的研究，并尝试使用仅着色器计算切线的方法，但这需要dFdx，这会在Macbook Pro的着色器中导致关于GL_OES_standard_derivatives的错误.

So I researched as much as I could and tried using a shader only method of computing the tangent, but this requires dFdx which causes an error about GL_OES_standard_derivatives in the shader on my Macbook Pro.

然后，我尝试将几何体从简单的多维数据集转换为缓冲几何体，以供在BufferGeometryUtils.computeTangent()函数中使用，以便在那里生成切线，但这需要索引几何体"，这在创建的基本地理区域中是不存在的由ThreeJS.

Then I tried converting the geometry from a simple cube to buffer geometry for use in the BufferGeometryUtils.computeTangent() function, in order to generate the tangents there, but that requires "indexed geometry", which isn't present in basic geo created by ThreeJS.

在原始演示中，这是我需要使用最新的ThreeJS重新创建的行:

From the original demo, this is the line I need to recreate using the latest ThreeJS:

 var mesh = new THREE.Mesh(geo, mat);
 mesh.geometry.computeTangents();

在此处回购:

https://github.com/CoryG89/MoonDemo

是否可以使用新版本的Three来使该演示正常工作?

Is it possible to get this demo working using the new version of Three?

推荐答案

我找到了答案.对于上面的演示，需要将THREE.SphereGeometry更改为THREE.SphereBufferGeometry.

I found the answer to this. For the demo above, it required changing the THREE.SphereGeometry to THREE.SphereBufferGeometry.

 var geo = new THREE.SphereBufferGeometry(radius, xSegments, ySegments);

然后我必须添加BufferGeometryUtils.js文件并使用以下代码:

Then I had to add the BufferGeometryUtils.js file and use the following code:

THREE.BufferGeometryUtils.computeTangents( geo );

这使演示再次起作用.

This got the demo working again.

这篇关于THREEJS v0.87.1:不再能够生成切线和双法线以用于法线贴图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！