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/三 Angular 函数中的时间速度，以及降低其幅度。然而，我不确定如何“捕获”要保留的波函数的特定部分。正如您在 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/