Work·Interactive 3D·Environmental

Dowon APEX ·/ Wastewater Plant Walkthrough

A full wastewater treatment plant in the browser, every piece of equipment selectable and spec-sheet-ready.

Dowon APEX · Wastewater Plant Walkthrough

Dowon APEX: Wastewater plant walkthrough

Client: Dowon APEX Corporation (DWA) Year: 2024 Services: Interactive 3D, Process Visualization, Industrial Equipment Catalogue Duration: 14 weeks Tech: Three.js, Verge3D, baked lighting


The problem

Dowon APEX has manufactured wastewater-treatment equipment (sludge scrapers, bar screens, clarifiers, belt conveyors) since 1996 and exports to nineteen countries. Their catalogue contains dozens of machine types with specific use contexts (municipal water, industrial wastewater, dam maintenance).

The sales process was slow because the equipment is only legible in context. A single sludge remover in a product brochure doesn't communicate why it matters. A sludge remover installed in a plant, connected to the upstream bar screens and the downstream belt conveyors, explains itself immediately.

The request: a full wastewater treatment plant, in the browser, with every piece of Dowon's catalogue selectable in its operational context.


What we built

A browser-based walk-through of an entire wastewater treatment plant. Exterior structure, concrete channels, structural framing, and the full sequence of treatment equipment.

  • Plant-scale environment. Exterior building, skylights, concrete treatment channels, green steel structural frames, grass and sky treatment
  • Equipment catalogue mode. A prev/next stepper cycles through twenty-plus pieces of equipment. Each one gets a focused camera position, a highlighted component with white-stroke outline, and a detailed info panel
  • Spec-sheet integration. Every equipment panel surfaces real specs: dimensions, capacity, speed, material, use case. Not marketing copy. The specs distributors actually need during a quote
  • Dismissible panels. The 3D scene stays interactive at all times; panels are modal overlays, not permanent HUD
  • Persistent branding. DWA corporate lockup top-right; sound and info controls top-left; clean, unobtrusive UI

How we built it

Weeks 1–3. Kickoff, scope definition, catalogue audit. Dowon supplied engineering drawings for twenty-four machines. We prioritized the eighteen most requested in sales and scoped the rest as a potential phase-two addition.

Weeks 4–6. Plant-environment build. We modeled the plant exterior and interior shell from site photographs Dowon supplied, then blocked out the equipment placements.

Weeks 7–9. Individual equipment builds. Each machine went through: CAD import → optimization → material application → integration with the plant scene → hotspot and annotation layer.

Weeks 10–11. UI layer. The stepper, the info panel design, the dismissible-modal pattern, the sound toggle. Client review.

Weeks 12–13. Full copy pass (EN), performance tuning, mobile adaptation (the widescreen layout needed reflow for tablet).

Week 14. Launch, distributor-facing rollout, analytics baseline.


What it changed

Dowon's distributors now demo the plant walkthrough as the opening move of a sales conversation. The 3D tool replaces the first 40 minutes of what used to be a slide-based product pitch.


What we learned

Baked lighting beats real-time lighting for industrial plants. We considered using real-time PBR lighting for the plant environment, then baked it. Load weight dropped from ~14 MB to ~7 MB, frame rate hit 60 on older hardware, and nobody looks at a wastewater plant for the lighting.

Spec-sheet data is the product. Early drafts of the info panels had brief marketing copy with specs at the bottom. Distributors immediately skipped the marketing to get to the specs. We flipped the priority: specs at the top, a single sentence of context below. Engagement time on panels nearly doubled.

Stepper navigation beats free roam for catalogues. We prototyped both. Distributors wanted to be walked through. If they're asked to explore, they explore once and leave. If they're led, they stay engaged through the full sequence and hit more of the catalogue. We kept free-roam as a toggle for the engineering-audience variant.


Stack

  • Runtime: Three.js + Verge3D
  • UI: Vanilla TypeScript + HTML/CSS overlay (no framework overhead for this scope)
  • Assets: GLTF with Draco compression; ~7 MB total for the full plant plus eighteen equipment pieces
  • Lighting: Baked ambient occlusion + lightmap in Blender
  • Hosting: Vercel, CDN-cached
  • Performance budget: 60 fps on 2020 MacBook Air, 30 fps on 2021 iPad

Want something similar?

Process-scale visualization works well for any industrial product that only makes sense in context. Full plants, full assembly lines, full system deployments. If you have one, send us a two-sentence email at hello@cclemang.com.

Back to all work →

Want something similar?

Tell us what you're building. Most conversations start with two sentences.