Feeling a bit lost here, but eager to learn. I recently switched from P5.js to Three.JS for a project and ran into some challenges with applying shaders. In P5.js, it was simple to create a canvas and add a shader, but in Three.JS, it's not as straightforward. So, I decided to experiment with shaders.
The concept:
- Create random circles on a transparent background
- Blur the circles
- Use the result as a texture
Currently, I've succeeded in drawing the circles (still working on making them random) and using them as a texture in the JavaScript part:
const geometry = new THREE.PlaneGeometry( 1, 1, 1 );
const material = new THREE.ShaderMaterial( {
uniforms: {
iP: 0,
dl: { value : new THREE.Vector2(.6, 0), },
spots : { value : 5.0 },
offset : { value : new THREE.Vector2(0.5, 0.5) },
radius : { value : .25 },
},
vertexShader: _VS,
fragmentShader: _FS,
transparent: true
});
Vertex shader section:
const _VS = `
precision mediump float;
attribute vec3 aPosition;
varying vec2 vTexCoord;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
`;
Fragment shader section:
// fragment shader
const _FS = `
precision mediump float;
varying vec2 vTexCoord;
varying vec2 vUv;
uniform float spots;
uniform vec2 offset;
uniform float radius;
// uniform sampler2D iP; // canvas to be blurred
uniform vec2 dl;
const float Pi = 6.28318530718;
float rnd(vec3 scale, float seed) {
return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
}
void main() {
// CIRCLE;
vec4 color1 = vec4(.1, .5, .3, 1.0);
vec4 color2 = vec4(0., 0., 0., 0.01);
vec2 shift = offset;
for (float t = 0.0; t <= spots; t++) {
float p = smoothstep(radius, radius + .0001, length(vUv - shift));
vec4 col = mix(color1, color2, vec4(p));
gl_FragColor += col;
shift.x += .05;
shift.y -= .01;
}
// BLUR
vec4 col = vec4(0.0);
float tt = 0.0;
float off = rnd(vec3(12.9898, 78.233, 151.7182), 0.0);
for (float t = -30.0; t <= 30.0; t++) {
float pc = (t + off - 0.5) / 30.0;
float w = 1.0 - abs(pc);
vec4 spl = texture2D(iP, vTexCoord + dl * pc);
spl.rgb *= spl.a;
col += spl * w;
tt += w;
}
gl_FragColor = col / tt;
gl_FragColor.rgb /= gl_FragColor.a + 0.00001;
}`;
I'm having trouble with the line
vec4 spl = texture2D(iP, vTexCoord + dl * pc);