Research & 3D Web2023•Research Software

IIT Bombay — OSDAG 3D Platform

Interactive Structural Civil Engineering Software

Civil structural engineering web application developed at IIT Bombay, migrating legacy desktop engineering software into modular React web applications with real-time 3D steel connection models.

Research Software
Research & 3D Web
Product UI & Interactive Interfaces

Interface Evidence & Workflows

Click any thumbnail to inspect
3D Steel Connection Canvas (Three.js)
3D WebGL

3D Steel Connection Canvas (Three.js)

Interactive 3D WebGL scene rendering steel connection geometries with factored shear (70 kN) and axial loads (30 kN).

Screen 1 of 8
Workflow Mechanics

End-to-End Media Pipeline & Delivery Lifecycle

Step 01

Connection Typology Selection

Choose structural configuration across Fin Plate, Cleat Angle, End Plate, or Seated Angle connections.

Step 02

Input Dock & Factored Loads

Specify column section (e.g. HB 150), beam section (MB 300), shear force (70 kN), and axial force (30 kN).

Step 03

3D WebGL Model Generation

Three.js engine renders fully textured 3D geometric components with realistic bolt placements and weld throats.

Step 04

Design Validation & Report Generation

Python backend verifies bearing capacity, plate shear, and weld strength (401.84 N/mm²) and generates downloadable design reports.

Architectural Breakdown

System Layers & Technical Design

Client & UI Layer

Modular React component architecture, Material-UI design system, and Three.js 3D viewport canvas.

Services & Logic

Python backend engineering calculation services, automated report generators, and real-time design validation.

Storage & Persistence

Civil design specification libraries, steel section databases, and calculation matrices.

Problem & Solution

The Engineering Challenge & Solution

The Engineering Constraint

Transforming complex desktop-only engineering design tools into an accessible web platform without compromising structural calculation accuracy or 3D model performance.

The Technical Solution

Built interactive 3D model inspection using Three.js (supporting rotation, inspection, and zooming) and connected frontend inputs with Python calculation engines for instant design verification.

Deliverables

Production Impact & Delivered Capabilities

Modernized legacy desktop civil engineering software into a modular React web platform

Implemented real-time interactive 3D visualizations with Three.js for structural steel models

Connected frontend inputs with backend Python APIs for instant engineering validation

Collaborated with researchers and professors to translate complex structural workflows into intuitive UI

Awarded official FOSSEE Summer Fellowship Certificate under Prof. Kannan Moudgalya (Credential ID: 82807)

Technologies & Frameworks
ReactPythonThree.jsMaterial-UIREST APIsEngineering Design
System Architecture & Data-Flow Diagrams

Architecture & Process Flow Models

Interactive DFD
Cloud 3D Structural Engineering (IS 800:2007) Architecture
Rendering architectural data flow...
Rendered via Mermaid Engine • Dynamic Data Flow

Cloud 3D Structural Engineering (IS 800:2007) Architecture

Data flow diagram mapping parameter input dock, Three.js 3D WebGL mesh rendering, Python IS 800:2007 structural calculation engine, and automated PDF engineering report generator.

Diagram 1 of 3