Production

Hardware-Accelerated 3D WebGL & Solar DPR Engine

Solaris 3D Configurator & DPR Core

Solaris 3D decouples WebGL canvas rendering from React's state loop to achieve silky smooth 60–120 FPS camera orbit rotation while calculating rooftop solar capacity. It allows residential and commercial clients to simulate sun trajectories, panel tilt angles, shading loss, monthly energy savings, and export an official engineering DPR PDF.

GitHub Repository

Status

Production

Stack

Three.js, WebGL, React 19, Tailwind CSS, Node.js, Chart.js, jsPDF

Throughput / Users

3,500+ Simulations

Performance

60-120 FPS WebGL Orbit

System Architecture & Problem Statement

Core Problem Solved: Solar installation proposals require site visits, manual shading calculations, and static CAD drawings, leading to multi-week sales cycles and high customer drop-off rates.

Architecture Layers:

1WebGL Direct-Update Scene Controller: Custom Three.js renderer decoupled from React tree via React.memo and imperative useFrame animation loops.

2Diurnal Solar Physics Engine: Calculates solar azimuth and altitude angles based on latitude, month, and hour of the day.

3Financial Yield & ROI Estimator: Computes annual kWh production, degradation factor, net-metering tariff savings, and payback period.

4Automated PDF DPR Generator: Client-side jsPDF renderer generating multi-page engineering reports with canvas charts, panel BOM, and financial schedules.

Key Product Features

Real-Time 3D Rooftop Solar Panel Layout & Drag-and-Drop Configurator

Hardware-Accelerated 60-120 FPS WebGL Orbital Camera Controls

Diurnal Sunlight & Shadow Simulator (Dawn to Dusk time slider)

Dynamic Shading Loss & Energy Production Estimator (kWh/yr)

Financial Payback & ROI Calculator (25-Year Energy Savings graph)

Automated Multi-Page Detailed Project Report (DPR) PDF Export

Glassmorphic Control Panel with Indian Rupee (₹) & Square Feet formatting

Database Entity Schema & Relationships

Projects

Collection/Table

idattr

clientNameattr

clientEmailattr

phoneattr

monthlyBillattr

roofAreaSqFtattr

azimuthAngleattr

→ Has one SolarSimulation and one DprReport

SolarSimulations

Collection/Table

projectIdattr

systemCapacityKwattr

annualProductionKwhattr

co2OffsetTonsattr

paybackPeriodYearsattr

→ Belongs to Project

DprReports

Collection/Table

projectIdattr

pdfUrlattr

generatedAtattr

totalCostInrattr

subsidyAmountInrattr

→ Belongs to Project

API Specifications & Endpoints

POST/api/solar/simulate

Calculates solar energy yield, panel count, and financial ROI from rooftop area & monthly bill.

POST/api/solar/dpr-generate

Assembles site parameters into an official downloadable DPR PDF document.

GET/api/solar/tariffs/:region

Fetches current commercial & residential electricity tariff structures.

Interactive Visual Screenshots & Previews

3D WebGL Solar Scene & Diurnal Sun Simulator

LIVE SIMULATION

Diurnal Solar Angle: 48° NW

112.4 FPS WebGL

Panel Capacity: 14.8 kWpAnnual ROI: ₹1,85,000 / yr

Interactive Three.js WebGL rooftop model showing real-time sunlight shadows and panel tilt adjustment.

Financial ROI & 25-Year Yield Analytics

LIVE SIMULATION

Operational Metrics OverviewLive Telemetry

Total Throughput

1,240 / day

Avg Latency

18ms

Health Index

99.8%

Dynamic ROI charts displaying net metering savings, payback period, and monthly bill offset.

🚀 Quick Start & Process to Run

STEP-BY-STEP REPRODUCIBLE SETUP

Prerequisites

Node.js 18+
npm or yarn
WebGL2 compatible browser

Required Environment Variables (.env)

VITE_API_BASE_URL=http://localhost:5000

VITE_MAPBOX_TOKEN=pk.eyJ1...

Execution Steps:

1. Clone Project Repository

Download full project source code.

$ git clone https://github.com/Dev-Nurul08/Solyug-Energy-DPR-Automation-Core.git && cd Solyug-Energy-DPR-Automation-Core

2. Install Frontend & WebGL Dependencies

Install Three.js, @react-three/fiber, @react-three/drei, Lucide React, and Tailwind CSS.

$ cd solar-configurator-frontend && npm install

3. Launch WebGL Dev Server

Start Vite development server on http://localhost:5173.

$ npm run dev

4. Build Production Distribution

Compile optimized production bundle with WebGL asset chunking.

$ npm run build

Engineering Challenges & Solutions

Challenge #1: Preventing React re-render lags on heavy WebGL Canvas scenes when users adjust continuous range sliders (e.g. sunlight time).

Challenge #2: Generating complex multi-page PDF reports with embedded dynamic chart vectors inside the browser.

Key Lessons & Principles

Takeaway #1: WebGL frame loops must never be bound to React state updates; imperative ref manipulation guarantees smooth 60-120 FPS performance.

Takeaway #2: Interactive visual simulations convert prospective solar clients 4x faster than static price quotes.