Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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Ä?
Próxima SlideShare
Cargando en…5
×

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

1.106 visualizaciones

Publicado el

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?

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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Ä?

×