Three.js Shader Deformation

A Three.js application that demonstrates real-time mesh deformation using vertex shaders. Features a high-resolution sphere that gets deformed by moving points in 3D space.

Features

• High-resolution sphere geometry (128x64 subdivisions)
• Real-time vertex shader deformation - all computations done on GPU
• Moving deformation points with organic motion patterns
• Distance-based influence culling - points beyond threshold don't affect the mesh
• Smooth easing curves using smoothstep interpolation
• Interactive controls for adjusting parameters
• Material UI integration for responsive controls

Technical Implementation

Vertex Shader Deformation

• All deformation calculations happen in the vertex shader for optimal performance
• Uses distance-based influence with smoothstep easing for natural deformation curves
• Supports up to 10 simultaneous deformation points
• Automatic culling of points beyond the influence distance

Moving Points System

• 4 points moving in orbital patterns with procedural noise
• Each point has individual radius and motion characteristics
• Real-time position updates fed to the shader uniforms

Distance Culling

• Points beyond maxInfluenceDistance are filtered out before being passed to the shader
• Prevents unnecessary computations and maintains consistent performance

Running the Project

npm install
npm run dev

Open http://localhost:3000 to view the application.

Controls

• Deformation Strength: Controls how much points pull the mesh (0-3.0, default: 1.2)
• Max Influence Distance: Sets the radius of effect for each point (0.5-8.0, default: 3.5)
• Orbit Radius: Controls how far points move from center (1-6, default: 2.8)
• Point Movement Speed: Adjusts the speed of point motion (0-4x, default: 1.0x)
• Number of Points: How many deformation points to generate (1-8, default: 4)
• Mouse: Orbit, pan, and zoom the camera

Visual Features

• Color-coded deformation: Sphere color transitions from blue (undeformed) to pink/red (highly deformed)
• Enhanced lighting: Multiple light sources with rim lighting for better visual definition
• Improved normal calculation: Better lighting response on deformed surfaces
• Dramatic deformation curves: Enhanced easing functions for more pronounced effects

Technical Stack

• Three.js - 3D rendering
• React Three Fiber - React bindings for Three.js
• Material UI - UI components
• TypeScript - Type safety
• Vite - Build tool and dev server