5. Pipeline for Interaction, Data, and Geometry Visualization

NJ Namju Lee
3 min readJun 4, 2020

DigitalFUTURES WORLD : ARCHITECTS UNITE Workshops

Day 5: Pipeline for Data and Geometry Visualization (or CAD system)
Introduction to Development of CAD application

Keyword
Programming Pattern for CAD system, Event, Data flow, Controller flow, Rendering flow

Research Overview:
* Small Environment
* Sketch hand

Lecture:
1) MVC pattern and flow(data and commands)
2) programming pattern for CAD system
3) Interaction for visualization(mouse, keyboard)

Workshop: Codepen
1) data flow
2) controller flow
3) rendering flow

Additional note:
1) Mesh WebGL vertex and connectivity
2) Visualizing 3D geometry on Web (Three JS)

  • Overview
Small Environment by NJSTUDIO
  • Lecture

Computer-Aided Design (CAD), Graphics, and Programming Pattern

Typescript Classes
Software design pattern: link, (GoF) Design Patterns
MVC(Model–view–controller) Pattern: link
Inheritance (object-oriented programming): link

  • Workshop

Typescript class example: link
Python Class example: link, others

Mouse interaction: link
Keyboard interaction: link
Touch interaction: link

Three JS: link

Three Starter: link
Primitives: link
Points: link
Custom mesh: link
Mesh from Rhino3d: link

Three, Terrain, pixel map(matrix): link
Rhino Grasshopper, Terrain, pixel map(matrix): link
Three, Voxel map: link

Parse OBJ & STL format: link
Three load OBJ format: link

  • Additional Notes

A-FRAME: Starter link

HTML Canvas Optimization of Rendering Loop with JSAPI: link

English Version
Korean Version

reference:
update needed

--

--

NJ Namju Lee

Software Engineer & Computational Designer at NJSTUDIO