AI-Assisted Development in Practice: Engineering Review of a 3D Interactive Narrative Project from Web Delivery to Video Production

1. Introduction: An Ambitious Creative Task

With AI-assisted development tools maturing rapidly, a practical engineering question arises: how far can an AI toolchain go when tackling a composite project that involves narrative design, 3D rendering, interaction logic, and multimedia delivery?

This article walks through a real development practice, reviewing the entire pipeline from requirement definition through technical selection, 3D interaction implementation, video production, and final delivery. The original task can be summarized as:

Build a Chinese-language interactive website that helps ordinary viewers understand how a classic sculpture is born from a block of raw stone. After the experience, viewers should not only remember the key points but also develop a fresh appreciation for the act of sculpting — and be motivated to stop and look more closely.

This seemingly simple brief actually spans several technical dimensions:

• 3D model loading and real-time rendering: handling large-scale mesh data
• Step-by-step narrative interaction: translating the “subtractive sculpture” process into an operable visual experience
• Visual style and information design: balancing artistry with readability
• Video repurposing: converting website content into short-form video assets

The following sections break down the project by engineering phase.

---

2. Technical Architecture: From Requirements to Design

2.1 Abstracting the Core Narrative

Every interactive narrative project starts with defining the narrative model. In this case, the core creative idea was distilled into a single sentence:

A sculpture is what remains in the stone.

Around this premise, two distinct interaction paths can be designed:

Approach	Core Mechanism	Best For
Subtraction simulation	User clicks “chisel,” stone chips fall away piece by piece	Immersive experience emphasizing participation
Exhibition interpretation	Slider controls “amount removed,” revealing layers	Educational display emphasizing information delivery

Both approaches are valid and complementary. This illustrates a key point: the value of AI-assisted development lies not in replacing design decisions, but in enabling multiple design directions to be prototyped and validated quickly at low cost.

2.2 Acquiring and Processing 3D Assets

The core asset for a sculpture-themed 3D interaction is a high-precision mesh model. A common industry practice is to use 3D scan data released by museums or cultural heritage organizations (typically in STL or OBJ format under open licenses such as CC BY-SA). The technical processing pipeline generally follows these steps:

// Pseudocode: 3D model loading and preprocessing pipeline
1. Load STL/OBJ mesh → parse vertex and face data
2. Mesh decimation → reduce face count to a web-friendly range
3. Recalculate normals and unwrap UVs → prepare for materials and lighting
4. Optional block segmentation → support "layer-by-layer reveal" interaction
5. Serialize to glTF/GLB → optimize web delivery efficiency

Key engineering considerations:

• Raw scan models often have extremely high polygon counts (hundreds of thousands to millions of faces). Direct loading will cause page lag. Decimation algorithms should bring the count to roughly 50,000–150,000 faces.
• If a “stone chipping” effect is needed, the model can be segmented by bounding box into layers. Each layer becomes an independent mesh; toggling visibility creates the progressive reveal.
• For lighting, an ambient-plus-directional-light combination is recommended, enhanced with normal maps to convey stone texture.

2.3 Choosing the Interaction Layer Technology

Mainstream options for web-based 3D interaction include:

• WebGL-based 3D frameworks (e.g., the Three.js ecosystem)
• Next-generation WebGPU rendering (better performance, but browser compatibility is still evolving)
• Pre-rendered frame sequences played via Canvas (suitable for scenarios with limited interactivity)

For this project, the “chisel and peel” interaction demands real-time response and dynamic lighting, so a WebGL 3D framework is the recommended choice. Core interaction logic in pseudocode:

// Interaction state machine pseudocode
const state = {
  currentLayer: 0,
  totalLayers: N,
  isAnimating: false
};
function onChiselClick() {
  if (state.isAnimating || state.currentLayer >= state.totalLayers) return;
  state.isAnimating = true;
  const layer = layers[state.currentLayer];
  // Play debris-falling animation
  animateDebris(layer.debris, () => {
    layer.mesh.visible = false;
    state.currentLayer++;
    state.isAnimating = false;
    updateNarrativeText(state.currentLayer);
  });
}

One notable design detail is the ironic “undo” button — clicking it triggers a toast message: “Stone has no undo button.” This is a narrative technique that binds the interaction mechanism to the project’s thematic core. Technically it is trivial (a click event plus a toast notification), but it significantly strengthens the thematic expression at the experience level.

---

3. Multimodal Delivery: From Website to Video

3.1 Video Production Pipeline

After the website is delivered, the next propagation need is a 60–90 second vertical short video. Common technical routes include:

1. Screen recording + editing: directly capture the website interaction, then speed up and add subtitles in post
2. Code-reused animation: reuse the website’s 3D scene, drive camera paths and animation timelines via script, and render frame by frame
3. Hybrid approach: website assets + AI-generated visuals + voiceover synthesis

From an efficiency standpoint, option 2 offers the most control: since the 3D scene already runs in the browser, a timeline script can drive the camera, lighting, and model states. A recording tool captures frames, and a video editor adds audio and subtitles.

3.2 Structuring the Video Narrative

The core challenge of short-form video is completing a full “hook → showcase → elevation” arc within 90 seconds. A reusable structural template:

Time Range	Content	Technique
0–10 s	Hook (a block of raw stone)	Close-up shot + voiceover question
10–50 s	Core showcase (the peeling process)	Speed-up playback + keyframe pauses
50–70 s	Thematic elevation (the philosophy of “what remains”)	Static composition + on-screen text
70–90 s	Call to action (visit the website)	Interface demo + QR code

3.3 Engineering Checklist Before Delivery

Self-check items before shipping the video:

• Resolution and aspect ratio match target platform requirements
• Audio is free of clipping and synchronized with visuals
• Subtitles stay within safe zones and are proofread line by line
• Asset sources and licenses are fully documented
• Editable project files are archived

---

4. Engineering Review of Multi-Tool Collaboration

4.1 Real-World Challenges of Multi-Tool Workflows

In real projects, a single tool rarely covers everything. A common collaboration pattern looks like:

Requirement definition → Tool A (rapid prototype) → Tool B (refined implementation) → Tool C (final delivery)

In this pattern, project folder structure and context transfer become critical. When tools cannot directly read each other’s session state, a disciplined file organization (e.g., /src, /assets, /docs, /scripts) reduces the cost of switching.

4.2 Common Issues and Mitigations

Issue	Symptom	Mitigation
Session interruption	Long tasks get truncated, state is lost	Save incrementally; each stage produces self-contained files
Cost overrun	Heavy usage exhausts quotas	Assign simple tasks to lightweight models; reserve strong models for complex work
Delivery delay	Prototype is done but not yet runnable	Set “minimum shippable” milestones; prioritize getting something working
Context loss	Switching tools requires re-explaining requirements	Maintain a PROJECT.md documenting goals, constraints, and progress

4.3 Balancing Cost and Efficiency

In practice, model capability and cost are not linearly correlated. A pragmatic strategy:

• Planning and architecture phase: use models with strong reasoning to ensure the right direction
• Implementation and content-filling phase: use fast, low-cost models for bulk code and asset generation
• Wrap-up and QA phase: combine manual review with automated checks to guarantee delivery quality

The essence of this strategy is separating “thinking” from “doing”, letting tools with different strengths play to their advantages.

---

5. Lessons Learned and Reusable Patterns

5.1 Three Reusable Engineering Patterns

Pattern 1: Narrative-Driven 3D Interaction

• Start with a one-sentence core premise
• Then design interaction mechanics that embody that premise
• Finally wrap it in 3D and visual treatments

Pattern 2: Asset-First Development Order

• Resolve 3D assets first (acquisition, simplification, optimization)
• Then build the rendering and interaction framework
• Finally polish copy and visual details

Pattern 3: Multi-Modal Asset Reuse

• 3D scenes, copy, and color schemes from the website can be reused directly in video
• The video timeline script can share state definitions with the website’s interaction state machine
• Build once, deliver across multiple channels

5.2 A Realistic View of AI-Assisted Development

From this project, several objective takeaways emerge:

1. AI tools excel at rapid prototyping and content generation, but long-task coherence and delivery completeness still require human oversight.
2. Multi-tool handoffs are a practical reality; success hinges on context management and file discipline.
3. Cost control demands proactive strategy, not a default of “always use the strongest model.”
4. Final delivery quality depends on engineering management, not on the strength of any single tool.

---

6. Conclusion

From a block of stone to a finished sculpture, Michelangelo said he simply “removed what was unnecessary.” From a single requirement to a runnable, experiential, and shareable interactive work, the AI-assisted development process is its own form of subtraction — removing unnecessary complexity, redundant tool switches, and unproductive wait times, so that the creative idea itself can emerge.

Technology is the means, narrative is the skeleton, and delivery is the baseline. Whether the output is a 3D interactive website or a short video, what truly resonates is always the core proposition expressed clearly. For developers, mastering toolchain collaboration patterns and building reusable engineering practices is what ensures every creative effort can make it all the way to delivery.