Introduction to OpenGL/GLSL and WebGL GLSL
|
|
- Justin Douglas
- 6 years ago
- Views:
Transcription
1 Introduction to OpenGL/GLSL and WebGL GLSL
2 Objectives! Give you an overview of the software that you will be using this semester! OpenGL, WebGL, and GLSL! What are they?! How do you use them?! What does the code look like?! Evolution! All of them are required to write modern graphics code, although alternatives exist
3 What is OpenGL?! An application programming interface (API)! A (low-level) Graphics rendering API! Generate high-quality images from geometric and image primitives
4 Maximal Portability! Display device independent! Window system independent! Operating system independent Without a standard API (such as OpenGL) - impossible to port (100, 50) Line(100,50,150,80) - device/lib 1 (150, 100) Moveto(100,50) - device/lib 2 Lineto(150,100)
5 Brief History of OpenGL! Originated from a proprietary API called Iris GL from Silicon Graphics, Inc.! Provide access to graphics hardware capabilities at the lowest possible level that still provides hardware independence! The evolution is controlled by OpenGL Architecture Review Board, or ARB.! OpenGL 1.0 API finalized in 1992, first implementation in 1993! In 2006, OpenGL ARB became a workgroup of the Khronos Group! 10+ revisions since 1992
6 OpenGL Evolution! 1.1 (1997): vertex arrays and texture objects! 1.2 (1998): 3D textures! 1.3 (2001): cubemap textures, compressed textures, multitextures! 1.4 (2002): mipmap generation, shadow map textures, etc! 1.5 (2003): vertex buffer object, shadow comparison functions, occlusion queries, nonpower-of-2 textures
7 OpenGL Evolution! 2.0 (2004): vertex and fragment shading (GLSL 1.1), multiple render targets, etc! 2.1 (2006): GLSL 1.2, pixel buffer objects, etc! 3.0 (2008): GLSL 1.3, deprecation model, etc! 3.1 (2009): GLSL 1.4, texture buffer objects, move much of deprecated functions to ARB compatible extension! 3.2 (2009)! 4.X (2012 and on)
8 OpenGL Basics! OpenGL s primary function Rendering! Rendering? converting geometric/mathematical object descriptions into frame buffer values! OpenGL can render:! Geometric primitives! Bitmaps and Images (Raster primitives)
9 OpenGL Example Cube with flat color Cube with lighting Cube with textures
10 WebGL! JavaScript implementation of OpenGL! Run in all modern browsers (Chrome, Safari, Firefox, IE, etc).! Application can be located on a remote server! Rendering is done within browser using local hardware! Uses HTML5 canvas! Integrated with standard Web packages and apps (CSS, jquery, etc.)
11 What do you need to know! Web Environment and Execution! Modern OpenGL basics! Pipeline architecture! Shaders (vertex and fragment) based OpenGL! OpenGL Shading Language (GLSL)! Javascript
12 OpenGL ES and WebGL! OpenGL ES! A subset of OpenGL 3.1 API (lightweight)! Designed for embedded system (mobile phones etc.)! Shader based! WebGL! Javascript implementation of ES 2.0! Runs on browswers
13 WebGL Rendering Pipeline
14 WebGL Programming! General Structure:! Set up canvas to render to! Generate data/geometry in application! Create shader programs! Create buffer objects and load data to them! Connect buffer objects and data to shader variables! Set up proper viewing and lighting conditions! Render
15 WebGL Programming! WebGL needs a place to render into! HTML5 canvas element! All the code can be put in a single HTML file! Or you can put setup code in an HTML file and your application code in separate Javascript files! HTML file includes shaders! HTML file reads in application and utilities
16 Example 0! A very simple example that creates a canvas but display nothing except a yellow background WebGL Javascript canvas <!DOCTYPE html> <html> <head> <title>hwshen WebGL code00 </title> <meta http-equiv="content-type" content="text/html; charset=iso "> <script type="text/javascript" src="code00.js"></script> </head> <body onload="webglstart(); > <canvas id="code00-canvas" style="border: none;" width="700" height="500"></ canvas> <br/> </body> </html>
17 code00.js var gl; function initgl(canvas) { try { gl = canvas.getcontext("experimental-webgl"); gl.viewportwidth = canvas.width; gl.viewportheight = canvas.height; catch (e) { if (!gl) { alert("could not initialise WebGL, sorry :-("); function webglstart() { var canvas = document.getelementbyid("code00- canvas"); initgl(canvas); gl.clearcolor(1.0, 1.0, 0.0, 1.0); // yellow drawscene(); viewport function drawscene() { gl.viewport(0, 0, gl.viewportwidth, gl.viewportheight); gl.clear(gl.color_buffer_bit gl.depth_buffer_bit);
18 Simple OpenGL commands! HTML will call webglstart();! canvas is an HTML5 element for drawing! You need a OpenGL context from the canvas for storing internal states! canvas.getcontext();! All OpenGL commands in WebGL start with gl.! gl.viewport(); specify the display area! gl.clearcolor(); specify the background color! gl.clear(); clear the foreground and background
19 Output
20 Example 1! Now let s draw something (two triangles) on the canvas! You will need to provide vertex and fragment shaders
21 code01.html Fragment Shader Vertex Shader <!DOCTYPE html> <html> <head> <title>hwshen WebGL code01 </title> <meta http-equiv="content-type" content="text/html; charset=iso "> <!-- ************** Fragment Shader ************* --> <script id="shader-fs" type="x-shader/x-fragment"> void main(void) { gl_fragcolor = vec4(1.0, 0, 0, 1.0); </script> <!-- ************** Vertex Shader ************* --> <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 avertexposition; void main(void) { gl_position = vec4(avertexposition, 1.0); </script>
22 code01.html (cont d) <script type="text/javascript" src="shaders_setup.js"></script> <script type="text/javascript" src="code01.js"></script> </head> <body onload="webglstart(); > <canvas id="code00-canvas" style="border: none;" width="700" height="500"></ canvas> <br/> </body> </html>
23 code01.js var gl; function initgl(canvas) { // same as before. function initshaderers() { // setup shaders // load the source, compile and link the code // in shaders_setup.js function initbuffers() { // set up vertex buffer objects for geometry // I will explain next function drawscene() function webglstart() { var canvas = document.getelementbyid("code00- canvas"); initgl(canvas); initshaders(); initbuffers(); gl.clearcolor(1.0, 1.0, 0.0, 1.0); // yellow drawscene(); gl.viewport(0, 0, gl.viewportwidth, gl.viewportheight); gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); gl.bindbuffer(gl.array_buffer, squarevertexpositionbuffer); gl.vertexattribpointer(shaderprogram.vertexpositionattribute, squarevertexpositionbuffer.itemsize, gl.float, false, 0, 0); gl.drawarrays(gl.triangle_strip, 0, squarevertexpositionbuffer.numitems);
24 Output
25 code01.js! In order to fully understand code01.js, we need to explain! Vertex Buffer Objects this is how you define your geometry! Shader setup and simple GLSL concepts! How to draw the scene! Below I will start with Shaders setup and then Vertex Buffer Objects (VBO)
26 OpenGL Shading Language (GLSL)! A C-like language and incorporated into OpenGL 2.0 and on! Used to write vertex program and fragment program! No distinction in the syntax between a vertex program and a fragment program! Platform independent
27 Setup of Shader Prgorams! A shader is defined as an array of strings! Steps to set up shaders 1. Create a shader program 2. Create shader objects (vertex and fragment) 3. Send source code to the shader objects 4. Compile the shader 1. Create program object by linking compiled shaders together 2. Use the linked program object
28 shaders_setup.js function initshaders() { shaderprogram = gl.createprogram(); // create a shader program var fragmentshader = getshader(gl, "shader-fs"); // create and compile a vertex shader object var vertexshader = getshader(gl, "shader-vs"); // create and compile a fragment shader object gl.attachshader(shaderprogram, vertexshader); // attach the vertex shader to the shader program gl.attachshader(shaderprogram, fragmentshader); // attach the fragment shader gl.linkprogram(shaderprogram); // link the vertex and fragment shaders if (!gl.getprogramparameter(shaderprogram, gl.link_status)) { alert("could not initialise shaders"); gl.useprogram(shaderprogram); // use the shader program
29 shaders_setup.js function getshader(gl, id) { var shaderscript = document.getelementbyid(id); if (!shaderscript) { return null; var str = ""; var k = shaderscript.firstchild; while (k) { if (k.nodetype == 3) { str += k.textcontent; k = k.nextsibling; var shader; if (shaderscript.type == "x-shader/x-fragment") { shader = gl.createshader(gl.fragment_shader); else if (shaderscript.type == "x-shader/x-vertex") { shader = gl.createshader(gl.vertex_shader); else { return null; gl.shadersource(shader, str); gl.compileshader(shader); if (!gl.getshaderparameter(shader, gl.compile_status)) { alert(gl.getshaderinfolog(shader)); return null; return shader;
30 Vertex Buffer Objects! Provide per-vertex input to the GPU! Vertex: a point where the edges of geometry meet! All geometric primitives are composed of vertices, their attributes, and the connectivity! Allow significant increases in vertex throughput between CPU and GPU! The mechanism to provide generic attributes to the shader, and store vertex data in video memory! User s program is free to define an arbitrary set of pervertex attributes to the vertex shader
31 Create a VBO! Step 1: generate a new buffer object with gl.createbuffer()! This function returns an identifier for the buffer object! Step 2: Bind the buffer with a particular buffer type with gl.bindbuffer()! Specify the target (i.e. what kind of buffer) to which the buffer object is bound! Choice: gl.array_buffer, gl.elementary_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer! gl.array_buffer is to provide vertex attributes, and! gl.elementary_buffer is to provide triangle indices! Step 3: Copy the vertex data to the buffer object! gl.bufferdata(target, data, usage)! Usage is the access pattern: gl.static_, gl.stream_, gl.dynamic_{draw, COPY, READ
32 code01.js function initbuffers() { squarevertexpositionbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, squarevertexpositionbuffer); vertices = [ 0.5, 0.5, 0.0, -0.5, 0.5, 0.0, 0.5, -0.5, 0.0, -0.5, -0.5, 0.0 ]; gl.bufferdata(gl.array_buffer, new Float32Array(vertices), gl.static_draw); squarevertexpositionbuffer.itemsize = 3; squarevertexpositionbuffer.numitems = 4; 3 numbers (x,y,z) per vertex 4 vertices total The data are now sent to GPU I will talk about how to draw the buffer in a moment, but let me first talk about setting up shaders
33 code01.js (cont d) Use VBO for drawing: 1. Make the vbo created earlier as active - gl.bindbuffer() 2. Connect the buffer to an vertex attribute in the shader (explained next) 3. Draw the vertex array gldrawarrays(type, offset, numbers of vertices) function drawscene() { gl.viewport(0, 0, gl.viewportwidth, gl.viewportheight); gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); gl.bindbuffer(gl.array_buffer, squarevertexpositionbuffer); gl.vertexattribpointer(shaderprogram.vertexpositionattribute, squarevertexpositionbuffer.itemsize, gl.float, false, 0, 0); gl.drawarrays(gl.triangle_strip, 0, squarevertexpositionbuffer.numitems);
34 code01.js (cont d) Use VBO for drawing: 1. Make the vbo created earlier as active - gl.bindbuffer() 2. Connect the buffer to an vertex attribute in the shader (explained next) 3. Draw the vertex array gldrawarrays(type, offset, numbers of vertices) function drawscene() { gl.viewport(0, 0, gl.viewportwidth, gl.viewportheight); gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); gl.bindbuffer(gl.array_buffer, squarevertexpositionbuffer); gl.vertexattribpointer(shaderprogram.vertexpositionattribute, squarevertexpositionbuffer.itemsize, gl.float, false, 0, 0); gl.drawarrays(gl.triangle_strip, 0, squarevertexpositionbuffer.numitems);
35 code01.js (cont d) Use VBO for drawing: 1. Make the vbo created earlier as active - gl.bindbuffer() 2. Connect the buffer to an vertex attribute in the shader 3. Draw the vertex array gldrawarrays(type, offset, numbers of vertices) Location of the vertex attribute in the shader function drawscene() { gl.viewport(0, 0, gl.viewportwidth, gl.viewportheight); gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); gl.bindbuffer(gl.array_buffer, squarevertexpositionbuffer); gl.vertexattribpointer(shaderprogram.vertexpositionattribute, squarevertexpositionbuffer.itemsize, gl.float, false, 0, 0); gl.drawarrays(gl.triangle_strip, 0, squarevertexpositionbuffer.numitems);
36 code01.js (cont d) What is Location of Vertex Attribute in the shader and how to get it? This is the attribute variable in the shader where the vertex position buffer object is connected to code01.js Vertex shader in HTML attribute vec3 avertexposition; void main(void) { gl_position = vec4(avertexposition, 1.0); Query the location of the variable
37 code01.js (cont d) Now Connect the buffer to an vertex attribute in the shader code01.js function drawscene() { gl.viewport(0, 0, gl.viewportwidth, gl.viewportheight); gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); gl.bindbuffer(gl.array_buffer, squarevertexpositionbuffer); gl.vertexattribpointer(shaderprogram.vertexpositionattribute, squarevertexpositionbuffer.itemsize, gl.float, false, 0, 0); gl.drawarrays(gl.triangle_strip, 0, squarevertexpositionbuffer.numitems);
38 code02.js! How to add more than one vertex attributes?! You can add as many vertex attributes as you want! code02.html attribute vec3 avertexposition; attribute vec4 avertexcolor; varying vec4 vcolor; How to pass vertex color? void main(void) { gl_position = vec4(avertexposition, 1.0); vcolor = avertexcolor;
39 ! Query the locations of both avertexposition and averetxcolor code02.js code02.js shaderprogram.vertexpositionattribute = gl.getattriblocation(shaderprogram, "avertexposition"); gl.enablevertexattribarray(shaderprogram.vertexpositionattribute); shaderprogram.vertexcolorattribute = gl.getattriblocation(shaderprogram, "avertexcolor"); gl.enablevertexattribarray(shaderprogram.vertexcolorattribute);! Create another VBO for color (next page)
40 code02.js! Create a color VBO code02.js squarevertexcolorbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, squarevertexcolorbuffer); var colors = [ 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 1.0, 0.0, 0.0, 1.0, ]; gl.bufferdata(gl.array_buffer, new Float32Array(colors), gl.static_draw); squarevertexcolorbuffer.itemsize = 4; // RGBA four components squarevertexcolorbuffer.numitems = 4; // four colors Again, note these two are not part of VBO. Just record it down For later use in drawscene()
41 code02.js! Now draw with both position and color VBOs code02.js function drawscene() { gl.viewport(0, 0, gl.viewportwidth, gl.viewportheight); gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); gl.bindbuffer(gl.array_buffer, squarevertexpositionbuffer); gl.vertexattribpointer(shaderprogram.vertexpositionattribute, squarevertexpositionbuffer.itemsize, gl.float, false, 0, 0); gl.bindbuffer(gl.array_buffer, squarevertexcolorbuffer); gl.vertexattribpointer(shaderprogram.vertexcolorattribute, squarevertexcolorbuffer.itemsize, gl.float, false, 0, 0); gl.drawarrays(gl.triangle_strip, 0, squarevertexpositionbuffer.numitems);
42 WebGL Geometric Primitives POINTS, LINES, TRIANGLES
43 WebGL Geometric Primitives TRIANGLES v1 T1 v2 v3 T2 T3 v4 v5 Var vertices = [ v1.x, v1.y, v1.z, v2.x, v2.y, v2.z, v3.x, v3.y, v3.z, v2.x, v2.y, v2.z, v3.x, v3.y, v3.z, v4.x, v4.y, v4.z, v3.x, v3.y, v3.z, v4.x, v4.y, v4.z, v5.x, v5.y, v5.z ]; More Compact T1 T2 T3 TRIANGLE FAN Var vertices = [ v3.x, v3.y, v3.z, v1.x, v1.y, v1.z, v2.x, v2.y, v2.z, v4.x, v4.y, v4.z, v5.x, v5.y, v5.z ]; TRIANGLE STRIP Var vertices = [ v1.x, v1.y, v1.z, v2.x, v2.y, v2.z, v3.x, v3.y, v3.z, v4.x, v4.y, v4.z, v5.x, v5.y, v5.z ];
44 Indexed Triangles! A more general way to represent a triangle set! Store vertex positions and their connectivity separately v2 v4 T2 v1 T1 T3 v3 var vertices = [ v1.x, v1.y, v1.z, v2.x, v2.y, v2.z, v3.x, v3.y, v3.z, v4.x, v4.y, v4.z, v5.x, v5.y, v5.z ]; var indices = [ 0, 1, 2, 1, 3, 2, 2, 3, 4 ] T1 T2 T3 v5! How to represent this way using VBO?
45 Element Array for Triangle Indices! A more general way to represent a triangle set // create an Array Buffer for the vertex positions as before // now create an element array buffer for the indices var indices = [0,1,2,1,3,2,2,3,4]; VertexIndexBuffer = gl.createbuffer(); gl.bindbuffer(gl.element_array_buffer, VertexIndexBuffer); gl.bufferdata(gl.element_array_buffer, new Uint16Array(indices), gl.static_draw); VertexIndexBuffer.itemsize = 1; VertexIndexBuffer.numItems = 9; // 9 index numbers in the buffer, used later
46 Element Array for Triangle Indices (cont d)! Now draw the triangles. gl.bindbuffer(gl.array_buffer, VertexPositionBuffer); gl.vertexattribpointer(shaderprogram.vertexpositionattribute, VertexPositionBuffer.itemSize, gl.float, false, 0, 0); gl.bindbuffer(gl.array_buffer, VertexColorBuffer); gl.vertexattribpointer(shaderprogram.colorattribute, VertexColorBuffer.itemSize, gl.float, false, 0, 0); // draw elementary arrays - triangle indices gl.bindbuffer(gl.element_array_buffer, VertexIndexBuffer); gl.drawelements(gl.triangles, VertexIndexBuffer.numItems, gl.unsigned_short, 0); Offset, meaning you can draw a partial set if you want
WebGL: Hands On. DevCon5 NYC Kenneth Russell Software Engineer, Google, Inc. Chair, WebGL Working Group
WebGL: Hands On DevCon5 NYC 2011 Kenneth Russell Software Engineer, Google, Inc. Chair, WebGL Working Group Today's Agenda Introduce WebGL and its programming model. Show code for a complete example. Demonstrate
More informationWeb-Based Visualization
Web-Based Visualization Web-Based Visualization 11-1 Motivation Nowadays, web browser become more and more capable of displaying graphical content. Different packages are available for creating such content,
More informationComp4422. Computer Graphics. Lab 02: WebGL API Prof. George Baciu. PQ838 x7272.
Comp4422 Computer Graphics Lab 02: WebGL API www.comp.polyu.edu.hk/~csgeorge/comp4422 Prof. George Baciu csgeorge@comp.polyu.edu.hk PQ838 x7272 9/6/2018 COMP4422 Lab 02 George Baciu 2018 1 WebGL Prerequisites
More informationWebGL Game Development
WebGL Game Development Sumeet Arora Chapter No. 1 "Getting Started with WebGL Game Development" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter
More informationIntroduction to Computer Graphics. April 6, 2017 Kenshi Takayama
Introduction to Computer Graphics April 6, 2017 Kenshi Takayama Lecturers Kenshi Takayama (Assistant Prof., NII) http://research.nii.ac.jp/~takayama/ takayama@nii.ac.jp Toshiya Hachisuka (Junior Associate
More informationProgramming with OpenGL Complete Programs Objectives Build a complete first program
Programming with OpenGL Complete Programs Objectives Build a complete first program Introduce shaders Introduce a standard program structure Simple viewing Two-dimensional viewing as a special case of
More informationCS452/552; EE465/505. Image Formation
CS452/552; EE465/505 Image Formation 1-15-15 Outline! Image Formation! Introduction to WebGL, continued Draw a colored triangle using WebGL Read: Angel, Chapters 2 & 3 Homework #1 will be available on
More informationWebGL A quick introduction. J. Madeira V. 0.2 September 2017
WebGL A quick introduction J. Madeira V. 0.2 September 2017 1 Interactive Computer Graphics Graphics library / package is intermediary between application and display hardware Application program maps
More informationLecture 11 Shaders and WebGL. October 8, 2015
Lecture 11 Shaders and WebGL October 8, 2015 Review Graphics Pipeline (all the machinery) Program Vertex and Fragment Shaders WebGL to set things up Key Shader Concepts Fragment Processing and Vertex
More informationModels and Architectures. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
Models and Architectures 1 Objectives Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for an interactive graphics system 2 Image Formation Revisited
More informationObjectives. Programming with WebGL Part 1: Background. Retained vs. Immediate Mode Graphics. Early History of APIs. PHIGS and X.
Objectives Programming with WebGL Part 1: Background CS 432 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science Development of the OpenGL API OpenGL Architecture - OpenGL
More informationProgramming with WebGL Part 1: Background. CS 432 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science
Programming with WebGL Part 1: Background CS 432 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley
More informationCPSC 436D Video Game Programming
CPSC 436D Video Game Programming OpenGL/Shaders Opengl RENDERING PIPELINE Copyright: Alla Sheffer 1 Opengl RENDERING PIPELINE C/C++ OpenGL GLSL (automatic) (automatic) GLSL (automatic) opengl Low-level
More informationAn Overview GLUT GLSL GLEW
OpenGL, GLUT, GLEW, GLSL An Overview GLUT GLEW GLSL Objectives Give you an overview of the software that you will be using this semester OpenGL, GLUT, GLEW, GLSL What are they? How do you use them? What
More informationBCA611 Video Oyunları için 3B Grafik
BCA611 Video Oyunları için 3B Grafik WebGL - Shader Programming Zümra Kavafoğlu Canvas element The HTML element is used to draw graphics on a web page. Create canvas with id, width and height
More informationCS452/552; EE465/505. Overview of Computer Graphics
CS452/552; EE465/505 Overview of Computer Graphics 1-13-15 Outline! What is Computer Graphics? a historical perspective! Draw a triangle using WebGL Computer Graphics! Computer graphics deals with all
More informationRasterization-based pipeline
Rasterization-based pipeline Interactive Graphics: Color and Images 10/2/2014 Pagina 1 Rasterization-based rendering Input: set of vertices and its associated attributes Algorithm goes through several
More informationWebGL. Creating Interactive Content with WebGL. Media #WWDC14. Session 509 Dean Jackson and Brady Eidson WebKit Engineers
Media #WWDC14 WebGL Creating Interactive Content with WebGL Session 509 Dean Jackson and Brady Eidson WebKit Engineers 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted
More informationWebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics.
About the Tutorial WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics. This tutorial starts with a basic introduction
More informationCS452/552; EE465/505. Review & Examples
CS452/552; EE465/505 Review & Examples 2-05 15 Outline Review and Examples:! Shaders, Buffers & Binding! Example: Draw 3 Triangles Vertex lists; gl.drawarrays( ) Edge lists: gl.drawelements( )! Example:
More informationConverts geometric primitives into images Is split into several independent stages Those are usually executed concurrently
Rendering Pipeline Rendering Pipeline Converts geometric primitives into images Is split into several independent stages Those are usually executed concurrently Pipeline 18.10.2013 Steiner- Wallner- Podaras
More informationCS452/552; EE465/505. Image Processing Frame Buffer Objects
CS452/552; EE465/505 Image Processing Frame Buffer Objects 3-12 15 Outline! Image Processing: Examples! Render to Texture Read: Angel, Chapter 7, 7.10-7.13 Lab3 new due date: Friday, Mar. 13 th Project#1
More informationCOMP371 COMPUTER GRAPHICS
COMP371 COMPUTER GRAPHICS SESSION 12 PROGRAMMABLE SHADERS Announcement Programming Assignment #2 deadline next week: Session #7 Review of project proposals 2 Lecture Overview GPU programming 3 GPU Pipeline
More informationCopyright Khronos Group 2012 Page 1. Teaching GL. Dave Shreiner Director, Graphics and GPU Computing, ARM 1 December 2012
Copyright Khronos Group 2012 Page 1 Teaching GL Dave Shreiner Director, Graphics and GPU Computing, ARM 1 December 2012 Copyright Khronos Group 2012 Page 2 Agenda Overview of OpenGL family of APIs Comparison
More informationMining the Rendering Power in Web Browsers. Jianxia Xue Jan. 28, 2014
Mining the Rendering Power in Web Browsers Jianxia Xue Jan. 28, 2014 Outline Web application as software deployment platform WebGL: Graphics API inside browsers Explore browser rendering capability through
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Rongkai Guo Assistant Professor at Computer Game Design program Kennesaw State University 1 Overview These lectures are for a senior/graduate elective for computer
More informationWebGL and GLSL Basics. CS559 Fall 2015 Lecture 10 October 6, 2015
WebGL and GLSL Basics CS559 Fall 2015 Lecture 10 October 6, 2015 Last time Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33
More informationCS475/CS675 - Computer Graphics. OpenGL Drawing
CS475/CS675 - Computer Graphics OpenGL Drawing What is OpenGL? Open Graphics Library API to specify geometric objects in 2D/3D and to control how they are rendered into the framebuffer. A software interface
More informationRendering Objects. Need to transform all geometry then
Intro to OpenGL Rendering Objects Object has internal geometry (Model) Object relative to other objects (World) Object relative to camera (View) Object relative to screen (Projection) Need to transform
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico 1 Overview These
More informationAPI Background. Prof. George Wolberg Dept. of Computer Science City College of New York
API Background Prof. George Wolberg Dept. of Computer Science City College of New York Objectives Graphics API history OpenGL API OpenGL function format Immediate Mode vs Retained Mode Examples The Programmer
More informationWebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October
WebGL and GLSL Basics CS559 Fall 2016 Lecture 14 October 24 2016 Review Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33
More informationCS452/552; EE465/505. Models & Viewing
CS452/552; EE465/505 Models & Viewing 2-03 15 Outline! Building Polygonal Models Vertex lists; gl.drawarrays( ) Edge lists: gl.drawelements( )! Viewing Classical Viewing Read: Viewing in Web3D Angel, Section
More informationBuilding Models. Objectives Introduce simple data structures for building polygonal models. Vertex lists Edge lists
Building Models Objectives Introduce simple data structures for building polygonal models Vertex lists Edge lists 1 Representing a Mesh Consider a mesh v 5 v 6 e e e 3 v 9 8 8 v e 4 1 e 11 v e v 7 7 1
More informationJavaScript. Interpolated points
GLSL WebGL is a combination of JavaScript and GLSL providing commands that allow access to and control the GPU via shader programs. What is a Shader? A program which is compiled and run on the GPU. Shaders
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Ed Angel The Mandelbrot Set Fractals Fractal (fractional geometry) objects generate some of the most complex and beautiful graphics - The mathematics describing
More informationWe assume that you are familiar with the following:
We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell phones and tablets. See http://webglstats.com/. We will
More informationCS 432 Interactive Computer Graphics
CS 432 Interactive Computer Graphics Lecture 2 Part 1 Primitives and Buffers Matt Burlick - Drexel University - CS 432 1 Rendering in OpenGL Ok, so now we want to actually draw stuff! OpenGL (like most
More informationGraphics Programming. Computer Graphics, VT 2016 Lecture 2, Chapter 2. Fredrik Nysjö Centre for Image analysis Uppsala University
Graphics Programming Computer Graphics, VT 2016 Lecture 2, Chapter 2 Fredrik Nysjö Centre for Image analysis Uppsala University Graphics programming Typically deals with How to define a 3D scene with a
More informationOpenGL pipeline Evolution and OpenGL Shading Language (GLSL) Part 2/3 Vertex and Fragment Shaders
OpenGL pipeline Evolution and OpenGL Shading Language (GLSL) Part 2/3 Vertex and Fragment Shaders Prateek Shrivastava CS12S008 shrvstv@cse.iitm.ac.in 1 GLSL Data types Scalar types: float, int, bool Vector
More informationPractical Texturing (WebGL) CS559 Fall 2016 Lecture 20 November 7th 2016
Practical Texturing (WebGL) CS559 Fall 2016 Lecture 20 November 7th 2016 In brief Starting with a simple model In brief Caveat : Issues with sampling & aliasing associate texture coordinates with primitives
More informationCSE 167: Introduction to Computer Graphics Lecture #7: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2016
CSE 167: Introduction to Computer Graphics Lecture #7: GLSL Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2016 Announcements Project 2 due Friday 4/22 at 2pm Midterm #1 on
More informationCS 432 Interactive Computer Graphics
CS 432 Interactive Computer Graphics Lecture 2 Part 2 Introduction to Shaders Matt Burlick - Drexel University - CS 432 1 Shaders To understand shaders, let s look at the graphics pipeline again The job
More informationComp 410/510 Computer Graphics Spring Programming with OpenGL Part 2: First Program
Comp 410/510 Computer Graphics Spring 2017 Programming with OpenGL Part 2: First Program Objectives Refine the first program Introduce a standard program structure - Initialization Program Structure Most
More informationCS452/552; EE465/505. Shadow Mapping in WebGL
CS452/552; EE465/505 Shadow Mapping in WebGL 4-09 15 Outline! Shadow Mapping in WebGL Switching Shaders Framebuffer Objects (FBO) Read: Angel, Chapter 7: 7.12 Framebuffer Objects WebGL Programming Guide:
More informationCSE 167. Discussion 03 ft. Glynn 10/16/2017
CSE 167 Discussion 03 ft Glynn 10/16/2017 Announcements - Midterm next Tuesday(10/31) - Sample midterms are up - Project 1 late grading until this Friday - You will receive 75% of the points you ve earned
More informationIntroductory Seminar
EDAF80 Introduction to Computer Graphics Introductory Seminar OpenGL & C++ Michael Doggett 2017 C++ slides by Carl Johan Gribel, 2010-13 Today Lab info OpenGL C(++)rash course Labs overview 5 mandatory
More informationTransformation, perspective projection, and LookAT in. Ming Ouhyoung, September 2018
Transformation, perspective projection, and LookAT in WebGL vs.opengl Ming Ouhyoung, September 2018 To make things (functions) simple: WebGL is an Open ES 2.0 binding. OpenGL ES 2.0 (and modern OpenGL
More informationIntroduction to Computer Graphics with WebGL
1 Introduction to Computer Graphics with WebGL Ed Angel Transformations General Transformations A transformation maps points to other points and/or vectors to other vectors v=t(u) Q=T(P) 2 Affine Transformations
More informationOver the past 15 years, OpenGL has become
Editors: Beatriz Sousa Santos and Ginger Alford The Case for Teaching Computer Graphics with WebGL: A 25-Year Perspective Ed Angel University of New Mexico Over the past 15 years, OpenGL has become the
More informationWe will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell
We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell phones and tablets. See http://webglstats.com/. We will
More informationInformation Coding / Computer Graphics, ISY, LiTH. OpenGL! ! where it fits!! what it contains!! how you work with it 11(40)
11(40) Information Coding / Computer Graphics, ISY, LiTH OpenGL where it fits what it contains how you work with it 11(40) OpenGL The cross-platform graphics library Open = Open specification Runs everywhere
More informationPROFESSIONAL. WebGL Programming DEVELOPING 3D GRAPHICS FOR THE WEB. Andreas Anyuru WILEY. John Wiley & Sons, Ltd.
PROFESSIONAL WebGL Programming DEVELOPING 3D GRAPHICS FOR THE WEB Andreas Anyuru WILEY John Wiley & Sons, Ltd. INTRODUCTION xxl CHAPTER 1: INTRODUCING WEBGL 1 The Basics of WebGL 1 So Why Is WebGL So Great?
More informationComputer Graphics Seminar
Computer Graphics Seminar MTAT.03.305 Spring 2018 Raimond Tunnel Computer Graphics Graphical illusion via the computer Displaying something meaningful (incl art) Math Computers are good at... computing.
More informationOPENGL RENDERING PIPELINE
CPSC 314 03 SHADERS, OPENGL, & JS UGRAD.CS.UBC.CA/~CS314 Textbook: Appendix A* (helpful, but different version of OpenGL) Alla Sheffer Sep 2016 OPENGL RENDERING PIPELINE 1 OPENGL RENDERING PIPELINE Javascript
More informationINTRODUCTION TO OPENGL PIPELINE
CS580: Computer Graphics Min H. Kim KAIST School of Computing Foundations of Computer Graphics INTRODUCTION TO OPENGL PIPELINE 2 1 What is OpenGL? OpenGL = Open Graphics Library An open industry-standard
More informationOpenGL shaders and programming models that provide object persistence
OpenGL shaders and programming models that provide object persistence COSC342 Lecture 22 19 May 2016 OpenGL shaders We discussed forms of local illumination in the ray tracing lectures. We also saw that
More informationI Can t Believe It s Not
I Can t Believe It s Not Flash! @thomasfuchs Animating CSS properties Timer JavaScript sets CSS Reflow Rendering Paint Animating CSS properties Timer JavaScript sets CSS Reflow
More informationCiril Bohak. - INTRODUCTION TO WEBGL
2016 Ciril Bohak ciril.bohak@fri.uni-lj.si - INTRODUCTION TO WEBGL What is WebGL? WebGL (Web Graphics Library) is an implementation of OpenGL interface for cmmunication with graphical hardware, intended
More informationStarting out with OpenGL ES 3.0. Jon Kirkham, Senior Software Engineer, ARM
Starting out with OpenGL ES 3.0 Jon Kirkham, Senior Software Engineer, ARM Agenda Some foundational work Instanced geometry rendering Uniform Buffers Transform feedback ETC2 Texture formats Occlusion Queries
More informationLecture 13: OpenGL Shading Language (GLSL)
Lecture 13: OpenGL Shading Language (GLSL) COMP 175: Computer Graphics April 18, 2018 1/56 Motivation } Last week, we discussed the many of the new tricks in Graphics require low-level access to the Graphics
More informationDave Shreiner, ARM March 2009
4 th Annual Dave Shreiner, ARM March 2009 Copyright Khronos Group, 2009 - Page 1 Motivation - What s OpenGL ES, and what can it do for me? Overview - Lingo decoder - Overview of the OpenGL ES Pipeline
More informationC P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev
C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE UGRAD.CS.UBC.C A/~CS314 Mikhail Bessmeltsev 1 WHAT IS RENDERING? Generating image from a 3D scene 2 WHAT IS RENDERING? Generating image
More informationCS4621/5621 Fall Computer Graphics Practicum Intro to OpenGL/GLSL
CS4621/5621 Fall 2015 Computer Graphics Practicum Intro to OpenGL/GLSL Professor: Kavita Bala Instructor: Nicolas Savva with slides from Balazs Kovacs, Eston Schweickart, Daniel Schroeder, Jiang Huang
More informationCS452/552; EE465/505. Transformations
CS452/552; EE465/55 Transformations 1-29-15 Outline! Transformations Read: Angel, Chapter 4 (study cube.html/cube.js example) Helpful links: Linear Algebra: Khan Academy Lab1 is posted on github, due:
More informationComputer Graphics (CS 4731) OpenGL/GLUT(Part 1)
Computer Graphics (CS 4731) Lecture 2: Introduction to OpenGL/GLUT(Part 1) Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) Recall: OpenGL GLBasics OpenGL s function Rendering
More informationCOPYRIGHTED MATERIAL. 1Introducing WebGL THE BASICS OF WEBGL
Introducing WebGL WHAT S IN THIS CHAPTER? The basics of WebGL Wh 3D graphics in the browser offer great possibilities How to work with an immediate-mode API The basics of graphics hardware The WebGL graphics
More informationCS230 : Computer Graphics Lecture 4. Tamar Shinar Computer Science & Engineering UC Riverside
CS230 : Computer Graphics Lecture 4 Tamar Shinar Computer Science & Engineering UC Riverside Shadows Shadows for each pixel do compute viewing ray if ( ray hits an object with t in [0, inf] ) then compute
More informationProgrammable shader. Hanyang University
Programmable shader Hanyang University Objective API references (will be skipped) Examples Simple shader Phong shading shader INTRODUCTION GLSL(OPENGL SHADING LANGUAGE) Scalar Data types Structure Structures
More informationToday s Agenda. Basic design of a graphics system. Introduction to OpenGL
Today s Agenda Basic design of a graphics system Introduction to OpenGL Image Compositing Compositing one image over another is most common choice can think of each image drawn on a transparent plastic
More information2D graphics with WebGL
2D graphics with WebGL Some material contained here is adapted from the book s slides. September 7, 2015 (Dr. Mihail) 2D graphics September 7, 2015 1 / 22 Graphics Pipeline (Dr. Mihail) 2D graphics September
More informationGrafica Computazionale: Lezione 30. Grafica Computazionale. Hiding complexity... ;) Introduction to OpenGL. lezione30 Introduction to OpenGL
Grafica Computazionale: Lezione 30 Grafica Computazionale lezione30 Introduction to OpenGL Informatica e Automazione, "Roma Tre" May 20, 2010 OpenGL Shading Language Introduction to OpenGL OpenGL (Open
More informationShaders. Slide credit to Prof. Zwicker
Shaders Slide credit to Prof. Zwicker 2 Today Shader programming 3 Complete model Blinn model with several light sources i diffuse specular ambient How is this implemented on the graphics processor (GPU)?
More informationCS450/550. Pipeline Architecture. Adapted From: Angel and Shreiner: Interactive Computer Graphics6E Addison-Wesley 2012
CS450/550 Pipeline Architecture Adapted From: Angel and Shreiner: Interactive Computer Graphics6E Addison-Wesley 2012 0 Objectives Learn the basic components of a graphics system Introduce the OpenGL pipeline
More informationGetting fancy with texture mapping (Part 2) CS559 Spring Apr 2017
Getting fancy with texture mapping (Part 2) CS559 Spring 2017 6 Apr 2017 Review Skyboxes as backdrops Credits : Flipmode 3D Review Reflection maps Credits : NVidia Review Decal textures Credits : andreucabre.com
More informationComp 410/510 Computer Graphics Spring Programming with OpenGL Part 3: Shaders
Comp 410/510 Computer Graphics Spring 2018 Programming with OpenGL Part 3: Shaders Objectives Basic shaders - Vertex shader - Fragment shader Programming shaders with GLSL Finish first program void init(void)
More informationComp 410/510 Computer Graphics Spring Programming with OpenGL Part 4: Three Dimensions
Comp 410/510 Computer Graphics Spring 2018 Programming with OpenGL Part 4: Three Dimensions Objectives Develop a bit more sophisticated three-dimensional example - Rotating cube Introduce hidden-surface
More informationMali Developer Resources. Kevin Ho ARM Taiwan FAE
Mali Developer Resources Kevin Ho ARM Taiwan FAE ARM Mali Developer Tools Software Development SDKs for OpenGL ES & OpenCL OpenGL ES Emulators Shader Development Studio Shader Library Asset Creation Texture
More informationCENG 477 Introduction to Computer Graphics. Graphics Hardware and OpenGL
CENG 477 Introduction to Computer Graphics Graphics Hardware and OpenGL Introduction Until now, we focused on graphic algorithms rather than hardware and implementation details But graphics, without using
More information3d Programming I. Dr Anton Gerdelan
3d Programming I Dr Anton Gerdelan gerdela@scss.tcd.ie 3d Programming 3d programming is very difficult 3d programming is very time consuming 3d Programming Practical knowledge of the latest, low-level
More informationUlf Assarsson Department of Computer Engineering Chalmers University of Technology
Ulf Assarsson Department of Computer Engineering Chalmers University of Technology Tracing Photons One way to form an image is to follow rays of light from a point source finding which rays enter the lens
More informationSHADER PROGRAMMING. Based on Jian Huang s lecture on Shader Programming
SHADER PROGRAMMING Based on Jian Huang s lecture on Shader Programming What OpenGL 15 years ago could do http://www.neilturner.me.uk/shots/opengl-big.jpg What OpenGL can do now What s Changed? 15 years
More informationOUTLINE. Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for a graphics system
GRAPHICS PIPELINE 1 OUTLINE Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for a graphics system 2 IMAGE FORMATION REVISITED Can we mimic the synthetic
More informationWebGL. Mike Bailey. Oregon State University. What is WebGL?
WebGL Mike Bailey mjb@cs.oregonstate.edu Oregon State University What is WebGL? From WikiPedia: WebGL(Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics and 2D graphics within
More informationOpenGL Performances and Flexibility
OpenGL Performances and Flexibility Marco Di Benedetto Visual Computing Laboratory ISTI CNR, Italy OpenGL Roadmap 1.0 - Jan 1992 - First Version 1.1 - Jan 1997 - Vertex Arrays, Texture Objects 1.2 - Mar
More informationModule 13C: Using The 3D Graphics APIs OpenGL ES
Module 13C: Using The 3D Graphics APIs OpenGL ES BREW TM Developer Training Module Objectives See the steps involved in 3D rendering View the 3D graphics capabilities 2 1 3D Overview The 3D graphics library
More informationBuilding Models. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
Building Models 1 Objectives Introduce simple data structures for building polygonal models Vertex lists Edge lists 2 Representing a Mesh Consider a mesh v 5 v 6 e e e 3 v 9 8 8 v e 4 1 e 11 e v v 7 7
More informationComputer Graphics (CS 543) Lecture 1 (Part 2): Introduction to OpenGL/GLUT (Part 1)
Computer Graphics (CS 543) Lecture 1 (Part 2): Introduction to OpenGL/GLUT (Part 1) Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) OpenGL/GLUT Installation OpenGL: Specific
More informationBuilding Models. Prof. George Wolberg Dept. of Computer Science City College of New York
Building Models Prof. George Wolberg Dept. of Computer Science City College of New York Objectives Introduce simple data structures for building polygonal models - Vertex lists - Edge lists Deprecated
More informationOpenGL BOF Siggraph 2011
OpenGL BOF Siggraph 2011 OpenGL BOF Agenda OpenGL 4 update Barthold Lichtenbelt, NVIDIA OpenGL Shading Language Hints/Kinks Bill Licea-Kane, AMD Ecosystem update Jon Leech, Khronos Viewperf 12, a new beginning
More informationBest practices for effective OpenGL programming. Dan Omachi OpenGL Development Engineer
Best practices for effective OpenGL programming Dan Omachi OpenGL Development Engineer 2 What Is OpenGL? 3 OpenGL is a software interface to graphics hardware - OpenGL Specification 4 GPU accelerates rendering
More informationOPENGL AND GLSL. Computer Graphics
OPENGL AND GLSL Computer Graphics 1 OUTLINE I. Detecting GLSL Errors II. Drawing a (gasp) Triangle! III. (Simple) Animation 2 Interactive Computer Graphics, http://www.mechapen.com/projects.html WHAT IS
More informationProgramming with OpenGL Shaders I. Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico
Programming with OpenGL Shaders I Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico Objectives Shader Programming Basics Simple Shaders Vertex shader Fragment shaders
More informationGLSL Overview: Creating a Program
1. Create the OpenGL application GLSL Overview: Creating a Program Primarily concerned with drawing Preferred approach uses buffer objects All drawing done in terms of vertex arrays Programming style differs
More informationProgramming shaders & GPUs Christian Miller CS Fall 2011
Programming shaders & GPUs Christian Miller CS 354 - Fall 2011 Fixed-function vs. programmable Up until 2001, graphics cards implemented the whole pipeline for you Fixed functionality but configurable
More informationMobile Application Programing: Android. OpenGL Operation
Mobile Application Programing: Android OpenGL Operation Activities Apps are composed of activities Activities are self-contained tasks made up of one screen-full of information Activities start one another
More informationDECLARATIVE AR IN THE WEB WITH XML3D & XFLOW. By Felix Klein
DECLARATIVE AR IN THE WEB WITH XML3D & XFLOW By Felix Klein 1 THE WEB IS READY FOR AR Fast JavaScript WebGL, WebCL getusermedia, WebRTC Geolocation, Orientation, Motion > Any Problem? WEBGL: POWERFUL AND
More informationEECS 487: Interactive Computer Graphics
Integrating GLSL with OpenGL EECS 487: Interactive Computer Graphics Lecture 19: Integrating shaders with OpenGL program Vertex-array objects with shaders Miscellaneous shader related stuff Integrating
More informationOpenGL Essentials Training
OpenGL Essentials Training 3-day session Overview Understanding principles of 3D programming Understanding drawing Primitives Understanding transformation matrix and Coloring Understanding Blending and
More informationReal-Time Rendering (Echtzeitgraphik) Michael Wimmer
Real-Time Rendering (Echtzeitgraphik) Michael Wimmer wimmer@cg.tuwien.ac.at Walking down the graphics pipeline Application Geometry Rasterizer What for? Understanding the rendering pipeline is the key
More information