如何在 2D 上下文中 'unbunch' (co) 正弦波？

Question

作为参考，这是我用来测试东西的 jsfiddle： https://jsfiddle.net/roomyrooms/7L1n02fs/57/

这是一张展示我的问题的 gif： https://i.gyazo.com/a18e7fe19b76a93655a2cc89f166dd61.mp4

还有我的片段代码：

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;
varying vec2 vFilterCoord;

uniform sampler2D uSampler;
uniform float uTime;

void main() {
  vec4 ogCol = texture2D(uSampler, vTextureCoord);
  float dist = distance(vTextureCoord.xy, vec2(0.5));
  float mod = 0.0;
  float sinTime = sin(uTime*0.01*vTextureCoord.y) * 0.5;
  float cosTime = cos(uTime*0.01*vTextureCoord.x) * 0.5;
  float thresh = 0.25 + (sinTime*0.025) + (cosTime*0.025);
  if (dist <= thresh) {
    mod = 1.0;
  } else if (dist <= thresh+0.02) {
    mod = 100.0;
  }
  gl_FragColor = ogCol * mod;
}`

基本上，我发现了如何降低 WebGl/in 触发函数的时间速度，以及降低它们的振幅。然而，我不确定该怎么做，'capture' 要保留的波函数的特定部分。正如你在gif中看到的那样，它最终变得非常congested/bunched在一起。

我更喜欢平滑的波浪美学，但我似乎无法将其保持在那个水平。有什么帮助吗？4

PS: 我在这里使用 PIXIjs 作为中间人，但是片段着色器字符串中的所有内容都是纯 WebGl。

Answer 1

您需要添加与纹理坐标不成比例的时间分量。 + 而不是 *.

您可以尝试这样的操作：

  float k = uTime*0.01;
  float g = 40.0;
  float sinTime = sin(k + g*vTextureCoord.y) * 0.5;
  float cosTime = cos(k + g*vTextureCoord.x) * 0.5;

您的要求具有艺术性，因此您当然可以根据自己的喜好调整这些常量。

分叉 fiddle：https://jsfiddle.net/3y28ha5v/

如何在 2D 上下文中 'unbunch' (co) 正弦波？

How to 'unbunch' (co)sine waves in a 2D context?

javascript

glsl

webgl

pixi.js