WebGL visualization of a shipping terminal
-
Upload
josh-staples -
Category
Business
-
view
293 -
download
1
description
Transcript of WebGL visualization of a shipping terminal
3D MARINE PORT VISUALIZATION
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
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
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
THE DESIGN Leverage THREE.js for 3D Library
Resources 3D
Models Textures CSS
HTML JavaScript Etc.
CHE Objects Forklifts Cranes
Trucks Rail Ships
TRUCK OBJECT
Port.Che.Truck
Properties: _location _speed _movementVector _distanceTraveled
Methods: initRoute() setVector() makeVisible() resetLocation()
I’m a truck!
Create & extends Object4D “Object”
MODELS & MOVEMENTRTG Movement Constraints
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
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!
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
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
60 FPS – 4 Blocks – Render Time < 1ms
RENDER CALLBACK
Scene Setup:Flat shaded, 100 blocksRender Time: 110 msFPS: 8 FPS
Initialization
Shut down
Process Input
Simulate
Render
animation loop
8 FPS – 100 Blocks – Render Time 110ms
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
VARIABLE TWEENING
60 FPS
20 FPS
Variable
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
DEMO
Questions?