glsl - 最新の three.js でシェーダーを処理する適切な方法は何ですか?

Question

グーグルで検索した古い例は、Three.js の特定のバージョンで動作します。最新のもので簡単な例を作成しようとすると、うまくいきません:

function shaders() {
    var vShader = [
        'void main() {',
            'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
        '}'
    ].join('\n');

    var fShader = [
        'void main() {',
            'gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);',
        '}'
    ].join('\n');

    material = new THREE.ShaderMaterial({
        vertexShader: vShader,
        fragmentShader: fShader
    });

    //material = new THREE.MeshBasicMaterial({color: 0x00ff00, wireframe: true});

    geometry = new THREE.SphereGeometry(50, 32, 32);
    mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);
}

ここで入手可能な完全なコードリスト: http://jsfiddle.net/doubleyou/Hhh89/

マテリアルの割り当てでコメント行のコメントを外すと、機能することに注意してください。だから、間違った方法か何かでシェーダーマテリアルを初期化したと思います。

価値があるのは、Chrome でエラーがまったく表示されないことです。シェーダー コードを無効にしても、これは奇妙です。

Answer 1

最後に説明を受けました。

私は CanvasRenderer を使用しています。代わりに WebGLRenderer を使用する必要がありました。