传递属性变量：黑屏答案

【问题标题】：Passing an attribute variable : black screen传递属性变量：黑屏
【发布时间】：2013-10-24 00:47:55
【问题描述】：

我正在尝试将带有three.js 的属性变量传递给顶点着色器，然后顶点着色器应通过varying 变量将其传递给片段着色器。

顶点着色器：

attribute vec4 color;
varying vec4 outColor;

void main() 
{
    outColor= color;
    gl_Position= projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

片段着色器：

varying vec4 outColor;

void main() {
    gl_FragColor = outColor;
}

这样假设我有一个有 8 个顶点的立方体：如果每个顶点有不同的颜色，那么应该通过插值每个顶点的颜色来绘制立方体，并且在一个面的中间它应该有一种混合的颜色。这是我初始化属性的javascript代码sn-p：

var colors= [];
for(var i=0; i<geometry.vertices.length; i++) {
    colors.push(new THREE.Vector4(0.0,1.0,0.0,1.0));
}

var attributes = {
    color: {type:"v4", value: colors}
};

var material= new THREE.ShaderMaterial({
    uniforms: uniforms,
    attributes: {},
    vertexShader: document.getElementById("vertexShader").textContent,
    fragmentShader: document.getElementById("fragmentShader").textContent
});

现在这应该绘制一个完全绿色的立方体。问题是顶点着色器outColor=color; 中的指令搞砸了一切：我只看到一个黑屏。如果我用outColor=vec4(0.0,1.0,0.0,1.0); 替换这条指令，我会在屏幕上看到一个正确绘制的绿色立方体。

这里是full source code。

【问题讨论】：

标签： javascript three.js glsl shader

【解决方案1】：

尝试将attributes 而不是{} 传递给THREE.ShaderMaterial 构造函数。

【讨论】：

这确实是问题所在。再加上可能 outColor 或 color 是预定义变量的事实，所以我不得不更改变量名称。