WebGL. Creating Interactive Content with WebGL. Media #WWDC14. Session 509 Dean Jackson and Brady Eidson WebKit Engineers
|
|
- Angelina Fleming
- 5 years ago
- Views:
Transcription
1 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 without written permission from Apple.
2
3
4
5
6 JavaScript
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 AngryBots by Unity
22 AngryBots by Unity
23 Swooop by PlayCanvas
24 Swooop by PlayCanvas
25
26 What You Will Learn
27 What You Will Learn Setting up WebGL in your page
28 What You Will Learn Setting up WebGL in your page How to do basic drawing
29 What You Will Learn Setting up WebGL in your page How to do basic drawing Advanced rendering and animation
30 What You Will Learn Setting up WebGL in your page How to do basic drawing Advanced rendering and animation Relationship to other HTML features
31
32
33
34
35
36
37
38
39
40 three.js MontageJS Copperlicht Babylon JS Turbulenz Cesium Goo Engine
41 Motivation
42 Motivation Powerful graphics in Web content
43 Motivation Powerful graphics in Web content Interoperability through Open Standard
44
45 BEGIN { print "Hello, world!" } display dialog "Hello, world!" (princ "Hello, world!") #include <stdio.h> int main() { printf("hello, world!\n"); return 0; } program HelloWorld; begin WriteLn('Hello, world!'); end. print "Hello, world!" package main import "fmt" func main() { fmt.println("hello, world!") } #import <Foundation/Foundation.h> int main(void) { NSLog(@"Hello, world!\n"); return 0; } PRINT "Hello, world!" DISPLAY 'Hello, world!'. STOP RUN. HAI CAN HAS STDIO? VISIBLE "HAI WORLD!" KTHXBYE public class HelloWorld { public static void main(string[] args) { System.out.println("Hello, world!"); } } <?php echo 'Hello, world!';?> puts "Hello, world!" %!PS /Courier 72 selectfont moveto (Hello World!) show showpage #include <iostream> int main() { std::cout << "Hello, world!" << std::endl; return 0; }
46
47
48
49
50
51
52
53
54 Creating, Configuring, and Drawing
55
56
57
58
59
60
61 Somewhere to Draw Canvas
62 Somewhere to Draw Canvas <canvas> element Or create one via JavaScript: var canvas = document.createelement("canvas");
63 Somewhere to Draw Canvas var canvas = document.queryselector("canvas");
64 Somewhere to Draw Canvas var canvas = document.queryselector("canvas");! canvas.width = 600 * window.devicepixelratio; canvas.height = 400 * window.devicepixelratio;
65
66
67 Something to Draw With Creating the WebGLRenderingContext
68 Something to Draw With Creating the WebGLRenderingContext var gl = canvas.getcontext("webgl");
69
70
71 Configuring the System Creating and setting up the resources
72 Configuring the System Creating and setting up the resources Before we can do the actual draw operation:
73 Configuring the System Creating and setting up the resources Before we can do the actual draw operation: Create some buffers
74 Configuring the System Creating and setting up the resources Before we can do the actual draw operation: Create some buffers Create a program to use while drawing
75
76
77 (0.55, 0.75) (-0.8, -0.3) (0.7, -0.8)
78 (0.55, 0.75) (-0.8, -0.3) (0.7, -0.8)
79 (0.55, 0.75) (-0.8, -0.3) (0.7, -0.8)
80 (0.55, 0.75) (-0.8, -0.3) (0.7, -0.8)
81 (0.55, 0.75) (-0.8, -0.3) (0.7, -0.8)
82 var vertices = new Float32Array([ -0.8, -0.3, 0.7, -0.8, 0.55, 0.75 ]);
83 var vertices = new Float32Array([ -0.8, -0.3, 0.7, -0.8, 0.55, 0.75 ]);
84 var vertices = new Float32Array([ -0.8, -0.3, 0.7, -0.8, 0.55, 0.75 ]);
85 var vertices = new Float32Array([ -0.8, -0.3, 0.7, -0.8, 0.55, 0.75 ]);! var trianglebuffer = gl.createbuffer();
86 var vertices = new Float32Array([ -0.8, -0.3, 0.7, -0.8, 0.55, 0.75 ]);! var trianglebuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, trianglebuffer); gl.bufferdata(gl.array_buffer, vertices, gl.static_draw);
87
88 JavaScript
89 JavaScript
90 JavaScript
91 WebGL Rendering Pipeline JavaScript
92 WebGL Rendering Pipeline
93 WebGL Color Primitive Vertex Processing Rasterizer Fragment Depth / Dither Buffer Assembly Shader Stencil Blend Rendering Pipeline
94 Primitive Processing Vertex Shader Primitive Assembly Rasterizer Fragment Shader Depth/ Stencil Color Buffer Blend Dither
95 Primitive Processing Vertex Shader Primitive Assembly Rasterizer Fragment Shader Depth/ Stencil Color Buffer Blend Dither
96 Vertex Shader Fragment Shader JavaScript
97 Vertex Shader Fragment Shader JavaScript
98 Vertex Shader Fragment Shader JavaScript Program
99 Vertex Shader
100 Vertex Shader Vertex Shader Vertex Shader
101 Vertex Shader Vertex Shader Vertex Shader
102 Vertex Shader Vertex Shader Vertex Shader Fragment Shader Fragment Shader Fragment Shader Fragment Shader Fragment Shader Fragment Shader Fragment Shader Fragment Shader
103 var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader, "... source code..."); gl.compileshader(vertexshader);
104 var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader, "... source code..."); gl.compileshader(vertexshader);
105 var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader, "... source code..."); gl.compileshader(vertexshader);
106 var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader, "... source code..."); gl.compileshader(vertexshader);! var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader, "... source code..."); gl.compileshader(fragmentshader);
107 var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader, "... source code..."); gl.compileshader(vertexshader);! var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader, "... source code..."); gl.compileshader(fragmentshader);! var program = gl.createprogram();
108 var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader, "... source code..."); gl.compileshader(vertexshader);! var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader, "... source code..."); gl.compileshader(fragmentshader);! var program = gl.createprogram(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader);
109 var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader, "... source code..."); gl.compileshader(vertexshader);! var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader, "... source code..."); gl.compileshader(fragmentshader);! var program = gl.createprogram(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program);
110 var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader, "... source code..."); gl.compileshader(vertexshader);! var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader, "... source code..."); gl.compileshader(fragmentshader);! var program = gl.createprogram(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program);! gl.useprogram(program);
111
112
113
114 var positionattribute = gl.getattriblocation(program, "aposition"); gl.enablevertexattribarray(positionattribute);
115 var positionattribute = gl.getattriblocation(program, "aposition"); gl.enablevertexattribarray(positionattribute);! gl.bindbuffer(gl.array_buffer, trianglebuffer); gl.vertexattribpointer(positionattribute, 2, gl.float, false, 0, 0);
116 var positionattribute = gl.getattriblocation(program, "aposition"); gl.enablevertexattribarray(positionattribute);! gl.bindbuffer(gl.array_buffer, trianglebuffer); gl.vertexattribpointer(positionattribute, 2, gl.float, false, 0, 0);
117 var positionattribute = gl.getattriblocation(program, "aposition"); gl.enablevertexattribarray(positionattribute);! gl.bindbuffer(gl.array_buffer, trianglebuffer); gl.vertexattribpointer(positionattribute, 2, gl.float, false, 0, 0);! gl.drawarrays(gl.triangles, 0, 3);
118
119 <!DOCTYPE html> <head> <title>webgl Triangle</title> <style> canvas { width: 600px; height: 400px; } </style> </head> <script id="vertexshadersource" type="text/glsl"> // Simple vertex shader. Simply returns the position it was provided. attribute vec4 position; void main() { gl_position = position; } </script> <script id="fragmentshadersource" type="text/glsl"> // Extremely simple fragment shader. Draws every pixel red. #ifdef GL_ES precision mediump float; #endif! void main() {
120 gl.bindbuffer(gl.array_buffer, trianglebuffer); gl.bufferdata(gl.array_buffer, vertices, gl.static_draw);!! // ---- DRAWING ---- // Clear to black. gl.clearcolor(0, 0, 0, 1); gl.clear(gl.color_buffer_bit);! // Bind the vertex attributes for the draw operation. We first make // sure we're talking to the correct buffer, then we're going to // associate that buffer with the vertex attribute from the program. // Our buffer is an array of (x,y) points, so 2 floating point values // per vertex. gl.bindbuffer(gl.array_buffer, trianglebuffer); gl.vertexattribpointer(positionattribute, 2, gl.float, false, 0, 0);! } // The actual draw call. We know there are 3 points in the buffer // (a triangle). gl.drawarrays(gl.triangles, 0, 3);! window.addeventlistener("load", drawtriangle, false); </script> <body>
121 Shaders
122 GLSL
123 GLSL C-like language designed for parallel graphics
124 GLSL C-like language designed for parallel graphics Primitives: Vectors, matrices
125 GLSL C-like language designed for parallel graphics Primitives: Vectors, matrices Built-in functions: Trigonometry, vector math, smoothing, and clamping
126 Vertex Shader Vertex Shader Vertex Shader Fragment Shader Fragment Shader Fragment Shader Fragment Shader Fragment Shader Fragment Shader Fragment Shader Fragment Shader
127 Vertex Shader Fragment Shader
128 Vertex Shader Fragment Shader
129 Vertex Shader Global Constants (uniforms) Fragment Shader
130 Vertex Shader gl_position Global Constants (uniforms) Fragment Shader
131 Vertex Shader gl_position Global Constants (uniforms) Fragment Shader gl_fragcolor
132 Vertex Shader Source Code attribute vec4 aposition;! void main() { gl_position = aposition; }
133 Vertex Shader Source Code attribute vec4 aposition;! void main() { gl_position = aposition; }
134 Vertex Shader Source Code attribute vec4 aposition;! void main() { gl_position = aposition; }
135 Fragment Shader Source Code precision mediump float;! void main() { gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); }
136 Fragment Shader Source Code precision mediump float;! void main() { gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); }
137 Fragment Shader Source Code precision mediump float;! void main() { gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); }
138 Fragment Shader Source Code precision mediump float;! void main() { gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); } red green blue alpha
139 Demo Live Shader Editor
140 Shaders C-like programs that run on the GPU Control over vertex positions and pixel colors Extremely powerful
141 Advanced Rendering Merging WebGL with the rest of HTML Brady Eidson WebKit Engineer
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163 var vertices = new Float32Array([ -0.8, -0.3, 0.7, -0.8, 0.55, 0.75 ]);! var trianglebuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, trianglebuffer); gl.bufferdata(gl.array_buffer, vertices, gl.static_draw);
164 var vertices = new Float32Array([... ]);! var discbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, discbuffer); gl.bufferdata(gl.array_buffer, vertices, gl.static_draw);
165 var vertices = new Float32Array([ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
166 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
167
168 Any Data You Want
169 Any Data You Want for Any Point You Want
170
171
172
173
174
175
176 var vertices = new Float32Array([ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ]);! var geometrybuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, geometrybuffer); gl.bufferdata(gl.array_buffer, vertices, gl.static_draw);
177 var texturecoords = new Float32Array([ , , , , , , , , , , ]);! var texturebuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, texturebuffer); gl.bufferdata(gl.array_buffer, texturecoords, gl.static_draw);
178 Configuring Our Shaders var positionattribute = gl.getattriblocation(program, "aposition"); gl.enablevertexattribarray(positionattribute);! gl.bindbuffer(gl.array_buffer, positionbuffer); gl.vertexattribpointer(positionattribute, 3, gl.float, false, 0, 0);
179 Configuring Our Shaders var positionattribute = gl.getattriblocation(program, "aposition"); gl.enablevertexattribarray(positionattribute); gl.bindbuffer(gl.array_buffer, positionbuffer); gl.vertexattribpointer(positionattribute, 3, gl.float, false, 0, 0);! var textureattribute = gl.getattriblocation(program, "atexturecoord"); gl.enablevertexattribarray(textureattribute);!
180 Configuring Our Shaders var positionattribute = gl.getattriblocation(program, "aposition"); gl.enablevertexattribarray(positionattribute); gl.bindbuffer(gl.array_buffer, positionbuffer); gl.vertexattribpointer(positionattribute, 3, gl.float, false, 0, 0);! var textureattribute = gl.getattriblocation(program, "atexturecoord"); gl.enablevertexattribarray(textureattribute); gl.bindbuffer(gl.array_buffer, texturebuffer); gl.vertexattribpointer(textureattribute, 2, gl.float, false, 0, 0);
181 Vertex Shader Source Code attribute vec4 aposition;! void main() { gl_position = aposition; }
182 Vertex Shader Source Code attribute vec4 aposition; attribute vec2 atexturecoord;! void main() { gl_position = aposition; }
183 Vertex Shader Source Code attribute vec4 aposition; attribute vec2 atexturecoord;! varying vec2 vtexturecoord;! void main() { gl_position = aposition; }
184 Vertex Shader Source Code attribute vec4 aposition; attribute vec2 atexturecoord;! varying vec2 vtexturecoord;! void main() { gl_position = aposition; vtexturecoord = atexturecoord; }
185 Fragment Shader Source Code precision mediump float;! void main() { gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); }
186 Fragment Shader Source Code precision mediump float;! varying vec2 vtexturecoord;! void main() { gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); }
187 Configuring Our Shaders var positionattribute = gl.getattriblocation(program, "aposition"); gl.enablevertexattribarray(positionattribute); gl.bindbuffer(gl.array_buffer, positionbuffer); gl.vertexattribpointer(positionattribute, 3, gl.float, false, 0, 0);! var textureattribute = gl.getattriblocation(program, "atexturecoord"); gl.enablevertexattribarray(textureattribute); gl.bindbuffer(gl.array_buffer, texturebuffer); gl.vertexattribpointer(textureattribute, 2, gl.float, false, 0, 0);
188 Configuring Our Shaders var positionattribute = gl.getattriblocation(program, "aposition"); gl.enablevertexattribarray(positionattribute); gl.bindbuffer(gl.array_buffer, positionbuffer); gl.vertexattribpointer(positionattribute, 3, gl.float, false, 0, 0);! var textureattribute = gl.getattriblocation(program, "atexturecoord"); gl.enablevertexattribarray(textureattribute); gl.bindbuffer(gl.array_buffer, texturebuffer); gl.vertexattribpointer(textureattribute, 2, gl.float, false, 0, 0);! var sampleruniform = gl.getuniformlocation(program, "sampler");
189 Fragment Shader Source Code precision mediump float;! varying vec2 vtexturecoord;! void main() { gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); }
190 Fragment Shader Source Code precision mediump float;! varying vec2 vtexturecoord;! uniform sampler2d sampler;! void main() { gl_fragcolor = vec4(1.0, 0.0, 0.0, 1.0); }
191 Fragment Shader Source Code precision mediump float;! varying vec2 vtexturecoord;! uniform sampler2d sampler;! void main() { gl_fragcolor = texture2d(sampler, vtexturecoord); }
192 Texture Sources
193 Texture Sources <img> element
194 Texture Sources <img> element XMLHttpRequest
195 Texture Sources <img> element XMLHttpRequest <video> element
196 Texture Sources <img> element XMLHttpRequest <video> element <canvas> element
197 <img id= TextureImage src= FlatCompass.png >
198 <img id= TextureImage src= FlatCompass.png >! <script type= text/javascript > var texture = gl.createtexture(); </script>
199 <img id= TextureImage src= FlatCompass.png >! <script type= text/javascript > var texture = gl.createtexture(); gl.activetexture(gl.texture0); gl.bindtexture(gl.texture_2d, texture); </script>
200 <img id= TextureImage src= FlatCompass.png >! <script type= text/javascript > var texture = gl.createtexture(); gl.activetexture(gl.texture0); gl.bindtexture(gl.texture_2d, texture);! var image = document.getelementbyid( TextureImage ); </script>
201 <img id= TextureImage src= FlatCompass.png >! <script type= text/javascript > var texture = gl.createtexture(); gl.activetexture(gl.texture0); gl.bindtexture(gl.texture_2d, texture);! var image = document.getelementbyid( TextureImage );! gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.unsigned_byte, image); </script>
202 <img id= TextureImage src= FlatCompass.png >! <script type= text/javascript > var texture = gl.createtexture(); gl.activetexture(gl.texture0); gl.bindtexture(gl.texture_2d, texture);! var image = document.getelementbyid( TextureImage );! gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.unsigned_byte, image); </script>
203 <img id= TextureImage src= FlatCompass.png >! <script type= text/javascript > var texture = gl.createtexture(); gl.activetexture(gl.texture0); gl.bindtexture(gl.texture_2d, texture);! var image = document.getelementbyid( TextureImage );! gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.unsigned_byte, image); gl.uniform1i(sampleruniform, 0); </script>
204
205
206 Demo Building a compass
207
208
209 The Web Platform
210 The Web Platform
211 The Web Platform
212 The Web Platform
213 The Web Platform
214
215
216
217
218
219
220
221 When to Draw
222 FIXME: The contents of will likely be different later on June 2nd, should update the video
223 FIXME: The contents of will likely be different later on June 2nd, should update the video
224 Do Not Use Timers!
225 requestanimationframe()
226 requestanimationframe() 1 Call requestanimationframe() with a callback
227 requestanimationframe() 1 Call requestanimationframe() with a callback var drawingcallback = function() { }
228 requestanimationframe() 1 Call requestanimationframe() with a callback var drawingcallback = function() { }! requestanimationframe(drawingcallback);
229 requestanimationframe() 2 Draw your scene var drawingcallback = function() { }! requestanimationframe(drawingcallback);
230 requestanimationframe() 2 Draw your scene var drawingcallback = function() { updatephysics(); drawcompass(); drawterrain(); }! requestanimationframe(drawingcallback);
231 requestanimationframe() 3 Request the next callback var drawingcallback = function() { updatephysics(); drawcompass(); drawterrain(); }! requestanimationframe(drawingcallback);
232 requestanimationframe() 3 Request the next callback var drawingcallback = function() { updatephysics(); drawcompass(); drawterrain(); requestanimationframe(drawingcallback); }! requestanimationframe(drawingcallback);
233 Demo Grand finale
234 Wrapping Up
235 Wrapping Up Rich, powerful, fast graphics
236 Wrapping Up Rich, powerful, fast graphics WebGL available in Safari on OS X Yosemite and ios 8
237 Wrapping Up Rich, powerful, fast graphics WebGL available in Safari on OS X Yosemite and ios 8 Also available in WKWebView
238 More Information Evangelism Safari for Developers WebKit Developer Technical Support Apple Developer Forums
239 Related Sessions Introducing the Modern WebKit API Nob Hill Tuesday 2:00PM Web Inspector and Modern JavaScript Russian Hill Thursday 10:15AM
240 Labs Safari and WebKit Lab Media Lab B Wednesday 4:30PM Safari and WebKit Lab Media Lab B Thursday 2:00PM
241
CPSC 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 informationWebGL: 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 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 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 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 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 informationIntroduction to OpenGL/GLSL and WebGL GLSL
Introduction to OpenGL/GLSL and WebGL GLSL 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
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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 informationCS452/552; EE465/505. Texture Mapping in WebGL
CS452/552; EE465/505 Texture Mapping in WebGL 2-26 15 Outline! Texture Mapping in WebGL Read: Angel, Chapter 7, 7.3-7.5 LearningWebGL lesson 5: http://learningwebgl.com/blog/?p=507 Lab3 due: Monday, 3/2
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 informationPicking (In WebGL) Picking idea
9. Picking IN THIS CHAPTER Selecting objects in a WebGL scene using the mouse Creating and using offscreen framebuffers What renderbuffers are and how they are used by framebuffers Reading pixels from
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 informationBuffers. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
Buffers 1 Objectives Introduce additional WebGL buffers Reading and writing buffers Buffers and Images 2 Buffer Define a buffer by its spatial resolution (n x m) and its depth (or precision) k, the number
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 informationCISC 3620 Lecture 7 Lighting and shading. Topics: Exam results Buffers Texture mapping intro Texture mapping basics WebGL texture mapping
CISC 3620 Lecture 7 Lighting and shading Topics: Exam results Buffers Texture mapping intro Texture mapping basics WebGL texture mapping Exam results Grade distribution 12 Min: 26 10 Mean: 74 8 Median:
More informationDiscussion 3. PPM loading Texture rendering in OpenGL
Discussion 3 PPM loading Texture rendering in OpenGL PPM Loading - Portable PixMap format 1. 2. Code for loadppm(): http://ivl.calit2.net/wiki/images/0/09/loadppm.txt ppm file format: Header: 1. P6: byte
More informationGame Graphics & Real-time Rendering
Game Graphics & Real-time Rendering CMPM 163, W2018 Prof. Angus Forbes (instructor) angus@ucsc.edu Lucas Ferreira (TA) lferreira@ucsc.edu creativecoding.soe.ucsc.edu/courses/cmpm163 github.com/creativecodinglab
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 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 informationThe Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)!
! The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 4! stanford.edu/class/ee267/! Lecture Overview! Review
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 informationCSE 167: Introduction to Computer Graphics Lecture #13: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2015
CSE 167: Introduction to Computer Graphics Lecture #13: GLSL Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2015 Announcements Project 6 due Friday Next Thursday: Midterm #2
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 informationProgramming with OpenGL Part 3: Shaders. Ed Angel Professor of Emeritus of Computer Science University of New Mexico
Programming with OpenGL Part 3: Shaders Ed Angel Professor of Emeritus of Computer Science University of New Mexico 1 Objectives Simple Shaders - Vertex shader - Fragment shaders Programming shaders with
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 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 0 Objectives Shader Basics Simple Shaders Vertex shader Fragment shaders 1 Vertex
More informationOpenGL ES for iphone Games. Erik M. Buck
OpenGL ES for iphone Games Erik M. Buck Topics The components of a game n Technology: Graphics, sound, input, physics (an engine) n Art: The content n Fun: That certain something (a mystery) 2 What is
More informationX. GPU Programming. Jacobs University Visualization and Computer Graphics Lab : Advanced Graphics - Chapter X 1
X. GPU Programming 320491: Advanced Graphics - Chapter X 1 X.1 GPU Architecture 320491: Advanced Graphics - Chapter X 2 GPU Graphics Processing Unit Parallelized SIMD Architecture 112 processing cores
More informationCS 380 Introduction to Computer Graphics. LAB (1) : OpenGL Tutorial Reference : Foundations of 3D Computer Graphics, Steven J.
CS 380 Introduction to Computer Graphics LAB (1) : OpenGL Tutorial 2018. 03. 05 Reference : Foundations of 3D Computer Graphics, Steven J. Gortler Goals Understand OpenGL pipeline Practice basic OpenGL
More informationIntroducing the Modern WebKit API
Frameworks #WWDC14 Introducing the Modern WebKit API Session 206 Anders Carlsson Safari and WebKit Engineer 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted without written
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 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 informationOverview. By end of the week:
Overview By end of the week: - Know the basics of git - Make sure we can all compile and run a C++/ OpenGL program - Understand the OpenGL rendering pipeline - Understand how matrices are used for geometric
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 informationLecture 5 Vertex and Fragment Shaders-1. CITS3003 Graphics & Animation
Lecture 5 Vertex and Fragment Shaders-1 CITS3003 Graphics & Animation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Objectives The rendering pipeline and the shaders Data
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 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 informationInformation Coding / Computer Graphics, ISY, LiTH GLSL. OpenGL Shading Language. Language with syntax similar to C
GLSL OpenGL Shading Language Language with syntax similar to C Syntax somewhere between C och C++ No classes. Straight ans simple code. Remarkably understandable and obvious! Avoids most of the bad things
More informationGame Graphics & Real-time Rendering
Game Graphics & Real-time Rendering CMPM 163, W2018 Prof. Angus Forbes (instructor) angus@ucsc.edu Lucas Ferreira (TA) lferreira@ucsc.edu creativecoding.soe.ucsc.edu/courses/cmpm163 github.com/creativecodinglab
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 informationIntroduction to Shaders.
Introduction to Shaders Marco Benvegnù hiforce@gmx.it www.benve.org Summer 2005 Overview Rendering pipeline Shaders concepts Shading Languages Shading Tools Effects showcase Setup of a Shader in OpenGL
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 informationSteiner- Wallner- Podaras
Texturing 2 3 Some words on textures Texturing = mapping 2D image to a model (*You will hear more on other texturing- methods in the course.) Not a trivial task! 4 Texturing how it works 5 UV coordinates
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 informationComputergraphics Exercise 15/ Shading & Texturing
Computergraphics Exercise 15/16 3. Shading & Texturing Jakob Wagner for internal use only Shaders Vertex Specification define vertex format & data in model space Vertex Processing transform to clip space
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 informationWorking with Metal Overview
Graphics and Games #WWDC14 Working with Metal Overview Session 603 Jeremy Sandmel GPU Software 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission
More informationWorking With Metal Advanced
Graphics and Games #WWDC14 Working With Metal Advanced Session 605 Gokhan Avkarogullari GPU Software Aaftab Munshi GPU Software Serhat Tekin GPU Software 2014 Apple Inc. All rights reserved. Redistribution
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 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 informationWebGL. Announcements. WebGL for Graphics Developers. WebGL for Web Developers. Homework 5 due Monday, 04/16. Final on Tuesday, 05/01
Announcements Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2012 Homework 5 due Monday, 04/16 In-class quiz Wednesday, 04/18 Final on Tuesday, 05/01 6-8pm David Rittenhouse Lab A7 Networking
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 informationGeometry Shaders. And how to use them
Geometry Shaders And how to use them OpenGL Pipeline (part of it) Vertex data Vertex shader Vertices Primitives Geometry shader Primitives Fragments Fragment shader Color Depth Stencil Vertex Data Attributes
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 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 informationThe Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)!
! The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 4! stanford.edu/class/ee267/! Updates! for 24h lab access:
More informationInformation Coding / Computer Graphics, ISY, LiTH GLSL. OpenGL Shading Language. Language with syntax similar to C
GLSL OpenGL Shading Language Language with syntax similar to C Syntax somewhere between C och C++ No classes. Straight ans simple code. Remarkably understandable and obvious! Avoids most of the bad things
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 informationCS 432 Interactive Computer Graphics
CS 432 Interactive Computer Graphics Lecture 7 Part 2 Texture Mapping in OpenGL Matt Burlick - Drexel University - CS 432 1 Topics Texture Mapping in OpenGL Matt Burlick - Drexel University - CS 432 2
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 GLSL. Announcements. Agenda. Course Contents. Patrick Cozzi University of Pennsylvania CIS Fall 2012
Announcements Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Fall 2012 Game career advice Grades Project 3 due Monday, 10/05 Project 4 Released Monday, 10/05 Due Wednesday, 10/07
More informationFog example. Fog is atmospheric effect. Better realism, helps determine distances
Fog example Fog is atmospheric effect Better realism, helps determine distances Fog Fog was part of OpenGL fixed function pipeline Programming fixed function fog Parameters: Choose fog color, fog model
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 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 informationThe Application Stage. The Game Loop, Resource Management and Renderer Design
1 The Application Stage The Game Loop, Resource Management and Renderer Design Application Stage Responsibilities 2 Set up the rendering pipeline Resource Management 3D meshes Textures etc. Prepare data
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 informationGLSL 1: Basics. J.Tumblin-Modified SLIDES from:
GLSL 1: Basics J.Tumblin-Modified SLIDES from: Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico and
More informationShader Programs. Lecture 30 Subsections 2.8.2, Robb T. Koether. Hampden-Sydney College. Wed, Nov 16, 2011
Shader Programs Lecture 30 Subsections 2.8.2, 2.8.3 Robb T. Koether Hampden-Sydney College Wed, Nov 16, 2011 Robb T. Koether (Hampden-Sydney College) Shader Programs Wed, Nov 16, 2011 1 / 43 Outline 1
More informationYazhuo Liu Homework 3
Yazhuo Liu Homework 3 Write a shader program that renders a colored tetrahedron, which gradually shrinks to a point and expands back to its original shape. While it is shrinking and expanding, the color
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 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 informationThe Graphics Pipeline and OpenGL IV: Stereo Rendering, Depth of Field Rendering, Multi-pass Rendering!
! The Graphics Pipeline and OpenGL IV: Stereo Rendering, Depth of Field Rendering, Multi-pass Rendering! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 6! stanford.edu/class/ee267/!!
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 informationCS4621/5621 Fall Basics of OpenGL/GLSL Textures Basics
CS4621/5621 Fall 2015 Basics of OpenGL/GLSL Textures Basics Professor: Kavita Bala Instructor: Nicolas Savva with slides from Balazs Kovacs, Eston Schweickart, Daniel Schroeder, Jiang Huang and Pramook
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 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 informationProgrammable GPUs. Real Time Graphics 11/13/2013. Nalu 2004 (NVIDIA Corporation) GeForce 6. Virtua Fighter 1995 (SEGA Corporation) NV1
Programmable GPUs Real Time Graphics Virtua Fighter 1995 (SEGA Corporation) NV1 Dead or Alive 3 2001 (Tecmo Corporation) Xbox (NV2A) Nalu 2004 (NVIDIA Corporation) GeForce 6 Human Head 2006 (NVIDIA Corporation)
More informationSupplement to Lecture 22
Supplement to Lecture 22 Programmable GPUs Programmable Pipelines Introduce programmable pipelines - Vertex shaders - Fragment shaders Introduce shading languages - Needed to describe shaders - RenderMan
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 information