Skip to content

Output of vertex shader 'vUv' not read by fragment shader #4

@Tam

Description

@Tam

I've followed all the usage instructions, and as far as I can tell, I've done everything correctly. But when I try to run everything, all I get is an empty black canvas and this warning pop up on my console:

THREE.WebGLProgram: gl.getProgramInfoLog() WARNING: Output of vertex shader 'vUv' not read by fragment shader

I can throw other meshes into the scene and they render fine. My code is below, I'm using r72.

<script id="vertexShader" type="x-shader/x-vertex">
    uniform sampler2D t_pos;

    void main() {
        vec4 pos = texture2D(t_pos, position.xy);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos.xyz, 1.);
    }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
    void main() {
        gl_FragColor = vec4(1.);
    }
</script>

<script id="particleShader" type="x-shader/x-fragment">
    uniform sampler2D t_pos; // Current position texture
    uniform sampler2D t_oPos; // Old position texture
    uniform vec2 resolution; // Sim resoulution

    void main() {
        vec2 uv = gl_FragCoord.xy / resolution;

        vec4 oPos = texture2D(t_oPos, uv);
        vec4 pos = texture2D(t_pos, uv);

        vec3 vel = pos.xyz - oPos.xyz;

        vec3 force = vec3(0., -1., 0.);

        vel += force;
        vec3 newPos = pos.xyz + vel;

        gl_FragColor = vec4(newPos, 1.);
    }
</script>
<script>
    var WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight,
        CAMERA_ASPECT = WIDTH / HEIGHT;

    var scene, camera, renderer, stats;
    var physicsRenderer, size, particleShader, particles;
    var uniforms, vertexShader, fragmentShader;

    function createLookupGeometry(size) {
        var geo = new THREE.BufferGeometry(),
                positions = new Float32Array(size * size * 3);

        for (var i = 0, j = 0, l = positions.length / 3; i < l; i++, j += 3) {
            positions[j] = (i % size) / size;
            positions[j + l] = Math.floor(i / size) / size;
        }

        var posA = new THREE.BufferAttribute(positions, 3);
        geo.addAttribute('position', posA);

        return geo;
    }

    function init() {
        // Particles
        size = 128;//1024;
        particleShader = document.getElementById('particleShader').innerText;

        uniforms = {
            t_pos: {
                type: 't',
                value: null
            }
        };
        vertexShader = document.getElementById('vertexShader').innerText;
        fragmentShader = document.getElementById('fragmentShader').innerText;

        // Scene
        scene = new THREE.Scene();

        // Camera
        camera = new THREE.PerspectiveCamera(90, CAMERA_ASPECT, 0.1, 1000);
        camera.position.z = 300;

        // Renderer
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(WIDTH, HEIGHT);
        renderer.setPixelRatio(window.devicePixelRatio);

        document.body.appendChild(renderer.domElement);

        // Physics Renderer
        physicsRenderer = new PhysicsRenderer(size, particleShader, renderer);

        var geom = createLookupGeometry(size),
            mate = new THREE.ShaderMaterial({
                uniforms: uniforms,
                vertexShader: vertexShader,
                fragmentShader: fragmentShader
            });

        particles = new THREE.Points(geom, mate);
        particles.frustumCulled = false;

        scene.add(particles);

        physicsRenderer.addBoundTexture(uniforms.t_pos, 'output');

        physicsRenderer.addDebugScene(scene);

        // Sphere
        var sphere = new THREE.Mesh(
                new THREE.SphereBufferGeometry(50, 64, 64),
                new THREE.MeshBasicMaterial({ color: 0xffae00, wireframe: true })
        );
        scene.add(sphere);

        // Stats
        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        stats.domElement.style.zIndex = 100;
        document.body.appendChild( stats.domElement );

        render();
    }

    function render() {
        physicsRenderer.update();
        stats.update();
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

    window.onload = init;
</script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions