AdeptDEVChallenge
Replace a conventional roofing calculator with a visual flow where users configure an actual house instead of filling out an abstract form and immediately see how choices affect the roof and estimate.
All projectsConfigurator · DEMO
AdeptRoof 3D
Updated interactive 3D configurator for houses and roofs: building shape, dimensions, floors, roof geometry, material, color and additional systems update directly on the model.
What was built
The configurator was rebuilt around a custom WebGL2 scene. It supports simple 2-slope and 4-slope houses, L- and T-shaped geometry, 1–3 floors, main/wing dimensions, eaves and roof pitch. Materials, colors and extra systems update both the visual roof layer and calculation without reloads. Camera orbit, zoom, fit/reset view, dimension overlays, configuration snapshots, three estimate packages, save/share and mobile controls were added.
Outcome
Users follow one path—choose a house, configure geometry, see the roof, compare options and submit the configuration. The 3D scene is part of the calculation workflow rather than decorative animation.
What is included
3D house / roof configuratorCustom WebGL2 renderer2 / 4 roof slopesL- and T-shaped houses1–3 floorsLive dimensions & geometryMaterials & colorsRoof pricing engine3 estimate packagesCamera orbit / zoomConfiguration snapshotSave / ShareMobile controlsRO / RU
What we used in the project
Only technologies and tools that are actually part of this case.
HTML5Frontend
CSS3Frontend
JavaScriptFrontend
PHPBackend
WebGL3D
JSONData
WebGL2Project
Project in detail
Click an image to view it larger.
HAVE A SIMILAR CHALLENGE?
I will show how it can be solved for your business.
Create your AdeptDEV account — projects, documents, invoices and messages stay together in one place.
Register
Quick access to your client portal