Real-Time 3D Thermal Visualization

Roovie maps simulation results directly onto the 3D building model.

Every surface — walls, roof, floor, windows, doors — is color-coded based on its thermal performance at each hour of the year. The result is not a static heatmap. It is an animated, interactive 3D visualization that shows how the building behaves thermally across 8,760 hours.

This turns abstract simulation numbers into something visceral: you can see where the building is losing heat, where solar gains are concentrated, and how thermal conditions change hour by hour through the day and across seasons.

In One Line

Simulation results rendered as color-mapped 3D surfaces with hourly playback, heat flow particles, and multi-simulation comparison.

What Can Be Visualized

The system supports 9 surface-level variables:

Temperature Variables

• Interior Surface Temperature — temperature of the inside face of each surface, in degrees
• Exterior Surface Temperature — temperature of the outside face of each surface
• Temperature Gradient — temperature difference per meter through the assembly

Heat Flow Variables

• Conduction — heat flow through the material itself, in watts
• Convection — convective heat transfer at the surface
• Radiation — radiative heat transfer on the interior side
• Exterior Radiation — radiative heat transfer on the exterior side
• Solar Radiation — direct solar energy absorbed by the surface
• Net Heat Flow — total heat transfer rate combining all components

Users switch between variables in real time without re-running the simulation. Each variable has its own auto-scaled color range.

Color Scales

The system provides five professional color scales:

• Ironbow — the industry-standard palette from thermal imaging cameras. Dark through purple, red, and yellow. Default choice for engineering analysis.
• FLIR — enhanced thermal imaging gradient styled after professional equipment
• Cool/Warm — blue to white to red. Intuitive for thermal comfort analysis and non-technical presentations.
• Simple — high-contrast blue and red for quick visual identification of problem areas
• Severity — green through yellow, orange, and red. Emphasizes progressively critical conditions.

Each scale uses smooth interpolation between color stops. Temperature values are normalized to the current hour's min/max range for maximum contrast, with a minimum spread of 1 degree to prevent wash-out.

Playback Controls

The visualization includes full playback controls for stepping through the year:

• Play / Pause — animate through hours automatically
• Step Forward / Backward — manual hour-by-hour navigation
• Skip to Start / End — jump to the first or last hour
• Speed Control — 0.5x, 1x, 2x, 4x, 8x, and 16x playback speed
• Progress Scrubber — click or drag to jump to any hour
• Keyboard Shortcuts — Space for play/pause, arrow keys for stepping, Home/End for skipping

During playback, the system displays real-time statistics:

• Minimum surface temperature across all surfaces (blue indicator)
• Average surface temperature
• Maximum surface temperature (red indicator)
• Current timestamp
• Active variable name and unit

Heat Flow Particle Visualization

For heat flow variables (conduction, convection, radiation, solar, net heat flow), the system can overlay directional particles on building surfaces.

Particles flow outward from each surface along its normal direction:

• Roof surfaces: particles flow upward
• Floor surfaces: particles flow downward
• Wall surfaces: particles flow perpendicular to the wall face

Particle density is proportional to the heat flow magnitude at each surface. Higher heat loss produces more particles. This creates an intuitive visual representation of where and how much energy is leaving the building.

When particle mode is active, surfaces switch to a neutral gray to avoid visual competition with the particles.

Comparison Mode

The visualization supports simultaneous viewing of 2 to 4 simulations in a multi-viewport layout.

All viewports share:

• Synchronized playback — all panes advance together
• Shared temperature range — same color mapping across all panes for direct visual comparison
• Consistent statistics — min, max, and average computed across all visible simulations
• Shared variable and color scale — change once, applies everywhere

This makes it possible to visually compare a baseline building against a retrofit scenario, or compare the same building with different HVAC systems, envelope upgrades, or climate scenarios.

Surface-Level Controls

The visualization includes a detailed surface management panel:

• Searchable surface list — find surfaces by name, type, or cardinal direction
• Type filters — narrow by wall, roof, floor, window, door, or ceiling
• Visibility toggles — show or hide individual surfaces to isolate areas of interest
• Temperature readout — current temperature or heat flow value for each surface
• Color swatch — live color indicator matching the 3D view
• Click to select — highlights the surface in the 3D model

Each surface is identified by zone, type, and cardinal direction. Multiple windows or walls on the same orientation are indexed for clarity.

Thermal Comfort Thresholds

The system includes ASHRAE Standard 55-aligned comfort zones:

Range	Level	Implication
Below 14 degrees	Critical	Condensation risk
14 to 18 degrees	Warning	Radiant asymmetry concern
18 to 26 degrees	Optimal	Thermal comfort zone
26 to 32 degrees	Warning	Above comfort threshold
Above 32 degrees	Critical	Extreme discomfort

These thresholds are displayed as color-coded indicators in the surface list and can be referenced in time series charts.

3D Rendering

The visualization is built on React Three Fiber with Three.js:

• Surfaces are rendered with physically-based materials: roughness, metalness, transparency, and emissive glow
• In simulation mode, surface colors update dynamically from temperature data
• Texture support includes full PBR maps: diffuse, normal, roughness, ambient occlusion, emissive, height, and alpha
• An LRU texture cache (100 textures) ensures fast loading and proper memory management
• Post-processing effects include bloom, ambient occlusion, and contact shadows
• Equipment visualization shows 3D HVAC indicators positioned within zones, scaled by quantity

Multiple view modes are available outside of simulation visualization:

• Wireframe — structural skeleton
• Textured — applied material textures
• Shaded — smooth shading with lighting
• UV Debug — texture mapping visualization

Video Export

The visualization can be recorded as an MP4 video:

• 30 FPS capture from the WebGL framebuffer
• Configurable hour range and playback speed
• HUD overlay with simulation name, timestamp, variable name, and temperature statistics
• Multi-pane composition support for comparison recordings
• H.264 encoding for broad compatibility

This allows teams to share thermal analysis as standalone videos for presentations, reports, and stakeholder communication.

How Data Flows

Completed simulation (8,760 hourly results)
  → Parse hourly data by zone and assembly
  → Extract 9 surface variables per hour
  → Calculate per-variable min/max ranges across all hours
  → Map surface variables to 3D geometry keys
  → Apply temperature-to-color conversion using selected scale
  → Render colored surfaces in Three.js viewport
  → Update each frame during playback

The parsing system normalizes surface types (glazing becomes window, fenestration becomes window) and converts orientation degrees to cardinal directions for consistent labeling.

What Makes This Different

Most building energy visualization tools show charts and tables. Some overlay results on 2D floor plans. Very few map simulation data directly onto interactive 3D building geometry with hourly animation.

Roovie's thermal visualization is different because:

• It operates on the same 3D model the user edits, not a separate visualization export
• It supports 9 variables, not just temperature
• Playback covers every hour of the year with keyboard-driven navigation
• Comparison mode synchronizes multiple simulations in a shared viewport
• Heat flow particles show energy movement direction and magnitude
• Video export produces standalone recordings for external sharing
• The entire system runs in the browser with no desktop application required

The visualization is not a reporting feature. It is a design tool. Teams use it to identify thermal problems, compare design alternatives, and build intuition about how their building performs before committing to construction.

Bottom Line

Roovie's thermal visualization turns simulation data into something you can see, explore, and share. Every surface on the 3D building is a live indicator of thermal performance, updated hour by hour across the full year.

It bridges the gap between the physics engine's numerical output and the visual understanding that drives better building design decisions.