通用 GPU

在3D扩展中，除了后期处理通道外，我们还可以给layer加通用GPU通道，这样可以更灵活地利用GPU的高性能实现各种效果。

  1. const vertex = /* glsl */ `
  2.     precision highp float;
  4.     attribute vec2 coords;
  5.     attribute vec4 random;
  7.     uniform float uTime;
  8.     uniform sampler2D tPosition;
  9.     uniform sampler2D tVelocity;
  11.     varying vec4 vRandom;
  12.     varying vec4 vVelocity;
  14.     void main() {
  15.         vRandom = random;
  17.         // Get position from texture, rather than attribute
  18.         vec4 position = texture2D(tPosition, coords);
  19.         vVelocity = texture2D(tVelocity, coords);
  21.         // Add some subtle random oscillating so it never fully stops
  22.         position.xy += sin(vec2(uTime) * vRandom.wy + vRandom.xz * 6.28) * vRandom.zy * 0.1;
  24.         gl_Position = vec4(position.xy, 0, 1);
  25.         gl_PointSize = mix(2.0, 15.0, vRandom.x);
  27.         // Make bigger while moving
  28.         gl_PointSize *= 1.0 + min(1.0, length(vVelocity.xy));
  30.     }
  31. `;
  33. const fragment = /* glsl */ `
  34.     precision highp float;
  36.     varying vec4 vRandom;
  37.     varying vec4 vVelocity;
  39.     void main() {
  41.         // Circle shape
  42.         if (step(0.5, length(gl_PointCoord.xy - 0.5)) > 0.0) discard;
  44.         // Random colour
  45.         vec3 color = vec3(vRandom.zy, 1.0) * mix(0.7, 2.0, vRandom.w);
  47.         // Fade to white when not moving, with an ease off curve
  48.         gl_FragColor.rgb = mix(vec3(1), color, 1.0 - pow(1.0 - smoothstep(0.0, 0.7, length(vVelocity.xy)), 2.0));
  50.         gl_FragColor.a = 1.0;
  51.     }
  52. `;
  54. const positionFragment = /* glsl */ `
  55.     precision highp float;
  57.     uniform float uTime;
  58.     uniform sampler2D tVelocity;
  60.     // Default texture uniform for GPGPU pass is 'tMap'.
  61.     // Can use the textureUniform parameter to update.
  62.     uniform sampler2D tMap;
  64.     varying vec2 vUv;
  66.     void main() {
  67.         vec4 position = texture2D(tMap, vUv);
  68.         vec4 velocity = texture2D(tVelocity, vUv);
  70.         position.xy += velocity.xy * 0.01;
  72.         // Keep in bounds
  73.         vec2 limits = vec2(1);
  74.         position.xy += (1.0 - step(-limits.xy, position.xy)) * limits.xy * 2.0;
  75.         position.xy -= step(limits.xy, position.xy) * limits.xy * 2.0;
  77.         gl_FragColor = position;
  78.     }
  79. `;
  81. const velocityFragment = /* glsl */ `
  82.     precision highp float;
  84.     uniform float uTime;
  85.     uniform sampler2D tPosition;
  86.     uniform sampler2D tMap;
  87.     uniform vec2 uMouse;
  89.     varying vec2 vUv;
  91.     void main() {
  92.         vec4 position = texture2D(tPosition, vUv);
  93.         vec4 velocity = texture2D(tMap, vUv);
  95.         // Repulsion from mouse
  96.         vec2 toMouse = position.xy - uMouse;
  97.         float strength = smoothstep(0.3, 0.0, length(toMouse));
  98.         velocity.xy += strength * normalize(toMouse) * 0.5;
  100.         // Friction
  101.         velocity.xy *= 0.98;
  103.         gl_FragColor = velocity;
  104.     }
  105. `;
  107. const {Scene} = spritejs;
  108. const {Vec2, GPGPU, Geometry, Mesh3d} = spritejs.ext3d;
  109. const container = document.getElementById('container');
  110. const scene = new Scene({
  111.   container,
  112.   displayRatio: 2,
  113. });
  114. const layer = scene.layer3d('fglayer', {
  115.   camera: {
  116.     fov: 35,
  117.   },
  118.   ambientColor: 'white',
  119. });
  121. layer.camera.attributes.pos = [0, 0, 5];
  123. // Common uniforms
  124. const time = {value: 0};
  125. const mouse = {value: new Vec2()};
  127. // The number of particles will determine how large the GPGPU textures are,
  128. // and therefore how expensive the GPU calculations will be.
  129. // Below I'm using 65536 to use every pixel of a 256x256 texture. If I used one more (65537),
  130. // it would need to use a 512x512 texture - the GPU would then perform calculations for each pixel,
  131. // meaning that nearly 3/4 of the texture (196607 pixels) would be redundant.
  132. const numParticles = 65536;
  134. // Create the initial data arrays for position and velocity. 4 values for RGBA channels in texture.
  135. const initialPositionData = new Float32Array(numParticles * 4);
  136. const initialVelocityData = new Float32Array(numParticles * 4);
  138. // Random to be used as regular static attribute
  139. const random = new Float32Array(numParticles * 4);
  140. for(let i = 0; i < numParticles; i++) {
  141.   initialPositionData.set([
  142.     (Math.random() - 0.5) * 2.0,
  143.     (Math.random() - 0.5) * 2.0,
  144.     0, // the Green and Alpha channels go unused in this example, however I set
  145.     1, // unused Alpha to 1 so that texture is visible in WebGL debuggers
  146.   ], i * 4);
  147.   initialVelocityData.set([0, 0, 0, 1], i * 4);
  148.   random.set([
  149.     Math.random(),
  150.     Math.random(),
  151.     Math.random(),
  152.     Math.random(),
  153.   ], i * 4);
  154. }
  156. const gl = layer.gl;
  158. // Initialise the GPGPU classes, creating the FBOs and corresponding texture coordinates
  159. const position = new GPGPU(gl, {data: initialPositionData});
  160. const velocity = new GPGPU(gl, {data: initialVelocityData});
  162. // Add the simulation shaders as passes to each GPGPU class
  163. position.addPass({
  164.   fragment: positionFragment,
  165.   uniforms: {
  166.     uTime: time,
  167.     tVelocity: velocity.uniform,
  168.   },
  169. });
  170. velocity.addPass({
  171.   fragment: velocityFragment,
  172.   uniforms: {
  173.     uTime: time,
  174.     uMouse: mouse,
  175.     tPosition: position.uniform,
  176.   },
  177. });
  179. // Now we can create our geometry, using the coordinates from above.
  180. // We don't use the velocity or position data as attributes,
  181. // instead we will get this from the FBO textures in the shader.
  182. const model = new Geometry(gl, {
  183.   random: {size: 4, data: random},
  185.   // Could use either position or velocity coords, as they are the same
  186.   coords: {size: 2, data: position.coords},
  187. });
  189. const program = layer.createProgram({
  190.   vertex,
  191.   fragment,
  192.   uniforms: {
  193.     uTime: time,
  194.     tPosition: position.uniform,
  195.     tVelocity: velocity.uniform,
  196.   },
  197. });
  199. const points = new Mesh3d(program, {model, mode: gl.POINTS});
  201. // Add handlers to get mouse position
  202. const isTouchCapable = 'ontouchstart' in window;
  203. if(isTouchCapable) {
  204.   window.addEventListener('touchstart', updateMouse, false);
  205.   window.addEventListener('touchmove', updateMouse, false);
  206. } else {
  207.   window.addEventListener('mousemove', updateMouse, false);
  208. }
  210. function updateMouse(e) {
  211.   if(e.changedTouches && e.changedTouches.length) {
  212.     e.x = e.changedTouches[0].pageX;
  213.     e.y = e.changedTouches[0].pageY;
  214.   }
  215.   if(e.x === undefined) {
  216.     e.x = e.pageX;
  217.     e.y = e.pageY;
  218.   }
  220.   // Get mouse value in -1 to 1 range, with y flipped
  221.   mouse.value.set(
  222.     (e.x / gl.renderer.width) * 2 - 1,
  223.     (1.0 - e.y / gl.renderer.height) * 2 - 1
  224.   );
  225. }
  227. layer.append(points);
  229. layer.tick((t) => {
  230.   time.value = t * 0.001;
  232.   // Update the GPGPU classes
  233.   velocity.render();
  234.   position.render();
  235. });