GLSL Applications: 2 of 2 Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011.

Slides:



Advertisements
Similar presentations
Exploration of advanced lighting and shading techniques
Advertisements

POST-PROCESSING SET09115 Intro Graphics Programming.
CS123 | INTRODUCTION TO COMPUTER GRAPHICS Andries van Dam © 1/16 Deferred Lighting Deferred Lighting – 11/18/2014.
Computer graphics & visualization Global Illumination Effects.
Real-Time Rendering Self-Shadowing
1 Understanding of OpenGL TA: Dong Hyun Jeong Instructor : Dr. Kalpathi Subramanian Texture Mapping.
TEXTURE MAPPING JEFF CHASTINE 1. TEXTURE MAPPING Applying an image (or a texture ) to geometry 2D images (rectangular) 3D images (volumetric – such as.
OpenGL Texture Mapping
MAT 594CM S2010Fundamentals of Spatial ComputingAngus Forbes Overview Today: - Make sure everyone is set up with an OpenGL environment - OpenGL basics:
GLSL Applications: 1 of 2 Joseph Kider Source: Patrick Cozzi – Spring 2011 University of Pennsylvania CIS Fall 2011.
GLSL Applications: 2 of 2 Patrick Cozzi University of Pennsylvania CIS Spring 2011.
Shadow Mapping RTR Team Why Shadows? 2 RTR Team 2009.
1 Lecture 12 Texture Mapping uploading of the texture to the video memory the application of the texture onto geometry.
OpenGL Texture Mapping April 16, Angel: Interactive Computer Graphics 3E © Addison-Wesley 2002 Basic Stragegy Three steps to applying a texture.
CS 4731: Computer Graphics Lecture 17: Texturing Emmanuel Agu.
Texture Mapping A way of adding surface details Two ways can achieve the goal:  Surface detail polygons: create extra polygons to model object details.
Texture Mapping. To add surface details… World of Warcraft, Blizzard Inc. More polygons (slow and hard to handle small details) Less polygons but with.
Computer Graphics Texture Mapping Eriq Muhammad Adams
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
2IV60 Computer Graphics set 10: Texture mapping Jack van Wijk TU/e.
Texture Mapping. Scope Buffers Buffers Various of graphics image Various of graphics image Texture mapping Texture mapping.
Texture Mapping. Introduction What is Texture Mapping? Types of Texture Mapping –1D, 2D and 3D SDL and OpenGL.
Texture Mapping Course: Computer Graphics Presented by Fan Chen
Computer Graphics Ben-Gurion University of the Negev Fall 2012.
09/09/03CS679 - Fall Copyright Univ. of Wisconsin Last Time Event management Lag Group assignment has happened, like it or not.
CS 4363/6353 TEXTURE MAPPING PART II. WHAT WE KNOW We can open image files for reading We can load them into texture buffers We can link that texture.
09/11/03CS679 - Fall Copyright Univ. of Wisconsin Last Time Graphics Pipeline Texturing Overview Cubic Environment Mapping.
CS380 LAB IV OpenGL Jonghyeob Lee Reference1. [OpenGL course slides by Rasmus Stenholt] Reference2. [
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Texture Mapping. 2 Motivation A typical modern graphics card can handle 10s of millions of polygons a second. How many individual blades of grass are.
OpenGL Texture Mapping. 2 Objectives Introduce the OpenGL texture functions and options.
CS 480/680 Computer Graphics OpenGL Texture Mapping Dr. Frederick C Harris, Jr. Fall 2011.
Texture Mapping Drawing Pictures on Polygons. Texture Mapping.
TEXTURES & OTHER GOODIES Computer Graphics. glTexCoord2f(...); + =
09/16/03CS679 - Fall Copyright Univ. of Wisconsin Last Time Environment mapping Light mapping Project Goals for Stage 1.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
TEXTURE CSE 410. Add Texture to Polygon glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D,texid); // here texid corresponds a bitmap image. glNormal3f(1.0,0.0,0.0);
Global Illumination. Local Illumination  the GPU pipeline is designed for local illumination  only the surface data at the visible point is needed to.
Real-Time Depth Buffer Based Ambient Occlusion
Mobile Graphics Patrick Cozzi University of Pennsylvania CIS Spring 2012.
1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping.
COMPUTER GRAPHICS CS 482 – FALL 2015 SEPTEMBER 29, 2015 RENDERING RASTERIZATION RAY CASTING PROGRAMMABLE SHADERS.
What are shaders? In the field of computer graphics, a shader is a computer program that runs on the graphics processing unit(GPU) and is used to do shading.
Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
MP3 Frequently Asked Questions (IN OFFICE HOURS).
Wilf Comp Ambient Occlusion + Order Independent Transparency POST CONCLUSIONS.
Ambient Occlusion Patrick Cozzi University of Pennsylvania CIS Fall 2013.
Texture Mapping. For Further Reading Angel 7 th Ed: ­Chapter 7: 7.3 ~ 7.9 Beginning WebGL: ­Chapter 3 2.
MP3.. Start at the very beginning. Almost. Either start from nothing yourself, or use the empty template for this MP. Run through the provided files are.
Texture Mapping CEng 477 Introduction to Computer Graphics.
Texture Mapping Fall, 2016.
Patrick Cozzi University of Pennsylvania CIS Fall 2013
Texture Mapping We can improve the realism of graphics models by mapping a texture pattern (image) onto the modeled object surface. We refer to this technique.
OpenGL Texture Mapping
Deferred Lighting.
Texture Mapping Part II
OpenGL Texture Mapping
Introduction to Computer Graphics with WebGL
Assignment 3b Q&A.
UMBC Graphics for Games
3D Game Programming Texture Mapping
Computer Graphics Practical Lesson 6
OpenGL Texture Mapping
Patrick Cozzi University of Pennsylvania CIS Fall 2012
OpenGL Texture Mapping
Programming Textures Lecture 15 Fri, Sep 28, 2007.
Texture Mapping Ed Angel Professor Emeritus of Computer Science
Frame Buffer Applications
CS 480/680 (Fall 2018) Part 2: Texture Loading
Frame Buffers Fall 2018 CS480/680.
Presentation transcript:

GLSL Applications: 2 of 2 Patrick Cozzi University of Pennsylvania CIS Spring 2011

Administrivia Assignment 2 due today  11:59pm on Blackboard Assignment 3  handed out today  Due Wednesday, 02/09 at 11:59pm

Agenda Finish last Monday’s slides  VBO Layout  OpenGL Multithreading Today’s slides  OpenGL Textures and Multitexturing  OpenGL Framebuffers and Deferred Shading  Ambient Occlusion

Textures unsigned char *pixels = //... GLuint id; glGenTextures(1, &id); glBindTexture(GL_TEXTURE_2D, id); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_BGRA, GL_UNSIGNED_BYTE, pixels); //... glDeleteTextures(1, &id);

Textures unsigned char *pixels = //... GLuint id; glGenTextures(1, &id); glBindTexture(GL_TEXTURE_2D, id); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_BGRA, GL_UNSIGNED_BYTE, pixels); //... glDeleteTextures(1, &id); Pixels for an image in system memory.

Textures unsigned char *pixels = //... GLuint id; glGenTextures(1, &id); glBindTexture(GL_TEXTURE_2D, id); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_BGRA, GL_UNSIGNED_BYTE, pixels); //... glDeleteTextures(1, &id); Standard business.

Textures unsigned char *pixels = //... GLuint id; glGenTextures(1, &id); glBindTexture(GL_TEXTURE_2D, id); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_BGRA, GL_UNSIGNED_BYTE, pixels); //... glDeleteTextures(1, &id); I hate global state. You should too. What is the alternative design?

Textures unsigned char *pixels = //... GLuint id; glGenTextures(1, &id); glBindTexture(GL_TEXTURE_2D, id); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_BGRA, GL_UNSIGNED_BYTE, pixels); //... glDeleteTextures(1, &id); Sampler state. More info to follow.

Textures unsigned char *pixels = //... GLuint id; glGenTextures(1, &id); glBindTexture(GL_TEXTURE_2D, id); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_BGRA, GL_UNSIGNED_BYTE, pixels); //... glDeleteTextures(1, &id); Transfer from system memory to driver-controlled (likely, GPU) memory. Does it need to block?

Textures unsigned char *pixels = //... GLuint id; glGenTextures(1, &id); glBindTexture(GL_TEXTURE_2D, id); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_BGRA, GL_UNSIGNED_BYTE, pixels); //... glDeleteTextures(1, &id); Pixel data format and datatype

Textures unsigned char *pixels = //... GLuint id; glGenTextures(1, &id); glBindTexture(GL_TEXTURE_2D, id); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_BGRA, GL_UNSIGNED_BYTE, pixels); //... glDeleteTextures(1, &id); Internal (GPU) texture format

Texture Wrap Parameters Images from: GL_MIRRORED_REPEAT GL_REPEAT GL_CLAMP Set with:  glTexParameteri ()

Multitexturing Using multiple textures in the same rendering pass Each is bound to a different texture unit and accessed with a different sampler uniform in GLSL

Multitexturing: Light Map Recall our Light Map example: x = Precomputed lightSurface color “lit” surface

Multitexturing: Light Map uniform sampler2D lightMap; uniform sampler2D surfaceMap; in vec2 fs_TxCoord; in vec3 out_Color; void main(void) { float intensity = texture(lightMap, fs_TxCoord).r; vec3 color = texture(surfaceMap, fs_TxCoord).rgb; out_Color = intensity * color; } Each texture is accessed with a different sampler

Multitexturing: Light Map uniform sampler2D lightMap; uniform sampler2D surfaceMap; in vec2 fs_TxCoord; in vec3 out_Color; void main(void) { float intensity = texture(lightMap, fs_TxCoord).r; vec3 color = texture(surfaceMap, fs_TxCoord).rgb; out_Color = intensity * color; } Pass the sampler to texture() to read from a particular texture

Multitexturing: Terrain How was this rendered? Image courtesy of A K Peters, Ltd.

Multitexturing: Terrain First hint: two textures Images courtesy of A K Peters, Ltd. GrassStone

Multitexturing: Terrain Second hint: terrain slope Image courtesy of A K Peters, Ltd.

Multitexturing: Terrain Second hint: terrain slope Image courtesy of A K Peters, Ltd. 0 is flat 1 is steep

Multitexturing: Terrain Third and final hint: a blend ramp Image courtesy of A K Peters, Ltd.

Multitexturing: Terrain uniform sampler2D grass; uniform sampler2D stone; uniform sampler2D blendRamp; in vec3 out_Color; void main(void) { //... out_Color = intensity * mix( texture(grass, repeatTextureCoordinate).rgb, texture(stone, repeatTextureCoordinate).rgb, texture(u_blendRamp, vec2(0.5, slope)).r); }

Multitexturing: Terrain uniform sampler2D grass; uniform sampler2D stone; uniform sampler2D blendRamp; in vec3 out_Color; void main(void) { //... out_Color = intensity * mix( texture(grass, repeatTextureCoordinate).rgb, texture(stone, repeatTextureCoordinate).rgb, texture(u_blendRamp, vec2(0.5, slope)).r); } Three samplers blendRamp could be 1D; it is just 1xn

Multitexturing: Terrain uniform sampler2D grass; uniform sampler2D stone; uniform sampler2D blendRamp; in vec3 out_Color; void main(void) { //... out_Color = intensity * mix( texture(grass, repeatTextureCoordinate).rgb, texture(stone, repeatTextureCoordinate).rgb, texture(u_blendRamp, vec2(0.5, slope)).r); } Use terrain slope to look up a blend value in the range [0, 1]

Multitexturing: Terrain uniform sampler2D grass; uniform sampler2D stone; uniform sampler2D blendRamp; in vec3 out_Color; void main(void) { //... out_Color = intensity * mix( texture(grass, repeatTextureCoordinate).rgb, texture(stone, repeatTextureCoordinate).rgb, texture(u_blendRamp, vec2(0.5, slope)).r); } Linearly blend between grass and stone

Multitexturing: Globe How will you render this? Imagery from

Multitexturing: Globe How will you render this? Imagery from Day texture Night texture

Multitexturing: Globe Imagery from Day TextureDay Night

Multitexturing: Globe Videos  Night and Day Night and Day  Clouds Clouds  Specularity Specularity

Framebuffer Objects (FBOs)  Allow fragment shader to write to one or more off-screen buffers  Can then use the off-screen buffer as a texture in a later rendering pass  Allows render to texture  Don’t worry about the OpenGL API; we’ve already coded it for you

Framebuffer Objects (FBOs) FBOs are lightweight containers of textures FBO Depth Texture Color Texture 0 Color Texture 1 …

Framebuffer Objects (FBOs) FBO use case: post processing effects  Render scene to FBO with depth and color attachment  Render a viewport-aligned quad with texture that was the color attachment and apply effect  How would you design a post processing framework?

Deferred Shading FBO use case: deferred shading  Render scene in two passes 1 st pass: Visibility tests 2 nd pass: Shading

Deferred Shading 1 st Pass: Render geometry into G-Buffers Fragment ColorsNormals DepthEdge Weight Images from

Deferred Shading 2 nd pass: shading == post processing effects Render viewport-aligned quads that read from G-Buffers Objects are no longer needed

Deferred Shading Light accumulation result Image from

Deferred Shading What are the benefits:  Shading and depth complexity?  Memory requirements?  Memory bandwidth?  Material and light decoupling?

Ambient Occlusion Ambient Occlusion (AO)  "shadowing of ambient light“  "darkening of the ambient shading contribution“ Image from Bavoil and Sainz.

Ambient Occlusion  "the crevices of the model are realistically darkened, and the exposed parts of the model realistically receive more light and are thus brighter“  "the soft shadow generated by a sphere light of uniform intensity surrounding the scene"

Ambient Occlusion Image from Iñigo Quílez.

Ambient Occlusion Images courtesy of A K Peters, Ltd. Evenly lit from all directions Ambient Occlusion Global Illumination

Ambient Occlusion Image from Bavoil and Sainz. "the integral of the occlusion contributed from inside a hemisphere of a given radius R, centered at the current surface point P and oriented towards the normal n at P"

Object Space Ambient Occlusion AO does not depend on light direction Precompute AO for static objects using ray casting  How many rays?  How far do they go?  Local objects? Or all objects?

Object Space Ambient Occlusion Image courtesy of A K Peters, Ltd. Cosine weight rays or use importance sampling: cosine distribute number of rays

Object Space Ambient Occlusion Depends on scene complexity Stored in textures or vertices How can we  Support dynamic scenes  Be independent of scene complexity

Screen Space Ambient Occlusion Apply AO as a post processing effect using a combination of depth, normal, and position buffers Not physically correct but plausible Visual quality depends on  Screen resolution  Number of buffers  Number of samples

Depth Buffer

Normal Buffer

View Space Eye Position Buffer

Screen Space Ambient Occlusion Images courtesy of A K Peters, Ltd.

Screen Space Ambient Occlusion Image from Martin Mittring.

Screen Space Ambient Occlusion Image from Martin Mittring.

Screen Space Ambient Occlusion Image from Mike Pan. Blur depth buffer Subtract it from original depth buffer Scale and clamp image, then subtract from original Superficially resembles AO but fast