glsl – Cursor trail with fragment shader


I wish to draw a simple mouse trail using fragment shaders, similar in appearance to drawing the following in processing (omitting the step of clearing the canvas). I cannot wrap my head around the setup necessary to achieve this.

processing reference

// processing reference using cursor as paintbrush
void setup () {
  size(400, 400);
  background(255);
  fill(0);
}

void draw () {
  ellipse(mouseX, mouseY, 20, 20);
}

Here’s my vain approach, based on this shadertoy example:

  1. I draw a simple shape at cursor position
void main(void) {
    float pct = 0.0;
    pct = distance(inData.v_texcoord.xy, vec2(mouse.x, 1.-mouse.y)) * SIZE;
    pct = 1.0 - pct - BRIGHTNESS;
    vec3 blob = vec3(pct);
 
    fragColor = vec4( blob, 1.0 );
}
  1. Then my confusion begins. My thinking goes that I’d need to mix the output above with a texture containing my previous pass. This creates at least a solid trail, albeit copying the previous pass only within a set distance from the mouse position.
#shader pass 1
void main(void) {
    float pct = 0.0;
    pct = distance(inData.v_texcoord.xy, vec2(mouse.x, 1.-mouse.y)) * SIZE;
    pct = 1.0 - pct - BRIGHTNESS;
    vec3 blob = vec3(pct);
    
    vec3 stack = texture(prevPass, inData.v_texcoord.xy).xyz;
    
    fragColor = vec4( blob*.1 + (stack*2.), 1.0 );
}
#shader pass 2
void main(void) {
    fragColor = texture(prevPass,inData.v_texcoord);
}

enter image description here

Frankly, I’m a little bit in the blue about how to draw without data and “stack” previous draw calls in webgl, and I’m having a hard time finding beginner documentation.

I would be grateful if someone could point me towards where my code and thinking becomes faulty, or point me towards some resources.



Source link

More To Explore

Share on facebook
Share on twitter
Share on linkedin
Share on email