fragment shader uniforms no longer uploaded in simple shader test

Question

A while ago (thinking let's try something browser) I whipped up a small three.js test that draws a quad with 2 custom shaders to toy around with. Ripped some sample code, put the shaders in, voila. I am embedding three.js directly from Github, so I'm of course prone to migration issues :)

This is what happened: after revisiting this weeks later my uniforms stopped working (verified using WebGL-Inspector, they're all zero, whereas the preceding uniforms uploaded by three.js itself are still fine).

As confirmed by WebGL-Inspector:

0   projectionMatrix    1   FLOAT_MAT4  
[ 1.000000000,  0.000000000,  0.000000000,  0.000000000, 
  0.000000000,  1.000000000,  0.000000000,  0.000000000, 
  0.000000000,  0.000000000, -0.002000200,  0.000000000, 
  0.000000000,  0.000000000, -1.000200033,  1.000000000 ] 
1   modelViewMatrix 1   FLOAT_MAT4  
[ 1.000000000,  0.000000000,  0.000000000,  0.000000000, 
  0.000000000,  1.000000000,  0.000000000,  0.000000000, 
  0.000000000,  0.000000000,  1.000000000,  0.000000000, 
  0.000000000,  0.000000000, -0.100000001,  1.000000000 ]
2   u_resolution    1   FLOAT_VEC2  
    [ 0.000000000,  0.000000000 ]
3   u_time  1   FLOAT     0.000000000
4   u_aspectRatio   1   FLOAT     0.000000000

Here's the "code" (I'm sort of a dummy when it comes to all things web so don't curtail any possible urge to point out other stupidities =)):

<!-- 
next: texture!
also, it doesn't work anymore =) (uniforms are invalid?)
-->

<html>
<head>
    <title>taste the browser!</title>
    <style>canvas { width: 100%; height: 100% }</style>

    <script type="text/javascript" src="../WebGL-Inspector/core/embed.js">        </script>
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js">  </script>
</head>

<body>
    <script id="vertexShader" type="x-shader/x-vertex">
//          varying vec2 v_UV;

        void main() {
//              vUV = uv;
            gl_Position = projectionMatrix * modelViewMatrix *     vec4(position, 1.0);
        }
    </script>

    <script id="fragmentShader" type="x-shader/x-fragment">
        uniform float u_aspectRatio;
        uniform float u_time;
        uniform vec2  u_resolution;

//          varying vec2 v_UV;

        void main() 
        {
            vec2 p = -1.0 + 2.0*(gl_FragCoord.xy/u_resolution);

            // cheapest trick in the book #1: tunnel
            float r = sqrt(dot(p, p));
            float a = atan(p.y, p.x); // abs(a)/3.1416
            float flower = r + 0.2*sin(a*4.0 + u_time);

            // cheapest trick in the book #2: 2D blobs
            vec2 blob1 = vec2(sin(u_time*0.66), cos(u_time*0.96));
            vec2 blob2 = vec2(cos(u_time*0.75 + 1.4), sin(u_time*0.4 - 3.0));
            vec2 dist1 = p - blob1;
            vec2 dist2 = p - blob2;
            dist1 *= 2.0; dist2 *= 3.0;
            float energy = 1.0/dot(dist1, dist1) + 1.0/dot(dist2, dist2);
            energy = pow(energy, 4.0);

                gl_FragColor = vec4(energy, flower, u_time, 1.0);
        }
    </script>

    <script>
        // initialize renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // setup scene & camera
        var scene = new THREE.Scene();
        var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000);

        // setup uniforms
        var myUniforms = { 
            aspectRatio: { type: "f", value: window.innerWidth/window.innerHeight },
            time: { type: "f", value: 0.0 },
            resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
        };

        // build plane with custom shader material
        var geometry = new THREE.PlaneGeometry(2, 2, 1, 1);
        var material = new THREE.ShaderMaterial(
            {
                uniforms: myUniforms,
                attributes: null, 
                vertexShader: document.getElementById('vertexShader').textContent, 
                fragmentShader: document.getElementById('fragmentShader').textContent }
            );
        var plane = new THREE.Mesh(geometry, material);
        scene.add(plane);

        // anything non-zero will do
        camera.position.z = 0.1;

        // create timer
        var timer = new THREE.Clock(true);

        // render loop func.
        function render() {
            // update & render
            myUniforms.time.value = timer.getElapsedTime(); // % 1.0;
            renderer.render(scene, camera);

            // req. next frame
            requestAnimationFrame(render);
        }

        render();
    </script>
</body>
</html>

Any pointers on this: very welcome!

(and yes, that is 1 ugly shader ;))

WestLangley · Accepted Answer · 2013-04-11 18:12:38Z

2

Your uniforms variable names do not match the variable names in your shader.

var myUniforms = { 
    u_aspectRatio: { type: "f", value: window.innerWidth/window.innerHeight },
    u_time: { type: "f", value: 0.0 },
    u_resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
};

answered Apr 11, 2013 at 18:12

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

fragment shader uniforms no longer uploaded in simple shader test

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related