3D Narrative-Driven Cultural Education: Building an Interactive Journey from Stone to Sculpture

1. Background: When Cultural Education Meets 3D Interaction

Traditional cultural education content relies mostly on text, images, video, or physical exhibitions. Audiences tend to be passive recipients: they learn about dates, authors, and schools, but rarely develop a felt sense of the creative process itself. Take classical sculpture as an example. Viewers usually remember that “a certain master spent years completing it,” but they struggle to understand what “from a block of stone to a human figure” actually means in terms of countless judgments, trade-offs, and irreversible operations.

3D graphics technology offers a new path for expression. Using real scan data or procedural models, combined with real-time rendering in the browser, we can break down the process of “subtractive creation” into interactive steps. Audiences can personally drive a “chisel strike” and build intuitive awareness of material, volume, and risk through hands-on operation. This kind of experience requires no client installation—it runs by opening a web page—making it well suited for cultural institutions, educational settings, and content creators.

This article uses a fictional practice project as an example to discuss how to build such an interactive educational website from scratch, focusing on four engineering challenges: 3D data processing, progressive deformation, narrative pacing design, and performance optimization.

2. Requirements Breakdown: Translating “Understanding Sculpture” into Technical Goals

Before starting, vague expressive goals need to be translated into executable technical goals. The original requirements can be summarized in three points:

1. Help ordinary audiences understand how a sculpture is born from a single block of stone;
2. Give audiences a new understanding of “sculpture as a subtractive art,” rather than just memorizing a few facts;
3. Make audiences willing to pause and observe the work itself, rather than quickly scrolling away.

At the technical level, these can be broken down as follows:

Narrative Goal	Technical Implementation Direction
Reflect the subtractive process “from whole block to local detail”	Interactive geometry reduction or progressive reveal
Reflect the “irreversible” material property	One-way operation state machine + clear interaction feedback
Guide audiences to observe details	Camera controls supporting rotation, zoom, and local focus
Lower the barrier to understanding	Act-based narrative, slider- or button-driven pacing
Ensure accessibility	Controllable time-to-interactive on first screen, usable on mobile

It is worth noting that “irreversibility” is not a purely technical constraint but a narrative design choice. It translates the physical properties of the material into interaction rules, so that audiences have an emotional reaction the moment they press a button. This kind of “rules as expression” design is more effective than plain text explanations.

3. Data Acquisition and Processing: Using Real Scan Data

To make audiences believe in the model in front of them, using real scan data is more convincing than procedural modeling. In public 3D scanning communities, there are many cultural heritage models contributed by institutions or individuals, usually released in STL, OBJ, or GLB format with open license agreements. When using them, license terms must be strictly followed, and attribution and source information must be retained.

3.1 Data Acquisition Workflow

A typical workflow looks like this:

# 1. Download the original scan file (usually STL or OBJ)
# 2. Check face count and file size
# 3. Use mesh processing tools for cleanup and simplification
# 4. Export to GLB/GLTF format suitable for the web

Original scan files often have extremely high face counts—millions of triangles—and loading them directly into the browser leads to long first-screen times and excessive memory usage. Therefore, geometry simplification is mandatory.

3.2 Simplification and Compression Strategies

Simplification requires balancing “preserving detail” and “controlling size.” Common approaches include:

• Vertex clustering simplification: merging vertices by spatial distance, suitable for rapid face reduction;
• Quadric error metric simplification: reducing face count while preserving contours and curvature, with better results but higher computation cost;
• Normal map compensation: baking high-poly detail into normal maps and using a low-poly model to approximate the visual result;
• Draco compression: lossy compression of geometry data that significantly reduces transmission size.

In practice, an acceptable target is: keeping the main model between 50,000 and 200,000 triangles, with the single-file size controlled at a few megabytes after Draco compression. For mobile, the face count can be further reduced or two levels of LOD can be provided.

3.3 Materials and Lighting

For sculpture content, the visual focus is form and texture, so materials should not be overly complex. Recommended approach:

• Use PBR materials with reasonable roughness and metalness (marble typically has high roughness and zero metalness);
• Use a combination of environment lighting + directional light, where the directional light emphasizes form transitions and the environment light fills in shadows;
• Optional ambient occlusion maps can significantly enhance the sense of depth in recessed areas;
• Avoid too many dynamic light sources to prevent increasing shading cost.

4. Core Interaction: Progressive Geometry Reveal

This is the technical core of the entire project. Audiences push the “chiseling” progress through a button or slider, and the model gradually transforms from a complete stone block into a sculpture. There are two main implementation approaches.

4.1 Approach One: Geometry Reduction by Removing Faces

The idea is to progressively delete triangles in a preset order. The model’s faces can be pre-sorted “from outside to inside,” and then the number of visible faces is controlled based on a progress threshold.

// Pseudocode: controlling visible face count based on progress
function updateVisibility(progress) {
  const totalFaces = geometry.index.count / 3;
  const visibleFaces = Math.floor(totalFaces * progress);
  geometry.setDrawRange(0, visibleFaces * 3);
}

The advantage of this approach is simple implementation and controllable performance; the disadvantage is that the boundary of face removal may look harsh, requiring noise or masks to make the transition more natural.

4.2 Approach Two: Vertex Displacement and Deformation

Another approach is to keep the full mesh and, through a vertex shader or CPU-side computation, interpolate vertices from the “stone shape” to the “sculpture shape.” This requires two sets of vertex data: one for the bounding box or rough stone form, and one for the final sculpture form.

// Vertex shader pseudocode: interpolation by progress
vec3 pos = mix(stonePosition, sculpturePosition, progress);

This approach produces smoother transitions, but places higher demands on memory and vertex data organization, and requires the two meshes to have identical topology, otherwise tearing will occur.

4.3 Recommended Combination

A more robust practice is “layered reveal”:

1. First use a rough bounding box to represent the original stone block;
2. As progress advances, the bounding box gradually hides and the sculpture mesh gradually appears;
3. Overlay particle or debris effects in the transition area to simulate stone flaking;
4. Use noise masks to give the boundary an irregular shape, avoiding a “clean cut.”

This combination both controls complexity and achieves good visual performance.

5. Narrative Design: Act Structure and Interaction Pacing

3D interaction can easily make users feel lost, so a clear narrative structure is needed. A common approach is to divide into acts:

• Act One: The Stone. Show the complete block, explain its dimensions and origin, and establish the perception of “a single block of material”;
• Act Two: The First Strike. Guide the user to click, triggering the first reduction, emphasizing irreversibility;
• Act Three: Taking Form. Advance through a slider or continuous clicks, showing the main form gradually emerging;
• Act Four: Observation. Unlock free rotation and zoom, encouraging users to observe details from different angles;
• Epilogue: The Remainder. Use a short passage to make the point that “the sculpture is what remains in the stone.”

At the interaction level, note the following:

• Every operation should have clear feedback, including visual changes, sound effects, or text prompts;
• Key operations should have a “sense of confirmation,” such as a short delay and animation after a button press;
• Provide a “reset” or “replay” entry point, but preserve the core expression of “irreversibility”;
• Adapt touch interactions for mobile, avoiding reliance on hover or other desktop-only interactions.

6. Performance Optimization and Deployment

6.1 Loading Optimization

• Use on-demand loading: load only the stone and basic scene on the first screen, and load the high-poly sculpture when needed;
• Enable Gzip/Brotli transfer compression for model files;
• Use CDN or object storage to distribute static assets and reduce first-screen latency;
• Provide loading progress indicators to prevent users from thinking the page has frozen.

6.2 Rendering Optimization

• Limit device pixel ratio, which can be reduced to 1.5 or lower on mobile;
• Use frustum culling and occlusion culling to reduce unnecessary draw calls;
• Enable material merging and instancing for static scenes;
• Monitor frame rate and automatically degrade on low-end devices (e.g., disable shadows, lower resolution).

6.3 Deployment and Validation

Static sites can be deployed on general-purpose object storage and content delivery networks, with automated build pipelines handling releases. Before launch, check:

• Compatibility with mainstream desktop and mobile browsers;
• Loading behavior under weak network conditions;
• Whether the interaction flow is smooth and the copy is clear;
• Whether 3D data licenses and attribution are complete.

At this stage, static hosting, logging, and monitoring capabilities provided by general cloud platforms can help quickly identify loading failures, 404 resources, or performance bottlenecks. If using intelligent coding tools to assist development, it is advisable to focus them on scaffolding generation, shader debugging, and build script writing, while core narrative and interaction logic still require human control.

7. Lessons Learned and a Reusable Checklist

Looking back at the entire project, the following points have the most reusable value:

1. Define the narrative first, then the technology. Interaction rules serve expressive goals, not the other way around.
2. Real data first, but simplification is mandatory. Scan data improves credibility, but requires compression and LOD strategies.
3. Progressive reveal is more robust than reconstruction. Two-mesh interpolation is elegant but carries high engineering complexity.
4. Act structure reduces cognitive load. Let users know what they are doing at every step.
5. Performance is part of the experience. If the first screen takes more than a few seconds, even the best narrative will lose users.
6. Licensing and attribution cannot be omitted. Always follow the agreement when using open data.

8. Conclusion

Bringing the birth process of a classical sculpture into the browser is essentially an attempt to “recreate the creative experience through engineering means.” It involves 3D data processing, real-time rendering, interaction design, and narrative arrangement—missing any one of these weakens the final result. For developers, the value of such projects lies not only in technical practice, but also in the approach it offers: transforming abstract cultural knowledge into an operable, perceivable interactive process, letting users build understanding through “doing.”

As browser graphics capabilities and network transmission efficiency continue to improve, the cost of building this kind of cultural education interaction is declining. Future directions worth exploring include: multi-user collaborative observation, voice-guided narrative, and hybrid experiences linked with physical exhibitions. No matter how technology evolves, the core question remains the same—how to make audiences willing to pause and take a serious look at the work in front of them.