EcoFuture is a waste-management software company. For their launch we skipped a static hero shot and built a living city instead — dump trucks, sewage tankers, garbage trucks, water tankers and a hazmat vehicle, each running its route in real time, physics and all, right in the browser.
0123456789012345678901234567890123456789
%
About company
Careers
Eco Future
ServicesInteractive 3D city development, physics-driven vehicle animation, custom shading and a cross-device performance system built to bring it all to the mass-market web.
Awards & Nominations
From concept to production
We took a classic idea — a living city model — and carried it all the way to a full production build: real-time 3D graphics, physics, animation and rendering engineered to run smoothly in the browser.
It set the template for how we approach interactive web development — pushing 3D graphics, physics, animation and rendering to their limits without sacrificing browser performance.
Under the hood
Trucks are driven by a physics engine rather than animated wheels on a fixed line: a traction force determined by the route curve keeps each vehicle honest to its path, while also making the wheels rotate naturally as they go.
Those same route curves double as liquid-flow visualizations — cylinders stretched in the vertex shader and lit with a bloom pass — while matcaps, an old but effective technique for a distinctive look without dynamic lighting, and a Photoshop-style layer system with a couple dozen blend modes set the rest of the scene's shading.
The camera moves freely through a dense scene without ever clipping into geometry — buildings and vehicles fade to transparent, shift out of the way, or morph around it, depending on which technique reads best for the obstacle.
The city runs well past the delivery routes too: trains cross the tracks, cranes operate on schedule, helicopters pass overhead, and a lightweight system animates the harbour's water and currents.
Getting the scene onto the mass-market web meant building a full rendering-settings pipeline: two render modes, a short automated performance test on load, and a benchmark database to fall back on when a live test isn't possible.
Mobile, screen density and even the operating system each get their own branch of logic, so the same city scales down gracefully instead of shipping one fixed-quality preset.
Expertise
The project ended up shipping six standalone WebGL applications: the interactive city scene, a fluid simulation, a cloth simulation, a tesseract visualization, a video-text scene, and an “infinite” photo gallery. Beyond WebGL, the frontend itself carried around 80 individual motion items.
About the products
Every truck in the city maps to a real product: back-office tooling that assigns daily jobs to drivers, the Smart Waste platform for industrial, construction and medical waste, Re-bin's exchange for recyclables, and the fleet itself — dump, sewage, garbage and water-tanker trucks, each with its own model.
Next project
