Modernit selainympäristöt sisältävät optimoituja JavaScipt-moottoreita, mutta ovatko nekään tarpeeksi vahvoja pyörittämään interaktiivista 3D-robottivisualisaatioita? Saavatko reaaliaikainen kuvankäsittely ja laskenta selaimen kuin selaimen polvilleen, vai ovatko uudet JavaScript-rajapinnat tuoneet jo ratkaisuja näihin ongelmiin? Ja jos teknologia onnistuisikin jo vastaamaan näihin haasteisiin, kuinka välttää perinteisemmät ongelmat isoja JavaScript-ohjelmia rakentessa?

1. JAVASCRIPTIN
ÄÄRIRAJOILLA
Heikki Salo
Vincit Oy
1

2. • Demo
• Työkalut
• Kehitys
• Ongelmat
2
SISÄLTÖ

3. 3

4. 4

5. 5
RAKENNE
Robotic Operating System
ZenRobotics
Visualisaatio Webworker
WebGL
Websocket

6. • Node.js, npm ja Grunt
• TypeScript
• WebGL
• Websockets
• Webworkers
6
TYÖKALUT

7. • Robotic Operating System (ROS)
• Reaaliaikainen tai nauhoitetun datan
visualisointi
• 3D-grafiikka ja kontrollit selaimessa
• Kehityksen aikana muuttuvat tietorakenteet
• Datan käsittelyn aikavaatimukset
7
KEHITYKSEN VAATIMUKSET

8. • Microsoftin “parempi” JavaScript-variantti
• EcmaScript 6 yhteensopivuus (luokat yms.)
• Tyyppiannotaatiot, rajapinnat yms. C#
• Helpottaa suurien JavaScript-ohjelmien
kehitystä (muutokset, analyysi, kommentointi)
• DefinitelyTyped tyyppikirjastot
• Monipuolisempi kuin lint tai JSDoc
• TypeScript vs CoffeeScript vs ClojureScript vs
Dart
• “Käännetty” JavaScript paketoitu asiakkaalle
8
TYPESCRIPT

9. interface RobotState { //From websocket
id: string;
status: number;
position?: Vector3<number>;
}
class PickerRobot extends VisualisationModel {
private name: string;
private state: RobotState;
private mesh: THREE.Mesh;
constructor(name: string, visualisation: Visualisation) {
super(visualisation);
this.name = name;
this.mesh = new RobotMesh();
visualisation.addRobotStateListener(name, (state: RobotState) => {
this.state = state;
});
}
public update(override: RobotState = null) : boolean {
return this.mesh.setPosition(override || this.state);
}
}
9
TYPESCRIPT

10. • Suorituskykyistä 3D-grafiikkaa
• Matalan tason rajapinta
• Typed Arrays ja viewit
• Selaintuki vaihteleva (rauta vs softa)
• Valmiit kirjastot: three.js, Babylon.js etc.
10
WEBGL

11. • Reaaliaikainen ja tehokas datansiirto
molempiin suuntiin
• Visualisaatiossa keskiarvo noin 1 Mt/s
(purskeittainen)
• Äärirajoilla herkkä verkkoympäriston
vaihteluille
11
WEBSOCKETS

12. • JavaScriptin taustaprosessointia
• Visualisaatiossa käytetään kuvankäsittelyyn
• Rajoitettu ympäristö (DOM etc. ei saatavilla)
• Kommunikaatio viestejä lähettämällä
• Isot oliot (esim. kuvat) voi “siirtää" kopioinnin
sijaan
12
WEBWORKERS

13. • Isot datamäärät herkkiä verkkoympäriston
laadulle
• WebGL-toteutusten eroavaisuudet (http://
caniuse.com/#feat=webgl)
• JavaScriptin suorituskyky
• Testaus
13
ONGELMAT

14. 14

15. • Nykyaikaiset selainympärisöt mahdollistavat
vaativienkien sovellusten teon…
• …olettaen, että on valmis rajoittamaan
tuettuja selaimia ja laitteita
15
YHTEENVETO

16. 16
KYSYMYKSIÄ?