ANGULARJS & WEBGL . . . .SORTAJosh Staples

Senior Software Engineer

Navis, LLC

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.

INITIAL IDEA Leverage THREE.js

Resources 3D Models Textures CSS

HTML JavaScript Framework

?

CHE Objects Forklifts Cranes

Trucks Rail Ships

DEMO SHIPPING TERMINAL

Demo – Small Yard

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

FULL SOFTWARE STACK

WEBGL ENABLED “POWERSTOW”

Demo – N4 Demo - local

Vessel Planner App

Data Grid Controller

• Initiates WebGL scene• Handles user interactions• Manages scene state

THREE.js 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

Vessel Planner Controller

FIN

Questions?

ANGULARJS & WEBGLJosh Staples

Senior Software Engineer

Navis, LLC