3D Subtractive Sculpting: Building Interactive Narratives for Web Experiences

1. Starting with Raw Stone: Why Subtractive Sculpting Fits 3D Interaction

Recreating the sculpting process in a web browser presents a core challenge beyond simply “displaying a 3D model”: helping the audience understand a subtractive process. Unlike additive manufacturing, marble carving is irreversible. Every step removes material. This characteristic is highly suitable for interactive storytelling. Through pressing, dragging, or clicking, users trigger the layer-by-layer removal of stone, gradually revealing the statue from a rough block.

When approaching this type of project, the primary objective must be clear: the goal is not to build a sculpture showcase page, but to create an operable temporal experience. The audience should feel the state transition of the stone from raw block to rough outline to polished surface, internalizing the concept that “carving is subtraction.” Only by making this concept the main thread will the 3D expression avoid degrading into a simple model rotation viewer.

From an implementation perspective, the project can be divided into three core modules:

1. 3D Model Data: Acquiring legally usable statue scan files or using low-poly alternatives.
2. Subtractive Process Expression: Simulating material removal using shaders, slicing, Boolean operations, or parallax effects.
3. Interaction and Narrative Pacing: Allowing users to control progress, observe key stages, and providing timely feedback.

These three modules are interdependent and must be considered together during the early technical prototyping phase, rather than finishing the model first and thinking about interaction later.

2. Asset Preparation: 3D Scan Data and Licensing

The most direct approach for this type of project is using publicly licensed 3D scan data. Common sculpture scans are typically provided as mesh models, potentially containing hundreds of thousands or even millions of polygons. Using them directly for web rendering causes performance bottlenecks, requiring preprocessing.

The processing pipeline generally includes:

• Mesh Simplification: Using decimation algorithms to reduce the polygon count to a range suitable for real-time rendering while preserving silhouettes and key details.
• Topology Repair: Scan data may contain holes, non-manifold edges, or duplicate vertices that need fixing first.
• Scale and Orientation Calibration: Unifying model dimensions to ensure the subsequent subtractive animation scales correctly.
• Material Separation: If the project needs to represent raw stone, rough outlines, and polished surfaces, you can create different material regions or prepare multiple texture sets for the model.

If the original file only contains the statue itself, you also need to create a “raw block” model. A common practice is to envelop the statue with a cube or a rough contour mesh, overlapping them in 3D space. Later, a shader controls the display range, making the outer stone appear to gradually disappear.

Regarding copyright and licensing, always verify the data source and authorization terms before use. Even for personal learning projects, credit the source and license type on the page. This respects the data provider and facilitates future project distribution.

3. Subtractive Visualization: Slicing, Parallax, and Surface Displacement

Simulating the carving process on the web usually does not rely on real-time Boolean operations. Real-time Boolean calculations are computationally expensive and prone to mesh artifacts. A more robust approach is “controllable display” at the pixel or vertex level.

3.1 Progressive Reveal Based on Height

A common solution is “height threshold reveal”. Place the raw block model and the statue model in the same coordinate system, and use a custom shader to evaluate the current fragment’s height or normal state. When the user drags a progress bar, the threshold changes. The outer stone above the threshold is progressively clipped or made transparent, revealing the inner statue.

Example shader logic:

float progress = uProgress; // 0.0 to 1.0
float mask = step(threshold, worldPos.y);
if (isOuterStone) {
    if (mask > progress) discard;
}

This approach offers stable performance, making it suitable for mid-to-low-end devices. It also easily accommodates rim lighting or dust particles to enhance the chiseling feel. However, it is better suited for expressing uniform subtraction “top-down” or “outside-in”, and is less effective at showing localized detailed carving.

3.2 Parallax Mapping and Multi-layer Models

Another method is dividing the raw block into multiple concentric or height layers, treating each layer as an independent model or render batch. Each user operation triggers the disappearance of one layer, accompanied by corresponding sound effects or particle feedback. This closely matches the intuition of “peeling layer by layer” and provides clearer interactive feedback, but requires preparing multiple layered models in advance, increasing the workload.

To represent richer carving states, you can introduce “transition state textures” between layers: using noise maps to control transparency transitions so the stone surface doesn’t look cleanly sliced, but instead presents a mottled, fractured edge. Even without real geometric cutting, the visual result is more convincing.

3.3 Surface Displacement and Detail Progression

For the statue itself, surface displacement techniques can express the transition from rough outline to polished surface. By using a grayscale detail map to control vertex offset, you can apply low-frequency noise at low progress values to create roughness. As progress increases, switch to high-frequency details, allowing the face, hair, and hands to gradually sharpen.

Note that surface displacement requires a sufficient vertex count. If simplified too heavily, the detail map cannot be expressed correctly. Therefore, when preparing models, the main statue should retain higher precision than the raw block.

4. Narrative Structure and Interaction Design

Technology is just the foundation; narrative pacing truly defines the experience. A complete 3D narrative page can be divided into several stages:

4.1 Dark Room Opening: Establishing Focus

The initial page can maintain low illumination, lighting only the outline of the stone. A small amount of text provides context: facing a block of marble, the sculptor is not adding a figure, but removing excess material. This opening quickly transitions the user into the role of “observer” rather than rushing to showcase the full model.

4.2 Active Chiseling: Making the User an Executor

Hand progress control over to the user, such as holding a button or dragging a slider. Each trigger brings visible change, accompanied by a short chisel sound and stone chip particles. The interaction frequency should not be too fast, or the user will lose perception of each stage; nor too slow, or it will feel sluggish.

During this phase, “key stage prompts” can be added. When the statue’s silhouette begins to emerge, pause and display a line of text guiding the user to observe the current change. These “pauses” leave room for understanding, preventing the user from just dragging to the end.

4.3 The Undo Button: Reinforcing Irreversibility via Interaction

A noteworthy design choice is placing an “Undo” button in the interface. When clicked, the system does not revert the model state; instead, it prompts: “Marble has no undo key.” This is more powerful than a text explanation because it lets the user personally experience the material logic through a failed operation.

This design works because it translates a concept into interactive feedback. The advanced goal of interaction design is not just making operations easier, but making the operation itself part of the understanding. When designing similar projects, consciously look for “real constraints that cannot be simplified by the interface” and use them as narrative elements.

4.4 Conclusion and Observation

Once the statue is fully revealed, you can enter a free observation mode, allowing rotation, zooming, and localized inspection. At this point, the emphasis is no longer on operation, but on providing a quiet lighting environment for the user to decide what to focus on. Preset viewpoints can also be offered to guide the user to key areas like the hands or face.

5. Engineering Implementation and Performance Optimization

Turning the above design into a runnable web page requires attention to several engineering issues.

5.1 Model Loading Strategy

After compression, scan models can be loaded on demand. For the first screen, load a low-poly version or a static poster image, and load the full model only when the user enters the interactive phase. This reduces initial wait times and prevents user drop-off.

Recommended practices include:

• Loading low-poly models and blurred textures for the first screen.
• Requesting the high-poly model only after the user clicks “Start Experience”.
• Using an asynchronous queue to manage request order, preventing multiple resources from competing for bandwidth.

5.2 Rendering Performance

Real-time 3D rendering requires attention to frame rates. For narrative-driven pages, maintaining a stable 30 FPS is sufficient; 60 FPS is not strictly necessary. You can control overhead from the following aspects:

• Using low-poly models and compressed textures.
• Limiting real-time shadows; use baked lighting when necessary.
• Reducing particle counts; using texture animations instead of massive geometric particles.
• Culling invisible areas as early as possible.

5.3 Mobile Adaptation

Mobile devices have smaller screens and different gestures compared to desktops. Mobile is better suited for swiping, while desktop can use key holds or mouse drags. This can be unified via pointer events, and prompt copy can be adjusted based on device type.

On mobile, particle counts, shadow resolution, and model precision should be further reduced. If necessary, provide a “Lite Mode” that disables certain post-processing effects to ensure smoothness.

6. Video Expression: Compressing the 3D Page into a Short Video

After completing the web project, it sometimes needs to be converted into a 60 to 90-second vertical video for distribution. Video and web narrative logic differ: the web relies on active user exploration, while video is entirely paced by the creator.

When producing this type of video, do not simply screen-record. Redesign the camera language. First, establish a narrative arc, such as a 30-second rapid transition “from raw block to human form”, followed by close-ups of hand or facial details, and finally returning to the overall silhouette.

For camera transitions, you can reuse the same model assets from the web page but render sequence frames in 3D software according to the video pacing. This achieves better lighting and effects than screen recording. If resources are limited, you can drive the camera and progress parameters via animation scripts in the browser and record the output.

Sound design is equally important. Chiseling sounds, low-frequency ambient noise, and minimal voiceover can significantly enhance the viewing experience. Ensure the voiceover doesn’t cover all visual information, leaving breathing room.

7. Reusable Design Principles

Several universal principles can be extracted from this project, applicable to 3D interactive narratives or data visualization projects:

1. Determine the core concept the user needs to understand before choosing the technical path. Do not assume 3D is the best expression method just because the capability exists.
2. Abstract concepts like subtraction, irreversibility, and temporality can be concretized through interactive feedback. A cleverly designed failure feedback is often more effective than ten paragraphs of explanation.
3. Prepare model assets and narrative design simultaneously. Model precision, layering, and material presentation directly impact the interaction strategy.
4. Performance optimization is not the final step, but a constraint throughout the entire process. Consider target devices when determining polygon counts, particle volumes, and lighting solutions.
5. Web and video are different mediums. If delivering both, redesign the narrative pacing for each rather than reusing them directly.

8. Conclusion

Gradually chipping away a statue from a virtual block of stone is essentially using 3D interaction to retell a story about “observation and removal”. The value of this type of project lies not in replicating a high-fidelity model, but in allowing the audience to gain a new cognitive understanding through operation: sculpting is recognizing the figure within the material, not building it from nothing.

For developers, this is a comprehensive exercise: handling both 3D data processing and rendering, while also understanding narrative pacing, interaction logic, and cross-media expression. By breaking these issues down one by one, complex projects become manageable. The final deliverable is not just a web page, but an experience that can be understood and shared.