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?
