Edison Bicycles
WebGL Ecommerce UI/UX
Edison Bicycles wanted their website to emphasize the speed and beauty of their bikes.
Edison Bicycles, based in Atlanta, GA, creates premium custom electric bicycles. Committed to alleviating the city's traffic issues, their mission promotes local bike commuting as an alternative to car travel. By merging advanced technology and top-tier materials, Edison Bicycles offers personalized solutions for a greener and more efficient urban lifestyle.
The company only had three electric bike models at the time so it was a perfect scenario for creating a super product focused experience. I decided on bringing the bikes to life in 3d. Despite the challenges that come with making WebGL performant and compatible with browsers, we wanted to take the risk so that Edison Bicycles could stick out.
Highlights
CTA button that rotates 3 dimensionally based on distance and mouse position
Bikes in 3D. Custom thumbnails and WebGL ticker text
Render image interpolation with scroll
Project view page cover
Add to cart
Custom render animations
Main Challenge
Performance was the biggest challenge. Just from the raw models, each bike contained over a 100,000 vertices each. Combine three bikes and you're out of the game. A lot of efficiencies were made to over come this. We had to instance as many items as we could, combine geometries when possible (reduce draw calls), and ultimately remodel things with a cleaner topology. Although still a size-able file after efficiencies, it was way more manageable on the web.
Around 120,000 vertices before efficiencies
Development Specs
For the stack, I used the following:
- Angular for the front end
- Node for server side
- Strapi for content
- Shopify for Ecommerce
- ThreeJS and GLSL for 3D Web Animations
- Blender for renders and 3D modeling
- AWS cloudfront and s3 (CDN and storage)
- MongoDB