javascript - 属性変数を渡す: 黒い画面

Question

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);、画面上に正しく描かれた緑色の立方体が表示されます。

完全なソース コードは次のとおりです。