Built at Simform

ShedPRO

Interactive 3D configurator revolutionizing custom shed design with real-time visualization

Overview

ShedPRO is an innovative 3D configurator that transforms the custom shed industry by empowering customers to design their perfect storage solution through intuitive real-time 3D visualization. The platform eliminates the back-and-forth of traditional custom orders by putting complete design control directly in customers' hands, from structural elements to materials and colors.

Built with React, Three.js, and BabylonJS, ShedPRO delivers a sophisticated yet user-friendly configuration experience that runs smoothly in web browsers. The application handles real-time 3D model updates as users adjust dimensions, select roof styles, choose siding materials, configure doors and windows, and customize every visual detail. The system generates accurate quotes instantly and produces manufacturing-ready specifications.

This technically demanding project required expertise in parametric 3D modeling, real-time rendering optimization, complex state management for hundreds of configuration options, and building an interface that makes 3D design accessible to users without CAD experience.

Role: 3D & Frontend Developer · Simform
Duration: 10 months
Team: Cross-functional team of 2 frontend engineers, 2 backend engineers, 1 3D modeler, 2 designers, and 1 product manager

The Challenge

The custom shed industry relied on lengthy consultation processes, imprecise sketches, and customer uncertainty about final appearance. The challenge was to build a web-based 3D configurator that could handle infinite design combinations while maintaining real-time performance. The system needed to procedurally generate accurate 3D models from user inputs, update instantly as configurations changed, render photorealistic previews, and produce error-free manufacturing specifications—all while being intuitive enough for any customer to use.

Build parametric 3D modeling system generating accurate shed models from 1000+ possible configuration combinations
Achieve instant visual updates (<100ms) as users modify dimensions, materials, and structural elements in real-time
Create photorealistic rendering with accurate material representations (wood grain, metal finishes, paint colors)
Generate manufacturing-ready specifications and pricing calculations synchronized perfectly with 3D visualization

What I built

Real-Time Parametric 3D Engine

Engineered sophisticated parametric modeling system using Three.js and BabylonJS that generates geometrically accurate shed models in real-time based on user inputs. Built custom algorithms handling complex construction logic including roof pitch calculations, door/window placement validation, structural support requirements, and material quantity calculations. Implemented efficient mesh generation with vertex welding, normal calculations, and UV mapping automation. The system handles dimension changes, structural modifications, and configuration updates with sub-100ms regeneration times through clever geometry caching and incremental updates.

Sub-100ms model regeneration time

Intuitive Design Interface

Developed user-friendly configuration interface making complex 3D design accessible to customers without technical expertise. Built multi-step workflow guiding users through structural decisions (size, roof style, foundation), exterior design (siding, colors, trim), openings (doors, windows, vents), and interior features. Implemented contextual help system showing valid options based on previous selections, preventing configuration errors. Created responsive side panel layout allowing customers to see real-time 3D updates while adjusting parameters with sliders, swatches, and dropdown menus.

88% configuration completion rate

Photorealistic Material Visualization

Implemented advanced material system showcasing wood grain textures, metal finishes, painted surfaces, and roof shingles with photorealistic accuracy. Built PBR (physically-based rendering) pipeline with accurate roughness, metalness, and normal maps for each material option. Created custom GLSL shaders handling weathering effects, wood grain variations, and lighting interactions. Implemented HDR lighting with environment maps simulating different times of day and lighting conditions. The material library includes 50+ options each with multiple color variants, all rendering in real-time with correct scale and tiling.

50+ materials with real-time PBR rendering

Interior Customization System

Developed comprehensive interior configuration allowing customers to design shelving, workbenches, loft storage, electrical outlets, and lighting fixtures. Built 3D placement tools with collision detection preventing overlapping elements and ensuring valid configurations. Implemented smart snapping system aligning elements to studs and maintaining proper clearances. Created cutaway visualization mode toggling walls transparent for interior inspection. The system generates accurate material lists including framing lumber, electrical components, and hardware based on interior selections.

65% of customers customize interiors

Export and Sharing Features

Built comprehensive export system generating high-quality renderings, detailed specifications, and shareable design links. Implemented high-resolution screenshot capture using offscreen rendering at 4K resolution with anti-aliasing and post-processing. Created PDF generation bundling 3D views, material specifications, dimensions, and itemized pricing. Built design sharing system with unique URLs allowing customers to collaborate with family members or return to modify designs later. Integrated with CRM systems for seamless order processing.

10,000+ designs shared via unique URLs

How it works

Built on React with dual 3D engine approach leveraging Three.js for advanced rendering and BabylonJS for parametric modeling capabilities. TypeScript ensures type safety across complex configuration state. The architecture implements custom geometry generation algorithms creating meshes procedurally from configuration parameters. Custom React hooks manage 3D scene lifecycle, camera controls, and rendering optimization. State management uses Context API with optimized selectors preventing unnecessary re-renders. WebWorkers handle complex calculations offloading from main thread. The system integrates with backend APIs for pricing calculation, inventory validation, and order processing.

Stack

React
Three.js
BabylonJS
WebGL
TypeScript

Hard parts

Generating geometrically accurate 3D models from parametric inputs while maintaining real-time performance(<100ms per update)
Implementing photorealistic material rendering with PBR workflows processing 50+ high-resolution textures without memory issues
Managing complex configuration state with 1000+ possible combinations while preventing invalid configurations
Ensuring manufacturing specifications generated from 3D model exactly match customer visualization without manual intervention

How I solved them

Built geometry caching system with incremental updates modifying only affected mesh sections reducing regeneration time by 85%
Implemented texture atlassing, KTX2 compression, and progressive loading with GPU memory management keeping VRAM under 512MB
Developed constraint-based validation system with dependency graph ensuring only valid options present at each configuration step
Created bidirectional synchronization between 3D model and manufacturing specs with automated testing validating 100% accuracy

Results

+250%
Sales Increase: Within 6 months of launch; -95%
Order Errors: Through accurate visualization; 25,000+
Designs Created: In first year with 15% conversion

Increased online sales by 250% within 6 months of launch, eliminating need for in-person consultations
Reduced order errors by 95% through accurate visualization and automated specifications
Decreased average sales cycle from 14 days to 2 days with instant quoting and design finalization
Generated 25,000+ custom shed designs in first year with 15% conversion rate
Reduced customer support inquiries by 60% through intuitive self-service design process

Keep looking

Previous project

Mirai

Next project

Golden City

Back to all projects