(Js) Export your own
webGL Viewer
Firenze November 11, 2015
Alberto Mancini - Francesca Tosi
About us
FREELANCE
- SOFTWARE DEVELOPER (WEB&MOBILE)
- LINUX SYSADMIN
- DEVOPS
#JOOINK TEAM
#GDG-FIRENZE
#INTEL SOFTWARE I...
About us
Francesca Tosi
FREELANCE
- WEB & MOBILE DEVELOPER
- SOFTWARE ENGINEER
- SOFTWARE ARCHITECT WITH A PASSION FOR
CLE...
About us
Computer Vision
&
Augmented
Reality
picshare.jooink.com
JSInterop for fun and profit
Aim
What we have to do
● Data is (already) managed and processed in a
serverside workflow.
● Data, meshes with arttributes...
Aim
Final Application
That sould be:
● performant (low bandwidth, caching
capable, lighting fast)
● extensible (new featur...
Medical use-case:
Provide a self contained WebGL component in GWT
to be consumed in vanilla javascript.
What we
need
---
What we need:
● Manage 3D models in a Browser
● Get User Gestures (all devices)
● Get data/model from ser...
Manage 3D Models in a Browser
3D Models
Manage 3D Models
3D Models
Manage 3D Models
Manage 3D Models:
● WebGL on js → Three.js
● Three.js for GWT →
3D Models
Parallax3D
Parallax 3D:
● Mature project
● It has a lot of Controls* but … we need
something different
→ Natural...
3D Models
Parallax3D
Parallax 3D:
● Mature project
● It has a lot of Controls but … we need
something different
→ Natural ...
3D Models
Parallax3D
Parallax 3D:
● Rendering (the heavy part) is done via
WebGL so does not really matter
(performance wi...
Get User Gestures (Web/Mobile)
User
Gestures
---
● Mobile version of Viewer needs
gestures recognition
● Adapting Hammer.js v 2.0.4 for GWT
○ JsInterop
○...
User
Gestures
---
private Manager() {
if(!injected) {
injected=true;
ScriptInjector.fromString(...Hammer...)
.setWindow(.....
User
Gestures
We wrapped all the gestures/recognizers:
● Pan
● Pinch
● Press
● Rotate
● Swipe
● Tap
● ...
User
Gestures
---
● Demo
Provide a self contained component in GWT to be
consumed in vanilla javascript.
Js-Interop
The opposite way
● Fill a <div/>
● the js developers want to construct the
whole UI, load our code, ‘insert’ in...
Js-Interop
Thanks guys …
JSInterop rocks !!!
@JsType
public interface ViewerInteropInterface {
public void load(String cas...
Js-Interop
it’s just plain old js
<!doctype html>
<html>
<head>
<script type="text/javascript" language="javascript"
src="...
Js-Interop
we use the std
linker (and some
permutation
sometime)
public class Caster implements EntryPoint {
@Override
pub...
Js-Interop
I’m lazy
SDM in eclipse
EntryPoint in separate module
Viewer ev = new Viewer("panel");
ev.load(...);
Data Layout from serverside in Java
to Clientside … in Java too ;-)
Data
Layout
● integrate with the serverside flow and
provide a data outlet to be consumed by the
viewer
● our response her...
Data
Layout
● you can’t reinvent the wheel and (mesh)
compression algorithms are a “consolidated
wheel”
● So, we took for ...
Computation client side:
Web Workers
Web
Workers
Web Workers provide a simple means for web
content to run scripts in background threads. The
worker thread can...
Web
Workers
var worker = new Worker(scriptUrl);
and then onMessage/postMessage
Security Madness (SDM)
External scripts suc...
Web
Workers
private static final native JavaScriptObject injectWorker(String code) /*-{
return (function(window) {
functio...
Web
Workers
Another Story
● another story, creating workers with
GWT
● gwt-ns, webworker linker
Does not works nicely with...
That’s all!!!
Thanks.
francesca@jooink.com alberto@jooink.
com
(Js) Export your own WebGL Viewer
Prochain SlideShare
Chargement dans…5
×

(Js) Export your own WebGL Viewer

1 287 vues

Publié le

Talk at #GWTCon2015

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 287
Sur SlideShare
0
Issues des intégrations
0
Intégrations
207
Actions
Partages
0
Téléchargements
14
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

(Js) Export your own WebGL Viewer

  1. 1. (Js) Export your own webGL Viewer Firenze November 11, 2015 Alberto Mancini - Francesca Tosi
  2. 2. About us FREELANCE - SOFTWARE DEVELOPER (WEB&MOBILE) - LINUX SYSADMIN - DEVOPS #JOOINK TEAM #GDG-FIRENZE #INTEL SOFTWARE INNOVATOR #GWTCON alberto@jooink.com +AlbertoMancini Alberto Mancini
  3. 3. About us Francesca Tosi FREELANCE - WEB & MOBILE DEVELOPER - SOFTWARE ENGINEER - SOFTWARE ARCHITECT WITH A PASSION FOR CLEAN CODE AND FINE TUNED DETAILS. #JOOINK TEAM #GDG-FIRENZE #GDG-ANCONA #INTEL SOFTWARE INNOVATOR #GWTCON francesca@jooink.com @francescatosi
  4. 4. About us Computer Vision & Augmented Reality picshare.jooink.com
  5. 5. JSInterop for fun and profit
  6. 6. Aim What we have to do ● Data is (already) managed and processed in a serverside workflow. ● Data, meshes with arttributes and some metadata, has proprietary format and is not ready for web (huge size, repeated, not really optimized) ● There’s already a web application (sort of) that drive end-users interaction, should be ‘augmented’ with a 3D viewer.
  7. 7. Aim Final Application That sould be: ● performant (low bandwidth, caching capable, lighting fast) ● extensible (new features are expected to pop up) ● mobile (at least ‘tablet’) ready ● embeddable
  8. 8. Medical use-case: Provide a self contained WebGL component in GWT to be consumed in vanilla javascript.
  9. 9. What we need --- What we need: ● Manage 3D models in a Browser ● Get User Gestures (all devices) ● Get data/model from server and manage them on client ● Compunting … WebWorkers
  10. 10. Manage 3D Models in a Browser
  11. 11. 3D Models Manage 3D Models
  12. 12. 3D Models Manage 3D Models Manage 3D Models: ● WebGL on js → Three.js ● Three.js for GWT →
  13. 13. 3D Models Parallax3D Parallax 3D: ● Mature project ● It has a lot of Controls* but … we need something different → Natural Controls *What a control is ?
  14. 14. 3D Models Parallax3D Parallax 3D: ● Mature project ● It has a lot of Controls but … we need something different → Natural Controls* *What a Natural Control is ?
  15. 15. 3D Models Parallax3D Parallax 3D: ● Rendering (the heavy part) is done via WebGL so does not really matter (performance wise) if you use parallax or threejs so if you measure poor performance isn’t parallax fault … is your !!
  16. 16. Get User Gestures (Web/Mobile)
  17. 17. User Gestures --- ● Mobile version of Viewer needs gestures recognition ● Adapting Hammer.js v 2.0.4 for GWT ○ JsInterop ○ JSNI https://github.com/jooink
  18. 18. User Gestures --- private Manager() { if(!injected) { injected=true; ScriptInjector.fromString(...Hammer...) .setWindow(...) .inject(); } } Hammer res: @Source("resources/hammer.min.js") public TextResource hammer();
  19. 19. User Gestures We wrapped all the gestures/recognizers: ● Pan ● Pinch ● Press ● Rotate ● Swipe ● Tap ● ...
  20. 20. User Gestures --- ● Demo
  21. 21. Provide a self contained component in GWT to be consumed in vanilla javascript.
  22. 22. Js-Interop The opposite way ● Fill a <div/> ● the js developers want to construct the whole UI, load our code, ‘insert’ in a div ● drive the viewer via a Javascript API ● in the ‘div’ our code has full-control so we have to respond to events and so on.
  23. 23. Js-Interop Thanks guys … JSInterop rocks !!! @JsType public interface ViewerInteropInterface { public void load(String caseId, ...); void doThis(); void doThat(); } public class Viewer implements ViewerInteropInterface { @JsExport("$wnd.my.viewer") public Viewer(String containerId) { } }
  24. 24. Js-Interop it’s just plain old js <!doctype html> <html> <head> <script type="text/javascript" language="javascript" src="viewer/viewer.nocache.js"></script> <script type="text/javascript"> window.addEventListener('viewerReady', function() { var viewer = new window.my.viewer('panel'); viewer.load(....); } ); </script> </head> <body> <div id="panel"></div> </body> </html>
  25. 25. Js-Interop we use the std linker (and some permutation sometime) public class Caster implements EntryPoint { @Override public void onModuleLoad() { castReadyEvent(); } private static final native void castReadyEvent() /*-{ $wnd.dispatchEvent( new CustomEvent('viewerReady')); }-*/; }
  26. 26. Js-Interop I’m lazy SDM in eclipse EntryPoint in separate module Viewer ev = new Viewer("panel"); ev.load(...);
  27. 27. Data Layout from serverside in Java to Clientside … in Java too ;-)
  28. 28. Data Layout ● integrate with the serverside flow and provide a data outlet to be consumed by the viewer ● our response here is obviously Java (so we write only once the code parsing the data layout)
  29. 29. Data Layout ● you can’t reinvent the wheel and (mesh) compression algorithms are a “consolidated wheel” ● So, we took for the low level compression algorithms suitable (highily optimized) native implementations and we plugged (with a common api) in the code java and javascript ‘side’.
  30. 30. Computation client side: Web Workers
  31. 31. Web Workers Web Workers provide a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa.)
  32. 32. Web Workers var worker = new Worker(scriptUrl); and then onMessage/postMessage Security Madness (SDM) External scripts sucks
  33. 33. Web Workers private static final native JavaScriptObject injectWorker(String code) /*-{ return (function(window) { function WorkerFactory() { var blob = new Blob([ code ], { type: 'application/javascript' } ); this.createAndStart = function(onerror,onmessage) { var blobURL = URL.createObjectURL( blob ); var worker = new Worker( blobURL ); worker.addEventListener('error',onerror,false); worker.addEventListener('message',onmessage,false); URL.revokeObjectURL( blobURL ); return worker; }; } return new WorkerFactory(); })(window); }-*/;
  34. 34. Web Workers Another Story ● another story, creating workers with GWT ● gwt-ns, webworker linker Does not works nicely with SDM, unfortunately :(
  35. 35. That’s all!!! Thanks. francesca@jooink.com alberto@jooink. com

×