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?