CHAPTER 10 Alpha Blending and Fog © 2008 Cengage Learning EMEA.

Slides:



Advertisements
Similar presentations
15.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 15 – Visible Surfaces and Shadows.
Advertisements

8.1si31_2001 SI31 Advanced Computer Graphics AGR Lecture 8 Polygon Rendering.
Compositing and Blending Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics.
CS123 | INTRODUCTION TO COMPUTER GRAPHICS Andries van Dam © 1/16 Deferred Lighting Deferred Lighting – 11/18/2014.
Computer Graphic Creator: Mohsen Asghari Session 2 Fall 2014.
Texture Mapping. Texturing  process that modifies the appearance of each point on a surface using an image or function  any aspect of appearance can.
Week 7 - Monday.  What did we talk about last time?  Specular shading  Aliasing and antialiasing.
CHAPTER 12 Height Maps, Hidden Surface Removal, Clipping and Level of Detail Algorithms © 2008 Cengage Learning EMEA.
Compositing and Blending Mohan Sridharan Based on slides created by Edward Angel 1 CS4395: Computer Graphics.
Compositing and Blending - Chapter 8 modified by Ray Wisman Ed Angel Professor of Computer Science, Electrical and Computer Engineering,
Image Compositing Angel 8.11 Angel: Interactive Computer Graphics5E © Addison-Wesley
Real-time Dynamic HDR Based Lighting in a Static Environment Marcus Hennix Daniel Johansson Gunnar Johansson Martin Wassborn.
Graphics File Formats. 2 Graphics Data n Vector data –Lines –Polygons –Curves n Bitmap data –Array of pixels –Numerical values corresponding to gray-
CHAPTER 9 Lighting © 2008 Cengage Learning EMEA. LEARNING OBJECTIVES In this chapter you will learn about: – –Light sources – –Point lights – –Spotlights.
GPU Graphics Processing Unit. Graphics Pipeline Scene Transformations Lighting & Shading ViewingTransformations Rasterization GPUs evolved as hardware.
Computer Graphics: Programming, Problem Solving, and Visual Communication Steve Cunningham California State University Stanislaus and Grinnell College.
Data starts with width and height of image Then an array of pixel values (colors) The number of elements in this array is width times height Colors can.
SET09115 Intro Graphics Programming
Shadows Computer Graphics. Shadows Shadows Extended light sources produce penumbras In real-time, we only use point light sources –Extended light sources.
Digital Images The digital representation of visual information.
Computer Graphics: Programming, Problem Solving, and Visual Communication Steve Cunningham California State University Stanislaus and Grinnell College.
GPU Programming Robert Hero Quick Overview (The Old Way) Graphics cards process Triangles Graphics cards process Triangles Quads.
CHAPTER 4 Window Creation and Control © 2008 Cengage Learning EMEA.
Programmable Pipelines. Objectives Introduce programmable pipelines ­Vertex shaders ­Fragment shaders Introduce shading languages ­Needed to describe.
Tools for Raster Displays CVGLab Goals of the Chapter To describe pixmaps and useful operations on them. To develop tools for copying, scaling, and rotating.
I-1 Steps of Image Generation –Create a model of the objects –Create a model for the illumination of the objects –Create an image (render) the result I.
Advanced Computer Graphics Depth & Stencil Buffers / Rendering to Textures CO2409 Computer Graphics Week 19.
Images The Science of Images What is an Image on the computer? The Psychology of Images What do we use images for? What effect color has on our mood and.
Emerging Technologies for Games Alpha Sorting and “Soft” Particles CO3303 Week 15.
CS 638, Fall 2001 Multi-Pass Rendering The pipeline takes one triangle at a time, so only local information, and pre-computed maps, are available Multi-Pass.
Computer Graphics Bitmaps & Sprites CO2409 Computer Graphics Week 3.
1 Introduction to Computer Graphics SEN Introduction to OpenGL Graphics Applications.
Computer Graphics I, Fall 2008 Introduction to Computer Graphics.
CSC Computing with Images
3D Graphics for Game Programming Chapter IV Fragment Processing and Output Merging.
More on Advanced Interfaces, Image Basics Glenn G. Chappell U. of Alaska Fairbanks CS 381 Lecture Notes Friday, November 21, 2003.
Real-Time rendering Chapter 4.Visual Appearance 4.4. Aliasing and antialiasing 4.5. Transparency,alpha,and compositing 4.6. Fog 4.7. Gamma correction
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
CHAPTER 8 Color and Texture Mapping © 2008 Cengage Learning EMEA.
Realtime NPR Toon and Pencil Shading Joel Jorgensen May 4, 2010.
09/16/03CS679 - Fall Copyright Univ. of Wisconsin Last Time Environment mapping Light mapping Project Goals for Stage 1.
Texture Mapping CAP4730: Computational Structures in Computer Graphics.
Compositing and Blending
Computer Graphics Blending CO2409 Computer Graphics Week 14.
CSE 381 – Advanced Game Programming GLSL. Rendering Revisited.
Graphics Graphics Korea University cgvr.korea.ac.kr 1 7. Speed-up Techniques Presented by SooKyun Kim.
1 Graphics CSCI 343, Fall 2015 Lecture 5 Color in WebGL.
Graphics Graphics Korea University cgvr.korea.ac.kr Lighting, Fogging, Alpha Blending & Progressive Meshes Byeong-Seon Jeong
Visual Appearance Chapter 4 Tomas Akenine-Möller Department of Computer Engineering Chalmers University of Technology.
UniS CS297 Graphics with Java and OpenGL Blending.
CSCI 440.  So far we have learned how to  build shapes  create movement  change views  add simple lights  But, our objects still look very cartoonish.
Compositing and Blending Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico.
Computer Graphics I, Fall 2008 Compositing and Blending.
Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, Chapter 5 Examples 1.
How to use a Pixel Shader CMT3317. Pixel shaders There is NO requirement to use a pixel shader for the coursework though you can if you want to You should.
Week 7 - Monday CS361.
Introduction to Computer Graphics with WebGL
Introduction to Electromagnetic waves, Light, and color
Visual Appearance Chapter 4
1.01 Investigate graphic types and file formats.
Deferred Lighting.
The Graphics Rendering Pipeline
Understanding Theory and application of 3D
GPU and Effects Graphics pipeline Programmable shaders Special effects.
CHAPTER 9 Lighting © 2008 Cengage Learning EMEA.
Bitmap, Vector, Pixels, Resolution, Metadata.
Making the Applications Interesting
Angel: Interactive Computer Graphics5E © Addison-Wesley 2009
Computer Graphics Introduction to Shaders
Presentation transcript:

CHAPTER 10 Alpha Blending and Fog © 2008 Cengage Learning EMEA

LEARNING OBJECTIVES In this chapter you will learn about: – –Alpha blending – –Implementing blending – –Implementing blending using shaders – –Alpha testing – –Fog – –The physics of fog – –Implementing fog

ALPHA BLENDING Alpha blending is a technique used to render the transparent and/or semi-transparent areas in textures. An alpha channel can be considered a fourth color component, i.e. an add-on to our current red–green–blue (RGB) color model controlling the transparency of a pixel. An alpha channel can be considered a fourth color component, i.e. an add-on to our current red–green–blue (RGB) color model controlling the transparency of a pixel. The alpha channel, just like the RGB color components, stores an 8-bit value ranging from ‘0’ to ‘255’ (‘0’ indicating full transparency and ‘255’ a solid area). The alpha channel, just like the RGB color components, stores an 8-bit value ranging from ‘0’ to ‘255’ (‘0’ indicating full transparency and ‘255’ a solid area).

ALPHA BLENDING

Alpha blending works by merging the per- pixel color of one texture with that of another – specifically by combining the color of an alpha-enabled texture with a texture already present at the corresponding screen location.

ALPHA BLENDING The alpha blending equation calculates the final blended color by adding the overlaid pixel color, overlaidPixelColor (which has some specific alpha percentage, alphaPercentage) to the pixel color of the opaque surface, originalPixelColor, with the alpha percentage being subtracted from its opaque solid color:

ALPHA BLENDING The Truevision TGA (.tga) image format offers a solution to the bitmap file format’s lack of compression, transparency, and limited use. – –It was one of the first formats to support truecolor (millions of colors) and is a 32-bit image format with support for transparency and RLE (run-length encoding) compression.

ALPHA BLENDING

Implementing Blending [see the textbook and online source code for a detailed example and discussion].

Implementing Blending using Shaders Blending can also be performed using pixel and vertex shaders; specifically, textures are combined via fragment program operations and subsequently written to the frame buffer. Shaders also allow significantly more control over the blending operation, leading to a vast array of advanced blending effects. [see the textbook for a detailed example and discussion].

Alpha Testing Alpha testing is a technique that controls whether pixels are written to the render-target. Each pixel of a texture image is either rendered or discarded based on its alpha value. – –Thus, the pixel is only written to the render-target if its alpha value is more than 0.5, for example. Alpha testing is much simpler to implement than blending as it doesn’t require the initialization of an alpha blend state. [see the textbook and online source code for a detailed example and discussion].

FOG Fog can be described as dense vapour of condensed particles reducing visibility to less than a kilometre.

FOG

Fog Fog is used for countless environmental effects, its implementation specifically adding to the mood of outdoor environments while at the same time improving rendering performance when combined with the culling of fully obscured objects.

Fog Blending is controlled using a linear, exponential, or Gaussian equation. – –Varying these equations results in blending factor changes.   The blending factor is just a way for us to measure exactly how much a certain color value will be blended with the fog color at a given time. For example, linear fog (as shown in Figure 10-8) will ‘dense up’ at a constant rate as an object’s distance from the viewer increases.   Exponential fog will, on the other hand, increase much more rapidly after a specific distance from the viewer.

The Physics of Fog Fog particles, such as smoke and condensed vapor, scatter and absorb light travelling from one point to another. Scattered light can either be directed at or away from the viewer, resulting in a cloudy white color for water vapor and a greyish color for smog due to the higher light absorption rate of smoke particles (depending on its thickness). The calculation of fog, as previously mentioned, is based on a distance function – specifically, either a linear (fog increases linearly from the point of view to an end point) or exponential function (fog intensifies exponentially from the point-of-view to an end point).

Implementing Fog Implementing fog in a Direct3D 10 environment requires emulation of Direct3D 9’s fixed function pipeline via use of an HLSL vertex and pixel shader. The implementation is relatively simple with a pre- calculated fog factor determining the amount of fog obscuring a particular pixel. Instead of calculating the fog distance using the planar eye distance (cameraPosition.z), we can also use the HLSL or Cg length function to return the floating-point Euclidean eye distance. OpenGL offers support for Gaussian (GL_EXP2), exponential (GL_EXP) and linear fog (GL_LINEAR). [see the textbook and online source code for a detailed example and discussion].