webgl visualization of a shipping terminal
DESCRIPTION
WebGL and JavaScript is used to visualize the operations of a port terminal. This slide briefly touches on some of the issues encountered when trying to implement such a large environment in a web browser.TRANSCRIPT
![Page 1: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/1.jpg)
3D MARINE PORT VISUALIZATION
![Page 2: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/2.jpg)
A LITTLE HISTORY
ECMAScript aka JavaScript Created in mid-90s at Netscape
Called JavaScript as part of a marketing deal with Sun.
Standardized by ECMA.
Version 6 & 7 are in progress
![Page 3: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/3.jpg)
JAVA VS. JAVASCRIPT
Similarity: a C style syntax
OO Model JavaScript is prototype-based Java is class-based
Threads? Java, yup JavaScript has HTML5 Web Worker
Appeal Java looks nice at first, later gets annoying JavaScript seems horrible at first, gradually grows on
you
![Page 4: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/4.jpg)
THE IDEA
Visualize a port terminal with a ubiquitous UI technology
Provide some level of user interaction
Create platform to explore additional features
Concerns? Render Loop (FPS) UI Interaction Network Communication Polygon Count Scene Size
![Page 5: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/5.jpg)
THE DESIGN Leverage THREE.js for 3D Library
Resources 3D
Models Textures CSS
HTML JavaScript Etc.
CHE Objects Forklifts Cranes
Trucks Rail Ships
![Page 6: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/6.jpg)
TRUCK OBJECT
Port.Che.Truck
Properties: _location _speed _movementVector _distanceTraveled
Methods: initRoute() setVector() makeVisible() resetLocation()
I’m a truck!
Create & extends Object4D “Object”
![Page 7: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/7.jpg)
MODELS & MOVEMENTRTG Movement Constraints
![Page 8: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/8.jpg)
OBJECT BREAKDOWNActions- Port.Listeners- Port.Actions.Quays- Port.Actions.Rtgs- Port.Actions.Stackers- Port.Actions.Triggers- Port.Actions.Trucks
App- Port.Cameras- Port.Yard.Gui- Port.Yard.Scene
Gear- Port.Che.Block- Port.Che.Quay- Port.Che.Rtg- Port.Che.Ship- Port.Che.Stacker- Port.Che.Truck
Management- Port.Manager- Port.Manager.Blocks- Port.Manager.Quays- Port.Manager.Rtgs- Port.Manager.Ships- Port.Manager.Stacker- Port.Manager.Trucks
Core- Port.Core.Object4D- Port.Core.Container- Port.Util- Port.Geometry- Port.Maths- Port.Preloader- Port.Manager.Clock
3rd Party Libraries- Dat.GUI- jQuery- MouseTrap- OBJMTLLoader- TrackballControl- THREE- Kinetic
![Page 9: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/9.jpg)
INITIALIZATION & THE UI FREEZE
Initialization
Termination
Process Input
Simulate
Render
animation loop
1. Load geometry (Web Worker)
2. Load yard blocks (Local Storage)
3. Server-Sent Events4. Initialize user controls5. Create support geometry6. Add lights and cameras7. Initialize Scene8. The Animation Loop!
![Page 10: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/10.jpg)
THE ANIMATION LOOP
requestAnimFrame API Provides timer loop to animate.
FPS Formula:
1000/(16 + N) fps
N = callback time in ms
Callback = 1 ms FPS is ~60fps
Callback = 84 ms FPS is ~10 fps
Higher FPS is better
Initialization
Termination
Process Input
Simulate
Render
animation loop
![Page 11: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/11.jpg)
RENDER CALLBACK
Scene Setup:Textures, 4 blocks, 4 trucks, 4 RTGsRender Time: 1 msFPS: 60 FPS
Initialization
Shut down
Process Input
Simulate
Render
animation loop
![Page 12: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/12.jpg)
60 FPS – 4 Blocks – Render Time < 1ms
![Page 13: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/13.jpg)
RENDER CALLBACK
Scene Setup:Flat shaded, 100 blocksRender Time: 110 msFPS: 8 FPS
Initialization
Shut down
Process Input
Simulate
Render
animation loop
![Page 14: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/14.jpg)
8 FPS – 100 Blocks – Render Time 110ms
![Page 15: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/15.jpg)
BIG PROBLEM – VARIABLE FPS
More polygons within frustum means slower rendering.
Moving frustum resultsin a variable frame rate
Require another level oftime/movement dilationto smoothly translate models within the scene
![Page 16: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/16.jpg)
VARIABLE TWEENING
60 FPS
20 FPS
Variable
![Page 17: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/17.jpg)
VARIABLE FPS
Model Manager
Clock Δ
Quay Crane Manager
RTG Manager
Stacker Manager
Truck Manager
Ship Manager
Management
1) Check CHE Status- Moving?- Stopped?- Waiting?
2) Assign Vector
3) Translate based uponclock Δ and CHE speed
![Page 18: WebGL visualization of a shipping terminal](https://reader036.vdocuments.us/reader036/viewer/2022062405/555e233cd8b42a384f8b4c7c/html5/thumbnails/18.jpg)
DEMO
Questions?