Fragment Shader not showing in ThreeJS

Question

I am new to threejs and implementing shaders in it. I brought a fun shader in but I am having issues with displaying it. I believe it is related to the variable "len" in the code but I am not sure. Here is the link to the codepen https://codepen.io/Yerbs/pen/eYWgevO . Any Help would be appreciated This is the frag shader

fragmentShader: `
uniform vec2 resolution;
uniform float time;

const int AMOUNT = 12;
         
        void main() {
    vec2 coord = 20.0 * (gl_FragCoord.xy - resolution / 2.0) / min(resolution.y, resolution.x);

    float len;

    for (int i = 0; i < AMOUNT; i++){
        len = length(vec2(coord.x, coord.y));

        coord.x = coord.x - cos(coord.y + sin(len)) + cos(time / 9.0);
        coord.y = coord.y + sin(coord.x + cos(len)) + sin(time / 12.0);
    }

    gl_FragColor = vec4(cos(len * 2.0), cos(len * 3.0), cos(len * 1.0), 1.0);
        }
      `
    });

I have tested out previous code so I know it is related to the fragment itself.

Answer 1

You need to set the values of the uniforms variables time and resolution (seeShaderMaterial ). eg:

const material = new THREE.ShaderMaterial({
    uniforms: {
        time: { type: "f", value: 0.0 },
        resolution: { type: "v2", value: new THREE.Vector2() },
    },
    // [...]

function animate(timestamp) {
    requestAnimationFrame(animate);
    material.uniforms.time.value = timestamp / 1000;
    material.uniforms.resolution.value.x = renderer.domElement.width;
    material.uniforms.resolution.value.y = renderer.domElement.height;
    renderer.render(scene, camera);
}

Complete example:

 const renderer = new THREE.WebGLRenderer({ antialias: false }); renderer.setSize(window.innerWidth, window.innerHeight, 2); document.body.appendChild(renderer.domElement); window.addEventListener( 'resize', function(e) { renderer.setSize(window.innerWidth, window.innerHeight, 2); }); const scene = new THREE.Scene(); const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const material = new THREE.ShaderMaterial({ uniforms: { time: { type: "f", value: 0.0 }, resolution: { type: "v2", value: new THREE.Vector2() }, }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4( position, 1.0 ); } `, fragmentShader: ` uniform vec2 resolution; uniform float time; const int AMOUNT = 12; void main() { vec2 coord = 20.0 * (gl_FragCoord.xy - resolution / 2.0) / min(resolution.y, resolution.x); float len; for (int i = 0; i < AMOUNT; i++){ len = length(vec2(coord.x, coord.y)); coord.x = coord.x - cos(coord.y + sin(len)) + cos(time / 9.0); coord.y = coord.y + sin(coord.x + cos(len)) + sin(time / 12.0); } gl_FragColor = vec4(1.0, cos(len * 3.0), cos(len * 1.0), 1.0); } ` }); const quad = new THREE.Mesh(new THREE.PlaneBufferGeometry( 2, 2, 1, 1 ), material); scene.add(quad); function animate(timestamp) { requestAnimationFrame(animate); material.uniforms.time.value = timestamp / 1000; material.uniforms.resolution.value.x = renderer.domElement.width; material.uniforms.resolution.value.y = renderer.domElement.height; renderer.render(scene, camera); } animate();

 <script src="https://cdn.jsdelivr.net/npm/three@0.137/build/three.js"></script>