传递一个属性变量：黑屏

我试图通过与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代码片段：

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。

来源

2013-10-22 Ramy Al Zuhouri