14. OpenGL Fog

This tutorial will teach you how to create basic opengl fog. Fog is used in most games, to help simulate both the size and reality of an area. For the fog to work well do this: Enable the opengl depth testing, enable the opengl fog, choose the opengl fog mode, choose the opengl fog color, choose the opengl fog density and set how well we want our opengl fog to look. You can also set the starting and ending distances for the fog, but this is enough for now.

To get started we need some variables for the fog colour and

the density of the fog. I have done it with this:

GLfloat density = 0.3;

GLfloat fogColor[4] = {0.5, 0.5, 0.5, 1.0};

The fog colour is written in four parts, they cover the RGB values

Unfortunately I have been unable to find out what the fourth value

does. Next we have the density which sets how thick our fog is.

If you run the application you can acctually see that a density of 0.3 is acctually

quite thick.

After this we enable our fog and set its parameters.

First off we enable the fog.

glEnable (GL_FOG);

Now we set the fog mode, here i have set it to GL_EXP2, which is quite nice looking.

glFogi (GL_FOG_MODE, GL_EXP2);

Here we set the actual colour of our fog.

glFogfv (GL_FOG_COLOR, fogColor);

Now the density.

glFogf (GL_FOG_DENSITY, density);

And here I have set it up to look the nicest. In large projects, this may slow

down you application.

glHint (GL_FOG_HINT, GL_NICEST);

There are a few other options but I will explain them in the next Fog tutorial.

I will just let you get a grasp at this basic concept before I complicate it

just a little more.

If you have any problems, please email me at swiftless@gmail.com

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

36.

37.

38.

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

54.

55.

56.

57.

58.

59.

60.

61.

62.

63.

64.

65.

66.

#include <GL/gl.h>

#include <GL/glut.h>

GLfloat angle = 0.0;

GLfloat density = 0.3; //set the density to 0.3 which is
acctually quite thick

GLfloat fogColor[4] = {0.5, 0.5, 0.5, 1.0}; //set the for
color to grey

void cube (void) {

glRotatef(angle, 1.0, 0.0, 0.0);

glRotatef(angle, 0.0, 1.0, 0.0);

glRotatef(angle, 0.0, 0.0, 1.0);

glColor3f(1.0, 0.0, 0.0);

glutSolidCube(2);

}

void init (void) {

glEnable (GL_DEPTH_TEST); //enable the depth testing

glEnable (GL_FOG); //enable the fog

glFogi (GL_FOG_MODE, GL_EXP2); //set the fog mode to GL_EXP2

glFogfv (GL_FOG_COLOR, fogColor); //set the fog color to
our color chosen above

glFogf (GL_FOG_DENSITY, density); //set the density to the
value above

glHint (GL_FOG_HINT, GL_NICEST); // set the fog to look the
nicest, may slow down on older cards

}

void display (void) {

glClearColor (0.0,0.0,0.0,1.0);

glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

gluLookAt (0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

cube();

glutSwapBuffers();

angle ++;

}

void reshape (int w, int h) {

glViewport (0, 0, (GLsizei)w, (GLsizei)h);

glMatrixMode (GL_PROJECTION);

glLoadIdentity ();

gluPerspective (60, (GLfloat)w / (GLfloat)h, 1.0, 100.0);

glMatrixMode (GL_MODELVIEW);

}

int main (int argc, char **argv) {

glutInit (&argc, argv);

glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH
);

glutInitWindowSize (500, 500);

glutInitWindowPosition (100, 100);

glutCreateWindow (“A basic OpenGL Window“);

init ();

glutDisplayFunc (display);

glutIdleFunc (display);

glutReshapeFunc (reshape);

glutMainLoop ();

return 0;

}

12 Responses to "14. OpenGL Fog"

Raghav says:

May 28, 2018 at 11:00 pm

can you tell something about GL_FOG_INDEX
where and why it is used and for what…

Reply
shurbsk says:

October 5, 2012 at 1:34 am

fog is deprecated in opengl 3.1 and above.
afortunately it’s simple to do the fog effect in vetex/fragment shaders.

Reply
Michael says:

April 4, 2012 at 9:57 pm

Hi, these tutorial are really good 🙂 they’re simple too 😉 However, I see you don’t know what the fourth parameter of the fog color stands for. It is simply the Alpha value, in fact you pass for parameters, R(ed), (G)reen, (B)lue and (A)lpha. I’m basing on the Red Book, “OpenGL Programming Guide”, Sixth Edition, page 265.

Reply
1. Swiftless says:
  
  April 21, 2012 at 11:07 pm
  
  Hey Michael,
  
  Thanks. They were initially designed to be super simple, showing off each method. Careful with what you say I don’t know though 😉 These tutorials (Version 1.0) are about 5 years older than the post date, the post date is just when it was moved over to a WordPress back end. These were effectively written by me at about the age of 13-15.
  
  You’re definitely correct about the fourth parameter being the Alpha value. That holds true in everything colour related, where the older versions of OpenGL (from the time this was written) allowed you to set either RGB or RGBA, the newer versions of OpenGL, 3.x and 4.x assume you handle all colours yourself inside of your shaders. Because you were allowed to skip the A value in the fixed pipeline, I believe I skipped it in a few of these tutorials. I don’t mention Alpha values until a specific tutorial.
  
  Cheers,
  Swiftless
  
  Reply
TeXiCiTy says:

May 31, 2011 at 4:10 am

@”A Man”: A simple piece of code I took from another OpenGL tutorial limits the frame rate:

bool limitFpsTo(int rate){
static float last = GetTickCount() * 0.001f;
static float elapsed = 0.0f;

float currect = GetTickCount() * 0.001f;
float delta = currect – last;
float FPS = 1.0f/rate;

elapsed+=delta;
last=currect;

if (elapsed>FPS)
{
elapsed -=FPS;
return true;
}
return false;
}

If you place the buffered keyOperations() function introduced in Tutorial 3 inside the if(limitFpsTo) in the display() function the speed should be fixed.

Reply
Matiss says:

May 29, 2011 at 11:19 pm

Hey!

i have prob. with this tut. I have lighting too and when try fog everything drawn becomes black. I can’t understand why…

Do u know what problem might be?

Reply
1. Alfie says:
  
  November 9, 2019 at 12:32 am
  
  Object too far away? Haven’t set your “fogColor” array var up with 0.5,0.5,0.5,1 (four values)?
  Also try “glClearColor(0.5, 0.5, 0.5, 1);” prior — makes the background gray to match the fog. Otherwise, yes, yr background will be black.
  
  Reply
a man says:

May 18, 2011 at 4:40 am

on my computer the cube rotate very fast so i changed
this
angle ++;
to
angle += 0.01

Reply
1. Swiftless says:
  
  May 20, 2011 at 11:50 am
  
  Hi A man,
  
  Depending on the speed of your machine, you will always have to change this. To make it constant on every machine, you need to use some time-based techniques. Such as incrementing angle depending on how much time has passed since the last frame.
  
  Thanks,
  Swiftless
  
  Reply
Callum says:

July 9, 2010 at 11:24 pm

Heya, cool tutorials, keep them up!

btw, I think the fourth value in your fog color is the alpha value, obviously it will only make a change if you have blending enabled. Could be interesting to see if it blends with your glClearColor aye? 🙂

Reply
Ted says:

March 30, 2010 at 12:01 am

Hey, nice tutorials. On tutorial 14 “OpenGL Fog” The intro is repeated twice. Just so you know.

Reply
1. Swiftless says:
  
  March 30, 2010 at 1:07 am
  
  Thanks for the heads up Ted, I’ll fix that up.
  
  Cheers,
  Swiftless
  
  Reply

Share and Enjoy !

Leave a Reply Cancel reply