Want to ship a cold beverage from Germany? It'll cost you a penny per beverage. Have some fresh fish to fillet? Shipping it to Asia and back is cheaper than filleting it locally. Shipping is a huge industry involving giant robots, gargantuan container ships, pirates, unions, a bandwidth of 17 million containers and trillions upon trillions of dollars. Its an industry where any port downtime can ruin an entire country's economy and oddly enough an industry where only 36% of goods are delivered on time. Given the latter, when implementing a Terminal Operating Systems it is in everybody's interest to minimize downtime. Learn how Navis is leveraging WebGL and JavaScript to extend the UI and UX functionality of their flagship product while keeping ports up and running. Joshua Staples is a Senior Software Engineer at Navis, a company which provides software solutions for shipping terminals around the world. He has a background in both Fine Arts and Computer Engineering with 3D experience ranging from Autodesk to NOAA. Currently he finds himself creating next-gen WebGL applications for use with Navis’ flag-ship product, the N4 Terminal Operating System.

1. 3D MARINE PORT VIZ & TOOLS
Joshua Staples
joshstaples+slideshare@gmail.co
m
Senior Software
Engineer
Navis, LLC

2. NAVIS WHO?

Founded in 1988

Located in Oakland

Provides a Terminal
Operating System
(TOS)

244 Installed TOSes
Worldwide

54 Countries

~375 employees

3. INTERNET OF THINGS

Containers (Packets)
 20’ & 40’, Dry, Tank & Refrigerated
 ~34.5 million TEU fleet in 2013

Container Ships (The Network)
 Crew of ~13 people
 Avg ship travels ¾ distance to
moon/year
 ~5000 Operating Container Ships
(2500-18000 TEU)

4. OCEAN BASED LOGISTICS

Terminals (the Nodes)





The “Nodes”
Interchange points between
carriers & shippers
Ports add value with fast
vessel turnaround, efficient
container handling, & proper
vessel stowage.
TOS provides value.
Shipping Line

The “Backbone”

Provides value via regular
transport between ports
Contributing service frequency,
speed, reliability & coverage


5. 244 TOTAL NAVIS SITES
N4 Live Sites
N4 Implementations
Other Navis TOS
5

6. PORT OF SINGAPORE

7. QUAY CRANES

8. GIANT AUTOMATED ROBOTS
AUTOMATED STACKING CRANES

9. AUTOMATED GUIDED VEHICLES (AGV)

10. NAVIS OFFICE @ JACK LONDON SQUARE

11. THE INITIAL 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/UX
Network Communication
Polygon Count
Scene Size

12. DEMO SHIPPING TERMINAL

Demo – Big

13. DEMO SHIPPING TERMINAL

Demo – Small Yard

14. THE DESIGN

Leverage THREE.js

Resources
3D Models
 Textures
 CSS


HTML

JavaScript

Etc.

CHE Objects





Forklifts
Cranes
Trucks
Rail
Ships

15. TRUCK CLASS

Port.Che.Truck

Properties:
I’m a truck!

Methods:
 _location
 _speed
 setVector()
 _movementVector
 makeVisible()
 _distanceTraveled

 initRoute()
 resetLocation()
Object4D extends THREE.Object3D

16. MODELS & MOVEMENT
RTG Movement
Constraints

17. BIG PROBLEM – VARIABLE FPS

More objects within frustum means slower
rendering.

Moving frustum results
in a variable frame rate

Require another level of
time/movement dilation
to smoothly translate models within the
scene

18. TWEENING
60
FPS
20
FPS
Variable

19. VARIABLE FPS
Clock Δ
Model Manager
Quay Crane
Manager
RTG Manager
Management
1) Check CHE Status
- Moving?
- Stopped?
- Waiting?
Stacker Manager
2) Assign Vector
Truck Manager
3) Translate based upon
clock Δ and CHE
speed
Ship Manager

20. OBJECT BREAKDOWN
Actions
- Port.Listeners
- Port.Actions.Quays
- Port.Actions.Rtgs
- Port.Actions.Stackers
- Port.Actions.Triggers
- Port.Actions.Trucks
Gear
- Port.Che.Block
- Port.Che.Quay
- Port.Che.Rtg
- Port.Che.Ship
- Port.Che.Stacker
- Port.Che.Truck
App
- Port.Cameras
- Port.Yard.Gui
- Port.Yard.Scene
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.js
- Kinetic

21. ANOTHER IDEA
THE IDEA CONTINUED
Image from www.worldslargestship.com

22. EMMA MAERSK CROSS SECTION
Built in 2006
 Contains about 14000
TEU.
 Crew of 13

1300 feet long
 25 knots
 110 MW (149k HP)
from 6 engines

Image from www.worldslargestship.com

23. SHIP FORMAT – EMMA MAERSK

Demo

24. WELL… THAT’S GREAT. WHAT’S NEXT?

25. BUSINESS USE CASE – POWERSTOW ™
PowerStow(er)!
 Load order and
position
 Considerations:

Location
 Weight
 Port of discharge


Contents!
Image from gigazine.net
Images from NOAA

26. OLD SCHOOL UI/UX
Image from gigazine.net

27. HOW CAN I MAKE THIS MORE DIFFICULT?

28. FULL SOFTWARE STACK

29. WEBGL ENABLED “POWERSTOW”
Demo – N4
 Demo - local


30. FIN
Questions
?