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

【问题标题】：Creating cursor trail with fragment shader使用片段着色器创建光标轨迹
【发布时间】：2021-12-20 05:41:36
【问题描述】：

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

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

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

这是我徒劳的方法，基于此shadertoy example：

我在光标位置画了一个简单的形状

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

#shader pass 2
void main(void) {
    fragColor = texture(prevPass,inData.v_texcoord);
}

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

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

【问题讨论】：

标签： glsl webgl webgl2

【解决方案1】：

你需要做的是：

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

然后将此图像作为采样器输入传递给下一次传递。请注意，shadertoy 示例是如何生成 2 张图像的。

【讨论】：

【解决方案2】：

您可以使用以下代码制作简单的 HTML/Javascript 跟踪：

<!DOCTYPE html>
<style>
  .trail { /* className for trail elements */
    position: absolute;
    height: 6px; width: 6px;
    border-radius: 3px;
    background: teal;
  }
  body {
    height: 300px;
  }
</style>

<body>
  <script>
    document.body.addEventListener("mousemove", moved);

    // create, style, append trail elements
    var trailElements = [];
    var numOfTrailElements = 10;
    for (var i = 0; i < numOfTrailElements; i++) {
      var element = document.createElement('div');
      element.className = 'trail';
      document.body.appendChild(element);
      trailElements.push(element);
    }

    // when mouse moves, display trail elements in wake of mouse pointer
    var counter = 0; // current trail element index
    function moved(event) {              
      trailElements[counter].style.left = event.clientX + 'px';
      trailElements[counter].style.top = event.clientY + 'px';

      if (counter == 9) {
        counter = 0;
      } else {
          counter += 1; 
      }
    }
  </script>
</body>


<!doctype html>

<style>
  .trail { /* className for the trail elements */
    position: absolute;
    height: 6px; width: 6px;
    border-radius: 3px;
    background: black;
  }
  body {
    height: 300px;
  }
</style>

<body>
<script>
  var dots = [];
  for (var i = 0; i < 12; i++) {
    var node = document.createElement("div");
    node.className = "trail";
    document.body.appendChild(node);
    dots.push(node);
  }
  var currentDot = 0;
  
  addEventListener("mousemove", function(event) {
    var dot = dots[currentDot];
    dot.style.left = (event.pageX - 3) + "px";
    dot.style.top = (event.pageY - 3) + "px";
    currentDot = (currentDot + 1) % dots.length;
  });
</script>
</body>

【讨论】：

这可能不是 OP 所要求的。 OP 可能想使用 GLSL 编写着色器。