Explaining Sculpture Through 3D Interaction: A Complete Technical Post-Mortem

Explaining Sculpture Through 3D Interaction: A Complete Technical Post-Mortem

1. Background: Why “Carving” is Ideal for 3D Interactive Expression

Michelangelo’s David is a classic not only for its perfect final form but for the process of being “released” from a block of stone. Traditional text and image content can describe the historical background and artistic features, but it struggles to convey the core concept that “carving is subtraction” to the general public. Images only show a single moment in time, and while videos can present a process, they lack room for active audience participation.

A 3D interactive website offers a different possibility: users are no longer mere spectators. Through operations like pressing, dragging, and selecting, they personally experience the process of “stone being removed layer by layer.” This sense of participation transforms the constraint of “marble has no undo key” from a mere string of text into a tangible experience.

From a technical perspective, this requirement can be broken down into several independent problems: how to acquire real 3D data of a sculpture, how to display and manipulate this data in a browser, how to design interaction mechanisms to simulate the “carving process,” and how to deploy the entire experience to an accessible URL.

2. 3D Asset Preparation: From Public Data to Usable Models

The first step in implementing such a project is obtaining a suitable 3D model. For public domain sculptures like David, 3D data typically comes from various sources, including official museum scans, structured models released by academic institutions, and community-contributed photogrammetry data.

In practice, the team used publicly available 3D scan files of the sculpture. These files are usually in STL format, containing mesh information made of triangular faces, without materials, textures, or skeletal animations. While STL files are suitable for displaying static sculptures, using them directly for browser rendering presents two issues: large file sizes and a lack of optimization for progressive display.

The core workflow for data preprocessing is as follows:

1. Inspect the original mesh for face count, vertex count, broken faces, or non-manifold edges;
2. Use 3D processing tools to decimate the mesh, reducing the face count while maintaining recognizable geometry;
3. Standardize the model’s orientation, scale, and center point to simplify subsequent interaction calculations;
4. If a “progressive reveal” effect is needed, pre-process the model by spatial layers or volumetric blocks;
5. Export to a web-friendly format, considering whether to use compressed transmission.

A key decision here is: should the “carving process” be simulated using real-time Boolean operations or a pre-layered model sequence? Real-time Boolean operations in a browser are computationally expensive and demand strict device performance. In contrast, a pre-layered approach only requires switching the display of different model layers based on user actions, offering more stable performance and better suitability for mobile devices. In practice, the pre-layered route was adopted: the complete sculpture was sliced into multiple stages by thickness, and each user operation revealed a more complete model layer.

3. Interactive Narrative Design: Turning “Subtraction” into an Operable Metaphor

Technology is only a means; what truly moves users is the unity of interaction logic and narrative style. The core metaphor of this project is: carving is an irreversible process of subtraction; every strike removes stone, and there is no going back.

Based on this metaphor, the interaction design needed to solve several problems:

First, how does the user “strike.” A simple button click is the most reliable method, but the visual feedback must simulate the feeling of “stone chipping away.” A more intuitive solution is to place an uncarved stone block in the center of the screen. When the user holds down the button, the outer fragments fall off via animation, gradually revealing the statue inside.

Second, how to present the cost of “undoing.” A notable interaction detail in the project is that the interface provides an “Undo” button. However, when the user clicks it, the system prompts, “Marble has no undo key.” This is more powerful than simply not providing an undo button, because it makes the user actively initiate an impossible operation, allowing them to personally experience the irreversibility of carving.

Third, the choice of a dark room environment. Setting the scene in a dark room where only the marble in the center is illuminated effectively focuses the user’s attention. Meanwhile, changes in lighting can reinforce the narrative progression from “chaos to clarity”—as the stone is removed, the surface of the statue is gradually lit up.

Fourth, controlling the narrative pace. The project features a brief introductory chapter at the beginning, allowing users to understand the story’s background before entering the interactive phase. This segmented structure aligns better with the cognitive rhythm of the general public than immediately presenting the full interaction.

4. Technical Implementation: Efficiently Rendering 3D Models in the Browser

4.1 Rendering Solution Selection

Common practices for rendering 3D models in a browser include wrapping a custom rendering pipeline using graphics APIs or utilizing a mature 3D engine. For a project focused on sculpture display with relatively centralized interaction logic, using a mature engine can significantly reduce low-level development effort.

When selecting a rendering solution, the following must be considered:

• Loading performance: Model file size and decompression efficiency;
• Device compatibility: Smooth operation on mid-to-low-end mobile devices;
• Lighting control: Ease of implementing a dark room spotlight effect;
• Integration with page UI: Coordination between the 3D scene and buttons or text prompts.

A common industry practice is to adopt a 3D format that supports progressive loading and dynamically adjust rendering quality at runtime based on device capabilities.

4.2 Implementing the “Progressive Reveal”

The specific implementation of the pre-layered approach can be summarized as follows:

1. During preprocessing, divide the sculpture mesh into N layers based on spatial depth or geometric complexity;
2. The first layer contains the outermost stone block shape, and the final layer is the complete statue itself;
3. Each time the user “strikes,” the scene switches to the next layer;
4. During the switch, use particle animations or fade-in/fade-out transitions to simulate the effect of stone fragments peeling off.

Pseudo-code example:

// Stage model sequence
const carvingStages = [
  { layer: 'block', visibleMesh: stoneBlock, nextAction: 'first-strike' },
  { layer: 'rough-form', visibleMesh: roughFigure, nextAction: 'second-strike' },
  { layer: 'refined', visibleMesh: refinedFigure, nextAction: 'detail-pass' },
  { layer: 'final', visibleMesh: davidFull, nextAction: null }
];
function handleStrike() {
  if (currentStage >= carvingStages.length - 1) {
    return; // Already in final form
  }
  currentStage += 1;
  updateVisibleModel(carvingStages[currentStage]);
  playChipRemovalEffect();
  updateGuidanceText();
}

4.3 Balancing Performance and Experience

The biggest risk of a 3D website is user drop-off due to slow loading. To control the initial load time, a lightweight guide page can be displayed before entering the interactive page, while 3D resources are preloaded in the background. For the models themselves, prioritize loading a low-poly version as a placeholder, with high-poly versions loading on demand.

Furthermore, immediate feedback from interactive operations is more important than visual precision. After the user presses a button, they should see a visual change within tens of milliseconds, otherwise the sense of operation will be greatly diminished.

5. From Website to Short Video: Reusing and Extending Content Assets

After completing the interactive website, another valuable question arises: can the same set of assets be used to generate a short video, allowing users to quickly grasp the essence of the project on social media?

Although the actual production of the video generation phase was affected by resource limitations, from a technical planning perspective, this phase can be designed as follows:

Content Reuse: The 3D models, scene settings, and copywriting frameworks from the website can be directly used as video assets. The difference is that a video requires the creator to preset the narrative pace rather than waiting for user operations.

Script Structure: Short videos typically start with a suspenseful question—such as “What is hidden inside a stone?”—then show the core process of “striking—peeling—revealing,” and finally land on the memorable point that “marble has no undo key.” A duration of 60 to 90 seconds requires every segment to be highly condensed.

Production Workflow: First, determine the storyboard based on the website assets. Next, render the key frames. Finally, synthesize voiceovers and background music. The value of an editable project lies in the ability to quickly synchronize adjustments to the video when the website content is updated.

Format Adaptation: The vertical 9:16 aspect ratio is suitable for mobile browsing and social media distribution. It is necessary to ensure the core subject remains centered during composition and to reserve a safe zone for subtitles.

6. Key Takeaways: A Reusable Methodology for Similar Projects

Reviewing the entire project, several experiences are worth distilling into a general methodology:

First, let interaction mechanisms carry the core semantics, rather than just serving as visual demonstrations. The “disabled undo button” design is more effective than any text explanation because it makes the user encounter a “conceptual collision” during operation. When designing interactive narrative projects, priority should be given to finding design points that allow users to understand constraints through their actions.

Second, 3D data preprocessing determines the performance ceiling on the browser side. Do not expect to solve all problems at runtime. Completing mesh decimation, layer slicing, and format conversion during the preprocessing stage will significantly reduce post-launch uncertainties.

Third, phased delivery is better than one-time perfection. First, get the core interactive loop working, then gradually enrich lighting details, transition animations, and text prompts. An operable version lacking fine details is more valuable than a complete design stuck in the planning phase.

Fourth, the awareness of content asset reuse is worth emphasizing. The same set of 3D data, copywriting frameworks, and visual styles can support various content formats, including interactive websites, short videos, and illustrated articles. Considering the standardization and exportability of assets early in the project can save a lot of repetitive work for subsequent distribution.

Returning to the project itself: the value of technology is ultimately reflected in whether the audience is willing to “stop and observe.” When an ordinary user holds down a button on the screen, watches the stone peel off layer by layer and David’s face gradually clear up, and finally tries to click “Undo” only to be told “marble has no undo key,” the true meaning of carving transforms from knowledge into experience. This transformation is exactly where 3D interactive narrative is most worth the investment.