90% of everything. webgl in the shipping industry
DESCRIPTION
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.TRANSCRIPT
NAVIS WHO?
Founded in 1988
Located in Oakland
Provides a Terminal Operating System (TOS)
244 Installed TOSes Worldwide
54 Countries
~375 employees
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)
INTERNET OF THINGS
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
OCEAN BASED LOGISTICS
244 TOTAL NAVIS SITES
5
N4 Live Sites
N4 Implementations Other Navis TOS
PORT OF SINGAPORE
QUAY CRANES
AUTOMATED STACKING CRANES
GIANT AUTOMATED ROBOTS
AUTOMATED GUIDED VEHICLES (AGV)
NAVIS OFFICE @ JACK LONDON SQUARE
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
THE DESIGN Leverage THREE.js
Resources 3D
Models Textures CSS
HTML JavaScript Etc.
CHE Objects Forklifts Cranes
Trucks Rail Ships
TRUCK CLASS
Port.Che.Truck
Properties: _location _speed _movementVector _distanceTraveled
Methods: initRoute() setVector() makeVisible() resetLocation()
I’m a truck!
Object4D extends THREE.Object3D
MODELS & MOVEMENTRTG Movement Constraints
BIG PROBLEM – VARIABLE FPS
More objects within frustum means slower rendering.
Moving frustum resultsin a variable frame rate
Require another level oftime/movement dilationto smoothly translate models within the scene
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
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.js- Kinetic
ANOTHER IDEATHE IDEA CONTINUED
Image from www.worldslargestship.com
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 enginesImage from www.worldslargestship.com
WELL… THAT’S GREAT. WHAT’S NEXT?
BUSINESS USE CASE – POWERSTOW ™ PowerStow(er)! Load order and
position Considerations:
Location Weight Port of discharge
Contents! Images from NOAAImage from gigazine.net
OLD SCHOOL UI/UX
Image from gigazine.net
HOW CAN I MAKE THIS MORE DIFFICULT?
FULL SOFTWARE STACK
WEBGL ENABLED “POWERSTOW”
Demo – N4 Demo - local
FIN
Questions?