Real-Time GLSL Voice-Assistant Animation (Three.js R&D)

Overview

A Siri-style virtual-assistant animation rendered in real time with Three.js and custom GLSL shaders. It shows organic, glowing “blob” forms reacting fluidly, presented as a reference/study piece for assistant motion design.

Why It Exists

Kept as an R&D reference for high-quality, GPU-driven WebGL animation. The code originates from an external author (a stretch assignment originally produced for a pharmaceutical company’s data-science team) and is retained here to study the technique, not as studio-authored client work.

What We Built

This is an evaluated/reference implementation rather than original studio output. It comprises an index.js Three.js scene, custom shaders (GlowShader.js, VLAShader.js) that render the blobs in real time via OpenGL/GLSL, an Objects/Utilities structure, and a tiny Express server.js to serve the static page locally. The takeaway studied here is how to combine Three.js geometry with hand-written fragment shaders and GPU rendering for smooth, performant motion.

Technologies & Approach

Three.js drives the 3D scene while the visual character comes from custom GLSL fragment shaders; rendering is offloaded to the GPU for smooth real-time motion. A minimal Express server simply hosts the assets.

Outcome / Impact

Serves as a capability touchstone for real-time WebGL/GLSL animation and voice-assistant visual identity, useful inspiration and technique reference for interactive frontend work.

Capabilities Demonstrated

• Real-time WebGL rendering with Three.js
• Custom GLSL shader authoring for organic, glowing forms
• Voice-assistant motion-design sensibility (studied as reference)