From Stone to Sculpture: Building an Interactive 3D Narrative for a Classic Statue

Moving from Product Reviews to Technical Practice

With the rapid advancement of generative AI and 3D visualization capabilities, an increasing number of developers are exploring a new direction: moving beyond static pages or simple 3D showcases to create digital experiences with complete narratives, continuous interaction, and real model-driven rendering.

This article does not review a specific AI programming tool or platform. Instead, it abstracts the problem into a more universal technical task: how to build an interactive web page that demonstrates the “birth process of a sculpture” for general audiences, using publicly available 3D scan models. The core of this task is not model display, but helping viewers understand carving through a “subtractive” process: how excess material is removed from a block of stone to gradually reveal the final form.

This task is highly representative. It simultaneously involves 3D data processing, front-end rendering, interaction state design, narrative expression, and mobile adaptation. Completing such a project effectively tests a team’s cross-stack collaboration capabilities and engineering control over display-oriented 3D applications.

Task Breakdown: Interactive Expression from Stone to Statue

Goals and Constraints

The core problem to solve is: how to interactively represent the process of gradually removing material from a rough stone block to finally obtain a statue. Here, “removal” is the essence of carving, but in a digital 3D environment, physical carving logic cannot be directly replicated.

Therefore, the technical implementation must satisfy the following constraints:

• The visual effect must clearly present a step-by-step “stripping” or “revealing” process.
• Interaction must be simple enough for ordinary viewers to understand quickly.
• There must be a narrative rhythm, not a one-time display of the result.
• The experience must work on both desktop and mobile browsers.
• Real scanned models should be used whenever possible to avoid the distortion of purely schematic modeling.

Model Sources and Preprocessing

Projects of this type typically use public 3D scan files of statues, such as high-resolution mesh data released by museums or cultural institutions. Common formats include STL and OBJ. Scanned models often have the following issues:

• The polygon count is too high for smooth real-time rendering in browsers.
• The model contains holes, duplicate faces, or non-manifold edges.
• The coordinate system and scale do not fit the front-end scene.

The first step is preprocessing. A recommended workflow is:

1. Format Conversion
   Convert STL files to glTF or GLB, which are easier for front-end loading and decoding.

2. Mesh Simplification
   Use mesh decimation algorithms to reduce the high-poly model to a reasonable face count. The goal is to keep the silhouette recognizable while bringing vertex count within the limits of mobile devices.

3. Model Repair
   Fill holes generated during scanning and unify normal directions. If the model has duplicate vertices or non-manifold structures, clean them up first.

4. Size Normalization
   Scale the model to a unified bounding box to facilitate camera framing and subsequent interaction calculations.

5. Multi-Level Model Preparation
   To express the progression “from rough to fine,” prepare multiple versions with different levels of detail, or use the same model with material-based clipping to control visible regions.

The preprocessing stage does not require specific paid software; common 3D modeling and processing toolchains are sufficient.

Interaction Design: Making Subtraction Perceptible

Main Approaches for Subtractive Representation

There are several implementation routes for expressing “gradually reducing stone” in the browser:

Approach 1: Boolean Operations
Construct a combination of a rough stone block and the carved model, then update the block shape through continuous Boolean subtraction operations. This approach is closest to actual carving logic, but real-time Boolean operations in browsers are computationally expensive, and meshes are prone to broken surfaces.

Approach 2: Volumetric Fading
Represent the stone as a large number of small meshes or particles, progressively hiding parts according to carving progress. This approach works well for expressing loose stone debris but struggles to form a smooth solid surface.

Approach 3: Slicing / Layer Clipping
Slice the statue model along one axis and display it layer by layer as progress advances. This approach is logically simple and performance-stable, suitable for showing “gradually appearing from base to head,” but the physical sense of a “surrounding stone block” is weaker.

Approach 4: Outer Shell Stripping
First construct an outer envelope of rough stone, place the statue inside it, and use shaders or geometry masks to progressively strip the shell away. This approach is visually intuitive, performance-acceptable, and currently used in many digital exhibition projects.

In practice, projects can adopt a combined strategy. For example, use shell stripping as the primary visual, add particles or fragments as peeling feedback, and use slicing as the low-performance fallback mode on mobile devices.

Narrative Rhythm and Interaction Nodes

Relying solely on a “shell removal” action does not constitute a complete narrative. A more reasonable approach is to break the interaction into several stages:

• Introduction: Dark scene, single point light source; the audience sees a complete stone block.
• Initial Action: The audience presses a button, triggering the first chisel strike.
• Progression: The stone continuously peels away, and the statue’s silhouette gradually appears.
• Reversal Node: The audience tries to undo an action, but the system displays a message that carving is irreversible.
• Completion: The stone is fully removed, the statue is fully revealed, and the camera pulls back or orbits around it.

The “irreversibility” aspect can serve as an important narrative point. It is not merely an interaction restriction, but a way to communicate the physical nature of carving to the audience in a digital environment: once material is removed, it cannot be restored. This type of design allows viewers to build understanding through action, rather than just watching an animation.

3D Scene and Rendering Implementation

Scene Layout

A dark environment is recommended to reduce distractions and focus attention on the stone. A basic scene can include:

• A ground plane.
• Low-intensity ambient lighting.
• One or two directional or spot lights to emphasize the stone’s silhouette.
• A camera that slowly rotates or is controlled by user dragging.

If using glTF, the model, lights, and camera can be organized through the node hierarchy. During scene initialization, first load the rough stone block, then hide the inner statue until interaction triggers its display.

Using Shaders to Control Shell Stripping

Using the shell stripping approach as an example, the core logic is to pass the “peeling progress” as a uniform into the shader. The fragment shader can determine which regions disappear first based on world coordinates or noise functions.

Example pseudocode:

uniform float uPeel; // 0 to 1
varying vec3 vWorldPos;
void main() {
  float threshold = mix(-0.3, 0.7, uPeel);
  float noiseValue = computeNoise(vWorldPos);
  if (noiseValue < threshold) {
    discard;
  }
  // Other regions output color normally
}

This approach causes the outer shell to gradually develop holes as progress advances, eventually exposing the inner statue. Combined with transparency changes or edge highlighting, it can simulate the visual effect of “stone being chiseled away.”

Performance and Fallback Strategies

Mobile GPU capabilities are limited, so fallback strategies should be designed. For example:

• High-end Mode: Shell stripping + particle debris + anti-aliasing.
• Mid-range Mode: Shell stripping only + simplified model.
• Low-end Mode: Layer-slice display + low-resolution rendering.
• Minimum Mode: Pre-rendered frame sequences or video instead of real-time interaction.

Mode selection can be dynamically determined by detecting device type, GPU information, and first-frame rendering time. All modes share the same narrative copy and stage states, with only the visual presentation complexity varying.

Web Narrative Structure Design

Page Rhythm

This type of interactive web page can be organized using a “Prologue—Action—Revelation—Resolution” structure:

• Prologue: A short line of copy sets up the suspense, e.g., “Someone is hidden inside the stone, waiting for the excess to be removed.”
• Action: The audience actively clicks or drags to trigger the peeling.
• Revelation: A counter-intuitive interaction is introduced, such as an “undo button” that does not work, making the audience realize that carving is irreversible.
• Resolution: The statue is fully displayed, with options for orbital viewing and historical background information.

The purpose of this structure is to let the audience not only “see” the result but also understand the process through interaction.

Copy and Interface

Copy should be restrained. Too much text interrupts observation; too little fails to convey context. A collapsible information layer can be added to the interface, with only the key sentence of the current stage displayed by default, and details available when the audience actively expands.

Button states should also align with the narrative logic. For example, a “Restart” button should not appear before the stripping is complete. At the key reversal node, other operations can be briefly disabled to reinforce the sense of irreversibility.

Extending from Interactive Web Page to Short Video Generation

After completing the interactive web page, a common extension is automatically generating an introduction video for social media distribution or project archiving. This task can be broken down as follows:

Generating Camera Sequences from a 3D Scene

The interactive page already contains the complete scene, model, and stage states. Video generation can reuse these assets by scripting camera movement, lighting changes, and peeling progress to produce coherent shots.

Suggested camera design:

• Opening: Dark scene pushing in toward the front of the stone block.
• Middle: Orbiting the stone while displaying the peeling process.
• Turn: Close-up of the “undo button” and its notification text.
• Ending: Full reveal of the statue, camera pulling back to an exhibition view.

In implementation, an “auto-camera mode” can be added to the page, driving state changes along a timeline, and then using off-screen rendering to capture frame sequences.

Sound and Rhythm

Sound plays a role no less important than visuals in video. For a sculpture theme, low-frequency percussive sounds can represent chisel strikes, and reverb or spatial audio can enhance immersion. Narration or subtitles should remain concise and avoid duplicating on-screen information.

Vertical Screen Adaptation

If the output is a 9:16 vertical video, the framing needs to be redesigned outside the interactive page. Vertical screens are suitable for showing the statue’s upper body, face, and local details, but not full-body orbital shots. The video should lean toward detail-oriented narration rather than full scene recreation.

Common Issues and Engineering Recommendations

Model Licensing

When using publicly available scanned models, confirm the license agreement. Some cultural institutions require attribution, non-commercial use, or share-alike terms. Even during technical validation, source information should be retained to avoid copyright risks in later publication.

Heavy Models Causing First-Screen Jank

Directly loading high-precision models can cause noticeable stutter. It is recommended to split the model into a main display model and a detail model, loading only the low-precision version for the first screen and asynchronously loading high-precision data after interaction begins. Draco or Meshopt compression can also reduce transfer and decoding time.

Interaction Feeling Too Mechanical

If the user simply holds a button to trigger an animation, immersion is lost. Mouse movement or drag direction can be used to influence where the peeling occurs, giving users the feeling that they are “choosing which part to remove.” However, a balance must be struck between realism and ease of use to avoid losing users due to overly complex controls.

Video Generation and Real-Time Page Reuse

When generating video automatically, rendering results may flicker or skip frames due to device differences. It is recommended to fix the frame rate, disable dynamic resolution, use off-screen rendering, and record timestamps per frame to ensure stable video output. If conditions allow, server-side rendering can avoid terminal performance variations affecting the final output.

Conclusion

“Recreating the birth process of a classic statue” may appear to be a 3D display project, but it is essentially a systems engineering effort combining models, interaction, narrative, and rendering. It requires developers to handle real scanned data, design subtractive interactions that fit user cognition, and guide audiences through page rhythm and feedback mechanisms to understand the irreversibility of carving.

For similar projects, it is recommended to proceed along four dimensions:

1. Confirm model sources and licensing before starting development.
2. Select a subtractive representation approach suitable for target devices and prepare performance fallbacks.
3. Let narrative drive interaction design, rather than reducing interaction to simple animation playback.
4. If video generation is involved, design the shot script and rendering pipeline in advance to minimize rework.

This type of practice also demonstrates that 3D interactive storytelling is moving from “demonstrating capability” to “expression and experience design.” As 3D model processing, browser rendering, and generative content tools continue to evolve, future projects are likely to move from concept to runnable delivery in less time. For developers and content creators, the real takeaway is not just tool proficiency, but the engineering methodology of converting technical capability into stable, perceivable, and shareable experiences.