javascript - GPU 上的 Three.js Verlet 布料模拟 : Can't follow my logic for finding bug

Question

我在理解我尝试使用 Three.js 和 yomboprime 的 GPUComputationRenderer 实现的逻辑时遇到了问题。

( https://github.com/yomboprime/GPGPU-threejs-demos/blob/gh-pages/js/GPUComputationRenderer.js )

我想做一个简单的 Verlet-Cloth-Simulation。这是我已经能够实现的逻辑(简短版):

1) Position-Fragment-Shader:此着色器采用旧位置纹理和当前位置纹理并计算新位置，如下所示:

vec3 position = texture2D( texturePosition, uv ).xyz;
vec3 oldPosition = texture2D( textureOldPosition, uv ).xyz;
position =  (position * 2.0 - oldPosition + acceleration * delta *delta )

t = checkConstraints(position);
position += t;
gl_FragColor = vec4(position,1);

2) Old-Position-Shader 这个着色器只是保存当前位置，并为下一步保存。

vec3 position = texture2D( texturePosition, uv ).xyz;
gl_FragColor = vec4(position,1);

这工作正常，但使用该模式，不可能在一个步骤中多次计算约束，因为每个顶点都是单独观察的，并且看不到其他像素在第一次迭代中所做的位置变化。

我想做的是将约束与 verlet 分开。目前它看起来像这样:

1)位置着色器(texturePosition)

vec3 position = texture2D( textureConstraints, uv ).xyz;
vec3 oldPosition = texture2D( textureOldPosition, uv ).xyz;

position =  (position * 2.0 - oldPosition + acceleration * delta *delta );
gl_FragColor = vec4(position, 1 );

2)约束着色器(textureConstraints)

vec3 position = texture2D( texturePosition, uv ).xyz;

t = checkConstraints(position);
    position += t;
gl_FragColor = vec4(position,1);

3) 旧位置着色器 (textureOldPosition)

vec3 position = texture2D( textureConstraints, uv ).xyz;

gl_FragColor = vec4(position,1);

这个逻辑不起作用，即使我根本不计算约束，只是像以前一样传递值。一旦在位置着色器中添加了一些加速度，位置值就会爆炸到无处。

我做错了什么？

Answer 1

这个例子不是verlet cloth，但我认为基本前提可能对你有帮助。我有一个 fiddle它使用 GPUComputationRender 在点云上完成一些 Spring 物理。我认为您可以根据自己的需要对其进行调整。

您需要的是更多信息。你需要固定引用布料的原始形状(就像它是一 block 平板)以及当前施加在任何这些点上的力(通过重力+风+结构完整性或其他任何方式)，然后给你该点的当前位置。那些对其原始形状的点引用与力相结合，将为您的布料留下内存，而不是像过去那样四散开来。

例如，这是我的 Spring 物理着色器，GPUComputationRenderer 使用它来计算可视化中的点位置。在这种情况下，tOffsets 是使云永久内存其原始形状的坐标 - 它们永远不会改变。它是我在程序开始时添加到制服中的DataTexture。 mass、springConstant、gravity 和 damping 等各种力也保持一致并存在于着色器中。 tPositions 是变化的 vec4 坐标(其中两个坐标记录当前位置，另外两个记录当前速度):

<script id="position_fragment_shader" type="x-shader/x-fragment">   
  // This shader handles only the math to move the various points. Adding the sprites and point opacity comes in the following shader.      
  uniform sampler2D tOffsets; 
  uniform float uTime;

  varying vec2 vUv;

  float hash(float n) { return fract(sin(n) * 1e4); }

  float noise(float x) {
      float i = floor(x);
      float f = fract(x);
      float u = f * f * (3.0 - 2.0 * f);
      return mix(hash(i), hash(i + 1.0), u);
  }

  void main() {
      vec2 uv = gl_FragCoord.xy / resolution.xy;

       float damping = 0.98;

       vec4 nowPos = texture2D( tPositions, uv ).xyzw;
       vec4 offsets = texture2D( tOffsets, uv ).xyzw;
       vec2 velocity = vec2(nowPos.z, nowPos.w);

       float anchorHeight = 100.0;
       float yAnchor = anchorHeight;
       vec2 anchor = vec2( -(uTime * 50.0) + offsets.x, yAnchor + (noise(uTime) * 30.0) );

       // Newton's law: F = M * A
       float mass = 24.0;
       vec2 acceleration = vec2(0.0, 0.0);

       // 1. apply gravity's force:
       vec2 gravity = vec2(0.0, 2.0);
       gravity /= mass;
     acceleration += gravity;


       // 2. apply the spring force
       float restLength = yAnchor - offsets.y;
       float springConstant = 0.2;

       // Vector pointing from anchor to point position
       vec2 springForce = vec2(nowPos.x - anchor.x, nowPos.y - anchor.y);
       // length of the vector
       float distance = length( springForce );
       // stretch is the difference between the current distance and restLength
       float stretch =  distance - restLength;

       // Calculate springForce according to Hooke's Law
       springForce = normalize(springForce);
       springForce *= (springConstant * stretch);

       springForce /= mass;
       acceleration += springForce;

       velocity += acceleration;
       velocity *= damping;
       vec2 newPosition = vec2(nowPos.x - velocity.x, nowPos.y - velocity.y);
       // Write new position out
       gl_FragColor = vec4(newPosition.x, newPosition.y, velocity.x, velocity.y);
   }
</script>