React Particle Physics

A high-performance WebGL physics engine for React Three Fiber that converts images into interactive particle clouds and topographic lines.

Features 60fps performance on mobile, GPU-accelerated interaction, ping-pong fluid trails, and zero React overhead on the main render loop.

Installation

npm install react-particle-physics three @react-three/fiber

Usage

import { Canvas } from '@react-three/fiber';
import { ParticleSystem } from 'react-particle-physics';

export default function App() {
  return (
    <Canvas camera={{ position: [0, 0, 2.5] }}>
      <ParticleSystem 
        image="/path/to/logo.png"
        particleCount={50000}
        interactionRadius={0.25}
        sampleMode="alpha" 
      />
    </Canvas>
  );
}

Available Components

<ParticleSystem />

Generates a THREE.Points particle cloud mapped to the brightness/alpha data of an input image.

<LineSystem />

Generates a THREE.LineSegments topographic heightmap based on the luminance of the input image.

sampleLogoToParticles

Headless utility to parse an image via 2D Canvas context and map it to Float32Arrays for injection into WebGL BufferGeometries.