Roof design has long been constrained by the limitations of traditional BIM applications. While architects envision expressive, non-planar geometries, they often default to repetitive planar forms due to technological barriers. Beyond aesthetics, these planar designs leave critical questions unanswered: How many panels are needed? What custom tile sizes must be fabricated? How do design decisions impact material costs and constructability?
Problem Statement
Most BIM applications limit roof design to planar forms, creating a significant gap between architectural vision and what’s technically feasible to model. This constraint forces architects to abandon more expressive geometric possibilities early in the design process.
Even when planar roofs are designed, there’s a fundamental abstraction between design intent and construction reality. Questions like “How many roof panels do I need?” or “What will this actually cost to build?” require separate calculations, spreadsheets, and manual coordination between design and construction teams. This disconnect slows iteration, increases errors, and makes it difficult to explore design alternatives with confidence.
Proposed Solution
Roof Panelizer transforms parametric roof design by giving architects direct control over non-planar geometry while simultaneously providing real-time constructability data. It bridges the gap between expressive design and practical construction by making geometry, materiality, and cost inseparable.
The tool is designed for architects who need to explore complex roof forms quickly, and for contractors who need accurate panel counts and cost estimates without waiting for separate takeoff processes.
How it Works
Data Preparation
The foundation is a Grasshopper definition (panelization.gh) that generates parametric roof geometry based on 8 core parameters. The definition handles:
- Base geometry generation from roof dimensions (length, width, height)
- Panel subdivision along both horizontal and slanted directions
- Parametric deformation through wave factors for non-planar surfaces
- Panel rotation for varied surface articulation
- Automatic panel calculations including dimensions, areas, and counts
The Grasshopper definition outputs both 3D geometry and embedded metadata about panel specifications, which are consumed by the web interface.
Interactive Engine
Built with Vue.js and Three.js, the application provides real-time parameter control through 8 sliders:
Geometric Parameters:
- Roof Length (1-100m) – Overall extent of the structure
- Roof Width (0-60m) – Base width determining roof footprint
- Roof Height (0-30m) – Peak height controlling roof pitch
- Panel Depth (1-100m) – Depth of individual panel units
Panelization Parameters:
- Horizontal Panels (0-10) – Subdivision along roof length
- Slanted Panels (2-100, even numbers) – Subdivision along roof slope
- Panel Rotation (0-360°) – Angular orientation of panels
- Wave Factor (0-10) – Parametric wave deformation intensity
When users adjust parameters and click Compute, the application:
- Packages parameters and sends them to Rhino.Compute (cloud-based Grasshopper solver)
- Receives 3D geometry in ~1-2 seconds
- Renders geometry with Three.js using realistic materials (brushed concrete textures)
- Calculates and displays construction metadata in real-time
Cost Intelligence
The application automatically calculates:
- Total panel count – Exact number of panels needed
- Individual panel dimensions – Length × width for each panel
- Panel area – Square meters per panel
- Cost per m² – Configurable material cost (default: $10 USD/m²)
- Cost per panel – Individual panel pricing
- Total project cost – Complete material estimate
- Roof angle – Calculated pitch in degrees
All calculations update instantly with each compute, allowing rapid cost-benefit analysis of design alternatives.
Success Factors
Speed: By leveraging cloud-based Grasshopper computation, complex parametric geometry generates in 1-2 seconds instead of requiring local Rhino/Grasshopper installations.
Integration: The tool combines three traditionally separate workflows—geometric design, panelization analysis, and cost estimation—into a single interface.
Accessibility: Running entirely in the browser with an intuitive slider-based interface makes parametric roof design accessible to users without Grasshopper expertise.
Camera Intelligence: The 3D viewer automatically frames geometry on first compute, then preserves the user’s viewing angle during subsequent iterations, enabling consistent design comparison.
Technical Architecture
Frontend Stack:
- Vue.js 3 – Reactive UI framework with composition API
- Three.js – WebGL-based 3D rendering with PBR materials
- OrbitControls – Interactive camera navigation
- Rhino3dmLoader – Parses Rhino geometry from compute responses
Backend Integration:
- Rhino.Compute – Cloud-based Grasshopper solver (compute8.iaac.net)
- Grasshopper Definition – Parametric logic for roof generation
- RESTful API – Parameter submission and geometry retrieval
Key Features:
- Reactive computed properties for automatic parameter updates
- Configurable cost calculations through external config files
- Custom 3D viewer with ground plane visualization
- One-click reset to default parameters
- Keyboard shortcuts for camera position capture (‘C’ key)
Future Vision
The current implementation focuses on panelized roof structures, but the framework can extend to:
- Multiple roof typologies – Vaulted, domed, hyperbolic paraboloid forms
- Material libraries – Switchable material types with different cost profiles
- Structural analysis – Integration with structural validation for load-bearing capacity
- Export capabilities – Generate fabrication files (DXF, CSV) for CNC manufacturing
- Scenario comparison – Save and compare multiple design alternatives side-by-side
- Environmental analysis – Solar exposure, rainwater collection potential, thermal performance
The tool demonstrates how parametric design can become more accessible while maintaining the rigor needed for real construction projects.
