Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JAVASCRIPTIN
ÄÄRIRAJOILLA
Heikki Salo
Vincit Oy
1
• Demo
• Työkalut
• Kehitys
• Ongelmat
2
SISÄLTÖ
3
4
5
RAKENNE
Robotic Operating System
ZenRobotics
Visualisaatio Webworker
WebGL
Websocket
• Node.js, npm ja Grunt
• TypeScript
• WebGL
• Websockets
• Webworkers
6
TYÖKALUT
• Robotic Operating System (ROS)
• Reaaliaikainen tai nauhoitetun datan
visualisointi
• 3D-grafiikka ja kontrollit selaime...
• Microsoftin “parempi” JavaScript-variantti
• EcmaScript 6 yhteensopivuus (luokat yms.)
• Tyyppiannotaatiot, rajapinnat y...
interface RobotState { //From websocket
id: string;
status: number;
position?: Vector3<number>;
}
class PickerRobot extend...
• Suorituskykyistä 3D-grafiikkaa
• Matalan tason rajapinta
• Typed Arrays ja viewit
• Selaintuki vaihteleva (rauta vs soft...
• Reaaliaikainen ja tehokas datansiirto
molempiin suuntiin
• Visualisaatiossa keskiarvo noin 1 Mt/s
(purskeittainen)
• Äär...
• JavaScriptin taustaprosessointia
• Visualisaatiossa käytetään kuvankäsittelyyn
• Rajoitettu ympäristö (DOM etc. ei saata...
• Isot datamäärät herkkiä verkkoympäriston
laadulle
• WebGL-toteutusten eroavaisuudet (http://
caniuse.com/#feat=webgl)
• ...
14
• Nykyaikaiset selainympärisöt mahdollistavat
vaativienkien sovellusten teon…
• …olettaen, että on valmis rajoittamaan
tue...
16
KYSYMYKSIÄ?
Upcoming SlideShare
Loading in …5
×

Vincit Teatime 2015 - Heikki Salo: Case ZenRobotics: JavaScriptin äärirajoilla

1,048 views

Published on

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?

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Vincit Teatime 2015 - Heikki Salo: Case ZenRobotics: JavaScriptin äärirajoilla

  1. 1. JAVASCRIPTIN ÄÄRIRAJOILLA Heikki Salo Vincit Oy 1
  2. 2. • Demo • Työkalut • Kehitys • Ongelmat 2 SISÄLTÖ
  3. 3. 3
  4. 4. 4
  5. 5. 5 RAKENNE Robotic Operating System ZenRobotics Visualisaatio Webworker WebGL Websocket
  6. 6. • Node.js, npm ja Grunt • TypeScript • WebGL • Websockets • Webworkers 6 TYÖKALUT
  7. 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. 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. 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. 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. 11. • Reaaliaikainen ja tehokas datansiirto molempiin suuntiin • Visualisaatiossa keskiarvo noin 1 Mt/s (purskeittainen) • Äärirajoilla herkkä verkkoympäriston vaihteluille 11 WEBSOCKETS
  12. 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. 13. • Isot datamäärät herkkiä verkkoympäriston laadulle • WebGL-toteutusten eroavaisuudet (http:// caniuse.com/#feat=webgl) • JavaScriptin suorituskyky • Testaus 13 ONGELMAT
  14. 14. 14
  15. 15. • Nykyaikaiset selainympärisöt mahdollistavat vaativienkien sovellusten teon… • …olettaen, että on valmis rajoittamaan tuettuja selaimia ja laitteita 15 YHTEENVETO
  16. 16. 16 KYSYMYKSIÄ?

×