问题
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 is using computeTangents() to add an attribute called "tangents" to the vertex which is sent to the shader.
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.
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.
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();
Repo here:
https://github.com/CoryG89/MoonDemo
Is it possible to get this demo working using the new version of Three?
回答1:
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);
Then I had to add the BufferGeometryUtils.js file and use the following code:
THREE.BufferGeometryUtils.computeTangents( geo );
This got the demo working again.
来源：https://stackoverflow.com/questions/46734731/threejs-v0-87-1-can-no-longer-generate-tangents-and-binormals-for-use-in-normal