Morphing Geometry
Overview
Custom vertex shaders let you manipulate every vertex of a 3D mesh on the GPU. This showcase morphs between three geometries — icosahedron, torus knot, and sphere — while displacing vertices with simplex noise and reacting to mouse input. The result is an organic, breathing shape that feels alive.
Technical Approach
Shape Morphing
Three geometries are loaded and their vertex positions resampled to a common vertex count. The vertex shader interpolates between position sets using mix(), cycling through A → B → C → A over time. The morph speed is controlled by a time-based uniform.
Noise Displacement
A 3D simplex noise function runs in the vertex shader, offsetting each vertex along its normal. Two octaves of noise at different frequencies and speeds create layered organic movement — a slow, large-scale breathing combined with faster surface ripples.
Mouse Interaction
The cursor position is projected into 3D space via raycasting and passed to the vertex shader as a uniform. Vertices within a radius of the mouse point receive additional displacement, creating a magnetic pull effect that follows the cursor.
Real-World Applications
AI & Machine Learning Products
Companies like OpenAI and Anthropic use abstract, morphing 3D shapes to represent intelligence and dynamism. The organic movement suggests something alive and evolving.
Tech Company Hero Sections
SaaS companies use morphing geometry as a visually striking hero background that conveys innovation without a single word. It sets the tone before the visitor reads anything.
Data Visualization
Abstract 3D shapes that morph based on real data (stock prices, user activity, system load) turn numbers into spatial experiences that are intuitive to read.
Event & Conference Sites
Tech conferences use generative 3D visuals as a brand identity element — unique every visit, always on-brand, impossible to screenshot and replicate.