90% of Everything. WebGL in the Shipping Industry
-
Upload
josh-staples -
Category
Technology
-
view
2.356 -
download
1
description
Transcript of 90% of Everything. WebGL in the Shipping Industry
![Page 2: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/2.jpg)
NAVIS WHO?
Founded in 1988
Located in Oakland
Provides a Terminal Operating System (TOS)
244 Installed TOSes Worldwide
54 Countries
~375 employees
![Page 3: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/3.jpg)
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
![Page 4: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/4.jpg)
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
![Page 5: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/5.jpg)
244 TOTAL NAVIS SITES
5
N4 Live Sites
N4 Implementations Other Navis TOS
![Page 6: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/6.jpg)
PORT OF SINGAPORE
![Page 7: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/7.jpg)
QUAY CRANES
![Page 8: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/8.jpg)
AUTOMATED STACKING CRANES
GIANT AUTOMATED ROBOTS
![Page 9: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/9.jpg)
AUTOMATED GUIDED VEHICLES (AGV)
![Page 10: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/10.jpg)
NAVIS OFFICE @ JACK LONDON SQUARE
![Page 11: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/11.jpg)
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
![Page 14: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/14.jpg)
THE DESIGN Leverage THREE.js
Resources 3D
Models Textures CSS
HTML JavaScript Etc.
CHE Objects Forklifts Cranes
Trucks Rail Ships
![Page 15: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/15.jpg)
TRUCK CLASS
Port.Che.Truck
Properties: _location _speed _movementVector _distanceTraveled
Methods: initRoute() setVector() makeVisible() resetLocation()
I’m a truck!
Object4D extends THREE.Object3D
![Page 16: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/16.jpg)
MODELS & MOVEMENTRTG Movement Constraints
![Page 17: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/17.jpg)
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
![Page 18: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/18.jpg)
TWEENING
60 FPS
20 FPS
Variable
![Page 19: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/19.jpg)
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
![Page 20: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/20.jpg)
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
![Page 21: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/21.jpg)
ANOTHER IDEATHE IDEA CONTINUED
Image from www.worldslargestship.com
![Page 22: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/22.jpg)
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
![Page 24: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/24.jpg)
WELL… THAT’S GREAT. WHAT’S NEXT?
![Page 25: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/25.jpg)
BUSINESS USE CASE – POWERSTOW ™ PowerStow(er)! Load order and
position Considerations:
Location Weight Port of discharge
Contents! Images from NOAAImage from gigazine.net
![Page 26: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/26.jpg)
OLD SCHOOL UI/UX
Image from gigazine.net
![Page 27: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/27.jpg)
HOW CAN I MAKE THIS MORE DIFFICULT?
![Page 28: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/28.jpg)
FULL SOFTWARE STACK
![Page 29: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/29.jpg)
WEBGL ENABLED “POWERSTOW”
Demo – N4 Demo - local
![Page 30: 90% of Everything. WebGL in the Shipping Industry](https://reader038.fdocuments.net/reader038/viewer/2022110307/555e23b5d8b42a6a4c8b4d82/html5/thumbnails/30.jpg)
FIN
Questions?