The intersection of classic animation aesthetics and modern web-based rendering engines has reached a new milestone with the release of Still, the third installment in Ming Jyun Hung’s real-time interactive astronaut web narrative. Built using WebGPU and leveraging advanced shader programming, the project combines the visual language of Katsuhiro Otomo’s iconic anime film Akira with traditional Japanese folding screens and ink-wash paintings. The debut of this technical showcase coincides with the inaugural Three.js Conference in Paris, marking a significant step forward for procedural graphics and real-time art direction on the web.
Background Context and Narrative Evolution
The journey of the unnamed astronaut began in earlier web experiments titled Drift and False Earth. In False Earth, the protagonist navigated an expansive procedural environment constrained by the limits of WebGL, eventually transitioning into WebGPU capabilities. Still captures a distinct narrative pause: the astronaut, exhausted from endless wandering across alien landscapes, collapses into a half-dreaming state where temporal boundaries dissolve. In this suspended reality, the boundaries between the protagonist’s suit, the surrounding flora, and the earth blur into a unified, continuous organic canvas.
Ming Jyun Hung designed the project to answer specific visual and technical questions. Rather than striving for absolute photorealism, the creator sought to emulate the psychological and aesthetic weight of hand-crafted Japanese media. This required translating the flat areas of color, distinct silhouettes, deliberate compositional structures, and woven material surfaces of classical art forms into a dynamic, real-time 3D pipeline.
Technical Architecture: Translating Traditional Art into Real-Time Shaders
Achieving a traditional Japanese print style within a WebGPU environment demanded custom graphics programming across multiple layers, including toon shading, atmospheric shadow mapping, and procedural texture generation.
Woodblock Toon Shading and Outlines
To maintain stylistic consistency between the astronaut and the surrounding flora, Hung implemented a specialized toon-shading model. The character’s suit utilizes a toon material applied to a textured albedo map, while flower petals and stems rely on a vertex-color material optimized for Vertex Animation Texture (VAT) instancing.
The lighting calculation evaluates the dot product between surface normals and light directions ($N cdot L$). This value is remapped between configurable thresholds and quantized using a floor function to maintain strict shadow and highlight bands. To prevent the hard edges from looking overly synthetic, world-space noise is introduced to the threshold calculations. Outline rendering is handled through an inverted hull method for the character model, whereas petal assets utilize a mask-based shader approach to efficiently process hundreds of instanced meshes without incurring performance penalties.
Ink-Wash Ground Shadows and Environmental Integration
Drawing direct inspiration from promotional posters for Akira—where characters sit on minimalist white backdrops grounded by soft, organic ink shadows—Hung developed a custom shadow-wash technique. The directional light’s shadow map is read at the ground level, inverted, and smoothed to create a broad gradient. An underlying noise field fractures the edges and introduces subtle variations in density, mimicking paint thinned across absorbent paper.
Furthermore, a secondary shadow map isolates the flora to cast shadows onto the astronaut without self-shadowing complications. This is achieved via a dedicated render layer and a zero-intensity light source that records depth data exclusively for the character model.
Procedural Silk Weave and Material Texturing
To replicate the tactile qualities of historical Japanese folding screens, such as works by Sakai Hōitsu and Ogata Kenzan, Hung applied a procedural silk-weave shader across the entire viewport rather than isolated objects. By mapping screen coordinates into thread cells, introducing periodic jitter to avoid mechanical uniformity, and blending warp and weft directions, the engine produces a realistic fabric grid. Slower noise functions overlay organic stains and blotches, darkening the frame contextually to enhance the illusion of an aged, painted screen.
Procedural Flora Generation and Lifecycle Management
The botanical elements within Still are constructed through a modular pipeline that governs individual plant lifecycles, growth stages, and spatial distribution.
Flower Animation and Shedding Mechanics
Flower blooming animations are derived from Blender Geometry Nodes converted into Vertex Animation Textures (VAT). To enrich the simulation, Hung integrated a petal-shedding mechanic inspired by teamLab’s interactive art installations. Vertices are grouped by connectivity to assign unique island identifiers and pivot points. As individual plants age, a randomized timing offset dictates when petals lift, fan outward, and detach, creating a natural ebb and flow of organic decay and renewal.
Stem and Leaf Morphogenesis
Unlike static assets, plant stems are procedurally generated via Catmull-Rom curves initialized slightly beneath the ground plane. These curves curve upward and laterally before being swept into dynamic tubes that taper toward the tips. A growth parameter spanning from zero to one controls the vertical expansion in both vertex and fragment shaders. Leaves are positioned along median curve sections, unfolding progressively as the growth front reaches their respective attachment points.
The overarching plant lifecycle follows a four-stage timeline: Delay, Grow, Keep, and Die. Instances operate independently with randomized durations, ensuring that the digital garden presents a heterogeneous mix of blossoming, mature, and decaying vegetation.
The Field: Density Fields, Hearts, and Clustered Growth
Distributing plants across a virtual landscape requires avoiding uniform, grid-like patterns. Hung engineered a probability-based density map governed by anatomical contact points on the astronaut—specifically the hip, left hand, left boot, and backpack. Elliptical falloffs and coordinate warping create irregular, organic masses with natural gaps.
Clump centers, referred to as "hearts," are distributed relative to these body anchors to dictate localized vegetation density. Flowers spawn outward from hearts within strict density constraints, ensuring that tighter clusters remain localized around the protagonist’s resting form. Data-driven instancing minimizes CPU overhead; static layout information is written once at initialization, while dynamic parameters such as growth, wind sway, and world offsets are passed to the GPU via a real-time DataTexture update cycle.
Generative Tendrils and Suit Integration
To establish a deeper narrative connection between the environment and the protagonist, Still features a generative tendril system. Tendrils act as intermediary structures bridging the ground flora and the astronaut’s pressurized suit.
Utilizing a hierarchical tree structure based on MeshBVH spatial queries and surface graphs, tendril routes originate from the ground, traverse contact points on the host geometry, and wrap dynamically around the character. These paths taper according to downstream load, while shared world-space noise fields impart natural swaying motions. A unified growth progression reveals the tendril simultaneously from its root in the soil to its terminus on the suit, completing the conceptual feedback loop between the resting astronaut and the encroaching garden.
Industry Implications and Future Outlook
The release of Still highlights the expanding capabilities of WebGPU in delivering high-fidelity, artistically sophisticated real-time applications directly within standard web browsers. By moving away from traditional WebGL constraints, developers can execute complex compute tasks, manage heavy instancing workloads, and deploy intricate shader-based art directions without requiring external client installations.
Technical demonstrations of this caliber underscore the shifting paradigm of web development, where browsers increasingly function as robust engines for interactive storytelling and generative art. As creator Ming Jyun Hung continues to explore the intersection of classical fine art techniques and modern GPU programming, projects like Still establish new benchmarks for performance, aesthetic execution, and narrative immersion in the digital space.
