Question

我很难使用threejs'RawShaderMaterial类创建自己的素材。我目前有：

var geometry = new THREE.RingGeometry(/* params */);
//geometry.vertices.length = 441;
var vertexFooAttribs = [/* 441 instances of THREE.Vector3() */];
var material = new THREE.RawShaderMaterial({
    uniforms: THREE.UniformsUtils.merge([
        THREE.UniformsLib["lights"]
    ]),
    attributes: {
        foo: {type: "v3", value: vertexFooAttribs}
    },
    vertexShader: document.getElementById("vshader").text,
    fragmentShader: document.getElementById("fshader").text,
    side: THREE.BackSide,
    lights: true,
    vertexColors: THREE.VertexColors
});

vshader的位置：

<script id="vshader" type="shader">
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat3 normalMatrix;
uniform vec3 cameraPosition;
uniform vec3 pointLightPosition;
uniform vec3 color;

attribute vec3 position;
attribute vec3 normal;
attribute vec3 foo;

varying vec3 vColor;

void main() {
    //stuff happens here, which involves 'foo' attribute...
    vColor = resultOfComputation;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>

而fshader只是：

<script id="fshader" type="shader">
precision highp float;

varying vec3 vColor;

void main(void) {
    gl_FragColor = vec4(vColor, 1.0);
}
</script>

但是当我运行它时，输出（幸运的是256次，允许的最大值）以下错误：

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements:
attempt to access out of range vertices in attribute 2

我假设属性2，如果计数从0开始，则恰好是我的foo属性我想我正确地遵循了three.js的文档，但我无法确定错误的来源。另外，我很抱歉因为现在无法提供jsfiddle。只是想到，因为我是一个Three.js / WebGL noob，也许有人会一眼就能找到问题。欢呼声。

Answer 1

我没有使用过RawShaderMaterial，只使用了ShaderMaterial。我首先要确保你不想使用ShaderMaterial。从下面的示例中可以看出，RawShaderMaterial更适用于特殊缓冲几何体情况，并且需要您执行额外的工作，例如几何体中的设置位置属性。我猜ShaderMaterial通常是一种让你使用自定义着色器的更快捷方式。

使用ShaderMaterial的自定义属性查看此示例，该属性看起来与您的代码很接近。 https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html

在此处查看RawShaderMaterial示例，注意创建了位置属性。 https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry_rawshader.html

使用RawShaderMaterial中的属性对象发出问题

1 个答案: