r3f-fluid-sim

Real-time 2D fluid velocity simulation for React Three Fiber (R3F) and Three.js. Use it to drive particles, flow fields, or any shader that samples a velocity texture.

Install

npm install r3f-fluid-sim

Peer dependencies:

• react
• react-dom
• three
• @react-three/fiber
• @react-three/drei

Requirements

• WebGL2 + float render targets (EXT_color_buffer_float on most hardware)

Basic usage

import { Canvas } from '@react-three/fiber'
import { FluidSimulation } from 'r3f-fluid-sim'

export function Scene() {
  return (
    <Canvas>
      <FluidSimulation>{/* children that sample the velocity */}</FluidSimulation>
    </Canvas>
  )
}

Sampling the velocity texture

import { useFrame } from '@react-three/fiber'
import { FluidSimulation, useFluid } from 'r3f-fluid-sim'
import * as THREE from 'three'
import { useMemo, useRef } from 'react'

const vertexShader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`

const fragmentShader = `
  uniform sampler2D uVelocity;
  varying vec2 vUv;
  void main() {
    vec2 vel = texture2D(uVelocity, vUv).xy;
    float mag = length(vel);
    gl_FragColor = vec4(vec3(mag), 1.0);
  }
`

function VelocityFieldPlane() {
  const { velocityFBO } = useFluid()
  const materialRef = useRef<THREE.ShaderMaterial>(null!)
  const uniforms = useMemo(
    () => ({ uVelocity: { value: null as THREE.Texture | null } }),
    []
  )

  useFrame(() => {
    if (velocityFBO && materialRef.current) {
      materialRef.current.uniforms.uVelocity.value = velocityFBO.read.texture
    }
  })

  return (
    <mesh>
      <planeGeometry args={[2, 2]} />
      <shaderMaterial
        ref={materialRef}
        uniforms={uniforms}
        vertexShader={vertexShader}
        fragmentShader={fragmentShader}
      />
    </mesh>
  )
}

export function Scene() {
  return (
    <Canvas>
      <FluidSimulation>
        <VelocityFieldPlane />
      </FluidSimulation>
    </Canvas>
  )
}

API

FluidSimulation props (defaults):

• size (128)
• viscosity (0.05)
• viscousIterations (20)
• pressureIterations (20)
• dt (0.01)
• advectionDecay (0.98)
• forceRadius (0.0025)
• forceStrength (1.0)
• forceClamp (3.0)
• bfecc (true)
• interaction (true)
• pointer (THREE.Vector2 in NDC, optional)

useFluid() returns:

• velocityFBO (double FBO)
• fboSize (number)

License

MIT