DOCSLIB.ORG

Webgl: How Webgl Brings 3D to the Masses the Joys of Javascript GPU Acceleration for the Open Web Demos Galore

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Webgl: � How Webgl Brings 3D to the Masses � the Joys of Javascript GPU Acceleration for the Open Web � Demos Galore Goals Entice you to use WebGL by showing: WebGL: How WebGL brings 3D to the masses The joys of JavaScript GPU Acceleration for the open web Demos galore Guest Lecture: Patrick Cozzi Analytical Graphics, Inc. University of Pennsylvania OpenGL experience is assumed; web experience is not What do I do? WebGL for Web Developers The web has Text Images Video Analytical OpenGL Insights Graphics, Inc. What is the next media-type? developer lecturer author editor If you are curious, see http://www.seas.upenn.edu/~pcozzi/ WebGL for Web Developers WebGL for Graphics Developers The web has We want to support Text Windows, Linux, Mac Images Desktop and mobile Video How? What is the next media-type? 3D Bring 3D to the Masses Demos Put it in on a webpage Does not require a plugin or install Does not require administrator rights Make it run on most GPUs Google Body EmberWind http://bodybrowser.googlelabs.com/ http://operasoftware.github.com/Emberwind/ WebGL WebGL Includes Does not include OpenGL ES 2.0 for JavaScript Vertex shaders Geometry shaders Seriously, JavaScript Fragment shaders Tessellation shaders Vertex buffers Vertex Array Objects Textures Multiple render targets Framebuffers Floating-point textures Render states Compressed textures … FS depth writes … Image from http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/Khronos-and-the-Mobile- See http://www.khronos.org/registry/webgl/specs/latest/ Ecosystem Aug 11 pdf WebGL WebGL Also lacks the latest bells and whistles If you know OpenGL, you already know WebGL Atomics If you know C++, the real learning curve is Texture load store JavaScript … But is a very capable graphics API that is supported by lots of GPUs WebGL Alternatives? WebGL Flash Creating a context is easy: Silverlight // HTML: Java Applets <canvas id="glCanvas" width="1024" Unity height="768"></canvas> // JavaScript: var gl = document.getElementById("glCanvas") .getContext("experimental-webgl"); WebGL WebGL The rest is similar to desktop OpenGL: Create an animation loop: // ... (function tick(){ gl.bindBuffer(/* ... */); // ... GL calls to draw scene gl.vertexAttribPointer(/* ... */); window.requestAnimationFrame(tick); gl.useProgram(/* ... */); })(); gl.drawArrays(/* ... */); Checkout http://learningwebgl.com/ You want this to work cross-browser. See http://paulirish.com/2011/requestanimationframe-for-smart-animating/ WebGL Performance WebGL Performance Performance can be very good. Why? Performance can be very good. Why? The GPU is still doing the rendering Batch! Draw multiple objects with one draw call Sort by texture Push work into shaders See http://www.youtube.com/watch?v=rfQ8rKGTVlg WebGL and other APIs Demos Take advantage of other web APIs: HTML5 <video> 2D <canvas> CSS transforms Composite UI elements Web workers Typed Arrays WebGL Skin WebGL Water http://alteredqualia.com/three/examples/webgl_materials_skin.html http://madebyevan.com/webgl-water/ Desktop WebGL Support WebGL support is In September, 2011 good, and it is getting better… -3rd Party Plugins available - Windows Only See http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation Desktop WebGL Support Desktop WebGL Support % Firefox users on Windows 7 with WebGL support (blue) % Firefox users on Windows XP with WebGL support (blue) See http://people.mozilla.org/~bjacob/gfx_features_stats/ See http://people.mozilla.org/~bjacob/gfx_features_stats/ Desktop WebGL Support Desktop WebGL Support % Firefox users on Mac with WebGL support (blue) % Firefox users on Linux with WebGL support (blue) See http://people.mozilla.org/~bjacob/gfx_features_stats/ See http://people.mozilla.org/~bjacob/gfx_features_stats/ Desktop WebGL Support Mobile WebGL Support Windows In September, 2011 No OpenGL driver installed? Old driver? Only 35% of Windows XP machines have GL 2 drivers Firefox Mobile – “Fennec” Buggy driver? •Performance improvements possibly this this year No problem: Stock Browser ANGLE – Almost Native Graphics Layer Engine •Demo at SIGGRAPH 2011. NVIDIA is working on it. OpenGL ES 2.0 Direct3D 9 See http://code.google.com/p/angleproject/ Mobile WebGL Support HTML5 on Mobile In September, 2011 Touch events Test with http://www.snappymaria.com/misc/TouchEventTest_v2.html Will be in iOS 5 for iAd developers Still need multi-touch in Firefox Mobile Geolocation Device orientation and motion The future of HTML5 and WebGL on mobile is very promising See http://news.cnet.com/8301-30685_3-20071902-264/apple-signs-up-for-webgl-graphics-in-iads/ By the way, mobile is really important: WebGL Support on your System http://webglreport.sourceforge.net/ See http://www.khronos.org/assets/uploads/developers/library/2011-siggraph-mobile/OpenGL-ES-and-Mobile-Trends_Aug-11.pdf Disclosure: My awesome intern wrote this Browser Architecture Browsers are Single Process becoming like operating systems… See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf Browser Architecture Browser Architecture Chrome’s Multi-process Chrome’s Multi-process See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf Browser Architecture Browser Architecture Chrome’s Multi-process In a multi-process is gl.Get* slow? Why? See http://www.khronos.org/assets/uploads/developers/library/2010_siggraph_bof_webgl/WebGL-BOF-2-WebGL-in-Chrome_SIGGRAPH-Jul29.pdf Browser Architecture Demos Other browsers also use a multi-process architecture in one form or another Javascript Canvas Raytracer WebGL Path Tracing http://jupiter909.com/mark/jsrt.html http://madebyevan.com/webgl-path-tracing/ The Joys of JavaScript is weakly JavaScript typed… Skip the next 30 slides if you already know JavaScript JavaScript Type System JavaScript Type System short, int, float, double. Who JavaScript has numbers, strings, and needs them? booleans: var n = 1; var n = 1; var s = “WebGL”; var b = true; JavaScript Type System This compiles: JavaScript is a var n = 1; var s = “WebGL”; functional language… var b = true; var sum = n + s + b; JavaScript Functions JavaScript Functions Looks familiar: Functions are objects: function add(x, y) { var add = function(x, y) { return x + y; return x + y; } }; var sum = add(1, 2); var sum = add(1, 2); Functions are first-class objects, so… JavaScript Functions JavaScript Anonymous Functions Pass functions to functions: Why name functions? var add = function // ... function execute(op, x, y) // ... function execute(op, x, y) { var sum = execute(function(x, y) { return op(x, y); return x + y; } }, 1, 2); var sum = execute(add, 1, 2); JavaScript Closures Why limit scope? var z = 3; JavaScript is a var sum = execute(function(x, y) { dynamic language… return x + y + z; }, 1, 2); JavaScript Object Literals JavaScript Object Literals Who needs struct? Create objects on Why not add fields on the fly too? the fly: var position = { var position = { x : 1.0, x : 1.0, y : 2.0 y : 2.0 }; }; position.z = 3.0; JavaScript Object Literals JavaScript Object Literals Who needs class? Who needs class? Create functions too: var position = { x : 1.0, y : 2.0, min : function() { return Math.min(this.x, this.y); } }; JavaScript Object Literals JavaScript Object Literals Why not change min()? Useful for passing to functions. Why? position.z = 3.0; position.min = function() { return Math.min(this.x, this.y, this.z); }; JavaScript Object Literals JavaScript Object Literals Useful for passing to functions. Why? Useful for passing to functions. Why? What do these arguments mean? What do these arguments mean? pick(322, 40, 5, 4); pick({ x : 322, y : 40, width : 5, height : 4 }); Demos JavaScript does object-oriented… World Flights WebGL Jellyfish http://senchalabs.github.com/philogl/PhiloGL/examples/worldFlights/ http://chrysaora.com/ JavaScript Constructor Functions JavaScript Constructor Functions Objects can have functions: function Vector(x, y) { function Vector(x, y) { this.x = x; this.x = x; this.y = y; this.y = y; } this.min = function() { return Math.min(this.x, this.y); var v = new Vector(1, 2); }; } JavaScript Constructor Functions JavaScript Polymorphism Objects have prototypes: No need for virtual functions function Vector(x, y) { function draw(model) { this.x = x; model.setRenderState(); this.y = y; model.render(); } } Vector.prototype.min = function() { return Math.min(this.x, this.y); }; JavaScript Polymorphism JavaScript Build Pipeline No need for virtual functions Different than C++ Goal: fast downloads var level = { Common: setRenderState : function() // ... .js One render : function() // ... Concatenate Minify “Compressed” files .js file .js file }; Alternative: fine-grain modules draw(level); // Just works How do you deploy shaders? See http://www.julienlecomte.net/blog/2007/09/16/ JavaScript Advice Demos Use JSLint Have excellent test coverage Use the Chrome and Firefox debuggers The Sproingies WebGL Inspector http://www.snappymaria.com/webgl/Sproingies.html http://benvanik.github.com/WebGL-Inspector/samples/lesson05/embedded.html Cross-Origin Resource Sharing Images can’t always be used as texture WebGL developers sources. Why? now need to think about security… Cross-Origin Resource Sharing Cross-Origin Resource Sharing Same domain is OK: Another domain requires CORS
Load more

Recommended publications
  • Machine Learning in the Browser
    Machine Learning in the Browser The Harvard community has made this article openly available. Please share how this access benefits you. Your story matters Citable link http://nrs.harvard.edu/urn-3:HUL.InstRepos:38811507 Terms of Use This article was downloaded from Harvard University’s DASH repository, and is made available under the terms and conditions applicable to Other Posted Material, as set forth at http:// nrs.harvard.edu/urn-3:HUL.InstRepos:dash.current.terms-of- use#LAA Machine Learning in the Browser a thesis presented by Tomas Reimers to The Department of Computer Science in partial fulfillment of the requirements for the degree of Bachelor of Arts in the subject of Computer Science Harvard University Cambridge, Massachusetts March 2017 Contents 1 Introduction 3 1.1 Background . .3 1.2 Motivation . .4 1.2.1 Privacy . .4 1.2.2 Unavailable Server . .4 1.2.3 Simple, Self-Contained Demos . .5 1.3 Challenges . .5 1.3.1 Performance . .5 1.3.2 Poor Generality . .7 1.3.3 Manual Implementation in JavaScript . .7 2 The TensorFlow Architecture 7 2.1 TensorFlow's API . .7 2.2 TensorFlow's Implementation . .9 2.3 Portability . .9 3 Compiling TensorFlow into JavaScript 10 3.1 Motivation to Compile . 10 3.2 Background on Emscripten . 10 3.2.1 Build Process . 12 3.2.2 Dependencies . 12 3.2.3 Bitness Assumptions . 13 3.2.4 Concurrency Model . 13 3.3 Experiences . 14 4 Results 15 4.1 Benchmarks . 15 4.2 Library Size . 16 4.3 WebAssembly . 17 5 Developer Experience 17 5.1 Universal Graph Runner .
    [Show full text]
  • Webcl for Hardware-Accelerated Web Applications
    WebCL for Hardware-Accelerated Web Applications Won Jeon, Tasneem Brutch, and Simon Gibbs What is WebCL? • WebCL is a JavaScript binding to OpenCL. • WebCL enables significant acceleration of compute-intensive web applications. • WebCL currently being standardized by Khronos. 2 tizen.org Contents • Introduction – Motivation and goals – OpenCL • WebCL – Demos – Programming WebCL – Samsung’s Prototype: implementation & performance • Standardization – Khronos WebCL Working Group – WebCL robustness and security – Standardization status • Conclusion – Summary and Resources 3 tizen.org Motivation • New mobile apps with high compute demands: – augmented reality – video processing – computational photography – 3D games 4 tizen.org Motivation… • GPU offers improved FLOPS and FLOPS/watt as compared to CPU. FLOPS/ GPU watt CPU year 5 tizen.org Motivation… • Web-centric platforms 6 tizen.org OpenCL: Overview • Features – C-based cross-platform programming interface – Kernels: subset of ISO C99 with language extensions – Run-time or build-time compilation of kernels – Well-defined numerical accuracy (IEEE 754 rounding with specified maximum error) – Rich set of built-in functions: cross, dot, sin, cos, pow, log … 7 tizen.org OpenCL: Platform Model • A host is connected to one or more OpenCL devices • OpenCL device – A collection of one or more compute units (~ cores) – A compute unit is composed of one or more processing elements (~ threads) – Processing elements execute code as SIMD or SPMD 8 tizen.org OpenCL: Execution Model • Kernel – Basic unit
    [Show full text]
  • Redalyc.NEW WEB TECHNOLOGIES for ASTRONOMY
    Revista Mexicana de Astronomía y Astrofísica ISSN: 0185-1101 [email protected] Instituto de Astronomía México Sprimont, P-G.; Ricci, D.; Nicastro, L. NEW WEB TECHNOLOGIES FOR ASTRONOMY Revista Mexicana de Astronomía y Astrofísica, vol. 45, 2014, pp. 75-78 Instituto de Astronomía Distrito Federal, México Available in: http://www.redalyc.org/articulo.oa?id=57132995026 How to cite Complete issue Scientific Information System More information about this article Network of Scientific Journals from Latin America, the Caribbean, Spain and Portugal Journal's homepage in redalyc.org Non-profit academic project, developed under the open access initiative RevMexAA (Serie de Conferencias) , 45 , 75–78 (2014) NEW WEB TECHNOLOGIES FOR ASTRONOMY P-G. Sprimont, 1 D. Ricci, 2 and L. Nicastro 1 RESUMEN Gracias a las nuevas capacidades de HTML5, y las grandes mejoras del lenguaje JavaScript es posible disen˜ar interfaces web muy complejas e interactivas. Adem´as, los servidores que eran una vez monol´ıticos y orientados a servir archivos, est´an evolucionando a aplicaciones de servidor f´acilmente programables, capaces de lidiar con interacciones complejas gracias a la nueva generaci´onde navegadores. Nosotros creemos que la comunidad de astr´onomos profesionales y aficionados entera puede beneficiarse del potencial de estas nuevas tecnolog´ıas. Nuevas interfaces web pueden ser disen˜adas para proveer al usuario con herramientas mucho m´as intuitivas e interactivas. Acceder a archivos de datos astron´omicos, controlar y monitorear observatorios y en particu- lar telescopios rob´oticos, supervisar pipelines de reducci´on de datos, son todas capacidades que pueden ser imp lementadas en una aplicaci´on web JavaScript.
    [Show full text]
  • Webgl, Webcl and Beyond!
    WebGL, WebCL and Beyond! Neil Trevett VP Mobile Content, NVIDIA President, Khronos Group © Copyright Khronos Group, 2011 - Page 1 Two WebGL-focused Sessions Today • Industry ecosystem and standards for 3D and compute - What is 3D anyway – jungle survival primer - Khronos and open standard acceleration APIs for native apps - The evolution of pervasive 3D on mobile platforms - WebGL and WebCL as part of HTML5 - Web apps and use cases beyond games – augmented reality • Hands-On with WebGL - Steve Baker - Intific WebGL Reference Cards at end of session! © Copyright Khronos Group, 2011 - Page 2 What is Real-time 3D Graphics? © Copyright Khronos Group, 2011 - Page 3 3D Pipeline Basics • The art of “faking” realistic looking scenes or objects using heuristic techniques learned over the years • The objects making up a scene are held in a database • Surfaces of objects are broken down into a grid of polygons • The vertices of the polygons are located in 3D coordinate space - x,y,z • Each vertex has a “material” – color and reflective properties • Vertices are positioned in 3D space – matrix math zooms and rotates y x2,y2,z2 x1,y1,z1 z x3,y3,z3 x © Copyright Khronos Group, 2011 - Page 4 3D Pipeline Basics – Pixel Shading • Project each polygon onto the screen Interpolate colors - Determine which pixels are affected between vertices • Smooth Shading Lighting - Run lighting equation at each vertex equation each - Compute vertex color depending vertex on how lights interact with surface angles and properties - Interpolate colors between the vertices
    [Show full text]
  • Webcl™ Kernel Validator Request for Quotations
    WebCL™ Kernel Validator Request for Quotations Notice ALL KHRONOS SPECIFICATIONS AND OTHER DOCUMENTS (TOGETHER AND SEPARATELY, “MATERIALS”) ARE BEING PROVIDED “AS IS.” KHRONOS MAKES NO WARRANTIES, EXPRESSED, IMPLIED, STATUTORY OR OTHERWISE WITH RESPECT TO THE MATERIALS, AND EXPRESSLY DISCLAIMS ALL IMPLIED WARRANTIES OF NONINFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. Information furnished is believed to be accurate and reliable. However, Khronos assumes no responsibility for the consequences of use of such information or for any infringement of patents or other rights of third parties that may result from its use. No license is granted by implication or otherwise under any patent or patent rights of Khronos. Specifications mentioned in this publication are subject to change without notice. This publication supersedes and replaces all information previously supplied. Trademarks Khronos, WebCL and WebGL, and associated logos are trademarks or registered trademarks of Khronos Group Inc. OpenCL is a trademark of Apple Inc. and used under license by Khronos. All other product names, trademarks, and/or company names are used solely for identification and belong to their respective owners. Copyright © 2013 The Khronos Group All rights reserved. WebCL RFQ Page 1 of 9 1. Background The WebCL™ API is designed with security as a primary requirement. The Validator is a security tool to enforce compliance of WebCL™ kernels with the defined WebCL™ language restrictions, and prevent out of bounds memory accesses. The WebCL™ kernel Validator will enforce out of bounds memory protections and perform syntactic validation of WebCL™ kernels. 2. Requirements The project will deliver the design, implementation and documentation for a Validator for WebCL™ kernels.
    [Show full text]
  • Webgl: the Standard, the Practice and the Opportunity Web3d Conference August 2012
    WebGL: The Standard, the Practice and the Opportunity Web3D Conference August 2012 © Copyright Khronos Group 2012 | Page 1 Agenda and Speakers • 3D on the Web and the Khronos Ecosystem - Neil Trevett, NVIDIA and Khronos Group President • Hands On With WebGL - Ken Russell, Google and WebGL Working Group Chair © Copyright Khronos Group 2012 | Page 2 Khronos Connects Software to Silicon • Khronos APIs define processor acceleration capabilities - Graphics, video, audio, compute, vision and sensor processing APIs developed today define the functionality of platforms and devices tomorrow © Copyright Khronos Group 2012 | Page 3 APIs BY the Industry FOR the Industry • Khronos standards have strong industry momentum - 100s of man years invested by industry leading experts - Shipping on billions of devices and multiple operating systems • Khronos is OPEN for any company to join and participate - Standards are truly open – one company, one vote - Solid legal and Intellectual Property framework for industry cooperation - Khronos membership fees to cover expenses • Khronos APIs define core device acceleration functionality - Low-level “Foundation” functionality needed on every platform - Rigorous conformance tests for cross-vendor consistency • They are FREE - Members agree to not request royalties Silicon Software © Copyright Khronos Group 2012 | Page 4 Apple Over 100 members – any company worldwide is welcome to join Board of Promoters © Copyright Khronos Group 2012 | Page 5 API Standards Evolution WEB INTEROP, VISION MOBILE AND SENSORS DESKTOP OpenVL New API technology first evolves on high- Mobile is the new platform for Apps embrace mobility’s end platforms apps innovation. Mobile unique strengths and need Diverse platforms – mobile, TV, APIs unlock hardware and complex, interoperating APIs embedded – mean HTML5 will conserve battery life with rich sensory inputs become increasingly important e.g.
    [Show full text]
  • Neil Trevett Vice President Mobile Ecosystem, NVIDIA President, Khronos Group
    Neil Trevett Vice President Mobile Ecosystem, NVIDIA President, Khronos Group © Copyright Khronos Group 2014 - Page 1 Khronos Connects Software to Silicon Open Consortium creating ROYALTY-FREE, OPEN STANDARD APIs for hardware acceleration Defining the roadmap for low-level silicon interfaces needed on every platform Graphics, compute, rich media, vision, sensor and camera processing Rigorous specifications AND conformance tests for cross- vendor portability Acceleration APIs BY the Industry FOR the Industry Well over a BILLION people use Khronos APIs Every Day… © Copyright Khronos Group 2014 - Page 2 Khronos Standards 3D Asset Handling - 3D authoring asset interchange - 3D asset transmission format with compression Visual Computing - 3D Graphics - Heterogeneous Parallel Computing Over 100 companies defining royalty-free APIs to connect software to silicon Acceleration in HTML5 - 3D in browser – no Plug-in - Heterogeneous computing for JavaScript Sensor Processing - Vision Acceleration - Camera Control - Sensor Fusion © Copyright Khronos Group 2014 - Page 3 3D Needs a Transmission Format! • Compression and streaming of 3D assets becoming essential - Mobile and connected devices need access to increasingly large asset databases • 3D is the last media type to define a compressed format - 3D is more complex – diverse asset types and use cases • Needs to be royalty-free - Avoid an ‘internet video codec war’ scenario • Eventually enable hardware implementations of successful codecs - High-performance and low power – but pragmatic adoption strategy
    [Show full text]
  • News Release for More Information: Neil Trevett, President, Khronos | [email protected] | Phone: +1 (408) 464 7053
    News Release For more information: Neil Trevett, President, Khronos | [email protected] | Phone: +1 (408) 464 7053 Khronos Releases OpenVX 1.1 Specification for High Performance, Low Power Computer Vision Acceleration Expanded range of processing functions; Enhanced flexibility for data access and processing; Full conformance tests available; Safety Critical specification in development May 2nd 2016 – Embedded Vision Summit, Santa Clara, CA – The Khronos™ Group, an open consortium of leading hardware and software companies, announces the immediate availability of the OpenVX™ 1.1 specification for cross platform acceleration of computer vision applications and libraries. OpenVX enables performance and power optimized computer vision algorithms for use cases such as face, body and gesture tracking, smart video surveillance, automatic driver assistance systems, object and scene reconstruction, augmented reality, visual inspection, robotics and more. Conformant OpenVX 1.0 implementations and tools are shipping from AMD, Imagination, Intel, NVIDIA, Synopsis and VeriSilicon. OpenVX 1.1 builds on this momentum by adding new processing functions for use cases such as computational photography, and enhances application control over how data is accessed and processed. An open source OpenVX 1.1 sample implementation and full conformance tests will be available before mid-2016. Details on the OpenVX specifications and Adopters Program are available at: www.khronos.org/openvx. “More and more products are incorporating computer vision, and OpenVX
    [Show full text]
  • HTML5 Audio 1 HTML5 Audio
    HTML5 Audio 1 HTML5 Audio HTML • HTML and HTML5; HTML editor • Dynamic HTML • XHTML • XHTML Basic (Mobile) • XHTML Mobile Profile and C-HTML • HTML element • Span and div • HTML attribute • Character encodings; Unicode • Language code • Document Object Model • Browser Object Model • Style sheets and CSS • Font family and Web colors • HTML scripting and JavaScript • W3C, WHATWG, and validator • Quirks mode • HTML Frames • HTML5 Canvas, WebGL, and WebCL • HTML5 Audio and HTML5 video • Web storage • Web browser (layout) engine • Comparison of • document markup languages • web browsers • layout engine support for • HTML; Non-standard HTML • XHTML (1.1) • HTML5; HTML5 canvas, • HTML5 media (Audio, Video) • v • t [1] • e HTML5 Audio is a subject of the HTML5 specification, investigating audio input, playback, synthesis, as well as speech to text in the browser. HTML5 Audio 2 <audio> element The <audio> element represents a sound, or an audio stream.[2] It is commonly used to play back a single audio file within a web page, showing a GUI widget with play/pause/volume controls. Supported browsers • PC • Google Chrome • Internet Explorer 9 • Mozilla Firefox 3.5 • Opera 10.5 • Safari 3.1[3] • Mobile • Android Browser 2.3 • Blackberry Browser • Google Chrome for Android • Internet Explorer Mobile 9 • Mobile Safari 4 • Mozilla Firefox for Android • Opera Mobile 11 • Tizen Supported audio codecs This table documents the current support for audio codecs by the <audio> element. Browser Operating Formats supported by different web browsers system Ogg
    [Show full text]
  • Pando: Personal Volunteer Computing in Browsers
    Pando: Personal Volunteer Computing in Browsers Erick Lavoie, Laurie Hendren Frederic Desprez Miguel Correia McGill University, Montreal, Canada INRIA Grenoble Rhône-Alpes INESC-ID [email protected] Grenoble, France Lisboa, Portugal [email protected] [email protected] [email protected] Abstract In this paper, we therefore present Pando, a new tool that can The large penetration and continued growth in ownership of per- leverage a dynamically varying number of failure-prone personal sonal electronic devices represents a freely available and largely devices contributed by volunteers, to parallelize the application of a untapped source of computing power. To leverage those, we present function on a stream of values, by using the devices’ browsers. Pando, a new volunteer computing tool based on a declarative con- Pando is based on a declarative concurrent programming para- current programming model and implemented using JavaScript, digm [99] which greatly simplifies reasoning about concurrent WebRTC, and WebSockets. This tool enables a dynamically varying processes: it abstracts the non-determinism in the execution by number of failure-prone personal devices contributed by volunteers making it non-observable. This paradigm has already enjoyed great to parallelize the application of a function on a stream of values, practical successes with the popular MapReduce [38] and Unix by using the devices’ browsers. We show that Pando can provide pipelining [56] programming models. We show for the first time it throughput improvements compared to a single personal device, is also effective in personal volunteer computing tools. on a variety of compute-bound applications including animation Pando abstracts distribution but otherwise relies on existing rendering and image processing.
    [Show full text]
  • Bringing GPU Acceleration to the Web Neil Trevett Khronos President NVIDIA Vice President Mobile Content
    Bringing GPU Acceleration to the Web Neil Trevett Khronos President NVIDIA Vice President Mobile Content © Copyright Khronos Group 2012 | Page 1 GPUs are Good at Many Things … Interactive ray tracing Physics simulation Gaming Battlefield 3, EA But traditionally GPUs have NOT been used for web and 2D graphics… Product design Data visualization … that’s about to change … © Copyright Khronos Group 2012 | Page 2 How Can GPUs enhance the Web? • More functionality - Helping to make HTML5 a complete apps platform - 3D graphics - WebGL - Compute - WebCL • More performance - Accelerating the bulk of web =2D - Accelerating key standards such as SVG and Canvas • Mobile computing changing the need for web acceleration Need MORE performance for TOUCH INTERACTIVITY AT LOWER POWER levels… © Copyright Khronos Group 2012 | Page 3 Mobile – a New Era in Computing 140 Cumulative Shipments 120 iOS & Android MacOS & Windows 100 80 Mobile industry is 60 20 Years faster to 100M/year shipments than PC 40 Units Millions in 20 0 Year 1 Year 2 Year 3 Year 4 Year 5 Year 6 Year 7 Year 8 Year 9 Source: Gartner, Apple, NVIDIA © Copyright Khronos Group 2012 | Page 4 Mobile Thermal Design Point 10” Screen takes 1-2W Resolution makes a difference! 7” Screen The iPad3 screen takes up to 8W 4-5” Screen takes takes 1W 250-500mW 2-4W 4-7W 6-10W 30-90W Typical max system power levels before thermal failure Even as battery technology improves - these thermal limits remain © Copyright Khronos Group 2012 | Page 5 How to Save Power? Write 32-bits to Memory 600pJ • Much more expensive
    [Show full text]
  • The Past, Present, and Future of Javascript Where We’Ve Been, Where We Are, and What Lies Ahead
    The Past, Present, and Future of JavaScript Where We’ve Been, Where We Are, and What Lies Ahead Dr. Axel Rauschmayer The Past, Present, and Future of JavaScript Axel Rauschmayer Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo The Past, Present, and Future of JavaScript by Axel Rauschmayer Copyright © 2012 Axel Rauschmayer. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Editor: Mac Slocum Cover Designer: Karen Montgomery Production Editor: Melanie Yarbrough Interior Designer: David Futato Illustrator: Robert Romano Revision History for the First Edition: 2012-07-20 First release See http://oreilly.com/catalog/errata.csp?isbn=9781449339968 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. The Past, Present, and Future of JavaScript and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein.
    [Show full text]