Building a 3D Web Experience That Reveals Michelangelo's David from Marble

1. From a Block of Stone to a Statue: Defining the Problem

Many visitors to an art museum stop in front of David for only a few seconds, take a photo, and move on. The real problem is not a lack of historical knowledge. It is the lack of a more intuitive feeling: how was this statue “released” from a flawed block of marble that other sculptors had abandoned?

Showing only a photo of the finished work makes it hard for viewers to understand the nature of carving. Sculpting is not about “adding” but about “subtracting.” Michelangelo himself expressed something similar: the figure already exists inside the stone, and the sculptor merely removes the excess. This idea is a perfect fit for a 3D interactive presentation.

The goal of this project, therefore, is not a traditional history page but a working interactive 3D web page. Users press and hold a button, drag a slider, or click to peel away layers of stone and watch the figure of David gradually emerge from a cube.

This approach differs from conventional web storytelling. It does not present a conclusion first and then attach a few images. Instead, users operate the page and “discover” a process for themselves. The interaction itself becomes the medium for understanding the logic of carving.

2. Overall Design: Unifying Narrative, Interaction, and Technology

A proper 3D web page is not just about dropping a model into the browser and letting it spin. It needs to answer three questions:

1. Narrative: Where does the user enter, what guides them, and what feeling do they leave with?
2. Interaction: What does the user do, and is that action related to the theme?
3. Technology: How do you render a 3D model and a subtraction effect smoothly in the browser?

1. Narrative: Built Around “Subtraction”

The page can follow a minimal linear narrative path:

• Stage one: The user enters a dark space and sees a rough block of marble;
• Stage two: Through a long press or swipe, parts of the stone begin to peel away, and a vague human silhouette appears;
• Stage three: The silhouette becomes clearer—head, arms, and legs emerge;
• Stage four: The complete statue of David is revealed, and the user can rotate it to inspect details.

The point of the narrative is not to feed a timeline but to let users personally experience “extracting a figure from chaos.” A single line of copy can be added, for example when the user tries to recover the removed stone: “Marble has no undo key.” This is not just interaction feedback; it also explains the essence of the carving craft.

2. Interaction: Low Barrier but Still Tactile

For general users, interaction cannot be too complex. Two methods work well:

• Press-and-hold button: The user holds a button and the stone peels away layer by layer; releasing it stops the process. This action has a symbolic “chiseling” feel, even if it is only metaphorical.
• Drag slider: The user drags a slider to control a “reveal” parameter from 0 to 1 and watches the statue emerge. The advantage is strong controllability, which suits mobile.

The two can be combined. On mobile, prioritize the slider or press-and-hold; on desktop, add mouse-drag camera rotation.

3. Technical Approach: Subtraction Using Public 3D Data

Obtaining a high-precision 3D scan of David is not difficult. Public digital cultural heritage projects offer sculpture scans that can be used legally, usually in STL or OBJ format with a clear Creative Commons license.

Once you have the model, the focus shifts to implementing the “subtraction” effect. Performing boolean operations directly on a complex mesh in the browser is very difficult, prone to stuttering, and nearly unworkable on mobile. A more pragmatic approach is voxelization.

A voxel—a small cubic unit in 3D space—lets you discretize a complex model into a set of regularly arranged cubes. Subtract a “David-shaped” voxel set from a cube, and what remains is the “stone” surrounding the statue. As more layers are removed, the stone grows thinner and the statue naturally appears.

The benefits of this approach:

• Computation is controllable;
• It has a pixelated, digital-carving visual style;
• Performance is acceptable on mobile;
• The peel animation is easy to control through parameters.

3. Breaking Down the Implementation

1. Acquiring and Preprocessing the 3D Model

First, obtain a high-quality 3D scan of David. Raw scan data is usually large and cannot be loaded directly onto a web page, so preprocessing is required.

Preprocessing goals:

• Convert the model from its original format to a common one, such as GLB or compressed GLTF;
• Simplify the mesh to reduce triangle count so it renders smoothly in the browser;
• Check that the model’s units, orientation, and center point are reasonable;
• Decide on a resolution for voxel generation, for example dividing the X, Y, and Z dimensions into 128 or 256 cells.

If the scan contains a full standing figure, make sure the base is flat so it is easy to subtract from the stone cube.

2. Generating the Surrounding Stone Voxel Structure

In code, create a cubic region slightly larger than the statue. Discretize this cube into a 3D array where each element indicates whether a voxel exists.

For example, at a resolution of 256×256×256, the array has about 16.77 million cells. Real-time updates at this scale put pressure on the browser, but you can optimize in several ways:

• Generate voxels only near the surface;
• Use a lower resolution, such as 128×128×256;
• Organize voxels into a sparse structure or use GPU instanced rendering.

The generation logic can be described as:

For each candidate voxel inside the cube:
    If the voxel center lies inside the David model:
        This position does not need to be displayed, because it belongs to the statue itself;
    Otherwise:
        This position belongs to the stone and needs to be displayed.

This way, you initially see a complete stone cube. As the reveal parameter increases, voxels near the statue surface disappear one by one, and the statue’s shape gradually emerges.

3. Rendering and Performance

When rendering many small cubes, do not create a separate mesh object for each voxel—that causes a huge number of draw calls and drops the frame rate.

A better approach is instanced rendering:

• Create a unit cube mesh;
• Generate a transformation matrix for each voxel that needs to be displayed;
• Use instancing to submit all transformation data in one go;
• In the vertex shader, read the corresponding position and scale from the instance ID.

This way the browser draws only one cube mesh but can display tens or hundreds of thousands of instances in the scene at once. Even with standard front-end 3D rendering components, you can reach an acceptable frame rate.

When the user drags the slider to change the reveal level, you only need to update the instance data and re-upload the transformation matrices—no need to rebuild the entire geometry.

4. Animation and Transitions

“Emerging from the stone” should not be a one-time jump but a continuous, reversible process.

Introduce a scalar parameter reveal ranging from 0 to 1:

• reveal = 0: Stone fully surrounds the statue;
• reveal = 0.3: Surface stone disappears, and a vague human silhouette is visible;
• reveal = 0.7: Most stone is gone, and the head and torso are clearly visible;
• reveal = 1: All external stone is gone, leaving only the David statue.

As the user drags the slider, reveal changes continuously, and the program decides which voxels to show and hide based on the current value. To make the process feel more natural, add a noise threshold. For example, whether a voxel is displayed depends not only on reveal but also on its distance to the statue surface. Voxels closer to the surface disappear later, producing an uneven peeling effect rather than a neat layer-by-layer removal.

5. Interaction Details and User Feedback

Interaction should not just mechanically respond to numeric changes. Good feedback makes users aware that they are doing something “irreversible.”

For example, the user can press and hold a “chisel” button. Each sustained press removes a batch of voxels. Releasing the button stops the process. The UI can simulate dust particles, slight vibration, or short sound effects to make the action feel more tactile.

When the user tries to click an “undo” button, the page can display: “Marble has no undo key.” This design is not just a gimmick—it turns the physical properties of the material into an interaction rule: in reality, a sculptor cannot put a chipped-off piece of stone back.

This design turns the page from a simple display into a small thought experiment. Users are not just looking at carving; they are understanding the constraints of carving.

6. Page Structure and Content Hierarchy

Although the 3D area is the core, the page should not contain only a model. It also needs basic guidance.

The page can be layered:

• One or two sentences at the top or entry point to explain the theme;
• The 3D scene in the central area;
• A drag slider or press-and-hold button at the bottom;
• Very short text prompts at key stages, such as “Keep chiseling—the silhouette is appearing”;
• The finished sculpture at the end, with a hint that the user can rotate and zoom to inspect details.

Text should be minimal and precise. The ideal experience for this page: users understand what is happening through their own actions without reading a lot of instructions.

4. Comparing Two Viable Presentation Styles

In practice, this kind of digital exhibit can take one of two styles.

Option One: Immersive Dark Room

This option emphasizes atmosphere. The whole page uses a dark background with the stone in the center. No extra text or decoration. When users enter, they see a beam of light resembling a museum spotlight shining on the stone.

Users press and hold the button, and the stone peels away. As the operation proceeds, the light gradually intensifies and statue details appear. This is more like a short immersive experience, well suited for mobile sharing.

Option Two: Exhibition-Reader Long Page

Another option is a vertically scrolling long page that breaks the process into several acts. Each act shows a stage: raw material, rough chiseling, fine carving, completion. Users scroll and the stone gradually transforms from a cube into David.

The advantage is that you can add more background information—the flaws in the stone, the situation before Michelangelo took over, the difficulties during carving, and so on. It feels more like a digital exhibit panel or an interactive reader.

Both options can share the same underlying 3D technology; they differ only in narrative structure and interaction rhythm.

5. Common Performance and Compatibility Issues

Working with 3D voxel animation in the browser raises several common issues.

1. Model Load Size

High-precision scans often reach hundreds of megabytes. Even on desktop, load times can be long. The model must be compressed and simplified. The goal is to keep final front-end assets in the range of a few megabytes to a dozen or so.

2. Mobile Memory and Draw Pressure

Mobile GPUs are sensitive to instance counts, texture sizes, and draw calls. Too many voxels will noticeably reduce the frame rate. Set a reasonable resolution and provide a degradation path on low-performance devices.

For example, use 128×128×256 on desktop and drop to 64×64×128 on mobile. Although precision decreases, interaction remains smooth.

3. First Screen and Asset Loading Strategy

If a page starts by downloading a large model file, users may leave quickly. Design a lightweight loading screen, or enter first with images and text and load 3D assets only when the user begins interacting.

Progressive loading is another option: load a low-precision version first, then replace it with a high-precision version once the user enters the interactive state.

6. From a Single Voxel Effect to a Complete Work

After the basic interaction is done, consider how to make the work truly complete.

Complete does not mean many features—it means a closed experience loop. From entering the page to leaving, users should go through a full cognitive process. The entry should explain “what you are looking at,” the middle should let users complete a “carving” themselves, and the end should offer suggestions for observing the statue.

For example, after the user finishes the reveal, show a few lines:

What you just did was remove from the outside in. Carving works the same way: it does not give you a second chance. Now you can rotate the model and look at David’s head, hands, and legs. Try viewing from the front to see the direction of his gaze.

Guidance text should be restrained and avoid turning into a lecture.

7. Judgment Calls and Trade-offs in Practice

Throughout development, the most important decisions are often not technical choices but “should we build this feature at all.”

A typical temptation is to build a full carving simulator: let users chisel from any angle, even simulate different chisel effects. But this is technically complex, and most general users do not need such fine control. A more effective approach is to abstract the core concept of “subtraction” and express it through a simple slider or button.

Likewise, do not chase photo-realism in visual style. The voxelized “digital stone” differs from real marble, but that actually emphasizes its “digital reconstruction” nature. The tension between pixelation and sculptural detail makes users realize they are not viewing a photo but participating in a reconstruction.

8. Reusable Technical Lessons

Projects like this can yield some general lessons.

1. Voxel Subtraction Suits “Extracting a Figure from a Whole”

Whether for sculpture, artifact restoration, geological cross-sections, or architectural cutaways, as long as the theme involves “hide and reveal,” voxel subtraction is a viable interaction method.

2. Interaction Rules Can Carry Meaning

“Marble has no undo key” is not just a hint—it translates the irreversibility of the material into a system rule. When designing other narrative projects, look for the key constraints of the material or craft itself and turn them into interaction constraints.

3. Public Data Must Be Processed Before It Can Enter the Web

3D scans from digital cultural heritage are excellent source material, but they are usually not prepared for web display. Simplification, compression, voxelization, and format conversion are necessary steps.

4. Assisted Development Changes the Production Workflow

In today’s development environment, programming assistants with strong generation capabilities can speed up prototyping, debugging, and copywriting. But such tools are better suited to quickly validating ideas rather than replacing judgment about 3D performance, interaction rhythm, and narrative. Final delivery quality still depends on the developer’s understanding of the theme and their ability to make trade-offs.

9. Conclusion

Reconstructing the birth of David from stone through a 3D web page is essentially about one thing: turning an artistic concept about “subtraction” into a digital experience users can operate directly. It does not require a complex game engine or expensive scanning equipment. The key is to find the core action—peeling away—and then organize narrative, interaction, and technical implementation around it.

When users watch the stone disappear piece by piece and David emerge from the cube, what they gain is not a historical fact but an intuitive understanding of the act of carving. That understanding may last longer than remembering Michelangelo’s birth and death years, and it is closer to the artwork itself.