Interactive 3D Narrative: From Statue Digitization to Subtractive Sculpting Experience Design

1. Project Background: Redefining “Sculpting” as a Cognitive Experience

Traditional sculpture exhibitions typically display only the final artwork, making it difficult for the audience to experience what Michelangelo meant when he said, “David was already in the stone, I just removed the excess.” Digital 3D technology offers a new possibility: instead of presenting the finished product, it allows the audience to participate in the process of “removing stone,” gradually revealing the statue from a rough, block-like volume.

On the surface, this type of project appears to be a creative web page; in reality, it involves multiple technical stages: 3D scan data acquisition, model preprocessing, front-end rendering, interaction state modeling, visual narrative design, and multi-format content delivery. This article will use a general implementation approach as the main thread to break down the complete workflow from raw 3D data to an interactive web page, and finally to a short video.

2. 3D Data Acquisition and Preprocessing

2.1 Obtaining Scan Data

As public domain artworks, statues like Michelangelo’s David have publicly available high-precision 3D scan data. This data is typically in STL format, provided by cultural institutions or open scanning communities under Creative Commons licenses. Developers should verify the specific license type before use to ensure that secondary creation and public display are permitted.

STL files only contain triangular mesh information and do not carry materials, UV maps, skeletons, or scene hierarchies. Therefore, while suitable as foundational data for static statue display, they are not ideal for scenarios requiring complex animations or material transitions.

2.2 Model Volume Control

Raw scanned models often contain millions of polygons, which can cause severe performance issues if loaded directly into a browser. The preprocessing stage must address the following:

1. Polygon Reduction: Use algorithms like Quadric Error Metrics to reduce the polygon count to a target range. For mobile browsers, an acceptable range is typically between 200,000 and 600,000 triangles.
2. Topology Inspection: Repair non-manifold edges, holes, and duplicate vertices to prevent rendering flickers or normal map anomalies.
3. Coordinate Normalization: Center and scale the model within a unified bounding box to facilitate subsequent camera control and culling calculations.
4. Format Conversion: Convert STL to web-friendly formats like glTF or GLB, generating compressed versions as needed.

Preprocessing can be done offline or asynchronously handled by server-side APIs after user upload. For developers, the key is to establish a repeatable model processing pipeline rather than relying on manual fixes.

3. Interaction Model Design for “Subtractive Sculpting”

3.1 Core Concept Abstraction

“Revealing the statue from the stone” can be abstracted into the following interaction model:

• Initial State: A complete convex hull or near-convex volume enclosing the statue, simulating rough stone.
• Target State: The surface of the statue itself.
• User Action: Triggering a “chisel” action via click, long-press, or drag.
• System Response: Removing a region from the current stone volume to gradually expose parts of the statue.

The essence of this model is a discretized volume difference operation: the stone volume minus the union of the chiseled areas. When the chiseled areas cover the entire differential space between the stone and the statue, the statue is fully revealed.

3.2 Implementation Path Selection

There are two primary technical paths to achieve this model:

Path 1: Visual Simulation Based on Clipping Planes. This approach does not actually modify the model’s geometry. Instead, it uses clipping planes or noise functions in shaders to visually “peel off” the stone shell. The advantage is simple implementation and low performance overhead; the disadvantage is a weaker sense of physics and difficulty in precisely controlling the stone’s fracture morphology.

Path 2: Voxel or Mesh Boolean Operations. This discretizes the external volume surrounding the statue into voxels, deleting a batch of voxels with each chisel strike. The advantage is that it closely mimics the “subtractive” logic of real sculpting; the disadvantage is the high computational cost, requiring front-end acceleration via Web Workers or WebAssembly.

For display-oriented projects targeting general audiences, Path 1 offers a higher cost-to-performance ratio. For experimental projects pursuing deeper immersion, Path 2 can be considered, with computations restricted to a low-resolution voxel grid.

3.3 State Machine and Progress Management

Regardless of the chosen path, a clear state machine is required to manage sculpting progress. The state machine should include at least the following stages:

• Initial State: The stone is intact, and the statue is invisible.
• In-Progress State: The user has triggered several chisel strikes, and parts of the statue are visible.
• Completed State: The stone is fully removed, and the statue is completely revealed.
• Reset State: The user chooses to start over.

Progress can be measured by the ratio of “removed stone volume / total volume.” Note that this ratio does not have a linear relationship with visual completion. The first few chisel strikes might only expose a very small area of the statue’s surface, while the final few strikes significantly enhance contour clarity. Therefore, if an auto-playing narrative mode is used, the pacing of the chisel strikes should be driven by content rhythm rather than just volume ratio.

4. Front-End Rendering and Visual Narrative

4.1 Scene Composition

A typical “dark room” scene contains the following elements:

• A dark environment background to minimize visual distractions.
• A single primary light source illuminating the stone surface from above or the front-side.
• The stone model, requiring a rough texture.
• The statue model, revealed where the stone has peeled away.
• Optional environmental particles or dust to enhance the atmosphere during chiseling.

Both models can be derived from different processing results of the same scan data: the stone model is generated by expanding outward from the statue model and assigning different material parameters.

4.2 Differentiated Material and Lighting Treatment

The visual contrast between the stone and the statue is crucial to the narrative. The stone should exhibit a rough, non-reflective, grayish texture; the statue should exhibit a relatively smooth, slightly reflective, warm-toned marble texture. This contrast can be achieved through the following methods:

• Roughness Map Differences: High roughness for the stone, low roughness for the statue.
• Normal Map Perturbation: Procedural noise added to the stone surface, while the statue surface remains smooth.
• Color Shifting: Cool gray for the stone, warm white for the statue.
• Environment Reflection Intensity: Stronger specular reflection from the primary light source on the statue.

In a web rendering environment, using physically based rendering (PBR) materials is sufficient to meet these needs without requiring complex offline rendering workflows.

4.3 Reverse Design of the “Undo” Interaction

A notable design point in the original narrative is the presence of an “Undo” button in the interface. However, clicking it prompts a message: “Marble has no undo key.” This is a classic cognitive contrast design. Its technical implementation is straightforward—the button click does not execute an undo operation but triggers a text prompt. Its narrative value, however, lies in allowing users to experience a concept through interaction: real sculpting is an irreversible subtractive process.

From an engineering perspective, this design requires explicitly distinguishing between “undoable operations” and “irreversible operations” within the interaction state management. If the entire sculpting process state is recorded in a history stack, undoing is technically possible; however, to serve the narrative purpose, developers can intentionally disable this capability. This serves as a reminder: interaction design does not always pursue maximum freedom; sometimes, the restriction itself is part of the content.

5. Project Structure and Key Code Snippets

5.1 Directory Organization

A relatively complete project can be organized as follows:

project/
├── public/
│   ├── models/          # Preprocessed model files
│   └── textures/        # Procedurally generated textures
├── src/
│   ├── scene/           # Scene initialization, lighting, camera
│   ├── interaction/     # Chisel logic, state machine
│   ├── ui/              # Prompts, progress display
│   └── utils/           # Model loading, volume estimation
└── scripts/
    └── preprocess/      # Offline preprocessing scripts

5.2 Basic Logic of Chisel Interaction

Below is simplified pseudocode describing the core flow triggered by a single chisel strike:

// State definition
const state = {
  phase: 'initial',       // initial | carving | revealed | reset
  removedVolume: 0,
  totalVolume: 1,
  chiselCount: 0
};
function handleChiselHit(hitPoint) {
  if (state.phase === 'revealed') return;
  // Calculate the stone region removed by this chisel strike
  const removedRegion = computeRemovedRegion(hitPoint, chiselRadius);
  // Update the display state of the stone shell
  stoneShell.updateMask(removedRegion);
  // Update progress
  state.removedVolume += removedRegion.volume;
  state.chiselCount++;
  // Check if the completed state is reached
  if (state.removedVolume / state.totalVolume > threshold) {
    state.phase = 'revealed';
    triggerRevealSequence();
  }
}
function handleUndoClick() {
  // Intentionally no undo: real marble has no undo key
  showMessage('Marble has no undo key.');
}

In actual implementation, computeRemovedRegion corresponds to updating a mask texture in the visual simulation path, or deleting a batch of voxels in the voxel path. Both maintain identical interfaces, making it easy to swap implementation approaches later.

5.3 Performance Considerations

Mobile browsers are highly sensitive to WebGL draw calls and texture bandwidth. The following measures help maintain a smooth experience:

• Limit the mask update frequency within a single frame to avoid performance spikes during continuous chiseling.
• Use a low-resolution mask texture (e.g., 512x512) to store the stone peeling state, performing smooth sampling in the shader.
• Enable frustum culling for static scene elements to reduce draw calls for invisible areas.
• Enable shadows in high-performance mode, and automatically downgrade to shadow-less rendering in low-performance mode.

6. Content Extension: From Interactive Web Page to Short Video

The same narrative core can be extended to video delivery. The goal is to let the audience quickly understand the concept of “subtractive sculpting” in a 9:16 vertical format.

6.1 Video Narrative Structure

A four-segment structure is recommended:

1. Suspenseful Introduction: A rough stone stands in a dark room, illuminated by a single beam of light.
2. Process Unfolding: The sound of chiseling rings continuously, stone peels away layer by layer, and local contours gradually become clear.
3. Cognitive Twist: Insert the contrasting shot of the “undo” prompt to reinforce the concept of irreversibility.
4. Complete Reveal: The camera slowly orbits and finally focuses on a close-up of David’s face.

Each segment should be kept between 8 to 12 seconds, with a total runtime of 30 to 45 seconds, making it suitable for distribution on short-form video feeds.

6.2 Engineering Production Recommendations

Video production should retain editable project files for future copy or pacing adjustments. The following assets should be prepared:

• High-resolution rendered image sequences rather than direct screen recordings to ensure image quality.
• Separated audio tracks, including chisel sound effects, ambient noise, and optional voiceovers.
• Subtitle tracks, with copy strictly aligned with the visual timeline.

If facing performance or cost limitations during rendering, you can output at a lower frame rate or resolution, then inspect the final video for obvious issues such as model clipping, lighting flickers, or subtitle occlusion. Iterate and fix before re-exporting.

7. Summary and Extended Thoughts

The value of this project lies not in using a specific model or tool, but in transforming an abstract artistic concept into an interactive digital experience. Technically, it covers 3D data acquisition, model preprocessing, real-time rendering, interaction state design, and multi-format content delivery, essentially encompassing a complete lightweight 3D content production pipeline.

A thought worth extending: Does digital technology make audiences more willing to stop and observe the original work itself? When users “manually” chisel David out of the stone with a few clicks, their understanding of “sculpting” may have fundamentally changed. This cognitive shift is the essential difference between interactive narrative and static display. For developers and content creators, the key is not to stack more special effects, but to find a sufficiently accurate interaction metaphor, allowing technology to serve the single concept you want to convey.