Webgl Working Group Updates
Total Page:16
File Type:pdf, Size:1020Kb
Load more
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 . -
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 -
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. -
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, -
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. -
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. -
Progressive Rendering of Massive Point Clouds in Webgl 2.0 Compute
Progressive Rendering of Massive Point Clouds in WebGL 2.0 Compute BACHELORARBEIT zur Erlangung des akademischen Grades Bachelor of Science im Rahmen des Studiums Software & Information Engineering eingereicht von Wolfgang Rumpler Matrikelnummer 01526299 an der Fakultät für Informatik der Technischen Universität Wien Betreuung: Associate Prof. Dipl.-Ing. Dipl.-Ing. Dr.techn. Michael Wimmer Mitwirkung: Dipl.-Ing. Markus Schütz Wien, 10. Oktober 2019 Wolfgang Rumpler Michael Wimmer Technische Universität Wien A-1040 Wien Karlsplatz 13 Tel. +43-1-58801-0 www.tuwien.ac.at Progressive Rendering of Massive Point Clouds in WebGL 2.0 Compute BACHELOR’S THESIS submitted in partial fulfillment of the requirements for the degree of Bachelor of Science in Software & Information Engineering by Wolfgang Rumpler Registration Number 01526299 to the Faculty of Informatics at the TU Wien Advisor: Associate Prof. Dipl.-Ing. Dipl.-Ing. Dr.techn. Michael Wimmer Assistance: Dipl.-Ing. Markus Schütz Vienna, 10th October, 2019 Wolfgang Rumpler Michael Wimmer Technische Universität Wien A-1040 Wien Karlsplatz 13 Tel. +43-1-58801-0 www.tuwien.ac.at Erklärung zur Verfassung der Arbeit Wolfgang Rumpler Hiermit erkläre ich, dass ich diese Arbeit selbständig verfasst habe, dass ich die verwen- deten Quellen und Hilfsmittel vollständig angegeben habe und dass ich die Stellen der Arbeit – einschließlich Tabellen, Karten und Abbildungen –, die anderen Werken oder dem Internet im Wortlaut oder dem Sinn nach entnommen sind, auf jeden Fall unter Angabe der Quelle als Entlehnung kenntlich gemacht habe. Wien, 10. Oktober 2019 Wolfgang Rumpler v Danksagung An dieser Stelle möchte ich allen Personen danken die mich bei dem Abschluss dieses Studienabschnitts unterstützt haben. -
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 ) . -
Portable Opengl (ES) Jamie Madill / July 31, 2019
ANGLE Portable OpenGL (ES) Jamie Madill / July 31, 2019 ANGLE is an OpenGL driver that.. ● Translates OpenGL to native commands on multiple major OSes. ● Gives portable OpenGLby working around driver bugs. ANGLE has billions of users! ● Several popular browsers use ANGLE for Code is like a layer cake. Application Entry Points GL Validation GL Context ANGLE Front-End (State Tracking) GL Back-End Vk Back-End D3D Back-End Validation Vulkan LVL Debug Runtime Driver GL Driver Vulkan Driver D3D Driver Slicing the layers angle::Result Buffer::bufferData(Context *context, BufferBinding target, const void *data, Entry Points GLsizeiptr size, BufferUsage usage) { GL Validation GL Context ANGLE_TRY(mImpl->setData(context, target, data, size, usage)); Front-End (State Tracking) mIndexRangeCache.clear(); mState.mUsage = usage; mState.mSize = size; GL Back-End Vk Back-End D3D Back-End onStateChange(angle::SubjectMessage::SubjectChanged); return angle::Result::Continue; } Slicing the layers angle::Result BufferVk::setData(const gl::Context *context, gl::BufferBinding target, Entry Points const void *data, size_t size, gl::BufferUsage usage) GL Validation GL Context { ContextVk *contextVk = vk::GetImpl(context); Front-End (State Tracking) if (size > static_cast<size_t>(mState.getSize())) { // Release and re-create the memory and buffer. GL Back-End Vk Back-End D3D Back-End release(contextVk); VkBufferCreateInfo createInfo = { /* ... */ }; ANGLE_TRY(mBuffer.init(contextVk, createInfo, kMemoryPropertyFlags)); } if (data && size > 0) { ANGLE_TRY(setDataImpl(contextVk, data, size, 0)); } return angle::Result::Continue; } What’s next: Android ○ Vendors must supportlegacy GL drivers. ○ They also must support theVulkan API. Vendor “A” Vendor “B” Vendor “C” Vendor “D” What’s next: Android ○ Focus on high quality Vulkan drivers with GL emulation. -
Stronger NYC Communities Organizational Digital Security Guide
Stronger NYC Communities Organizational Digital Security Guide For Trainers and Participants Build Power - not Paranoia! NYC Stronger Communities | Toolkit 1 Creative Commons Attribution-ShareAlike 4.0 International, July 2018 This work supported by Mozilla Foundation, the NYC Mayor’s Office of Immigrant Affairs, NYC Mayor’s Office of the CTO, and Research Action Design. CREDITS Project designed and lead by Sarah Aoun and Bex Hong Hurwitz. Curriculum lead writing by Rory Allen. Workshops, activities, and worksheets were developed by Nasma Ahmed, Rory Allen, Sarah Aoun, Rebecca Chowdhury, Hadassah Damien, Harlo Holmes, Bex Hong Hurwitz, David Huerta, Palika Makam (WITNESS), Kyla Massey, Sonya Reynolds, and Xtian Rodriguez. This Guide was arranged and edited by Hadassah Damien, and designed by Fridah Oyaro, Summer 2018. More at: https://strongercommunities.info NYC Stronger Communities | Toolkit 2 Table of Contents ORGANIZATIONAL DIGITAL SECURITY GUIDE This guide provides tools and ideas to help organizational digital security workshop leaders approach the work including a full facilitator’s guide with agendas and activities; for learners find a participant guide with homework, exercises, and a resource section. 01 03 INTRODUCTION ............................................ 4 PARTICIPANT WORKBOOK ........................................ 110 • Organizational Digital Security Right Now Introduction to the Stronger Communities • Roadmap Workshop series Self-assessment: Digital • Workshop Overview Security Bingo • Series Story • How to coordinate and plan a Stronger Workshop Participant Guides Communities workshop series • Design and facilitation tools 1. Stronger NYC Communities Workshop: • Evaluate and assess Our work is political. • Handout and activity glossary 2. Stronger Communities Workshop: Our work is both individual and collective. 3. Stronger Communities Workshop: Our 02 work is about learning from and taking care of each other. -
Inclusive XR Roadmap Possible Next Steps
Inclusive XR Roadmap Possible next steps ● Research ○ Where? Industry? Acadameia? EU project? RQTF? ● Prototyping & experimentation ○ Collaboration / open source opportunities ● (Pre-) standardization PRIORITIES? Immersive Web Architecture Hooks Immersive Web Application (Best Practices) Engine / Framework (Best Practices, prototypes, patches) Web browser (APIs, Best Practices) XR Platform Operating System Towards standardizing solutions in W3C ● W3C standardizes technologies through its Recommendation process ● Working Groups are responsible for standardization - for W3C Member organizations and Invited Experts ● Before starting standardization efforts, the preference is to incubate the ideas ● W3C has an incubation program open for free to any one - Community Groups Existing Standardization Landscape (W3C) ● Immersive Web Working Group ○ WebXR: Core, Gamepad, Augmented Reality modules ● ARIA Working Group ○ ARIA ● Accessible Platforms Architecture Working Group ○ RQTF ○ XR Accessibility User Requirements (Note) ○ Personalization Task Force ● Timed Text Working Group ○ TTML, IMSC ○ WebVTT ● Audio Working Group ○ Web Audio API ● Accessibility Guidelines Working Group ○ WCAG 2.x, Silver Existing Incubation Landscape (W3C) ● Immersive Web Community Group ○ Potential host for any new proposals related to Immersive Web ○ Ongoing discussion on Define and query properties of "things" #54 ● Immersive Captions Community Group ○ best practices for captions in Immersive Media ● Web Platform Incubator Community Group (WICG) ○ Accessibility Object -
Getting Started with Opengl ES 3+ Programming
Getting Started with OpenGL ES 3+ Programming Learn Modern OpenGL Basics Hans de Ruiter Getting Started with OpenGL ES 3+ Programming Hans de Ruiter Version 1.1 – 5 April 2017 Copyright © 2017 by Kea Sigma Delta Limited, all rights reserved. Distribute the Link, Not the Book It takes a lot of time and effort to produce resources like this, and we think it’s great when people find it useful and want to share. However, please share the following link instead of distributing (illegal) copies. That way they get a legitimate copy and we’re able to continue producing quality content: https://keasigmadelta.com/gles3-sdl2-tutorial We’ve done everything we can to make the contents of this book as accurate as possible. However, due to the complex nature of the topics and possible human error, we cannot guarantee absolute accuracy. Also, continual research and development means that things are ever changing. No liability is assumed for losses or damages due to the information provided. You are responsible for your own choices, actions, and results. 2 Table of Contents Introduction..............................................................................................................................................5 Who is this For?...................................................................................................................................5 Why OpenGL ES 3+ and SDL2?........................................................................................................5 How to Get the Most Out of These Tutorials......................................................................................6