Hello again! I am trying to learn about shaders using three.js. What I am trying to do is create a shader that generates gradients to texture planets with. Right now I am just trying to generate one gradient to make sure it works. However, when I apply the shader it only renders one of the colors, and does not create the gradient effect I’m looking for.
I’m using the Book of Shaders as the basis for my code. Specifically, I was looking at this example, trying to replicate the background color.
var uniforms = {
u_resolution: { type: "v2", value: new THREE.Vector2() },
};
var fShader = $('#fragmentshader');
var vShader = $('#vertexshader');
var geometry = new THREE.SphereGeometry(getRandomInt(100, 250), 20, 20);
// var material = new THREE.MeshBasicMaterial( {wireframe: true });
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vShader.text(),
fragmentShader: fShader.text()
});
var sphere = new THREE.Mesh(geometry, material);
Seems like the issue was I wasn’t using the vertex shader correctly to pass the vertex info to the fragment shader.
It seems like you changed the whole purpose of the shader.
The first shader is supposed to do a screen space gradient by normalizing gl_FragCoord, which is in order of pixels on screen ( round floats , like vec2(1920.0,1080.0)), you instantiated an empty vector2 for the uniform, thus providing 0,0 for this normalization. This may even behave differently on different gpus, but it shot the number through the roof, and you got your yellow color (2nd argument).
You need to divide it with something that makes sense, so provide the width and height of your canvas element, call renderer.getSize(). While doing it, you should also do the inverse outside of the shader (something like 'uSize.set(1,1).divide(new THREE.Vector2(canvasWidth,canvasHeight)`. In the shader then you would have a multiplication instead of a division which is faster.
Your second shader is something else. It uses the mapping channel for the gradient. You may or may not have this attribute available, and you will have little control over it.