Question

The older examples I could google work with the specific versions of Three.js. When I’m trying to make a simple example with the newest one, it doesn’t work:

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);
}

Full code listing available here: http://jsfiddle.net/doubleyou/Hhh89/

Note, that if you uncomment a commented line with material assignment, it will be working. So, guess, I initialize a shader material in a wrong way or something.

For what it’s worth, Chrome doesn’t show me any errors at all. Even if I make shaders code invalid, which is odd.

Answer 1

Finally got an explanation.

I’ve been using CanvasRenderer. Should have been using WebGLRenderer instead.