1 of 25

2 of 25

Amit Nambiar

Computational Designer

CORE Studio

E: anambiar@thorntontomasetti.com

T: @NambiarAmit

Hanshen Sun

Computational Designer

CORE Studio

E: hsun@thorntontomasetti.com

https://join.slack.com/t/aectechevent/shared_invite/zt-xxlg0p7q-cQeVGHDxLcpPeHYSAKe32w

3 of 25

Scope

  • Web App
  • 3D viewer
  • Frontend Development
  • Backend Operations
  • Deployment
  • nodejs
  • vuejs
  • vuetify
  • git
  • Threejs
  • Firebase
  • Rhino 3D

workshop-test-a283b.web.app

DEMO

4 of 25

Installed Software

  • nodejs (14.18.1)
  • git
  • Github Desktop
  • VSCode
  • Rhino 3D (optional)

Accounts

  • GMail
  • Github
  • Slack(optional)

5 of 25

Workshop Content

Source Code

https://github.com/tt-acm/aectech2021-3dviewer

Checkpoints

Steps

Reference files and content

Instructions, videos and snippets for each step

Stable snapshots of the project as we progress

6 of 25

Git and Github

Git

Version control system

Software Technology

Used to manage code development in teams

Github

Cloud service

Based on git

Used to manage code development in teams

7 of 25

Git Clients

Command Line

Github Desktop GUI

8 of 25

VueJS

9 of 25

VueJS

Official vuejs documentation

(https://vuejs.org/v2/guide/)

10 of 25

VueJS

Official vuejs documentation

(https://vuejs.org/v2/guide/)

11 of 25

VueJS

Dev Mode

Build in memory

Hot reloading

Production Mode

Single file output

Optimized builds

Source Files

12 of 25

threejs

13 of 25

threejs

Realtime Rendering with OpenGL, Nov 19’ - F Andreussi, Bauhaus–Universit¨at Weimar

(https://www.uni-weimar.de/fileadmin/user/fak/medien/professuren/Computer_Graphics/CG_WS_19_20/Computer_Graphics/01_Introduction.pdf)

14 of 25

Attach to HTML

threejs

Realtime Rendering with OpenGL, Nov 19’ - F Andreussi, Bauhaus–Universit¨at Weimar

(https://www.uni-weimar.de/fileadmin/user/fak/medien/professuren/Computer_Graphics/CG_WS_19_20/Computer_Graphics/01_Introduction.pdf)

1

15 of 25

Attach to HTML

Initialize scene

threejs

Realtime Rendering with OpenGL, Nov 19’ - F Andreussi, Bauhaus–Universit¨at Weimar

(https://www.uni-weimar.de/fileadmin/user/fak/medien/professuren/Computer_Graphics/CG_WS_19_20/Computer_Graphics/01_Introduction.pdf)

1

2

16 of 25

Attach to HTML

Initialize scene

Set up camera

threejs

Realtime Rendering with OpenGL, Nov 19’ - F Andreussi, Bauhaus–Universit¨at Weimar

(https://www.uni-weimar.de/fileadmin/user/fak/medien/professuren/Computer_Graphics/CG_WS_19_20/Computer_Graphics/01_Introduction.pdf)

1

2

3

17 of 25

Attach to HTML

Initialize scene

Set up camera

Set up lighting

threejs

Realtime Rendering with OpenGL, Nov 19’ - F Andreussi, Bauhaus–Universit¨at Weimar

(https://www.uni-weimar.de/fileadmin/user/fak/medien/professuren/Computer_Graphics/CG_WS_19_20/Computer_Graphics/01_Introduction.pdf)

1

2

3

4

18 of 25

Attach to HTML

Initialize scene

Set up camera

Set up lighting

Add objects to scene

threejs

Realtime Rendering with OpenGL, Nov 19’ - F Andreussi, Bauhaus–Universit¨at Weimar

(https://www.uni-weimar.de/fileadmin/user/fak/medien/professuren/Computer_Graphics/CG_WS_19_20/Computer_Graphics/01_Introduction.pdf)

1

2

3

4

5

19 of 25

20 of 25

git

21 of 25

Git

  • Make small changes to codebase as commits
  • Reinstate codebase by doing a checkout to a certain point
  • Use tags to jump to specific state

22 of 25

Git

  • Series of commits on a branch
  • Work across teams using branches
  • push and pull changes from other team members

23 of 25

Git

  • Publish changes to cloud to share with other team members
  • Mark important points in development using tags

24 of 25

Git

  • Cloud hosts have services on top for extra features

Publish website

Run

tests

Make coffee

25 of 25

https://xkcd.com/1597/