Question

我正在尝试使用我工作的方法here将法线贴图添加到frag着色器并计算看到{t {3}}的tbn矩阵。我遇到的问题是你只能在“索引缓冲区几何体”上计算切线。但我不知道如何设置这个，我见过的每个例子都会导致错误或黑屏。 obj只是一个在Maya中创建的非常简单的多维数据集。它正确加载，但index属性为null，需要填充。

var mesh;
loader.load('Cube0.obj', function (object) {
            object.traverse(function (child) {
                 if (child instanceof THREE.Mesh) {
                    var geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
                    var indexes = new Uint16Array(1000);


                    mesh = child;
                    var indices = new Uint16Array(geometry.faces.length * 3); // doesn't work
                  geometry.setIndex(new THREE.BufferAttribute(indices));
                  THREE.BufferGeometryUtils.computeTangents(mesh.geometry );
                }
            });

            scene.add(mesh);
        });

当这一切都有效时，我应该为每个顶点提供一个正确的切线数组，我可以将其提供给GLSL着色器。

编辑：我得到了这个工作，解决方案有点复杂，所以我会尝试在这里记录它。问题是我们没有将索引与OBJ文件一起加载，如下所述：

here

该线程中的一个参与者创建了一个单独的OBJ加载器：

https://github.com/mrdoob/three.js/issues/11898

我移植了我的OBJ加载函数以使用这种加载OBJ的方法，确保设置objLoader.setUseIndices( true );

加载OBJ文件后，它现在具有正确索引的BufferGeometry。从那里，我可以使用THREE.GeometryBufferUtils.computeTangents(geo);，它将预先计算的切线属性添加到顶点着色器。这将允许我创建“切线，副法线，法线”矩阵，可用于使用法线贴图正确照亮模型。

老实说，我希望ThreeJS OBJ加载器可以提供这个，所以我不必依赖第三方加载器，但在此之前，这是有效的。

希望这可以帮助将来的某个人！

ThreeJS v0.87.1计算加载的OBJ文件的切线

0 个答案: