three.js 中带有顶点着色器的属性会产生超出范围的顶点错误

Question

我一直在尝试使用 this link 学习着色器的使用 three.js，不幸的是，这有点过时了，在尝试更新代码时，我得到了这么远：

<script id="vshader" type="x-shader/x-vertex">
    attribute float displacement;

    varying vec3 vNormal;

    void main() {
        vNormal = normal;

        vec3 newPosition = position + normal * vec3(displacement);

        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
    }
</script>
<script id="fshader" type="x-shader/x-fragment">
    varying vec3 vNormal;

    void main() {
        vec3 light = vec3(0.5, 0.2, 1.0);

        light = normalize(light);

        float dprod = max(0.0, dot(vNormal, light));
        gl_FragColor = vec4(dprod, dprod, dprod, 1.0);
    }
</script>

var shaderProperties = {
    vertexShader: document.getElementById("vshader").textContent,
    fragmentShader: document.getElementById("fshader").textContent
};

var shaderMaterial = new THREE.ShaderMaterial(shaderProperties);
var geometry = new THREE.SphereGeometry(3, 12, 12);
var bufgeometry = new THREE.BufferGeometry().fromGeometry(geometry);

var verts = geometry.vertices;
var displacement = new Float32Array(verts);

for (var v = 0; v < verts.length; v++) {
    displacement[v] = Math.random() * 3;
}
bufgeometry.addAttribute("displacement", new THREE.BufferAttribute(displacement, 1));

var sphere = new THREE.Mesh(bufgeometry, shaderMaterial);
scene.add(sphere);

但这会产生以下错误：

GL 错误：GL_INVALID_OPERATION：glDrawArrays：尝试访问属性 2 中超出范围的顶点

我做错了什么？

Answer 1

问题似乎出在最新版本的 three.js 上，它要求使用 BufferGeometry.addAttribute() 将属性附加到缓冲区几何。我试图做类似的事情，但不正确。

This example 很有帮助，我所做的更改如下所示：

var shaderMaterial = new THREE.ShaderMaterial(shaderProperties);
var geometry = new THREE.SphereBufferGeometry(3, 90, 90);
var displacement = new Float32Array(geometry.attributes.position.count);

for (var v = 0; v < displacement.length; v++) {
    displacement[v] = Math.random() * 2;
}

geometry.addAttribute("displacement", new THREE.BufferAttribute(displacement, 1));

使用 SphereBufferGeometry 跳过创建 SphereGeometry 然后从中创建 BufferGeometry 的步骤。并使用缓冲区几何体上位置属性的计数而不是球体几何体上顶点数组的长度。

Here it is 正在行动。

three.js 中带有顶点着色器的属性会产生超出范围的顶点错误

attributes with vertex shader in three.js produces out of range vertices error

javascript

opengl-es

webgl

three.js