使用片段着色器创建光标轨迹

Question

我希望使用片段着色器绘制一个简单的鼠标轨迹，其外观类似于在处理中绘制以下内容（省略清除画布的步骤）。我无法理解实现这一目标所需的设置。

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

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

这是我基于这个shadertoy示例的徒劳方法：

1. 我在光标位置绘制一个简单的形状

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

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

2. 然后我的困惑开始了。我的想法是，我需要将上面的输出与包含我之前的通道的纹理混合。这至少会创建一条可靠的轨迹，尽管仅在距鼠标位置设定的距离内复制前一个通道。

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 );
}

#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 );
}

坦率地说，我对如何在没有数据的情况下进行绘制以及如何在概念层面上“堆栈”之前在 webgl 中的绘制调用感到有点困惑，而且我很难找到初学者文档。

如果有人能指出我的代码和思维有问题的地方，或者向我指出一些资源，我将不胜感激。

Answer 1

你需要做的是：

完成第一遍渲染（即在光标位置制作椭圆）后，将帧缓冲区的内容复制到不同的图像。

然后将此图像作为采样器输入传递到下一个通道。请注意该 Shadertoy 示例如何包含 2 个图像。