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

【问题标题】：attributes with vertex shader in three.js produces out of range vertices errorthree.js 中带有顶点着色器的属性产生超出范围的顶点错误
【发布时间】：2015-10-08 01:35:10
【问题描述】：

我一直在尝试使用 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 ERROR :GL_INVALID_OPERATION : glDrawArrays: 尝试访问属性 2 中超出范围的顶点

我在这里做错了什么？

【问题讨论】：

我看到的第一件事是您没有将置换属性发送到 ShaderMaterial。 threejs.org/docs/#Reference/Materials/ShaderMaterial
这里是一个简单的置换示例，尽管它使用了制服。 blog.2pha.com/demos/threejs/shaders/perlin_noise_3d_vertex.html

标签： javascript opengl-es three.js webgl

【解决方案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 在行动中。

【讨论】：