THREE.js shader only showing after resizing the window

Question

I'm new to THREE.js and I'm doing some experiments with shaders. For some reason, this one only shows up when I resize the windows. The code is here . Any suggestion about why it's showing up only after resizing the windows?

Answer 1

I think the problem is because you only assign values to the resolution uniform in the function onWindowResize:

uniforms.resolution.value.x = window.innerWidth;
uniforms.resolution.value.y = window.innerHeight;

And since when you initialise the uniform (function createContent()), you just assign to resolution a new vector (new THREE.Vector2()), it's automatically given the (0,0) coordinates. Looking at your shader code, there appear then some operations dividing by 0 that seem to me the cause of not rendering when the screen appears.

The solution just may be to assign the coordinates to the uniform resolution also when it's declared in the javascript code, as follows (function createContent()):

var initialResolution = new THREE.Vector2(window.innerWidth,window.innerHeight);
uniforms = {time: {type: "f",  value: 1.0},
            mouseX:     {type: "f",  value: 0.0},
            mouseY:     {type: "f",  value: 0.0},
            resolution: {type: "v2", value: initialResolution}
            [...]
           }