マウスから湧き出る噴水パーティクル

update.vert

#version 300 es

/**

この頂点シェーダを呼び出すたびに、対応するパーティクルを1つだけ更新する

- in : システム内のパーティクルの現在の状態
- out: 指定された時間が経過した後のパーティクルの更新された状態を含むバッファを生成

**/

// 粒子がどこにあるか
layout (location = 0) in vec2 aPosition;
// 粒子の年齢（秒）
layout (location = 1) in float aAge;
// 粒子の寿命（秒）
layout (location = 2) in float aLife;
// 粒子がどこに向かうのか、どのくらいの速さで向かうのか
layout (location = 3) in vec2 aVelocity;

out vec2 vPosition;
out vec2 vVelocity;
out float vAge;
out float vLife;

// 最後の更新ステップから経過した秒数
uniform float uTimeDelta;
// ベクトル(1,0)と新生粒子の速度ベクトルとの間の角度の最小値と最大値
// 全方向のパーティクルを放出するには、Minを-PI、MaxをPIに設定する
uniform float uMinTheta;
uniform float uMaxTheta;
// 生まれたばかりのパーティクルに割り当てられる、速さの最小値と最大値
uniform float uMinSpeed;
uniform float uMaxSpeed;
// すべての粒子に常に影響する重力
uniform vec2 uGravity;
// 新しく生まれたすべての粒子が移動を開始する地点
uniform vec2 uOrigin;

// 符号なし整数の最大値
const uint UINT_MAX = 0xffffffffu;

// 算術積に使う大きな桁数の定数
uvec3 k = uvec3(0x456789abu, 0x6789ab45u, 0x89ab4567u);
// シフト数
uvec3 u = uvec3(1, 2, 3);

// 符号なし整数の2d => 2dハッシュ関数
uvec2 uhash22(uvec2 n){
  n ^= (n.yx << u.xy);
  n ^= (n.yx >> u.xy);
  n *= k.xy;
  n ^= (n.yx << u.xy);
  return n * k.xy;
}

// 浮動小数点数の2d => 2dハッシュ関数
vec2 hash22(vec2 b) {
  // ビット列を符号なし整数に変換
  uvec2 n = floatBitsToUint(b);
  // 値の正規化
  return vec2(uhash22(n)) / vec2(UINT_MAX);
}


void main(){
  if (aAge >= aLife) {
    /* パーティクルの寿命が尽きたので、古い粒子の代わりに新しい粒子を生成 */
    
    // 乱数生成
    vec2 noiseCoord = vec2(gl_VertexID % 512, gl_VertexID / 512);
    vec2 rand = hash22(noiseCoord);

    // 1つ目の乱数値rand.xに基づいてパーティクルの方向を決定
    // 方向は、そのベクトルがベクトル（1，0）となす角度θによって決定される。
    float theta = uMinTheta + rand.x * (uMaxTheta - uMinTheta);

    // 方向単位ベクトルのx成分、y成分を導出
    float x = cos(theta);
    float y = sin(theta);

    // 粒子を原点に配置
    vPosition = uOrigin;

    // 生まれたばかりなので0歳に設定
    vAge = 0.0;
    // 寿命を設定
    vLife = aLife;

    // 2つ目のランダム値rand.yを使って速度をランダム化
    vVelocity = vec2(x, y) * (uMinSpeed + rand.y * (uMaxSpeed - uMinSpeed));

  } else {
    /** 簡単なルールに従って、パラメータを更新 **/
    
    vPosition = aPosition + aVelocity * uTimeDelta;
    vAge = aAge + uTimeDelta;
    vLife = aLife;
    vVelocity = aVelocity + uGravity * uTimeDelta;
  }
}

update.frag

#version 300 es

precision highp float;

/**

すべてのフラグメントを破棄するno-op
(WebGL2では頂点のみのプログラムが許可されないため)

**/

out vec4 fragColor;

void main() {
  discard;
}

render.vert

#version 300 es

layout (location = 0) in vec2 aPosition;
layout (location = 1) in float aAge;
layout (location = 2) in float aLife;

out float vAge;
out float vLife;

void main() {
  vAge = aAge;
  vLife = aLife;

  // 古いほど小さくする
  gl_PointSize = 1.0 + 6.0 * (1.0 - aAge / aLife);
  
  gl_Position = vec4(aPosition, 0.0, 1.0);
}

render.frag

#version 300 es

precision highp float;

in float vAge;
in float vLife;

out vec4 fragColor;

// @see https://iquilezles.org/articles/palettes/
vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
  return a + b * cos(6.28318 * (c * t + d));
}

void main(){
  // どれくらい古いか
  float t = vAge / vLife;
  
  // いい感じのグラデーションを作る
  vec3 outColor = palette(
    t,
    vec3(0.5, 0.5, 0.5),
    vec3(0.5, 0.5, 0.5),
    vec3(1.0, 1.0, 1.0),
    vec3(0.0, 0.33, 0.67)
  );
  
  // 古いほど透明にする
  fragColor = vec4(outColor, 1.0 - t);
}

render.ts

import { SketchGl, type SketchConfig, type SketchFn } from "sketchgl"
import { InterleavedInitialData } from "sketchgl/utility"
import { Timer } from "sketchgl/interactive"
import { SwapTFRenderer } from "sketchgl/renderer"
import { Uniforms } from "sketchgl/program"
import { AliveParticlesSystem } from "@/lib/feature/particle/alive-particle"

import vertForUpdate from "./update.vert?raw"
import fragForUpdate from "./update.frag?raw"

import vertForRender from "./render.vert?raw"
import fragForRender from "./render.frag?raw"

const sketch: SketchFn = ({ gl, canvas }) => {
  const particlesCount = 10000
  const particleMinAge = 1.01
  const particleMaxAge = 1.15

  const initialData = new InterleavedInitialData(() => {
    const life = particleMinAge + Math.random() * (particleMaxAge - particleMinAge)
    return {
      vPosition: [0, 0],
      vAge: life + 1,
      vLife: life,
      vVelocity: [0, 0]
    }
  })
  const interleaved = initialData.generate({ count: particlesCount })
  // TODO: ライブラリでうまいこと提供する
  // TODO: interleaved.length / 6 を隠蔽する
  const particles = new AliveParticlesSystem(canvas, interleaved.length / 6)

  const uniformsFor = {
    update: new Uniforms(gl, ["uTimeDelta", "uGravity", "uOrigin", "uMinTheta", "uMaxTheta", "uMinSpeed", "uMaxSpeed"])
  }

  const renderer = new SwapTFRenderer(gl, initialData.keys)

  renderer.attachUpdateProgram(vertForUpdate, fragForUpdate)
  renderer.attachRenderProgram(vertForRender, fragForRender)

  renderer.registUpdateAttrib("vPosition", { location: 0, components: 2 })
  renderer.registUpdateAttrib("vAge", { location: 1, components: 1 })
  renderer.registUpdateAttrib("vLife", { location: 2, components: 1 })
  renderer.registUpdateAttrib("vVelocity", { location: 3, components: 2 })

  renderer.registRenderAttrib("aPosition", { location: 0, components: 2 })
  renderer.registRenderAttrib("aAge", { location: 1, components: 1 })
  renderer.registRenderAttrib("aLife", { location: 2, components: 1 })

  renderer.setup(new Float32Array(interleaved))

  uniformsFor.update.init(renderer.glProgramForUpdate)

  const timer = new Timer()
  timer.start()

  gl.enable(gl.BLEND)
  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)

  gl.clearColor(0.0, 0.0, 0.0, 1.0)

  return {
    drawOnFrame() {
      const deltaTime = timer.elapsed

      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
      gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)

      renderer.startUpdate()

      uniformsFor.update.float("uTimeDelta", deltaTime * 0.001)
      uniformsFor.update.fvector2("uGravity", particles.gravity)
      uniformsFor.update.fvector2("uOrigin", particles.origin)
      uniformsFor.update.float("uMinTheta", particles.minTheta)
      uniformsFor.update.float("uMaxTheta", particles.maxTheta)
      uniformsFor.update.float("uMinSpeed", particles.minSpeed)
      uniformsFor.update.float("uMaxSpeed", particles.maxSpeed)

      gl.drawArrays(gl.POINTS, 0, particles.alives)

      renderer.endUpdate()

      renderer.startRender()

      gl.drawArrays(gl.POINTS, 0, particles.alives)

      renderer.endRender()

      timer.update()
      particles.updateForNext(deltaTime)
    }
  }
}

export const onload = () => {
  const config: SketchConfig = {
    canvas: {
      el: "gl-canvas",
      fit: "square",
      autoResize: true
    }
  }
  SketchGl.init(config, sketch)
}