DY Engineering: Battery recycling system
Client: DY Engineering (DYENG) Year: 2024 Services: Interactive 3D, Process Visualization, Safety Annotation Duration: 12 weeks Tech: Three.js, Verge3D, baked lighting + overlays
The problem
DY Engineering (DYENG) builds the industrial systems that recycle spent lithium-ion batteries. The process extracts "black mass," the valuable mix of metals inside every EV battery cell, and prepares it for reprocessing. As battery recycling becomes a major global industry, DYENG's systems have gone from niche to central. Their sales conversations now involve government regulators, investment banks, and EV manufacturers, in addition to the industrial clients who would traditionally buy.
The sales problem: each audience needs a different level of detail on the same system. A regulator cares about safety and containment. An investor cares about throughput and scale. An industrial buyer cares about operating spec and maintenance. The existing materials (slide decks, plant photographs, PDF process diagrams) couldn't talk to all three.
What we built
A multi-stage interactive 3D visualization of DYENG's black-mass recycling process, with selectable process stages, spec overlays, and safety/operational annotations surfaced on demand.
- Process-stage sequencing. The user steps through the full pipeline from battery intake through shredding, sorting, black-mass extraction, and output packaging
- Safety annotation layer. Any stage can open a safety overlay showing containment, extraction systems, and operator-protection details
- Operational spec panels. Throughput figures, cycle times, power consumption, containment specs
- Multi-audience views. A "regulator view" emphasizes safety/containment, an "investor view" emphasizes throughput/scale, an "operator view" emphasizes maintenance access points. Same underlying scene, different annotation layer
- Deep-linking. Any stage has a shareable URL, so a DYENG rep can send a specific stage directly to a specific audience
How we built it
Weeks 1–2. Kickoff, audience mapping. We interviewed three DYENG sales reps to understand what regulators, investors, and industrial buyers actually ask. And used that to scope the three annotation layers.
Weeks 3–5. Process-stage modeling. Six major stages, each modeled from engineering drawings and reference photographs from DYENG's Korean facility.
Weeks 6–7. Annotation-layer system. We built a data-driven overlay architecture where every stage has three annotation sets (safety, investment, operational), switchable via a top-level mode toggle.
Weeks 8–9. UI layer. Stage stepper, mode switcher, spec panel design, deep-link routing. First integrated client review.
Weeks 10–11. Copy pass, regulatory-language review, performance tuning.
Week 12. Launch on DY Engineering's demo subdomain, training for DYENG's sales team, analytics instrumentation.
What it changed
The DYENG sales team now sends a specific stage URL to a specific prospect as the first touch. Not a PDF, not a slide deck, not a 40-minute call. The prospect interacts with the stage, absorbs what they care about, and books the call already up to speed.
What we learned
Three audience views is one too many. Early versions had four annotation layers. We cut "government compliance" into "safety" because the audiences merged in practice. Fewer modes, sharper use.
Deep-linking is undervalued. A URL that points to a specific process stage with a specific annotation layer is the single most-used feature. The sales team now has a small library of saved URLs for different prospect types.
Honest safety callouts build more trust than hiding them. The regulator view surfaces containment failure modes and how they're mitigated. We worried it would look like admitting weakness. DYENG's regulator prospects read it the opposite way. As technical maturity and respect for the audience. Shipped, unchanged.
Stack
- Runtime: Three.js + Verge3D
- UI: Next.js App Router for routing + overlays, Tailwind for layout
- Assets: GLTF with Draco compression; ~9 MB for the full pipeline
- Annotation architecture: data-driven from a single JSON source, three overlay layers rendered as HTML above the canvas
- Routing: deep-link-capable via query parameters (
?stage=sorting&view=safety) - Hosting: Vercel on DYENG's subdomain
Want something similar?
Multi-audience industrial visualization is a strong pattern when the same system needs to be explained at three different levels of detail to three different buyers. If that's the shape of your product, send us a two-sentence email at hello@cclemang.com.
