TIP: Use the Fog node in combination with LOD to reduce the visual complexity of the scene and thus increase rendering performance. Tune visibilityRange to match the maximum range in the LOD nodes and set the last child of the LOD to a WorldInfo node. This has the effect of not rendering any objects outside the Fog range! Since the Fog creates a natural fade to the visibilityRange, users will not notice objects popping in and out as the LOD goes to maximum range. This can be a very effective technique for producing interactive frame rates. Experiment and tune the ranges for each particular scene. Also note that the visibilityLimit field of the NavigationInfo node can produce a similar result and should be considered as well (verify that the browser supports the visibilityLimit feature).

Also, use ProximitySensors to bind and unbind Fog nodes as the user enters and exits regions of the world with differing Fog values. In regions where there is no fog, set visibilityRange to 0 to disable Fog.

As stated, Fog nodes are typically used in conjunction with a Background node by setting the Background's skyColor equal or similar to the Fog's color.

#VRML V2.0 utf8
Group {
  children [
    DEF F1 Fog { color 1 1 1 visibilityRange 10 }        # Room fog
    DEF F2 Fog { color 0.5 0.5 0.5 visibilityRange 85 }  # Out fog
    DEF B1 Background { skyColor 1 1 1 }                 # Room bkg
    DEF B2 Background { skyColor 0.5 0.5 0.5 }           # Out bkg
    Transform {
      translation 0 1.5 0
      children DEF P1 ProximitySensor { size 4 3 4 }
    }
    Transform {
      translation 0 25 -52
      children DEF P2 ProximitySensor { size 100 50 100 }
    }
    Transform { children [           # A room with a cone inside
      Shape {                        # The room
        appearance DEF A Appearance {
          material DEF M Material {
            diffuseColor 1 1 1 ambientIntensity .33
          }
        }
        geometry IndexedFaceSet {    
          coord Coordinate {
            point [ 2 0 -2, 2 0 2, -2 0 2, -2 0 -2,
                    2 2 -2, 2 2 2, -2 2 2, -2 2 -2 ]
          }
          coordIndex [ 0 1 5 4 -1, 1 2 6 5 -1, 2 3 7 6 -1, 4 5 6 7 ]
          solid FALSE
        }
      }
      Transform {                    # Cone in the room
        translation -1 0.5 -1.7
        children DEF S Shape {
          geometry Cone { bottomRadius 0.2 height 1.0 }
          appearance USE A
        }
      }
    ]}
    Transform { children [           # Outside the room
      Shape {                        # Textured ground plane 
        appearance Appearance {
          material USE M
          texture ImageTexture { url "marble.gif" }
        }
        geometry IndexedFaceSet {    
          coord Coordinate {
            point [ 50 0 -100, -50 0 -100, -50 0 2, 50 0 2 ] 
          }
          coordIndex [ 0 1 2 3 ]
        }
      }
      Transform {                     # Object outside
        scale 20 20 20
        translation 0 10 -25
        children USE S
      }
    ]}
    Viewpoint { position 1.5 1.0 1.8 orientation 0 0 1 0 }
    DirectionalLight { direction 0 -1 0 } 
  ]
}
ROUTE P1.isActive TO F1.set_bind # These routes bind and unbind the
ROUTE P1.isActive TO B1.set_bind #  room fog/bkg & outdoors fog/bkg
ROUTE P2.isActive TO F2.set_bind #  as the avatar enters/exits the
ROUTE P2.isActive TO B2.set_bind #  the ProximitySensors.