01. Single-Draw-Call GPU Instancing & Aero-Elastic Wing Kinematics
Rather than creating hundreds of individual THREE.Mesh objects on the CPU, AuraWing 3D binds up to 800 butterfly instances to a single subdivided PlaneGeometry(2.2, 1.8, 28, 28) via THREE.InstancedMesh. Five custom InstancedBufferAttribute streams supply each butterfly with unique phase offsets, wing-flap frequencies, scale factors, iridescent color seeds, and 3D orbital parameters.
Inside the custom GLSL Vertex Shader, the butterfly wing silhouette is articulated around the central thorax hinge (abs(uv.x - 0.5)). Secondary aero-elastic drag and torsional flex bend the outer forewing tips and scalloped hindwing margins with a phase lag proportional to radial span, reproducing the supple membrane dynamics of living Lepidoptera wings in flight.
02. Voronoi Microfacet Glitter Optics & Thin-Film Iridescence
Each butterfly wing is sculpted mathematically in UV space with curved forewings, scalloped swallowtail hindwings, a segmented metallic thorax, and branching venation. In the GLSL Fragment Shader, a dual-layer cellular hash lattice (95x and 210x UV frequency) simulates thousands of microscopic metallic glitter flakes embedded in the wing scales.
Every microfacet cell generates a stochastic 3D normal vector evaluated against the camera half-vector using a high-exponent specular lobe (pow(max(dot(microNormal, halfVector), 0.0), 96.0)). Paired with Schlick’s Fresnel thin-film iridescence, ACESFilmicToneMapping, and selective UnrealBloomPass post-processing, individual glitter grains flash and twinkle intensely as each wing catches the studio key light.
03. Zero-Asset Procedural Web Audio Synthesis
The custom ButterflyAudioEngine synthesizes all soundscapes 100% procedurally via the native Web Audio API with zero external audio files:
- Spatial Wing Flutter & Breeze: Pink noise buffers routed through stereo-panned bandpass filters modulated by LFOs locked to the swarm’s wing-flap speed and cursor proximity.
- Lydian Crystal Shimmer Chimes: Harmonic sine and triangle oscillators tuned to each preset’s 6-note Lydian/Pentatonic chord, routed through a stereo feedback delay network when swirling the cursor or triggering a Glitter Burst.
- Liquid-Metal Wave Swell: Warm sub-harmonic ocean wave pad synchronized with the Gerstner/FBM liquid-metal floor shader below.
04. Frequently Asked Questions (Technical & Sanctuary FAQ)
How does the 3D butterfly swarm render 800 detailed butterflies at 60 FPS in a single draw call?
By combining a single THREE.InstancedMesh over a subdivided 28×28 plane with per-instance GPU attributes, all 3D curl-orbital paths, tornado vortex funnels, and aero-elastic wing deformations execute in parallel inside the vertex shader.
How are the metallic microfacet glitter sparkles and thin-film iridescence calculated without external textures?
In the GLSL fragment shader, high-density procedural cellular hash lattices generate thousands of virtual microscopic glitter flakes across each wing. Each flake perturbs the surface normal and evaluates a tight specular power lobe against the camera half-vector, causing individual sparkles to flash dynamically as the wing flaps.
How is the spatial butterfly flutter and crystal shimmer audio generated without MP3 files?
The custom ButterflyAudioEngine synthesizes all sound in real time using the native Web Audio API. Organic wing flutter and breeze textures are created by routing procedural Pink Noise through stereo-panned bandpass filters modulated at the swarm's wing-flap frequency, accompanied by Lydian harmonic oscillators and a stereo feedback delay network.
How do the 5 Interactive Experience Modes alter swarm kinetics and optics?
Switching modes smoothly damps shader uniforms across color palettes, Fresnel iridescence power, vein bioluminescence, floor wave amplitude, 3D spiral tornado kinematics (Starlight Vortex), and interactive 3D cursor attraction (Whispering Sanctuary).
Can I interact directly with the butterflies and cast glitter bursts in 3D space?
Yes. Moving your cursor or finger projects a 3D raycast target into the swarm volume that attracts nearby butterflies and trails 4,000 shimmering glitter dust motes. Clicking or pressing Spacebar triggers a radial glitter burst and harmonic chime cascade.
How do I activate Fullscreen Zen Mode or hide interface controls?
Press H on your keyboard or click 'Fullscreen Zen Mode' in the top HUD / 'Hide Controls' in the bottom dock to completely hide all HUD elements. A subtle restore pill appears at the bottom-right corner to exit Zen Mode at any time.
Does AuraWing 3D require downloads, installations, or an account?
No. AuraWing 3D runs 100% client-side in pure HTML5 Canvas, WebGL2, and Web Audio directly inside modern mobile and desktop browsers with zero downloads or accounts required.