CS452/552; EE465/505. Shadow Mapping in WebGL
|
|
- Stephany Hubbard
- 5 years ago
- Views:
Transcription
1 CS452/552; EE465/505 Shadow Mapping in WebGL
2 Outline! Shadow Mapping in WebGL Switching Shaders Framebuffer Objects (FBO) Read: Angel, Chapter 7: 7.12 Framebuffer Objects WebGL Programming Guide: Chapter 10 Project#2 posted due: April 23rd
3 Examples: WebGL Programming Guide, Chapter 10 Shadow.html Shadow_highp.html shadow of red triangle cast onto slanted white rectangle same, but uses more precision (fragment shader changed)
4 Examples: WebGL Programming Guide, Chapter 10 Shadow_highp_sphere.html high precision shadow of red triangle cast onto sphere
5 Recap: Shadow Mapping Concept! Basic Idea: the pixels seen by the light are lit all other pixels are in shadow
6 Recap: Shadow Mapping Concept! Two pass algorithm: 1 st pass: render the scene from the light s point of view and remember which pixels the light has seen the result is a shadow map essentially a 2D function indicating the depth of the closest pixels to the light 2 nd pass: render the scene as the camera sees it if we remembered that pixel o gl_fragcolor = ambient+diffuse+specular else o gl_fragcolor = ambient
7 Visualizing Shadow Mapping source: Mark Killgard, NVIDIA, GDC, 2001
8 Visualizing Shadow Mapping source: Mark Killgard, NVIDIA, GDC, 2001
9 Visualizing Shadow Mapping source: Mark Killgard, NVIDIA, GDC, 2001
10 Visualizing Shadow Mapping source: Mark Killgard, NVIDIA, GDC, 2001
11 Example1: cast shadow of red triangle shadow of red triangle cast onto slanted white rectangle full program is in Shadow.html and Shadow.js note: there are two vertex shaders and two fragment shaders source: WebGL Programming Guide, Chapter 10
12 Some techniques we ll need! Switching Shaders How to use different shaders on different objects example program: ProgramObject.js we ll use one set of shaders to generate the shadow map and another set to render the objects! FrameBuffer Objects (FBO) Can create a FBO to save content off-screen example program: FramebufferObject.js we ll use a framebuffer to store the shadow map 12
13 Example: switching shaders cube on left rendered in a single color with one set of shaders cube on right rendered with a texture image with another set of shaders full program is in ProgramObject.html and ProgramObject.js source: WebGL Programming Guide, Chapter 10
14 Assign Buffer Object to Attribute Variable JavaScript gl.array_buffer attribute variable gl.enablevertex AttribArray( ) Buffer Object Vertex Shader data repeat for Fragment Shader
15 Example: Switching Shaders 1. Prepare the shaders to draw an object shaded with a single color 2. Prepare the shaders to draw an object with a texture image 3. Create a program object that has the shaders from step1 with createprogram() 4. Create another program object that has the shaders from step2 with createprogram() 5. Specify the program object created by step 3 with gl.useprogram 6. Enable the buffer object after assigning it to the attribute variables 7. Draw a cube (in a single color) 8. Specify the program object created by step 4 with gl.useprogram 9. Enable the buffer object after assigning it to the attribute variables 10. Draw a cube (texture is pasted) 15
16 Example: Switching Shaders // ProgramObject.js // vertex shader for a single color var SOLID_VSHADER_SOURCE =... // fragment shader for a single color var SOLID_FSHADER_SOURCE =... // vertex shader for a texture drawing var TEXTURE_VSHADER_SOURCE =... // fragment shader for a texture drawing var TEXTURE_FSHADER_SOURCE =...
17 Switching shaders, continued function main() { // Initialize shaders var solidprogram = createprogram(gl, SOLID_VSHADER_SOURCE, SOLID_FSHADER_SOURCE); var texprogram = createprogram(gl, TEXTURE_VSHADER_SOURCE, TEXTURE_FSHADER_SOURCE); // Get the variables in the program object for single color solidprogram.a_position = gl.getattriblocation(solidprogram, 'a_position'); solidprogram.a_normal = gl.getattriblocation(solidprogram, a_normal'); // Get the variables in the program object for the texture texprogram.a_position = gl.getattriblocation(texprogram, 'a_position'); texprogram.a_normal = gl.getattriblocation(texprogram, a_normal ); texprogram.u_sampler = gl.getuniformlocation(texprogram, u_sampler ) // set vertex information var cube = initvertexbuffers(gl, solidprogram); // set texture var texture = inittextures(gl, texprogram);
18 Switching shaders, continued var currentangle = 0.0; var tick = function() { currentangle = animate(currentangle); // Draw the cube in the single color drawsolidcube(gl, solidprogram, cube, -2.0, currentangle, viewprojmatrix); // Draw the cube with texture drawtexcube(gl, texprogram, cube, texture, 2.0, currentangle, viewprojmatrix); window.requestanimationframe(tick, canvas); }; tick(); } // end of main
19 Switching shaders, continued function initvertexbuffers(gl, program) { var vertices = new Float32Array{[ // vertex coords var normals = new Float32Array{[ // normals var texcoords = new Float32Array{[ // texture coords var indices = new Uint8Array{[ // indices for vertices // use Object to return buffer objects var o = new Object(); // write vertex information to buffer objects o.vertexbuffer = initarraybuffer o.normalbuffer = initarraybuffer o.texcoordbuffer = initarraybuffer o.indexbuffer = initelementarraybuffer } o.numindices = indices.length; return o;
20 Switching shaders, continued function drawsolidcube(gl, program, o, x, angle, viewprojmatrix) { // use the program object made from the solid shaders gl.useprogram(program); // Assign the buffer objects and enable the assignment initattributevariable(gl, program.a_position, o.vertexbuffer); initattributevariable(gl, program.a_normal, o.normalbuffer); gl.bindbuffer(gl.element_array_buffer, o.indexbuffer); } drawcube(gl, program, o, x, angle, viewprojmatrix);
21 Switching shaders, continued // Assign the buffer objects and enable the assignment function initattributevariable(gl, a_attribute, buffer{ gl.bindbuffer(gl.array_buffer, buffer); gl.vertexattribpointer(a_attribute, buffer.num, buffer.type, false, 0, 0); } gl.enablevertexattribarray(a_attribute); function drawcube(gl, program, o, x, angle, viewprojmatrix){ // calculate a model matrix // calculate transformation matrix for normal // calculate a model view projection matrix gl.drawelements(gl.triangles, o.numindices, o.indexbuffer.type, 0); }
22 Switching shaders, continued function drawtexcube(gl, program, o, x, angle, viewprojmatrix){ // use the program object made from the texture shaders gl.useprogram(program); // Assign the buffer objects and enable the assignment initattributevariable(gl, program.a_position, o.vertexbuffer); initattributevariable(gl, program.a_normal, o.normalbuffer); initattributevariable(gl, program.a_texcoord, o.texcoordbufferbuffer); gl.bindbuffer(gl.element_array_buffer, o.indexbuffer); // bind texture object to texture unit 0 gl.activetexture(gl.texture0); gl.bindtexture(gl.texture_2d, texture); } drawcube(gl, program, o, x, angle, viewprojmatrix);
23 Example: using FrameBuffer objects maps a rotating cube drawn with WebGL to a rectangle as a texture object full program is in FramebufferObject.html and FramebufferObject.js source: WebGL Programming Guide, Chapter 10
24 Recap: WebGL Frame Buffer (Color buffer) Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
25 Where are the Buffers?! HTML5 Canvas Default front and back color buffers Under control of local window system Physically on graphics card! Depth buffer also on graphics card! Stencil buffer Holds masks! Most RGBA buffers 8 bits per component! Latest are floating point (IEEE) Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
26 Framebuffers & Renderbuffers! By default, WebGL draws using a color buffer, and when using hidden surface removal, a depth buffer. The final image is kept in the color buffer.! A framebuffer object is an alternative buffer content drawn in a frame buffer is not directly displayed on the <canvas> can use if you want to perform different types of processing before displaying the drawn content known as offscreen drawing 26
27 Framebuffer Objects! Framebuffer Objects (FBOs) are buffers that are created by the application Not under control of window system Cannot be displayed Can attach a renderbuffer to a FBO and can render off screen into the attached buffer Attached buffer can then be detached and used as a texture map for an on-screen render to the default frame buffer Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
28 WebGL System JavaScript function main() { var gl = getwebgl Context initshaders ( ); } per-vertex processing Vertex Shader per-fragment processing Fragment Shader WebGL System Color Buffer
29 Framebuffer Objects JavaScript function main() { var gl = getwebgl Context initshaders ( ); } per-vertex processing Vertex Shader per-fragment processing Fragment Shader WebGL System Framebuffer Object Color Buffer
30 Framebuffer Objects! FBO supports substitutes for the color buffer, the depth buffer and stencils Framebuffer Object color attachment depth attachment stencil attachment Texture Object drawing area Texture Object drawing area Renderbuffer Object drawing area Renderbuffer Object drawing area
31 Framebuffer Objects! WebGL supports two types of attachments: texture objects and renderbuffer objects Framebuffer Object color attachment depth attachment stencil attachment Texture Object drawing area Texture Object drawing area Renderbuffer Object drawing area Renderbuffer Object drawing area
32 Framebuffer Objects! Note: drawing is not carried out in the framebuffer itself, but in the drawing areas of the attachment Framebuffer Object color attachment depth attachment stencil attachment Texture Object drawing area Texture Object drawing area Renderbuffer Object drawing area Renderbuffer Object drawing area
33 Framebuffer Objects! To use the content drawn into a framebuffer object as a texture object, need the following configuration Framebuffer Object color attachment depth attachment stencil attachment Texture Object drawing area Renderbuffer Object drawing area
34 Render-to-Texture (8 Steps) 1. Create a framebuffer object gl.createframebuffer 2. Create a texture object and set its size and parameters gl.createtexture, gl.bindtexture, gl.teximage2d, gl.parameteri 3. Create a renderbuffer object gl.createrenderbuffer 4. Bind the renderbuffer object to the target and set its size gl.bindrenderbuffer, gl.renderbufferstorage
35 Render-to-Texture Steps (cont) 5. Attach the texture object to the color attachment of the framebuffer object gl.bindframebuffer, gl.framebuffertexture2d 6. Attach the renderbuffer object to the depth attachment of the framebuffer object gl.framebufferrenderbuffer 7. Check whether the frame buffer object is configured correctly gl.checkframebufferstatus 8. Draw using the frame buffer object gl.bindframebuffer
36 FramebufferObject.js var OFFSCREEN_WIDTH = 2048, OFFSCREEN_HEIGHT = 2048; function main() { var cube = initvertexbuffersforcube(gl); var plane = initvertexbuffersforplane(gl); var texture = inittextures(gl); // Initialize FBO var fbo = initframebufferobject(gl); var viewprojmatrix = // for color buffer var viewprojmatrixfbo = // for FBO
37 FramebufferObject.js, continued function initframebufferobject(gl) { var framebuffer, texture, depthbuffer; // Create a framebuffer object (FBO) framebuffer = gl.createframebuffer(); // Create a texture object and set its // size and parameters texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.unsigned_byte, null); gl.texparameteri( // store the texture object in the FBO framebuffer.texture = texture;
38 FramebufferObject.js, continued // function initframebufferobject, cont. // Create a renderbuffer object and set // its size and parameters depthbuffer = gl.createrenderbuffer(); gl.bindrenderbuffer(gl.renderbuffer, depthbuffer); gl.renderbufferstorage(gl.renderbuffer, gl.depth_component16, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT); // attach the texture and framebuffer to FBO gl.bindframebuffer(gl.framebuffer,framebuffer); gl.framebuffertexture2d(gl.framebuffer, gl.color_attachment0,gl.texture_2d,texture, 0); gl.framebufferrenderbuffer(gl.framebuffer, gl.depth_attachment,gl.renderbuffer,depthbuffer); // check the FBO configuration var e = gl.checkframebufferstatus(gl.framebuffer);
39 Draw using the framebuffer iobject function draw(gl, canvas, fbo, plane, cube, angle, texture, viewprojmatrix, viewprojmatrixfbo) { gl.bindframebuffer(gl.framebuffer, fbo); gl.viewport(0,0,offscreen_width,offscreen_height); gl.clearcolor gl.clear //color buffer bit and depth buffer bit // draw the cube drawtexturedcube(gl,gl.program,cube,angle,texture, viewprojmatrixfbo); gl.bindframebuffer(gl.framebuffer, null); // detach gl.viewport(0, 0, canvas.width, canvas.height); gl.clearcolor.. gl.clear //color buffer bit and depth buffer bit // draw the plane drawtexturedplane(gl, gl.program, plane, angle, fbo.texture, viewprojmatrix);
CS452/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 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 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 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 informationCS 179 GPU Programming
CS179: GPU Programming Lecture 7: Render to Texture Lecture originally by Luke Durant, Russell McClellan, Tamas Szalay 1 Today: Render to Texture Render to texture in OpenGL Framebuffers and renderbuffers
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 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 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 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 informationDEFERRED RENDERING STEFAN MÜLLER ARISONA, ETH ZURICH SMA/
DEFERRED RENDERING STEFAN MÜLLER ARISONA, ETH ZURICH SMA/2013-11-04 DEFERRED RENDERING? CONTENTS 1. The traditional approach: Forward rendering 2. Deferred rendering (DR) overview 3. Example uses of DR:
More informationTexturing. Slides done bytomas Akenine-Möller and Ulf Assarsson Department of Computer Engineering Chalmers University of Technology
Texturing Slides done bytomas Akenine-Möller and Ulf Assarsson Department of Computer Engineering Chalmers University of Technology 1 Texturing: Glue n-dimensional images onto geometrical objects l Purpose:
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 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 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 informationPixels and Buffers. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science
Pixels and Buffers CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science 1 Objectives Introduce additional OpenGL buffers Learn to read from / write to buffers Introduce
More informationTexturing. Slides done by Tomas Akenine-Möller and Ulf Assarsson Department of Computer Engineering Chalmers University of Technology
Texturing Slides done by Tomas Akenine-Möller and Ulf Assarsson Department of Computer Engineering Chalmers University of Technology 1 Texturing: Glue n-dimensional images onto geometrical objects l Purpose:
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 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 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 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 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. Clipping & Scan Conversion
CS452/552; EE465/505 Clipping & Scan Conversion 3-31 15 Outline! From Geometry to Pixels: Overview Clipping (continued) Scan conversion Read: Angel, Chapter 8, 8.1-8.9 Project#1 due: this week Lab4 due:
More informationComputer Graphics (CS 543) Lecture 10: Soft Shadows (Maps and Volumes), Normal and Bump Mapping
Computer Graphics (CS 543) Lecture 10: Soft Shadows (Maps and Volumes), Normal and Bump Mapping Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) Shadow Buffer Theory Observation:
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 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. 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 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 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 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 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 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 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 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 informationFramebuffer Objects. Emil Persson ATI Technologies, Inc.
Framebuffer Objects Emil Persson ATI Technologies, Inc. epersson@ati.com Introduction Render-to-texture is one of the most important techniques in real-time rendering. In OpenGL this was traditionally
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 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 informationSUMMARY. CS380: Introduction to Computer Graphics Texture Mapping Chapter 15. Min H. Kim KAIST School of Computing 18/05/03.
CS380: Introduction to Computer Graphics Texture Mapping Chapter 15 Min H. Kim KAIST School of Computing Materials SUMMARY 2 1 Light blob from PVC plastic Recall: Given any vector w (not necessarily of
More informationOpenCL / OpenGL Texture Interoperability: An Image Blurring Case Study
1 OpenCL / OpenGL Texture Interoperability: An Image Blurring Case Study Mike Bailey mjb@cs.oregonstate.edu opencl.opengl.rendertexture.pptx OpenCL / OpenGL Texture Interoperability: The Basic Idea 2 Application
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 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 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 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 informationOrthogonal Projection Matrices. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
Orthogonal Projection Matrices 1 Objectives Derive the projection matrices used for standard orthogonal projections Introduce oblique projections Introduce projection normalization 2 Normalization Rather
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 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 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 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 informationShadows in Computer Graphics. by Björn Kühl im/ve University of Hamburg, Germany
Shadows in Computer Graphics by Björn Kühl im/ve University of Hamburg, Germany Importance of Shadows Shadows provide cues to the position of objects casting and receiving shadows to the position of the
More informationlast time put back pipeline figure today will be very codey OpenGL API library of routines to control graphics calls to compile and load shaders
last time put back pipeline figure today will be very codey OpenGL API library of routines to control graphics calls to compile and load shaders calls to load vertex data to vertex buffers calls to load
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 information[175 points] The purpose of this assignment is to give you practice with shaders in OpenGL.
CPSC 441 Computer Graphics Assignment 5 due 11/20/18 (11:59 p.m.) [175 points] The purpose of this assignment is to give you practice with shaders in OpenGL. Part 1: First, download and get the code itself
More informationRecall: Indexing into Cube Map
Recall: Indexing into Cube Map Compute R = 2(N V)N-V Object at origin Use largest magnitude component of R to determine face of cube Other 2 components give texture coordinates V R Cube Map Layout Example
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 Performances and Flexibility. Visual Computing Laboratory ISTI CNR, Italy
OpenGL Performances and Flexibility Visual Computing Laboratory ISTI CNR, Italy The Abstract Graphics Pipeline Application 1. The application specifies vertices & connectivity. Vertex Processing 2. The
More informationIntroduction to Computer Graphics with WebGL
1 Introduction to Computer Graphics with WebGL Ed Angel Lighting in WebGL WebGL lighting Application must specify - Normals - Material properties - Lights State-based shading functions have been deprecated
More informationGPU Memory Model. Adapted from:
GPU Memory Model Adapted from: Aaron Lefohn University of California, Davis With updates from slides by Suresh Venkatasubramanian, University of Pennsylvania Updates performed by Gary J. Katz, University
More informationBuilding Models. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science
Building Models CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science 1 Objectives Introduce simple data structures for building polygonal models - Vertex lists - Edge
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 informationAn Interactive Introduction to OpenGL Programming
Define a buffer by its spatial resolution (n n x m) ) and its depth (or precision) k,, the number of bits/pixel Buffers pixel Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015 2
More informationRasterization Overview
Rendering Overview The process of generating an image given a virtual camera objects light sources Various techniques rasterization (topic of this course) raytracing (topic of the course Advanced Computer
More informationCS 381 Computer Graphics, Fall 2008 Midterm Exam Solutions. The Midterm Exam was given in class on Thursday, October 23, 2008.
CS 381 Computer Graphics, Fall 2008 Midterm Exam Solutions The Midterm Exam was given in class on Thursday, October 23, 2008. 1. [4 pts] Drawing Where? Your instructor says that objects should always be
More informationComputer Graphics - Treasure Hunter
Computer Graphics - Treasure Hunter CS 4830 Dr. Mihail September 16, 2015 1 Introduction In this assignment you will implement an old technique to simulate 3D scenes called billboarding, sometimes referred
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 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 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 informationCS 418: Interactive Computer Graphics. Basic Shading in WebGL. Eric Shaffer
CS 48: Interactive Computer Graphics Basic Shading in WebGL Eric Shaffer Some slides adapted from Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 205 Phong Reflectance Model Blinn-Phong
More informationCMSC427 Advanced shading getting global illumination by local methods. Credit: slides Prof. Zwicker
CMSC427 Advanced shading getting global illumination by local methods Credit: slides Prof. Zwicker Topics Shadows Environment maps Reflection mapping Irradiance environment maps Ambient occlusion Reflection
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 informationCS 4620 Program 3: Pipeline
CS 4620 Program 3: Pipeline out: Wednesday 14 October 2009 due: Friday 30 October 2009 1 Introduction In this assignment, you will implement several types of shading in a simple software graphics pipeline.
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 informationDeferred Rendering Due: Wednesday November 15 at 10pm
CMSC 23700 Autumn 2017 Introduction to Computer Graphics Project 4 November 2, 2017 Deferred Rendering Due: Wednesday November 15 at 10pm 1 Summary This assignment uses the same application architecture
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 informationShadow Rendering. CS7GV3 Real-time Rendering
Shadow Rendering CS7GV3 Real-time Rendering Global Illumination The incoming radiance L i (p,l) at some point p is the outgoing L o (r(p,l)-l) from another point A Recursive Term r(r(p,l), l ) r(r(r(p,l),
More informationTDA362/DIT223 Computer Graphics EXAM (Same exam for both CTH- and GU students)
TDA362/DIT223 Computer Graphics EXAM (Same exam for both CTH- and GU students) Saturday, January 13 th, 2018, 08:30-12:30 Examiner Ulf Assarsson, tel. 031-772 1775 Permitted Technical Aids None, except
More informationScreen Space Ambient Occlusion TSBK03: Advanced Game Programming
Screen Space Ambient Occlusion TSBK03: Advanced Game Programming August Nam-Ki Ek, Oscar Johnson and Ramin Assadi March 5, 2015 This project report discusses our approach of implementing Screen Space Ambient
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 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 informationTSBK03 Screen-Space Ambient Occlusion
TSBK03 Screen-Space Ambient Occlusion Joakim Gebart, Jimmy Liikala December 15, 2013 Contents 1 Abstract 1 2 History 2 2.1 Crysis method..................................... 2 3 Chosen method 2 3.1 Algorithm
More informationLecture 17: Shadows. Projects. Why Shadows? Shadows. Using the Shadow Map. Shadow Maps. Proposals due today. I will mail out comments
Projects Lecture 17: Shadows Proposals due today I will mail out comments Fall 2004 Kavita Bala Computer Science Cornell University Grading HW 1: will email comments asap Why Shadows? Crucial for spatial
More informationCS 354R: Computer Game Technology
CS 354R: Computer Game Technology Texture and Environment Maps Fall 2018 Texture Mapping Problem: colors, normals, etc. are only specified at vertices How do we add detail between vertices without incurring
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 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 informationCS 464 Review. Review of Computer Graphics for Final Exam
CS 464 Review Review of Computer Graphics for Final Exam Goal: Draw 3D Scenes on Display Device 3D Scene Abstract Model Framebuffer Matrix of Screen Pixels In Computer Graphics: If it looks right then
More informationWater Simulation on WebGL and Three.js
The University of Southern Mississippi The Aquila Digital Community Honors Theses Honors College 5-2013 Water Simulation on WebGL and Three.js Kerim J. Pereira Follow this and additional works at: http://aquila.usm.edu/honors_theses
More informationCG Programming: 3D Texturing
CG Programming: 3D Texturing 3D texturing is used as image based rendering Applications 3D texture mapping for complicate geometric objects It generates highly natural visual effects in which objects appear
More informationCS452/552; EE465/505. Lighting & Shading
CS452/552; EE465/505 Lighting & Shading 2-17 15 Outline! More on Lighting and Shading Read: Angel Chapter 6 Lab2: due tonight use ASDW to move a 2D shape around; 1 to center Local Illumination! Approximate
More informationCS452/552; EE465/505. Intro to Lighting
CS452/552; EE465/505 Intro to Lighting 2-10 15 Outline! Projection Normalization! Introduction to Lighting (and Shading) Read: Angel Chapter 5., sections 5.4-5.7 Parallel Projections Chapter 6, sections
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 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 informationCS 5610 / Spring Depth Buffering and Hidden Surface Removal
Define a buffer by its spatial resolution (n x m) and its depth (or precision) k, the number of bits/pixel Buffers pixel Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015 2 Depth
More informationProgramming Guide. Aaftab Munshi Dan Ginsburg Dave Shreiner. TT r^addison-wesley
OpenGUES 2.0 Programming Guide Aaftab Munshi Dan Ginsburg Dave Shreiner TT r^addison-wesley Upper Saddle River, NJ Boston Indianapolis San Francisco New York Toronto Montreal London Munich Paris Madrid
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 informationCS179: GPU Programming
CS179: GPU Programming Lecture 4: Textures Original Slides by Luke Durant, Russel McClellan, Tamas Szalay Today Recap Textures What are textures? Traditional uses Alternative uses Recap Our data so far:
More informationThe Graphics Pipeline
The Graphics Pipeline Ray Tracing: Why Slow? Basic ray tracing: 1 ray/pixel Ray Tracing: Why Slow? Basic ray tracing: 1 ray/pixel But you really want shadows, reflections, global illumination, antialiasing
More informationPipeline Operations. CS 4620 Lecture Steve Marschner. Cornell CS4620 Spring 2018 Lecture 11
Pipeline Operations CS 4620 Lecture 11 1 Pipeline you are here APPLICATION COMMAND STREAM 3D transformations; shading VERTEX PROCESSING TRANSFORMED GEOMETRY conversion of primitives to pixels RASTERIZATION
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 informationVGP353 Week 2. Agenda: Assignment #1 due Introduce shadow maps. Differences / similarities with shadow textures Added benefits Potential problems
VGP353 Week 2 Agenda: Assignment #1 due Introduce shadow maps Differences / similarities with shadow textures Added benefits Potential problems Shadow Textures Shadow textures have a number of faults:
More informationGeneral Purpose computation on GPUs. Liangjun Zhang 2/23/2005
General Purpose computation on GPUs Liangjun Zhang 2/23/2005 Outline Interpretation of GPGPU GPU Programmable interfaces GPU programming sample: Hello, GPGPU More complex programming GPU essentials, opportunity
More information