Building an Interactive 3D “Sculpture Deconstruction” Website from Scratch: Technical Approach and Implementation Highlights

1. From “Making a 3D Website” to “Making a Comprehensible Subtractive Process”

A growing category of requirements has become common: rather than simply embedding a rotatable 3D model on a webpage, the goal is for users to understand how a complex object is manufactured through interactive operations. For example, letting a general audience understand how a classic statue gradually “emerges” from a complete block of stone.

On the surface, this looks like “3D display,” but it is actually a visualization and storytelling problem for subtractive manufacturing. Described in generic technical terms, it involves several key points:

1. A sufficiently detailed 3D scan of the original sculpture is needed;
2. The process from “stone block to finished piece” must be broken down into computable geometric states;
3. Users must be able to trigger continuous changes in geometric state through clicking, dragging, or sliding;
4. An “irreversible” narrative constraint must be embedded in the interaction, rather than merely building an animation player.

This article does not focus on a specific product, but abstracts this type of requirement into a general technical problem: how to build a runnable, experiential subtractive interactive website starting from a 3D scanned model.

2. Raw Data and Model Preprocessing

2.1 Sources of 3D Scan Data

Typically, high-precision sculpture scan data from the public domain or under open licenses can serve as a project starting point. Such data often exists in common mesh formats like STL, containing hundreds of thousands or even millions of triangles. Since STL only stores geometric information without materials, UVs, or skeletal data, preprocessing is mandatory before it can be used on the web.

2.2 Geometric Representation of the Subtractive Logic

The subtractive process can be abstracted into the following steps:

• Target model: the final sculpture to be displayed;
• Initial bounding volume: a rectangular prism or raw stone shape slightly larger than the sculpture’s outer contour;
• Intermediate states: a series of transition meshes generated between the initial bounding volume and the target model.

The simplest approach is not to let the model “grow,” but to let a complete stone block “gradually diminish.” There are two common implementation approaches:

Approach A: Voxel-based sculpting.
Convert the model into a voxel representation, then progressively remove voxels along a certain direction or within a spatial region, and generate intermediate meshes through isosurface extraction. This method is flexible but computationally intensive.

Approach B: Spatial clipping.
In a shader or geometry processing step, define a time-varying clipping region, such as a bounding box that shrinks from outside to inside. Only the parts outside the clipping region are retained. In this way, the stone appears to be chiseled away layer by layer.

A schematic logic is as follows:

// Pseudocode: clip the model based on current progress
float progress = uProgress; // 0.0 to 1.0
vec3 worldPos = vWorldPosition;
vec3 clipMin = mix(uOuterMin, uInnerMin, progress);
vec3 clipMax = mix(uOuterMax, uInnerMax, progress);
if (worldPos.x < clipMin.x || worldPos.x > clipMax.x ||
    worldPos.y < clipMin.y || worldPos.y > clipMax.y ||
    worldPos.z < clipMin.z || worldPos.z > clipMax.z) {
    discard;
}

This approach is suitable for real-time rendering and is easy to bind to user input.

3. Interaction Design: Let Users “Chisel” Rather Than “Watch an Animation”

3.1 Why “Buttons” Instead of Autoplay

Autoplay can only convey linear time, whereas interaction can convey operational cost. If the stone only peels off one layer each time the user clicks a button, the user develops a physical sense that “carving is gradual and irreversible.”

In implementation, the entire subtractive process can be divided into N discrete levels, such as 64 or 128. Each click of the “chisel” button increments the progress variable by one level, simultaneously triggering a geometry clipping update.

3.2 “Undo” as a Narrative Constraint

A very effective design is to place an “Undo” button in the interface, but when the user clicks it, the system responds with “Marble has no undo key.” This interaction is not decorative; it translates material properties into interface rules.

From a technical perspective, this means the system needs to distinguish in state management between:

• Reversible UI state;
• Irreversible carving state.

Once the carving progress is written, it cannot be reverted through normal paths. This can be achieved through state locking or by saving only the current progress snapshot.

4. Scene and Visuals: From “Model Display” to “Spatial Narrative”

4.1 Dark Room with a Single Light Source

Sculpture content is not suited to bright, multicolored, or complex environment maps. A dark room paired with a single key light makes geometric contours and chisel marks more prominent. A common approach is to use low ambient light intensity and add a directional or point light to emphasize highlights and shadows on the model.

4.2 Stone Material

On the web, physically based rendering materials are recommended, but with restrained parameters:

• High roughness;
• Metallicity close to 0;
• Procedural noise to simulate stone texture;
• Avoid high reflectivity to prevent interference with the sculpture’s silhouette.

This maintains realism without compromising loading performance due to oversized textures.

5. Technical Approach and Engineering Implementation

5.1 Frontend Rendering Choices

Web 3D rendering typically uses WebGL or WebGPU. For this type of project, the WebGL ecosystem is more mature and offers better compatibility. A general-purpose 3D engine or a low-level rendering library can be used, with the core requirements being:

• Support for custom shaders;
• Support for common model formats such as STL or GLB;
• Support for mobile degradation.

5.2 Resource Loading Strategy

Raw STL files can be large. From an engineering perspective, it is recommended to:

1. Convert offline to a more efficient binary format;
2. Use mesh simplification algorithms to generate multiple levels of detail;
3. Select the appropriate level based on device memory and screen size;
4. Load only the initial stone model on first screen; compute intermediate carving states in real time via shaders rather than pre-generating large numbers of intermediate meshes.

5.3 Delivery Requirements

A runnable 3D narrative website should ultimately satisfy:

• Openable in mainstream mobile and desktop browsers;
• Core interaction understandable within 30 seconds;
• 3D scene remains smooth on ordinary devices;
• Complete experience without relying on specific accounts or proprietary plugins.

6. From a Single Work to a General Method

The core value of this type of project lies not in a particular sculpture, but in establishing a general “subtractive visualization” pipeline. This pipeline can be transferred to other scenarios, such as:

• Industrial parts from blank to finished product;
• Architectural components from rock mass to partial form;
• Comparison of original and extant states in archaeological restoration.

The key is to unify “data, interaction, and narrative” into a reusable architecture:

• Data layer: input raw mesh and target mesh, generate intermediate state descriptions;
• Interaction layer: bind progress variables to geometry clipping, UI state, and audio feedback;
• Narrative layer: reinforce user understanding of the process through copy, camera constraints, and irreversible rules.

7. Common Issues and Handling Suggestions

7.1 Broken Faces in Geometry Clipping

The cause is usually non-manifold edges or inconsistent normal directions in the original mesh. Mesh repair should be performed during preprocessing, and normals should be recalculated.

7.2 Unstable Frame Rate on Mobile

It is recommended to disable shadows, reduce pixel ratio, reduce the number of light sources, and use simplified model versions.

7.3 Users Do Not Understand the Operation

An onboarding layer can be added to the first screen, such as “Press and hold the button to start chiseling” or “Drag the slider to observe changes.” Onboarding copy should be shorter than two lines to avoid interrupting immersion.

8. Conclusion

The difficulty in building a sculpture deconstruction interactive 3D website lies not in displaying the model, but in transforming the “manufacturing process” into an operable, perceivable web experience. Through proper data preprocessing, shader-based subtractive representation, irreversible interaction constraints, and restrained visual design, a complete work that is runnable, experiential, and transferable can be achieved without relying on specific platform capabilities. This also provides a reference implementation path for fields such as industrial visualization and cultural content digitization.