SlideShare una empresa de Scribd logo
1 de 82
WebGL:   GPU Acceleration for the open web Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania
Goals ,[object Object],[object Object],[object Object],[object Object],[object Object]
What do I do? OpenGL Insights Analytical Graphics, Inc. If you are curious, see  http://www.seas.upenn.edu/~pcozzi/ developer lecturer author editor
WebGL for Web Developers ,[object Object],[object Object],[object Object],[object Object],[object Object]
WebGL for Web Developers ,[object Object],[object Object],[object Object],[object Object],[object Object],3D
WebGL for Graphics Developers ,[object Object],[object Object],[object Object],[object Object]
Bring 3D to the Masses ,[object Object],[object Object],[object Object],[object Object]
Demos Google Body http://bodybrowser.googlelabs.com/ EmberWind http://operasoftware.github.com/Emberwind/
WebGL ,[object Object],[object Object],Image from  http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/Khronos-and-the-Mobile-Ecosystem_Aug-11.pdf
WebGL ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],See  http://www.khronos.org/registry/webgl/specs/latest/
WebGL ,[object Object],[object Object],[object Object],[object Object],[object Object]
WebGL ,[object Object],[object Object]
WebGL Alternatives? ,[object Object],[object Object],[object Object],[object Object]
WebGL ,[object Object],// HTML: < canvas   id = &quot;glCanvas&quot;  width = &quot;1024&quot;   height = &quot;768&quot; ></ canvas > // JavaScript: var  gl =  document . getElementById ( &quot;glCanvas&quot; ). getContext ( &quot;experimental-webgl&quot; );
WebGL ,[object Object],// ... gl. bindBuffer ( /* ... */ ); gl. vertexAttribPointer ( /* ... */ ); gl. useProgram ( /* ... */ ); gl. drawArrays ( /* ... */ ); Checkout  http://learningwebgl.com/
WebGL ,[object Object],( function  tick(){ // ... GL calls to draw scene window . requestAnimationFrame (tick); })(); You want this to work cross-browser.  See  http://paulirish.com/2011/requestanimationframe-for-smart-animating/
WebGL Performance ,[object Object]
WebGL Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],See  http://www.youtube.com/watch?v=rfQ8rKGTVlg
WebGL and other APIs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Demos WebGL Skin http://alteredqualia.com/three/examples/webgl_materials_skin.html WebGL Water http://madebyevan.com/webgl-water/
WebGL support is good, and it is getting better…
Desktop WebGL Support ,[object Object],- Windows Only - 3 rd  Party Plugins available See  http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation
Desktop WebGL Support See  http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Windows 7 with WebGL support (blue)
Desktop WebGL Support See  http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Windows XP with WebGL support (blue)
Desktop WebGL Support See  http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Mac with WebGL support (blue)
Desktop WebGL Support See  http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Linux with WebGL support (blue)
Desktop WebGL Support ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],OpenGL ES 2.0 Direct3D 9 See  http://code.google.com/p/angleproject/
Mobile WebGL Support ,[object Object],[object Object],[object Object],[object Object],[object Object]
Mobile WebGL Support ,[object Object],See  http://news.cnet.com/8301-30685_3-20071902-264/apple-signs-up-for-webgl-graphics-in-iads/ Will be in iOS 5 for iAd developers
HTML5 on Mobile ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
By the way, mobile is really important: See  http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/OpenGL-ES-and-Mobile-Trends_Aug-11.pdf
WebGL Support on your System ,[object Object],Disclosure:  My  awesome intern  wrote this
Browsers are becoming like operating systems…
Browser Architecture ,[object Object],See  http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf
Browser Architecture ,[object Object],See  http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf
Browser Architecture ,[object Object],See  http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf
Browser Architecture ,[object Object],See  http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf
Browser Architecture ,[object Object]
Browser Architecture ,[object Object]
Demos Javascript Canvas Raytracer http://jupiter909.com/mark/jsrt.html WebGL Path Tracing http://madebyevan.com/webgl-path-tracing/
The Joys of JavaScript Skip the next 30 slides if you already know JavaScript
JavaScript is weakly typed…
JavaScript Type System ,[object Object],var  n = 1;
JavaScript Type System ,[object Object],var  n = 1; var  s =  “WebGL” ; var  b =  true ;
JavaScript Type System ,[object Object],var  n = 1; var  s =  “WebGL” ; var  b =  true ; var  sum = n + s + b;
JavaScript is a functional language…
JavaScript Functions ,[object Object],[object Object],function  add(x, y) { return  x + y; } var  sum = add(1, 2);
JavaScript Functions ,[object Object],var  add =  function (x, y) { return  x + y; }; var  sum = add(1, 2);
JavaScript Functions ,[object Object],var  add =  function   // ... function  execute(op, x, y) { return  op(x, y); } var  sum = execute(add, 1, 2);
JavaScript Anonymous  Functions ,[object Object],function  execute(op, x, y)  // ... var  sum = execute( function (x, y) { return  x + y; }, 1, 2);
JavaScript Closures ,[object Object],var  z = 3; var  sum = execute( function (x, y) { return  x + y + z; }, 1, 2);
JavaScript is a dynamic language…
JavaScript Object Literals ,[object Object],var  position = { x : 1.0, y : 2.0 };
JavaScript Object Literals ,[object Object],var  position = { x : 1.0, y : 2.0 }; position.z = 3.0;
JavaScript Object Literals ,[object Object]
JavaScript Object Literals ,[object Object],var  position = { x : 1.0, y : 2.0, min :  function () { return   Math . min ( this .x,  this .y); } };
JavaScript Object Literals ,[object Object],position.z = 3.0; position.min =  function () { return   Math . min ( this .x,  this .y, this .z); };
JavaScript Object Literals ,[object Object]
JavaScript Object Literals ,[object Object],[object Object],pick(322, 40, 5, 4);
JavaScript Object Literals ,[object Object],[object Object],pick({ x : 322,  y : 40,  width : 5,  height : 4 });
Demos World Flights http://senchalabs.github.com/philogl/PhiloGL/examples/worldFlights/ WebGL Jellyfish http://chrysaora.com/
JavaScript does object-oriented…
JavaScript Constructor Functions function  Vector(x, y) { this .x = x; this .y = y; } var  v =  new  Vector(1, 2);
JavaScript Constructor Functions ,[object Object],function  Vector(x, y) { this .x = x; this .y = y; this .min =  function () { return   Math . min ( this .x,  this .y); }; }
JavaScript Constructor Functions ,[object Object],function  Vector(x, y) { this .x = x; this .y = y; } Vector.prototype.min =  function () { return  Math.min( this .x,  this .y); };
JavaScript Polymorphism ,[object Object],function  draw(model) { model.setRenderState(); model.render(); }
JavaScript Polymorphism ,[object Object],var  level = { setRenderState :  function ()  // ... render :  function ()  // ... }; draw(level);  // Just works
JavaScript Build Pipeline See  http://www.julienlecomte.net/blog/2007/09/16/ Concatenate Minify ,[object Object],[object Object],[object Object],[object Object],[object Object],.js files One  .js file “ Compressed”  .js file
JavaScript Advice ,[object Object],[object Object],[object Object]
Demos WebGL Inspector http://benvanik.github.com/WebGL-Inspector/samples/lesson05/embedded.html The Sproingies http://www.snappymaria.com/webgl/Sproingies.html
WebGL developers now need to think about security…
C ross- O rigin  R esource  S haring ,[object Object]
C ross- O rigin  R esource  S haring ,[object Object],var  img = new  Image (); img.onload =  function () { gl. texImage2D ( /* ... */ , img); }; img.src =  &quot;image.png&quot; ;
C ross- O rigin  R esource  S haring ,[object Object],var  img = new  Image (); img.onload =  function () { gl. texImage2D ( /* ... */ , img); }; img.crossOrigin =  &quot;anonymous&quot; ; img.src = &quot;http://another-domain.com/image.png&quot; ;
C ross- O rigin  R esource  S haring ,[object Object],Browser www.your-domain.com www.another-domain.com html/js/css files Images files used for textures
C ross- O rigin  R esource  S haring ,[object Object],Browser www.your-domain.com www.another-domain.com html/js/css files Images files used for textures Images files used for textures “ proxy.php?http://another-domain.com/image.png&quot; See  http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jshelp/ags_proxy.htm
Denial of Service Attacks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Lots of WebGL security info:  http://learningwebgl.com/blog/?p=3890
Demos Geoscope Sandbox (will be released soon   ) http://localhost/geoscopedemos/Build/Debug/Examples/Sandbox/index.html
WebGL Libraries ,[object Object],[object Object],[object Object],[object Object],[object Object]
WebGL Resources ,[object Object],[object Object]
JavaScript Resources I promise I do not work for O'Reilly or Yahoo
By the way,  WebCL  is coming http://www.khronos.org/webcl/ Prototypes for Firefox and WebKit are available Interactive WebCL kernel editor: http://webcl.nokiaresearch.com/kerneltoy/

Más contenido relacionado

La actualidad más candente

Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...GITS Indonesia
 
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaÖnder Ceylan
 
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume LaforgeGroovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume LaforgeGuillaume Laforge
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011Nicholas Zakas
 
Svcc Java2D And Groovy
Svcc Java2D And GroovySvcc Java2D And Groovy
Svcc Java2D And GroovyAndres Almiray
 
Svcc Building Rich Applications with Groovy's SwingBuilder
Svcc Building Rich Applications with Groovy's SwingBuilderSvcc Building Rich Applications with Groovy's SwingBuilder
Svcc Building Rich Applications with Groovy's SwingBuilderAndres Almiray
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Techvincent_scheib
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureNicholas Zakas
 
Understanding the Node.js Platform
Understanding the Node.js PlatformUnderstanding the Node.js Platform
Understanding the Node.js PlatformDomenic Denicola
 
Interactive Vector-Graphics in the Browser
Interactive Vector-Graphics in the BrowserInteractive Vector-Graphics in the Browser
Interactive Vector-Graphics in the Browsertec
 
Implement angular calendar component how to drag &amp; create events
Implement angular calendar component how to drag &amp; create eventsImplement angular calendar component how to drag &amp; create events
Implement angular calendar component how to drag &amp; create eventsKaty Slemon
 
Reactive, component 그리고 angular2
Reactive, component 그리고  angular2Reactive, component 그리고  angular2
Reactive, component 그리고 angular2Jeado Ko
 
Javascript, the GNOME way (JSConf EU 2011)
Javascript, the GNOME way (JSConf EU 2011)Javascript, the GNOME way (JSConf EU 2011)
Javascript, the GNOME way (JSConf EU 2011)Igalia
 

La actualidad más candente (20)

Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
 
Threejs使ってみた
Threejs使ってみたThreejs使ってみた
Threejs使ってみた
 
Moustamera
MoustameraMoustamera
Moustamera
 
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
 
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume LaforgeGroovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
 
Svcc Java2D And Groovy
Svcc Java2D And GroovySvcc Java2D And Groovy
Svcc Java2D And Groovy
 
Svcc Groovy Testing
Svcc Groovy TestingSvcc Groovy Testing
Svcc Groovy Testing
 
Svcc Building Rich Applications with Groovy's SwingBuilder
Svcc Building Rich Applications with Groovy's SwingBuilderSvcc Building Rich Applications with Groovy's SwingBuilder
Svcc Building Rich Applications with Groovy's SwingBuilder
 
фабрика Blockly
фабрика Blocklyфабрика Blockly
фабрика Blockly
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
 
Understanding the Node.js Platform
Understanding the Node.js PlatformUnderstanding the Node.js Platform
Understanding the Node.js Platform
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
 
Interactive Vector-Graphics in the Browser
Interactive Vector-Graphics in the BrowserInteractive Vector-Graphics in the Browser
Interactive Vector-Graphics in the Browser
 
Implementing New Web
Implementing New WebImplementing New Web
Implementing New Web
 
Implement angular calendar component how to drag &amp; create events
Implement angular calendar component how to drag &amp; create eventsImplement angular calendar component how to drag &amp; create events
Implement angular calendar component how to drag &amp; create events
 
Reactive, component 그리고 angular2
Reactive, component 그리고  angular2Reactive, component 그리고  angular2
Reactive, component 그리고 angular2
 
Developing Async Sense
Developing Async SenseDeveloping Async Sense
Developing Async Sense
 
Javascript, the GNOME way (JSConf EU 2011)
Javascript, the GNOME way (JSConf EU 2011)Javascript, the GNOME way (JSConf EU 2011)
Javascript, the GNOME way (JSConf EU 2011)
 

Similar a WebGL: GPU acceleration for the open web

The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015jbandi
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyDavid Padbury
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesSimon Willison
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Patrick Chanezon
 
HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?Ankara JUG
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for youSimon Willison
 
Modeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based GamesModeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based GamesRay Toal
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureSimon Willison
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to JavascriptAnjan Banda
 
LISA Qooxdoo Tutorial Handouts
LISA Qooxdoo Tutorial HandoutsLISA Qooxdoo Tutorial Handouts
LISA Qooxdoo Tutorial HandoutsTobias Oetiker
 
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...Codemotion
 
Scripting Oracle Develop 2007
Scripting Oracle Develop 2007Scripting Oracle Develop 2007
Scripting Oracle Develop 2007Tugdual Grall
 
Writing native Linux desktop apps with JavaScript
Writing native Linux desktop apps with JavaScriptWriting native Linux desktop apps with JavaScript
Writing native Linux desktop apps with JavaScriptIgalia
 
Java Programming for Designers
Java Programming for DesignersJava Programming for Designers
Java Programming for DesignersR. Sosa
 
DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...
DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...
DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...Plain Concepts
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...Fabio Franzini
 
Vaadin 7 CN
Vaadin 7 CNVaadin 7 CN
Vaadin 7 CNjojule
 

Similar a WebGL: GPU acceleration for the open web (20)

The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
A More Flash Like Web?
A More Flash Like Web?A More Flash Like Web?
A More Flash Like Web?
 
HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
 
Modeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based GamesModeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based Games
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
JavaScript Core
JavaScript CoreJavaScript Core
JavaScript Core
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
 
LISA Qooxdoo Tutorial Handouts
LISA Qooxdoo Tutorial HandoutsLISA Qooxdoo Tutorial Handouts
LISA Qooxdoo Tutorial Handouts
 
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
 
Scripting Oracle Develop 2007
Scripting Oracle Develop 2007Scripting Oracle Develop 2007
Scripting Oracle Develop 2007
 
Writing native Linux desktop apps with JavaScript
Writing native Linux desktop apps with JavaScriptWriting native Linux desktop apps with JavaScript
Writing native Linux desktop apps with JavaScript
 
Java Programming for Designers
Java Programming for DesignersJava Programming for Designers
Java Programming for Designers
 
DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...
DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...
DotNet 2019 | Marcos Cobeña - Llevando Wave Engine a la web a través de WebGL...
 
GWT
GWTGWT
GWT
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Vaadin 7 CN
Vaadin 7 CNVaadin 7 CN
Vaadin 7 CN
 

Último

TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 

Último (20)

TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 

WebGL: GPU acceleration for the open web

  • 1. WebGL: GPU Acceleration for the open web Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania
  • 2.
  • 3. What do I do? OpenGL Insights Analytical Graphics, Inc. If you are curious, see http://www.seas.upenn.edu/~pcozzi/ developer lecturer author editor
  • 4.
  • 5.
  • 6.
  • 7.
  • 8. Demos Google Body http://bodybrowser.googlelabs.com/ EmberWind http://operasoftware.github.com/Emberwind/
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20. Demos WebGL Skin http://alteredqualia.com/three/examples/webgl_materials_skin.html WebGL Water http://madebyevan.com/webgl-water/
  • 21. WebGL support is good, and it is getting better…
  • 22.
  • 23. Desktop WebGL Support See http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Windows 7 with WebGL support (blue)
  • 24. Desktop WebGL Support See http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Windows XP with WebGL support (blue)
  • 25. Desktop WebGL Support See http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Mac with WebGL support (blue)
  • 26. Desktop WebGL Support See http://people.mozilla.org/~bjacob/gfx_features_stats/ % Firefox users on Linux with WebGL support (blue)
  • 27.
  • 28.
  • 29.
  • 30.
  • 31. By the way, mobile is really important: See http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/OpenGL-ES-and-Mobile-Trends_Aug-11.pdf
  • 32.
  • 33. Browsers are becoming like operating systems…
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40. Demos Javascript Canvas Raytracer http://jupiter909.com/mark/jsrt.html WebGL Path Tracing http://madebyevan.com/webgl-path-tracing/
  • 41. The Joys of JavaScript Skip the next 30 slides if you already know JavaScript
  • 43.
  • 44.
  • 45.
  • 46. JavaScript is a functional language…
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52. JavaScript is a dynamic language…
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61. Demos World Flights http://senchalabs.github.com/philogl/PhiloGL/examples/worldFlights/ WebGL Jellyfish http://chrysaora.com/
  • 63. JavaScript Constructor Functions function Vector(x, y) { this .x = x; this .y = y; } var v = new Vector(1, 2);
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70. Demos WebGL Inspector http://benvanik.github.com/WebGL-Inspector/samples/lesson05/embedded.html The Sproingies http://www.snappymaria.com/webgl/Sproingies.html
  • 71. WebGL developers now need to think about security…
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78. Demos Geoscope Sandbox (will be released soon  ) http://localhost/geoscopedemos/Build/Debug/Examples/Sandbox/index.html
  • 79.
  • 80.
  • 81. JavaScript Resources I promise I do not work for O'Reilly or Yahoo
  • 82. By the way, WebCL is coming http://www.khronos.org/webcl/ Prototypes for Firefox and WebKit are available Interactive WebCL kernel editor: http://webcl.nokiaresearch.com/kerneltoy/

Notas del editor

  1. Try “webgl”, then “experimental-webgl”
  2. ANGLE Implements GL ES API over D3D 9 Translates GLSL ES to HLSL
  3. Touch events: http://www.html5rocks.com/en/mobile/touch.html Geolocation: http://diveintohtml5.org/geolocation.html Orientation and motion: http://www.html5rocks.com/en/tutorials/device/orientation/
  4. Each tab is in a separate process – security – one tab can’t crash other tabs.
  5. Has to synchronize processes.
  6. All numbers are 64-bit IEEE floating-point.
  7. All numbers are 64-bit IEEE floating-point.
  8. Output is “1WebGLtrue”
  9. Anonymous functions are also in C#, etc.
  10. Anonymous functions are also in C#, etc.
  11. Self-documenting code. Also, you can pass arguments in any order.
  12. But there are no classes
  13. Constructor functions start with a capital letter by convention.
  14. Constructor functions start with a capital letter by convention.
  15. Prototype functions can’t access closures in the constructor function.
  16. “ Duck typing” Kind of like C# templates.
  17. “ Duck typing” Kind of like C# templates.
  18. Geoscope source layout Example minified javascript, and then beautifying it with http://jsbeautifier.org/ Shader source can be put into HTML script tags, into separate glsl files downloaded with XMLHttpRequest, or put into JavaScript literals as part of the build process.
  19. Long draw calls were also used in early GPGPU days. These calls were killed by some operating systems (I think Windows Vista killed draw calls longer than two seconds).