Introduction to Webgl Jia Chen Jan 12, 2018 What Is Webgl?

Total Page：16

File Type：pdf, Size：1020Kb

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.

Copy Link

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]
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: ﬁlling, 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 eﬀects 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ér LiTH-ISY-EX--12/4562--SE Linköping 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öping Institute of Technology by Klara Waernér LiTH-ISY-EX--12/4562--SE Supervisors: Fredrik Bennet SICK IVP AB Jens Ogniewski ISY, LinköpingUniversity Examiner: Ingemar Ragnemalm ISY, LinköpingUniversity Linköping2012-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]
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]
Javascript and Webgl CS425: Computer Graphics I
JavaScript and WebGL CS425: Computer Graphics I Fabio Miranda https://fmiranda.me Fabio Miranda | CS425: Computer Graphics I Overview • Web technologies • Web environment • JavaScript • WebGL Fabio Miranda | CS425: Computer Graphics I 2 Web technologies Fabio Miranda | CS425: Computer Graphics I 3 Web technologies • JavaScript: manage user interaction with the structure and presentation. • CSS: manage presentation • HTML5: mark-up language to structure the content of web pages. Fabio Miranda | CS425: Computer Graphics I 4 HTML: First example <!DOCTYPE html> Elements: <html lang="en"> <head> <element> <meta charset="UTF-8"> </element> <title>First example</title> </head> <body> Examples: html, head, body Content here </body> </html> Fabio Miranda | CS425: Computer Graphics I 5 HTML: First example <!DOCTYPE html> Attributes: <html lang="en"> <head> <… attribute=“”> <meta charset="UTF-8"> <title>First example</title> Examples: </head> <body> lang, charset, id Content here </body> </html> Fabio Miranda | CS425: Computer Graphics I 6 HTML: First example <!DOCTYPE html> html <html lang="en"> <head> <meta charset="UTF-8"> <title>First example</title> </head> head body <body> Content here </body> </html> meta title Fabio Miranda | CS425: Computer Graphics I 7 HTML: Elements and attributes Main root: <html> Metadata: <base>, <head>, <link>, <meta>, <style>, <title> Root: <body> Content sectioning: <address>, <main>, …, <head> Text content: <div>, <figure>, <hr>, <li> Image and multimedia: <audio>, <img>, …, <video> Scripting: <canvas>, <script> … Fabio Miranda | CS425: Computer Graphics I 8 Cascading Style Sheets (CSS) body { Selectors: margin: 10px; font-size: 20px; selector { } … } Examples: body, #first, .special Fabio Miranda | CS425: Computer Graphics I 9 Cascading Style Sheets (CSS) Different selectors h1, h2 { div > p { div[attr] { ... ... ... } } } .classe p { #id1 ~ #id2 { div[attr=“val”] { ..
[Show full text]
Enabling the Immersive 3D Web with COLLADA & Webgl Introduction
Enabling the Immersive 3D Web with COLLADA & WebGL Rita Turkowski – June 30, 2010 Introduction The web is built on standard document formats (HTML, XML, CSS) and standard communication protocols (HTTP, TCP/IP), gaining momentum by the principle and power of the hyperlink (URL / URI)(1). Browsers and servers implementing those standards have revolutionized publishing and searching. Not only can documents be linked by other documents, but since the data is provided in a standard open language it also provides the ability to link to specific content inside a document, enabling the rich navigation and search functionalities that we take for granted today. Two standard technologies developed by the Khronos Group(2), WebGL and COLLADA, are opening the way for enhancing the web experience into the third dimension (3D) of imaging. Thanks to this work, 3D applications can now take advantage of the fundamentals of the web while natively exploiting 3D graphics hardware acceleration. This white paper describes both Khronos standards at an abstract level and the evolution of an ecosystem that will enable immersive 3D Web applications to evolve from currently disparate implementations (i.e. “walled gardens” or “silos”) to become standard web publishing accessible natively in a web browser. What is WebGL? WebGL(3) is a low-level JavaScript API enabling web applications to take advantage of 3D graphics hardware acceleration in a standard way. Currently the only way to provide interactive display of appreciable quality 3D content in a web browser is to create a separate application loaded as a plug-in. Plug-ins are problematic as they require end-user installation which is not transparent, placing a burden on the end-user, and are frequently forbidden by companies security guidelines, impeding the general adoption of 3D content.
[Show full text]
Introduction to Webgl Programming.Pptx
SIGGRAPH 2013 An Introduction to OpenGL Programming 1 SIGGRAPH 2013 An Introduction to OpenGL Programming 2 SIGGRAPH 2013 An Introduction to OpenGL Programming We’ll present four examples: 1. A minimum but complete WebGL program that renders a single triangle 2. A rotating cube with interactive buttons to control direction of rotation and also to toggle rotation on and off 3. A cube with lighting implemented in the shaders 4. A cube with texture mapping 3 SIGGRAPH 2013 An Introduction to OpenGL Programming OpenGL is a library of function calls for doing computer graphics. With it, you can create interactive applications that render high-quality color images composed of 2D and 3D geometric objects and images. Additionally, the OpenGL API is independent of all operating systems, and their associated windowing systems. That means that the part of your application that draws can be platform independent. However, in order for OpenGL to be able to render, it needs a window to draw into. Generally, this is controlled by the windowing system on whatever platform you are working on. 4 SIGGRAPH 2013 An Introduction to OpenGL Programming OpenGL ES is a smaller version of OpenGL that was designed for embedded systems which did have the hardware capability to run desktop OpenGL. OpenGL ES 2.0 is based on desktop OpenGL 3.1 and thus is shader based. Each application must provide both a vertex shader and a fragment shader. Functions from the fixed function pipeline that were in ES 1.0 have been deprecated. OpenGL ES has become the standard API for developing 3D cell phone applications.
[Show full text]