3D Interactive Website Technology: Sculpting Michelangelo's David with Code

3D Interactive Storytelling in the Browser: “Sculpting” Michelangelo’s David with Code

As web graphics technology evolves, browsers are now capable of handling increasingly complex 3D rendering and interaction tasks. Recently, a wave of industry practices has emerged that combine large models with 3D engines to rapidly generate interactive websites with deep narrative capabilities. This article uses the recreation of Michelangelo’s David statue as a business scenario to analyze how to build a 3D web application from scratch that combines visual impact with interactive logic, and to discuss the technical challenges and solutions involved.

1. Business Scenario and Technical Requirements

The core goal of this project is to create a Chinese-language interactive website for a general audience, allowing viewers to intuitively understand how the David statue was born from a rough block of stone. This requires the application to be not just a 3D model viewer, but an immersive experience that blends narrative pacing, visual guidance, and interactive feedback.

From a technical perspective, achieving this goal requires solving several key problems:

1. High-quality 3D asset loading and rendering: High-precision scanned statue models must be rendered smoothly in the browser.
2. Dynamic geometry computation: The “stone carving” process must be simulated, creating the visual effect of stone gradually chipping away to reveal the statue.
3. Narrative-driven interaction logic: User actions (such as clicks and drags) must be deeply tied to the story progression (such as the stages of stone removal).
4. Full-stack engineering and deployment: A complete pipeline from static asset hosting to dynamic API services must be implemented.

2. 3D Rendering and Geometry Transformation Technical Approach

For implementing 3D rendering in the browser, the industry generally adopts high-level libraries built on WebGL wrappers (such as Three.js). Below are the specific technical implementation details:

1. Model Acquisition and Preprocessing

Publicly available 3D scanned assets are typically used (such as open-source models under the CC BY-SA 4.0 license). Since raw scan data is often extremely large, containing millions or even tens of millions of triangles, loading it directly in the browser would cause memory overflow and excessively long first-screen load times. Therefore, during the engineering phase, the model must be retopologized and decimated, compressed to a level of several hundred thousand triangles, and converted to a web-friendly format (such as glTF/glb).

2. Dynamic Decimation and “Carving” Effect Implementation

To simulate the process of stone being chipped away layer by layer, gradually revealing the David statue, there are primarily two technical approaches:

• Real-time carving based on boolean operations: Create an outer bounding box geometry representing the “stone” in the 3D engine. When the user triggers a “chisel” action, use CSG (Constructive Solid Geometry) algorithms to perform a boolean difference operation between the bounding box and a predefined “chisel” geometry, thereby cutting the stone in real time. This approach offers high visual realism, but the computational cost of boolean operations is enormous and can easily cause frame drops.
• Progressive transparency control based on shaders: A more suitable lightweight approach for the web. The David statue model and the outer stone model are spatially overlapped. By writing custom vertex shaders and fragment shaders, depth buffer and stencil buffer tests are used. When the user drags a slider or clicks a button, uniform variables in the shader (such as the Y-axis coordinate of a cutting plane or the radius of a spherical mask) are dynamically modified, causing stone fragments in the “already carved” region to become transparent (discard), thereby revealing the statue inside.

3. Lighting and Material Representation

To create an artistic atmosphere of a statue focused under a spotlight in a dark room, ambient light is typically abandoned in favor of a spotlight as the main light source. By adjusting the penumbra and decay parameters of the SpotLight, the effect of light focusing on the carved surface can be achieved. For materials, the statue can use physically based rendering (PBR) materials with high roughness and specific normal maps to reproduce the texture of marble.

3. Narrative-Driven Interaction and Frontend Engineering

1. Interaction Logic Design

Excellent interaction must not only fulfill functionality but also serve the narrative theme. For example, during the simulated carving process, the system provides an “undo” button, but clicking it displays the message “Marble has no undo key.” This unconventional interaction design is technically very simple to implement (binding a click event and displaying a toast notification), but emotionally it powerfully reinforces the artistic meaning of “carving is irreversible.”

In the actual frontend implementation, a state machine can be used to manage the narrative flow. The entire carving process is divided into multiple states, each corresponding to different camera positions, lighting parameters, and geometry states.

// Narrative state machine pseudocode example
const NarrativeMachine = {
  state: 'PROLOGUE', // Initial state
  transitions: {
    PROLOGUE: { next: 'CARVE_ROUGH', action: showRawStone },
    CARVE_ROUGH: { next: 'CARVE_DETAIL', action: revealBasicShape },
    CARVE_DETAIL: { next: 'FINAL_REVEAL', action: polishSurface }
  },
  dispatch(actionName) {
    const action = this.transitions[this.state][actionName];
    if (action) {
      action.call(this);
      this.state = action.next;
      updateCameraAndLights(this.state);
    }
  }
};

2. Camera and Animation Control

Using camera interpolation animations, the camera can automatically transition smoothly to the next perspective after the user completes a specific stage of interaction. By introducing an animation tweening library and interpolating the camera’s position and lookAt target point using linear or Bezier curve interpolation, the cinematic narrative feel can be greatly enhanced.

4. Backend Support and Cloud-Native Deployment Architecture

A complete 3D interactive website requires not only efficient frontend rendering but also stable backend resource hosting and service support. In such applications, a frontend-backend separation architecture is typically adopted, deployed with general-purpose cloud-native products.

1. Static Asset Hosting and Acceleration

Since the application includes high-quality 3D model files, high-resolution texture maps, and compiled frontend JavaScript bundles, the static asset volume is often large. The best practice is to use object storage to uniformly store these static assets and configure a CDN (Content Delivery Network) for global acceleration. This effectively reduces first-screen loading latency and improves the user access experience.

2. Dynamic Services and Containerized Deployment

If the application includes dynamic APIs such as user behavior logging or share code generation, the backend services can be containerized and deployed to a container platform. Combined with cloud-native logging services and monitoring/alerting capabilities, concurrent traffic volume and API response latency can be observed in real time, ensuring system stability during traffic peaks.

3. Extending the Experience Loop: Video Output

To expand the website’s reach, its core content often needs to be converted into short videos for distribution. Technically, this means extracting keyframes, camera trajectories, and narrative text from the 3D web application and reorganizing them into a video rendering queue. By using a headless browser to automatically drive the web page, taking frame-by-frame screenshots according to preset script parameters (such as timeline and camera switches), and using a multimedia processing framework to synthesize MP4 files, the static 3D interaction is extended into dynamic audiovisual content—an important step in enhancing the project’s expressiveness.

5. Summary and Engineering Practice Takeaways

Using Web 3D technology to recreate the birth process of an artwork is a comprehensive test of frontend graphics rendering capabilities and interaction design thinking. Throughout the engineering practice, we can draw the following takeaways:

1. Balance performance and visuals: When handling high-precision 3D models on the web, decimation, compression, and on-demand loading must be done well. Blindly pursuing model precision at the expense of performance will lead to collapse.
2. Technology serves experience: Interaction logic (such as the “irreversible” setting) should be tightly tied to the theme, using minimal code to achieve deep emotional resonance rather than piling on complex, useless features.
3. The necessity of cloud-native infrastructure: The smooth operation of large-volume 3D applications depends on underlying cloud infrastructure such as object storage, CDN, and container platforms. Reasonably leveraging general-purpose cloud products is key to ensuring delivery quality.

Through appropriate technology selection and architecture design, developers can fully break through the limitations of traditional flat interfaces and build 3D interactive narrative applications with professional-grade expressiveness in the browser, making digital technology a new medium for spreading culture and art.