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

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 trig funcs 中的时间速度，以及降低它们的幅度。然而，我不确定如何做的是“捕获”要保留的波函数的特定部分。正如您在 gif 中看到的，它最终变得非常拥挤/聚集在一起。
我更喜欢平滑的波浪美学，但我似乎无法将其保持在那个水平。有什么帮助吗？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;

您所要求的内容具有艺术性，因此您当然可以根据自己的喜好调整这些常量。
fork fiddle : https://jsfiddle.net/3y28ha5v/