ANGULARJS & WEBGL . . . .SORTA
Josh Staples
Senior Software
Engineer
Navis, LLC
NAVIS WHO?


Founded in 1988



Located in Oakland



Provides a Terminal
Operating System (TOS)



244 Installed TOSe...
INITIAL IDEA


Leverage THREE.js



Resources
3D Models
 Textures
 CSS




HTML



JavaScript



Framework?



CH...
DEMO SHIPPING TERMINAL


Demo – Small Yard
BUSINESS USE CASE – POWERSTOW ™
PowerStow(er)!
 Load order and
position
 Considerations:


Location
 Weight
 Port of ...
OLD SCHOOL UI/UX

Image from gigazine.net
FULL SOFTWARE STACK
WEBGL ENABLED “POWERSTOW”
Demo – N4
 Demo - local

Vessel Planner App
Vessel Planner Controller

THREE.js Controller
• Initiates WebGL scene
• Handles user
interactions
• Ma...
FIN
Questions
?

ANGULARJS & WEBGL
Josh Staples
Senior Software
Engineer
Navis, LLC
Upcoming SlideShare
Loading in …5
×

AngularJS and WebGL in the Shipping Industry

1,099 views

Published on

A lightning talk presentation for the San Francisco AngularJS Meetup Presentation. Outlines the WebGL & AngularJS architecture I am developing.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,099
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Good afternoon everyone. My name is Joshua Staples and I work in the R&D group of Port a software company here in Oakland. Port provides a software product for shipping terminals around the world. It is considered by many to be the Microsoft of the shipping software industry
  • Port and Oracle designed a joint 3D demo using JavaFX. Chose to pursue HTML5 because of device ubiquity.Port is the Microsoft of the shipping and rail terminal of the world.
  • (calcium hypochlorate)Mentioned Bosch’s help desk in Buenos Aires, Argentina shutting down because of a plum of gasPowerStow is a Navis product.
  • (calcium hypochlorate)Mentioned Bosch’s help desk in Argentina shutting down because of a plum of gas
  • (calcium hypochlorate)Mentioned Bosch’s help desk in Argentina shutting down because of a plum of gas
  • Should I mention this?
  • AngularJS and WebGL in the Shipping Industry

    1. 1. ANGULARJS & WEBGL . . . .SORTA Josh Staples Senior Software Engineer Navis, LLC
    2. 2. NAVIS WHO?  Founded in 1988  Located in Oakland  Provides a Terminal Operating System (TOS)  244 Installed TOSes Worldwide  54 Countries  ~375 employees  Responsible for ~50% of shipping around the world.
    3. 3. INITIAL IDEA  Leverage THREE.js  Resources 3D Models  Textures  CSS   HTML  JavaScript  Framework?  CHE Objects      Forklifts Cranes Trucks Rail Ships
    4. 4. DEMO SHIPPING TERMINAL  Demo – Small Yard
    5. 5. BUSINESS USE CASE – POWERSTOW ™ PowerStow(er)!  Load order and position  Considerations:  Location  Weight  Port of discharge   Contents! Image from gigazine.net Images from NOAA
    6. 6. OLD SCHOOL UI/UX Image from gigazine.net
    7. 7. FULL SOFTWARE STACK
    8. 8. WEBGL ENABLED “POWERSTOW” Demo – N4  Demo - local 
    9. 9. Vessel Planner App Vessel Planner Controller THREE.js Controller • Initiates WebGL scene • Handles user interactions • Manages scene state Data Grid Controller • Load data grids • Facilitates flow WebGL Object(s) • Define scene context • Maintains WebGL Meshes • Defines camera movement and placement • Determines flow gesture and sequence for flowing containers • Parses initial ship format and provides information about cross-section type and status • Dynamically creates textures for ship • Initiates 3D scene • Listeners to UI interactions that change scene state
    10. 10. FIN Questions ? ANGULARJS & WEBGL Josh Staples Senior Software Engineer Navis, LLC

    ×