SlideShare une entreprise Scribd logo
1  sur  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/

Contenu connexe

Tendances

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
 

Tendances (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)
 

Similaire à 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
 

Similaire à 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
 

Dernier

Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
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
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
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 Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
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
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
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
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 

Dernier (20)

Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
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
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
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 Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
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
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
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
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 

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/

Notes de l'éditeur

  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).