Cool Looking Fog

This tutorial brought to you by Chris Aliotta...

So you want to add fog to your OpenGL program? Well in this tutorial I will show you how to do exactly that. This is my first time writing a tutorial, and I am still relatively new to OpenGL/C++ programming, so please, if you find anything that's wrong let me know and don't jump all over me. This code is based on the code from lesson 7.

Data Setup:

We'll start by setting up all our variables needed to hold the information for fog. The variable fogMode will be used to hold three types of fog: GL_EXP, GL_EXP2, and GL_LINEAR. I will explain the differences between these three later on. The variables will start at the beginning of the code after the line GLuint texture[3]. The variable fogfilter will be used to keep track of which fog type we will be using. The variable fogColor will hold the color we wish the fog to be. I have also added the boolean variable gp at the top of the code so we can tell if the 'g' key is being pressed later on in this tutorial.

bool   gp;						// G Pressed? ( New )
GLuint filter;						// Which Filter To Use
GLuint fogMode[]= { GL_EXP, GL_EXP2, GL_LINEAR };	// Storage For Three Types Of Fog
GLuint fogfilter= 0;					// Which Fog To Use
GLfloat fogColor[4]= {0.5f, 0.5f, 0.5f, 1.0f};		// Fog Color

DrawGLScene Setup

Now that we have established our variables we will move down to InitGL. The glClearColor() line has been modified to clear the screen to the same same color as the fog for a better effect. There isn't much code involved to make fog work. In all you will find this to be very simplistic.

glClearColor(0.5f,0.5f,0.5f,1.0f);			// We'll Clear To The Color Of The Fog ( Modified )

glFogi(GL_FOG_MODE, fogMode[fogfilter]);		// Fog Mode
glFogfv(GL_FOG_COLOR, fogColor);			// Set Fog Color
glFogf(GL_FOG_DENSITY, 0.35f);				// How Dense Will The Fog Be
glHint(GL_FOG_HINT, GL_DONT_CARE);			// Fog Hint Value
glFogf(GL_FOG_START, 1.0f);				// Fog Start Depth
glFogf(GL_FOG_END, 5.0f);				// Fog End Depth
glEnable(GL_FOG);					// Enables GL_FOG

Lets pick apart the first three lines of this code. The first line glEnable(GL_FOG); is pretty much self explanatory. It basically initializes the fog.

The second line, glFogi(GL_FOG_MODE, fogMode[fogfilter]); establishes the fog filter mode. Now earlier we declared the array fogMode. It held GL_EXP, GL_EXP2, and GL_LINEAR. Here is when these variables come into play. Let me explain each one:

  • GL_EXP - Basic rendered fog which fogs out all of the screen. It doesn't give much of a fog effect, but gets the job done on older PC's.
  • GL_EXP2 - Is the next step up from GL_EXP. This will fog out all of the screen, however it will give more depth to the scene.
  • GL_LINEAR - This is the best fog rendering mode. Objects fade in and out of the fog much better.

The third line, glFogfv(GL_FOG_COLOR, fogcolor); sets the color of the fog. Earlier we had set this to (0.5f,0.5f,0.5f,1.0f) using the variable fogcolor, giving us a nice grey color.

Next lets look at the last four lines of this code. The line glFogf(GL_FOG_DENSITY, 0.35f); establishes how dense the fog will be. Increase the number and the fog becomes more dense, decrease it and it becomes less dense.

The line glHint (GL_FOG_HINT, GL_DONT_CARE); establishes the hint. I used GL_DONT_CARE, because I didn't care about the hint value.

Eric Desrosiers Adds: Little explanation of glHint(GL_FOG_HINT, hintval);

hintval can be : GL_DONT_CARE, GL_NICEST or GL_FASTEST

gl_dont_care - Lets opengl choose the kind of fog (per vertex of per pixel) and an unknown formula.
gl_nicest - Makes the fog per pixel (look good)
glfastest - Makes the fog per vertex (faster, but less nice)

The next line glFogf(GL_FOG_START, 1.0f); will establish how close to the screen the fog should start. You can change the number to whatever you want depending on where you want the fog to start. The next line is similar, glFogf(GL_FOG_END, 5.0f);. This tells the OpenGL program how far into the screen the fog should go.

Keypress Events

Now that we've setup the fog drawing code we will add the keyboard commands to cycle through the different fog modes. This code goes down at the end of the program with all the other key handling code.

if (keys['G'] && !gp)					// Is The G Key Being Pressed?
{ 
	gp=TRUE;					// gp Is Set To TRUE
	fogfilter+=1;					// Increase fogfilter By One
	if (fogfilter>2)				// Is fogfilter Greater Than 2?
	{
		fogfilter=0;				// If So, Set fogfilter To Zero
	}
	glFogi (GL_FOG_MODE, fogMode[fogfilter]);	// Fog Mode
} 
if (!keys['G'])						// Has The G Key Been Released?
{
	gp=FALSE;					// If So, gp Is Set To FALSE
}

That's it! We are done! You now have fog in your OpenGL program. I'd have to say that was pretty painless. If you have any questions or comments feel free to contact me at chris@incinerated.com. Also please stop by my website: /data/lessons/http://www.incinerated.com/ and /data/lessons/http://www.incinerated.com/precursor.

Christopher Aliotta (Precursor)

Jeff Molofee (NeHe)

* DOWNLOAD Visual C++ Code For This Lesson.

* DOWNLOAD Borland C++ Builder 6 Code For This Lesson. ( Conversion by Christian Kindahl )
* DOWNLOAD C# Code For This Lesson. ( Conversion by Brian Holley )
* DOWNLOAD Code Warrior 5.3 Code For This Lesson. ( Conversion by Scott Lupton )
* DOWNLOAD Cygwin Code For This Lesson. ( Conversion by Stephan Ferraro )
* DOWNLOAD Delphi Code For This Lesson. ( Conversion by Michal Tucek )
* DOWNLOAD Dev C++ Code For This Lesson. ( Conversion by Dan )
* DOWNLOAD Euphoria Code For This Lesson. ( Conversion by Evan Marshall )
* DOWNLOAD Game GLUT Code For This Lesson. ( Conversion by Milikas Anastasios )
* DOWNLOAD Irix / GLUT Code For This Lesson. ( Conversion by Rob Fletcher )
* DOWNLOAD Java Code For This Lesson. ( Conversion by Jeff Kirby )
* DOWNLOAD JoGL Code For This Lesson. ( Conversion by Nicholas Campbell )
* DOWNLOAD LCC Win32 Code For This Lesson. ( Conversion by Robert Wishlaw )
* DOWNLOAD Linux Code For This Lesson. ( Conversion by Daniel Davis )
* DOWNLOAD Linux/GLX Code For This Lesson. ( Conversion by Mihael Vrbanec )
* DOWNLOAD Linux/SDL Code For This Lesson. ( Conversion by Ti Leggett )
* DOWNLOAD LWJGL Code For This Lesson. ( Conversion by Mark Bernard )
* DOWNLOAD Mac OS Code For This Lesson. ( Conversion by Anthony Parker )
* DOWNLOAD Mac OS X/Cocoa Code For This Lesson. ( Conversion by Bryan Blackburn )
* DOWNLOAD MASM Code For This Lesson. ( Conversion by Greg Helps )
* DOWNLOAD Visual C++ / OpenIL Code For This Lesson. ( Conversion by Denton Woods )
* DOWNLOAD Pelles C Code For This Lesson. ( Conversion by Pelle Orinius )
* DOWNLOAD SDL Code For This Lesson. ( Conversion by Ken Rockot )
* DOWNLOAD Visual Basic Code For This Lesson. ( Conversion by Ross Dawson )
* DOWNLOAD Visual Basic Code For This Lesson. ( Conversion by Peter De Tagyos )
* DOWNLOAD Visual Studio .NET Code For This Lesson. ( Conversion by Grant James )

 

< Lesson 15Lesson 17 >