Beginning Webgl for HTML5

Total Page:16

File Type:pdf, Size:1020Kb

Beginning Webgl for HTML5 Beginning WebGL for HTML5 Brian Danchilla Beginning WebGL for HTML5 Copyright © 2012 by Brian Danchilla This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher’s location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN-13 978-1-4302-3996-3 ISBN-13 978-1-4302-3997-0 (eBook) Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. President and Publisher: Paul Manning Lead Editor: Ben Renow-Clarke Technical Reviewer: Massimo Nardone Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Louise Corrigan, Morgan Ertel, Jonathan Gennick, Jonathan Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Tom Welsh Coordinating Editor: Jennifer Blackwell, Anamika Panchoo Copy Editor: Nancy Sixsmith Compositor: SPi Global Indexer: SPi Global Artist: SPi Global Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science + Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348–4505, e-mail [email protected], or visit www.springeronline.com. For information on translations, please e-mail [email protected], or visit www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales. Any source code or other supplementary materials referenced by the author in this text is available to readers at www.apress.com. For detailed information about how to locate your book’s source code, go to www.apress.com/source-code. For Tressa, as fierce as she is delicate. Contents at a Glance About the Author ..........................................................................................................xv About the Technical Reviewer .....................................................................................xvi Acknowledgments ......................................................................................................xvii Introduction ...............................................................................................................xviii N Chapter 1: Setting the Scene .......................................................................................1 N Chapter 2: Shaders 101 .............................................................................................33 N Chapter 3: Textures and Lighting ...............................................................................57 N Chapter 4: Increasing Realism ..................................................................................85 N Chapter 5: Physics ...................................................................................................115 N Chapter 6: Fractals, Height Maps, and Particle Systems .........................................139 N Chapter 7: Three.js Framework ...............................................................................173 N Chapter 8: Productivity Tools ..................................................................................205 N Chapter 9: Debugging and Performance ..................................................................233 N Chapter 10: Effects, Tips, and Tricks .......................................................................267 N Afterword: The Future of WebGL ..............................................................................299 N Appendix A: Essential HTML5 and JavaScript .........................................................303 N Appendix B: Graphics Refresher ..............................................................................309 N Appendix C: WebGL Spec. Odds and Ends ................................................................315 N Appendix D: Additional Resources ..........................................................................317 N Index........................................................................................................................323 iv Contents About the Author ..........................................................................................................xv About the Technical Reviewer .....................................................................................xvi Acknowledgments ......................................................................................................xvii Introduction ...............................................................................................................xviii N Chapter 1: Setting the Scene .......................................................................................1 A Blank Canvas....................................................................................................................... 1 Getting Context ....................................................................................................................... 2 WebGL Components ............................................................................................................... 4 The Drawing Buffers ...................................................................................................................................... 4 Primitive Types .............................................................................................................................................. 5 Vertex Data .................................................................................................................................................... 6 Rendering in Two Dimensions ................................................................................................ 8 The View: Part I ..................................................................................................................... 16 Clip Coordinates .......................................................................................................................................... 17 Why Manipulate Coordinates? .................................................................................................................... 18 The Viewport ................................................................................................................................................ 18 Adding Color ......................................................................................................................... 20 Animation and Model Movement .......................................................................................... 22 Using requestAnimationFrame .................................................................................................................... 22 The View: Part II .................................................................................................................... 24 Model-View Matrix ...................................................................................................................................... 24 v N CONTENTS Three-Dimensional Rendering .............................................................................................. 26 2D Models in a 3D World ............................................................................................................................. 26 An Example with Depth ............................................................................................................................... 28 Summary .............................................................................................................................. 32 N Chapter 2: Shaders 101 .............................................................................................33
Recommended publications
  • Webgl™ Optimizations for Mobile
    WebGL™ Optimizations for Mobile Lorenzo Dal Col Senior Software Engineer, ARM 1 Agenda 1. Introduction to WebGL™ on mobile . Rendering Pipeline . Locate the bottleneck 2. Performance analysis and debugging tools for WebGL . Generic optimization tips 3. PlayCanvas experience . WebGL Inspector 4. Use case: PlayCanvas Swooop . ARM® DS-5 Streamline . ARM Mali™ Graphics Debugger 5. Q & A 2 Bring the Power of OpenGL® ES to Mobile Browsers What is WebGL™? Why WebGL? . A cross-platform, royalty free web . It brings plug-in free 3D to the web, standard implemented right into the browser. Low-level 3D graphics API . Major browser vendors are members of . Based on OpenGL® ES 2.0 the WebGL Working Group: . A shader based API using GLSL . Apple (Safari® browser) . Mozilla (Firefox® browser) (OpenGL Shading Language) . Google (Chrome™ browser) . Opera (Opera™ browser) . Some concessions made to JavaScript™ (memory management) 3 Introduction to WebGL™ . How does it fit in a web browser? . You use JavaScript™ to control it. Your JavaScript is embedded in HTML5 and uses its Canvas element to draw on. What do you need to start creating graphics? . Obtain WebGLrenderingContext object for a given HTMLCanvasElement. It creates a drawing buffer into which the API calls are rendered. For example: var canvas = document.getElementById('canvas1'); var gl = canvas.getContext('webgl'); canvas.width = newWidth; canvas.height = newHeight; gl.viewport(0, 0, canvas.width, canvas.height); 4 WebGL™ Stack What is happening when a WebGL page is loaded . User enters URL . HTTP stack requests the HTML page Browser . Additional requests will be necessary to get Space User JavaScript™ code and other resources WebKit JavaScript Engine .
    [Show full text]
  • Online Resources for Virtual Learning
    Resources for Online Learning/Teaching ● Khan Academy: great from a anatomy & physiology side of things ​ ○ https://www.khanacademy.org/science/health-and-medicine ○ https://www.khanacademy.org/join/PA5RUCHU - Anatomy & Physiology Class ​ ​ ○ https://www.khanacademy.org/join/799YCDVS - Growth Mindset Class ​ ​ ○ You can sign up for our class with a free account using your google login ○ Explore the resources for anatomy and physiology, growth mindset, and – there are many different things you can refresh yourself with or materials you can explore based on your interests ● Cengage: is free for students right now ​ ○ Cengage: Digital Learning & Online Textbooks ○ If you email our WA & OR Rep Christine Stark, she can probably give you free instructor access for the rest of the school year. She is GREAT and really helped me out!! ○ [email protected] ○ https://www.cengage.com/discipline-health-care/ ○ PT Tech Course - https://login.cengagebrain.com/course/MTPN-V0GP-XPDD ​ ​ ​ ● Anatomy in Clay: has some good stuff ​ ○ FREE RESOURCES | anatomyinclay ● https://www.getbodysmart.com/a-p-resources ○ This has a number of links to sites and sources that are free or that you can pay for ○ Some of my favorites so far: Human Anatomy by McGraw Hill, Anatomy Arcade, Zygotebody ● Flinn Science has some great online resources for At Home Labs, etc ​ ○ https://www.flinnsci.com/athomescience/?utm_campaign=MKT20383%20-%20Mar20-DistanceL earning-President-Email&utm_medium=email&utm_source=Net-Results&utm_content=MKT20383 %20-%20Mar20-DistanceLearning-President-Email# ● Zoom teaching -- great video on how to teach with Zoom or just use Zoom in general. ​ ○ https://www.youtube.com/watch?v=UTXUmoNsgg0&fbclid=IwAR3t9CLPZExRsDUOAyWWsL1uqx tqKjzeNOehYTsjVjYmRwYs8CQgB2qRXXU&disable_polymer=true ● Nearpod: great online tool for teachers to be able to engage their students in a live lesson.
    [Show full text]
  • Framework for Developing Offline HTML5 Applications
    MASARYK UNIVERSITY FACULTY}w¡¢£¤¥¦§¨ OF I !"#$%&'()+,-./012345<yA|NFORMATICS Framework for Developing Offline HTML5 Applications DIPLOMA THESIS Petr Kunc Brno, 2013 Declaration Hereby I declare, that this paper is my original authorial work, which I have worked out by my own. All sources, references and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Advisor: doc. RNDr. Tomás Pitner, PhD. ii Acknowledgement Above all, I would like to thank my advisor doc. RNDr. Tomáš Pitner, PhD. for leading not only this diploma thesis but also for leading me during my studies. I would also like to thank my colleagues in Laboratory of Software Architectures and Information Systems, especially Mgr. Filip Nguyen and Mgr. Daniel Tovarˇnákfor priceless advice on implementation and for providing their knowledge. Nevertheless, I would like to thank my colleagues in Celebrio Software company. iii Abstract The aim of this thesis is to provide detailed information about developing offline web ap- plications. The thesis presents important technologies in the development and mostly deals with Application cache technology. It summarizes advantages and also disadvantages and problems of the technology. Then, it offers solutions to some of the problems and introduces framework for build- ing offline web applications more sophisticatedly. At last, demonstration application is pre- sented which shows the benefits of proposed technology. iv Keywords HTML5, offline, web applications, application
    [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]
  • Web Technologies VU (706.704)
    Web Technologies VU (706.704) Vedran Sabol ISDS, TU Graz Nov 09, 2020 Vedran Sabol (ISDS, TU Graz) Web Technologies Nov 09, 2020 1 / 68 Outline 1 Introduction 2 Drawing in the Browser (SVG, 3D) 3 Audio and Video 4 Javascript APIs 5 JavaScript Changes Vedran Sabol (ISDS, TU Graz) Web Technologies Nov 09, 2020 2 / 68 HTML5 - Part II Web Technologies (706.704) Vedran Sabol ISDS, TU Graz Nov 09, 2020 Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 3 / 68 Drawing in the Browser (SVG, 3D) SVG Scalable Vector Graphics (SVG) Web standard for vector graphics (as opposed to canvas - raster-based) Declarative style (as opposed to canvas rendering - procedural) Developed by W3C (http://www.w3.org/Graphics/SVG/) XML application (SVG DTD) http://www.w3.org/TR/SVG11/svgdtd.html SVG is supported by all current browsers Editors Inkscape and svg-edit (Web App) Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 4 / 68 Drawing in the Browser (SVG, 3D) SVG Features Basic shapes: rectangles, circles, ellipses, path, etc. Painting: filling, stroking, etc. Text Example - simple shapes Grouping of basic shapes Transformation: translation, rotation, scale, skew Example - grouping and transforms Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 5 / 68 Drawing in the Browser (SVG, 3D) SVG Features Colors: true color, transparency, gradients, etc. Clipping, masking Filter effects Interactivity: user events Scripting, i.e. JavaScript, supports DOM Animation: attributes, transforms, colors, motion (along paths) Raster images may be embedded (JPEG,
    [Show full text]
  • A 3D Collaborative Editor Using Webgl and Webrtc
    A 3D collaborative editor using WebGL and WebRTC Caroline Desprat Jean-Pierre Jessel Hervé Luga [email protected] [email protected] [email protected] VORTEX team, IRIT UMR5505, University of Toulouse, France Online collaborative 3D design Objectives Collaborative design environments share 3D scenes • pluginless visualization of 3D scenes on the web, across the network. 3D scenes or models are very • exclusive use of client resources for likely to be constructed and reviewed by more than communication, one person, particularly in the context of 3D sci- • message broadcasting: asynchronous and entific visualization [1], CAD (Computer Aided De- granular, sign) [2] or BIM (Building Information Modeling) • real-time collaboration across the network with [3] solutions with various architectures [4] [5]. shared access to 3D models. Question What architecture is the best suited in online 3D collaborative design environments for small teams using exclusively browser’s ressources? Our hybrid architecture for 3D web-based collaboration Web-based editor P2P communication Client visualization, interaction and edition. WebRTC and DataChannels The 3D interface integrates a viewport and pro- vides: WebRTC (Web Real-Time Protocol) allows Da- P2P connections be- • the list of contributors, taChannel protocol for tween web brow-sers to exchange any raw • basic transformations tools (CRUD), data in real-time[6]. • and viewport informations. WebRTC uses signaling mechanism (via WebSocket server) to manage peers, the network configuration and the media capabilities. Server: RESTful architecture Auto-management of the P2P full mesh network of REST architecture (client/server/NoSQL DB users (designed for small teams). queries) benefits distributed hypermedia systems. PeerJS library bootstraps WebRTC API for compat- ibility reasons.
    [Show full text]
  • 3D Graphics Technologies for Web Applications an Evaluation from the Perspective of a Real World Application
    Institutionen för systemteknik Department of Electrical Engineering Examensarbete 3D Graphics Technologies for Web Applications An Evaluation from the Perspective of a Real World Application Master thesis performed in information coding by Klara Waern´er LiTH-ISY-EX--12/4562--SE Link¨oping 2012-06-19 Department of Electrical Engineering Linköpings tekniska högskola Linköpings universitet Linköpings universitet SE-581 83 Linköping, Sweden 581 83 Linköping 3D Graphics Technologies for Web Applications An Evaluation from the Perspective of a Real World Application Master thesis in information coding at Link¨oping Institute of Technology by Klara Waern´er LiTH-ISY-EX--12/4562--SE Supervisors: Fredrik Bennet SICK IVP AB Jens Ogniewski ISY, Link¨opingUniversity Examiner: Ingemar Ragnemalm ISY, Link¨opingUniversity Link¨oping2012-06-19 Presentation Date Department and Division 2012-05-31 Department of Electrical Engineering Publishing Date (Electronic version) 2012-06-19 Language Type of Publication ISBN (Licentiate thesis) X English Licentiate thesis ISRN: LiTH-ISY-EX--12/4562--SE Other (specify below) X Degree thesis Thesis C-level Title of series (Licentiate thesis) Thesis D-level Report Number of Pages Other (specify below) Series number/ISSN (Licentiate thesis) 90 URL, Electronic Version http://urn.kb.se/resolve?urn=urn:nbn:se:liu:diva-78726 Publication Title 3D Graphics Technologies for Web Applications: An Evaluation from the Perspective of a Real World Application Publication Title (Swedish) Tekniker för 3D-grafik i webbapplikationer: En utvärdering sedd utifrån en riktig applikations perspektiv Author(s) Klara Waernér Abstract Web applications are becoming increasingly sophisticated and functionality that was once exclusive to regular desktop applications can now be found in web applications as well.
    [Show full text]
  • HTML5 and Java Technologies
    HTML5 and Java Technologies Peter Doschkinow Senior Java Architect The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle. Agenda . Motivation . HTML5 Overview – Related Java Technologies . Thin Server Architecture . Demo Motivation . Need for clarification Gartner’s 2012 Emerging Technologies Hype Cycle – What is behind the hype . Architectural consequences of new trends . What does the Java platform offer to meet the new challenges . Building of common understanding Web Technology History . 1991 HTML . 1995 JavaScript @ Netscape . 1994 HTML2 . 1996 ECMAScript 1.0, 1.1 . 1996 CSS1 . 1997 ECMAScript 1.2 . 1997 HTML4 . 1998 ECMAScript 1.3 . 1998 CSS2 . 2000 ECMAScript 3 . 2000 XHTML1 . 2010 ECMAScript 5 . 2002 Tableless Web Design . Next: ECMAScript 6 Harmony . 2005 AJAX . 2009 HTML5: as of Dec 2012 W3C CR HTML5 Features W3C / Web Hypertext Application Technology Working Group(WHATWG) . Markup – Semantic markup replacing common usages of generic <span>, <div> . <nav>, <footer>,<audio>, <video>, ... API – Canvas 2D (for immidate mode 2D drawing),Timed media playback – Offline Web Applications, Local Srorage and Filesystem, Web Storage – Geolocation, Web Storage, IndexedDB – File API, Drag-and-Drop, Browser History – ... HTML5 Features Offloaded to other specs, originally part of HTML5 . WebSocket API, Server-Sent Events(SSE), Web Messaging, Web Workers, Web Storage (Web Apps WG ) .
    [Show full text]
  • Make Your Qt UI Available to Any Browser in 5 Steps
    Make your Qt UI available to any browser in 5 steps Luca Ottaviano, Develer Srl, <[email protected]> Short bio Technical leader at Develer Completed 10+ projects on desktop and embedded Experience with Qt Widgets and Qt Quick Trainer on C++ and Qt stack @Develer Is it a marketing move? Of course it is! The 5 steps 1. Use Qt Remote Objects on the host process to share all needed objects 2. Use Qt Remote Objects on the client process to receive updates from the host. The rest of the code is left untouched 3. Launch the host process with QtQuick UI on the local screen 4. Launch the client process with “-platform webgl:port=<port>” 5. Connect with the browser to “<your-machine-ip>:<webgl-port>” Enjoy your application on two screens! Is it really that simple? What about non QtQuick UIs? What are Qt Remote Objects? How much code do I need to write to support them? What about security? How many users can connect with this setup? Which browsers are supported? Agenda ● Problem statement and use cases ● Remoting options ● Multi user: sharing state between processes ● Final words Problem statement You want to interact with a Qt UI from remote without rewriting significant parts of the application ● Example: headless device ● Example: remote maintenance of an appliance with a local UI ● Example: remote training Need to target the browser, it’s a “no configuration required” option available anywhere! Remoting options 1. VNC 2. WebGL platform plugin 3. Qt for WebAssembly Option 1: VNC ● Start your program with the command line option “-platform vnc” ● Connect with a VNC program to the port ● Enjoy your remote application! Recap Pros: ● Works with any Qt UI ● Requires no extra coding effort Cons: ● Requires additional software on the user machine ● Very sensitive to network latency ● High bandwidth requirements ● Only one user at the time Option 2: WebGL platform plugin ● Start your application with suitable command line options: “-platform webgl:port=8080” ● Connect with the browser to “host:port”, eg.
    [Show full text]
  • Introduction to Webgl Jia Chen Jan 12, 2018 What Is Webgl?
    Introduction to WebGL Jia Chen Jan 12, 2018 What is WebGL? WebGL is a JavaScript API that allows us to implement interactive 3D graphics, straight in the browser. WebGL runs as a specific context for the HTML <canvas> element, which gives you access to hardware-accelerated (GPU) 3D rendering in JavaScript. Run on many different devices, such as desktop computers, mobile phones and TVs. What can WebGL do? Real-time interactive 3D graphics in browser. Interactive music videos, games, data visualization, art, 3D design environments, 3D modeling of space, plotting mathematical functions, physical simulations... Demos: http://helloracer.com/webgl/ http://arodic.github.io/p/jellyfish/ Rendering pipeline Libraries? Provide common functions, ready-made models, shaders Faster development Robust Popular ones: Three.js, PhiloGL, GLGE, J3D In our class, we will directly work on WebGL for learning purpose. You need a text editor Brackets, Sublime Text…. Time to write some HTML We will keep everything in a single HTML file for example HelloTriangle For larger programs, we will separate the HTML and JavaScript, like we are doing in our programming assignment Using WebGL entails writing a bunch of startup code Complexity comes from the flexibility of the API will enable you to do really sophisticated stuff later on Eventually we will use a helper library for the startup code Example code: graphics.ics.uci.edu/CS112/discussion_week1_examples.zip The HTML Adding JavaScript Getting a WebGL Context Creating Vertex Shader Creating Fragment Shader Compiling the Shaders Creating Program Object and Linking Shaders Setting up the Buffers Drawing the Scene Result Can you? Programming Assignment 0 Geometric Primitives in WebGL gl.TRIANGLES gl.TRIANGLE_STRIP https://en.wikipedia.org/wiki/Triangle_strip gl.TRIANGLE_FAN gl.LINES gl.POINTS.
    [Show full text]
  • Optimization of Display-Wall Aware Applications on Cluster Based Systems Ismael Arroyo Campos
    Nom/Logotip de la Universitat on s’ha llegit la tesi Optimization of Display-Wall Aware Applications on Cluster Based Systems Ismael Arroyo Campos http://hdl.handle.net/10803/405579 Optimization of Display-Wall Aware Applications on Cluster Based Systemsí està subjecte a una llicència de Reconeixement 4.0 No adaptada de Creative Commons (c) 2017, Ismael Arroyo Campos DOCTORAL THESIS Optimization of Display-Wall Aware Applications on Cluster Based Systems Ismael Arroyo Campos This thesis is presented to apply to the Doctor degree with an international mention by the University of Lleida Doctorate in Engineering and Information Technology Director Francesc Giné de Sola Concepció Roig Mateu Tutor Concepció Roig Mateu 2017 2 Resum Actualment, els sistemes d'informaci´oi comunicaci´oque treballen amb grans volums de dades requereixen l'´usde plataformes que permetin una representaci´oentenible des del punt de vista de l'usuari. En aquesta tesi s'analitzen les plataformes Cluster Display Wall, usades per a la visualitzaci´ode dades massives, i es treballa concre- tament amb la plataforma Liquid Galaxy, desenvolupada per Google. Mitjan¸cant la plataforma Liquid Galaxy, es realitza un estudi de rendiment d'aplicacions de visu- alitzaci´orepresentatives, identificant els aspectes de rendiment m´esrellevants i els possibles colls d'ampolla. De forma espec´ıfica, s'estudia amb major profunditat un cas representatiu d’aplicaci´ode visualitzaci´o,el Google Earth. El comportament del sistema executant Google Earth s'analitza mitjan¸cant diferents tipus de test amb usuaris reals. Per a aquest fi, es defineix una nova m`etricade rendiment, basada en la ratio de visualitzaci´o,i es valora la usabilitat del sistema mitjan¸cant els atributs tradicionals d'efectivitat, efici`enciai satisfacci´o.Adicionalment, el rendiment del sis- tema es modela anal´ıticament i es prova la precisi´odel model comparant-ho amb resultats reals.
    [Show full text]
  • Webgl and Why You Should Target It
    WebGL and Why You Should Target It Khronos Developer Day, GDC 2018 THREE.js Demos ● The most commonly used WebGL library ● http://demos.littleworkshop.fr/infinitown ● http://www.hellorun.helloenjoy.com/ ● http://www.playmapscube.com/ ● https://stinkmoji.cool/ ● http://devx.ddd.it/en/experiments/ WebGL Fundamentals ● Built-in 3D graphics API in browsers ● Based on industry-standard OpenGL ES APIs ● Implement on one device, runs everywhere ● No installation step – completely frictionless ○ Get lots of eyeballs on your games ● Many options for deployment ○ Web pages ○ PWAs ○ Electron/Cordova ○ Native apps using WebView WebGL Fundamentals (continued) ● High API quality ○ Conformance suite: 2.0.0 contains 340,000 test cases ○ Workarounds for numerous driver bugs ● WebGL 1.0 implements OpenGL ES 2.0 APIs ○ Supported on Firefox, Chrome, Edge, Safari ○ Support rate: 98% [*] ● WebGL 2.0 implements OpenGL ES 3.0 APIs ○ Currently supported on Firefox, Chrome ○ Edge and Safari intend to implement it ○ Support rate: 41% [*] and increasing [*] Data from https://webglstats.com/ WebGL 2.0 Features 3D textures Compressed textures Texture storage Seamless cubemaps NPOT textures Float textures Integer textures sRGB textures Instanced rendering Transform feedback Multiple render targets Query objects Sync objects Sampler objects Uniform blocks Vertex array objects Integer vertex attributes GLSL ES 3.0 shaders WebGL + glTF ● glTF: a royalty-free specification for the efficient transmission and loading of 3D scenes and models by applications ○ https://www.khronos.org/gltf/ ● WebGL + glTF: streamlines authoring workflows and enables interoperable use of content across the industry ● Two of the major WebGL libs, Three.js and Babylon.js (among others) support glTF 2.0 WebGL + WebAssembly + Emscripten 1.
    [Show full text]