Interactive 3D Web Experience & Scroll-Driven EV Configurator
Standard automotive websites rely heavily on static 360-degree flat image rotations or complex, unoptimized WebGL configurations that choke mobile GPUs and delay initial load times by up to 30 seconds. EV3D’s parent manufacturer needed to move beyond...
About a Project
Standard automotive websites rely heavily on static 360-degree flat image rotations or complex, unoptimized WebGL configurations that choke mobile GPUs and delay initial load times by up to 30 seconds. EV3D’s parent manufacturer needed to move beyond flat, transactional product grids to create an immersive narrative. The objective was to showcase the engineering depth of a new high-performance electric SUV—focusing on its battery cell packing density, drag coefficient aerodynamics, and dual-motor dynamics—while keeping the user experience completely fluid, responsive, and performance-optimized across all viewports. Achieving a stable 60 FPS while loading and animating complex CAD-derived 3D vehicle structures on scroll was the major technological bottleneck.
Project idea
- Optimizing ultra-realistic 3D CAD meshes for fluid web rendering
- Syncing precise camera tracks and component animation states to scroll triggers
- Developing adaptive performance profiles for stable 60 FPS mobile playback
Solutions we've delivered
- WebGL Performance Tuning: Optimized complex industrial CAD models down by 92% using Draco compression, vertex decimation, and texture atlas mergin...
- GSAP Scroll-Timeline Mapping: Mapped the physical scroll distance to three.js camera interpolation paths and custom shader uniforms, creating a comple...
- Double-Buffered Asset Pipeline: Implemented a custom React-based pre-loader that dynamically caches keyframes and high-resolution WebP frame sequences. ...
- Dynamic Quality Scaling Engine: Designed a lightweight hardware-profiling hook that automatically adjusts antialiasing, shadow resolution, and pixel rat...
- Conversion-Oriented Telemetry UI: Created a modern head-up display (HUD) overlay in Next.js that animates vehicle stats (range, torque, speed) in response...
Results
- 45% increase in online test-drive bookings in the first month
- 99% Lighthouse performance score achieved, up from a baseline of 70% before optimization fixes
- Consistent 60 FPS rendering on both mid-range mobile and desktop devices
- Average user engagement session duration increased to 4 minutes and 12 seconds
- Over 90% reduction in 3D asset file size with Draco mesh compression
Business Challenges
Our client required an integrated, scale-ready solution to overcome complex structural hurdles, compliance standards, and user experience pain points.
- Laggy or stuttering page rendering on lower-tier mobile GPUs
- High asset size (over 50MB) causing unacceptable page load delay
- Replicating natural metallic surfaces and environmental reflection maps in WebGL
Project Goals
The platform was developed considering the local industry specificities and further strategic product partnership.
WebGL Performance Tuning
- Optimized complex industrial CAD models down by 92% using Draco compression, vertex decimation, and texture atlas merging, reducing the overall mesh payload from 58MB to just 4.5MB while maintaining pristine reflection maps.
GSAP Scroll-Timeline Mapping
- Mapped the physical scroll distance to three.js camera interpolation paths and custom shader uniforms, creating a completely fluid transition of vehicle component explosions and rotational views as the user navigates the page.
Double-Buffered Asset Pipeline
- Implemented a custom React-based pre-loader that dynamically caches keyframes and high-resolution WebP frame sequences.
- This guarantees lag-free scrub performance even on cellular networks.
Dynamic Quality Scaling Engine
- Designed a lightweight hardware-profiling hook that automatically adjusts antialiasing, shadow resolution, and pixel ratios based on frame-rate monitoring, maintaining a smooth 60 FPS target.
Conversion-Oriented Telemetry UI
- Created a modern head-up display (HUD) overlay in Next.js that animates vehicle stats (range, torque, speed) in response to scroll positions, converting passive viewers into direct test-drive bookings.
Product in Details
We've made the SaaS platform from scratch and became a long-term technical partner for the customer.
Business Architecture
- WebGL Performance Tuning: Optimized complex industrial CAD models down by 92% using Draco compression, vertex decimation, and texture atlas merging, reducing the overall mesh payload from 58MB to just 4.5MB while maintaining pristine reflection maps.
- GSAP Scroll-Timeline Mapping: Mapped the physical scroll distance to three.js camera interpolation paths and custom shader uniforms, creating a completely fluid transition of vehicle component explosions and rotational views as the user navigates the page.
- Double-Buffered Asset Pipeline: Implemented a custom React-based pre-loader that dynamically caches keyframes and high-resolution WebP frame sequences. This guarantees lag-free scrub performance even on cellular networks.
Application development
We structured the development cycle following modern architectural paradigms to achieve high agility and rapid deployment.
- We assembled a specialized interactive creative team: Technical Director, 3D Artist, WebGL Shader Developer, and React Three Fiber leads.
- The system was coded in 4 months using Next.js, Three.js, React Three Fiber (R3F), GSAP, and Draco compression binaries.
- We built custom vertex shaders for color grading and deployed dynamic canvas quality-scaling logic.
Results Obtained
On the project, we passed through all the steps to achieve all the goals set:
% increase in online test-drive bookings in the first month
% Lighthouse performance score achieved, up from a baseline of 70% before optimization fixes
Consistent 60 FPS rendering on both mid-range mobile and desktop devices
- Average user engagement session duration increased to 4 minutes and 12 seconds
- Over 90% reduction in 3D asset file size with Draco mesh compression
Performance Audits & Diagnostics
Baseline Performance (Before Fixes)
Lighthouse audit showing initial rendering bottleneck and layout shifting (~70% score) on unoptimized mesh assets.
Post-Optimization Performance (After Fixes)
Achieved a 99% overall Lighthouse score after implementing Draco mesh compression, WebGL canvas quality scaling, and asset pre-buffering.
Technology stack
Tools and solutions are selected and used, considering the requirements of the customer and the Automotive / 3D Web industry.
Web Stack
Node.js
Express
Next.js
Three.js
React Three Fiber
GSAP
TailwindCSSDatabase & Storage
MongoDBDeployment & Cloud
Vercel
AWS S3 / CloudFrontSecurity & Authentication
NextAuthClient Review
“The interactive scrolling animations feel incredibly premium and organic, and our booking numbers have completely transformed. Truly outstanding engineering and design.”
Julien Mercer
VP of Product, Avant-Motors
Interested in working with us?
Let's discuss your idea and create a roadmap to bring it to market. Fill out the contact form or schedule a direct consultation.