ShaderMaterial texture and fog

examples of ShaderMaterial with texture and fog

by Douglas Duhaime

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;
    varying vec3 vPosition;
    void main( void ) {
      vUv = uv;
      vPosition = position;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
  </script>

  <script id="fragmentShader" type="x-shader/x-fragment">
    varying vec2 vUv;
    uniform sampler2D texture;
 		uniform vec3 fogColor;
    uniform float fogNear;
    uniform float fogFar;
    void main() {
      gl_FragColor = texture2D(texture, vUv);
      #ifdef USE_FOG
          #ifdef USE_LOGDEPTHBUF_EXT
              float depth = gl_FragDepthEXT / gl_FragCoord.w;
          #else
              float depth = gl_FragCoord.z / gl_FragCoord.w;
          #endif
          float fogFactor = smoothstep( fogNear, fogFar, depth );
          gl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor );
      #endif
    }
  </script>

CSS

body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}

JavaScript

var camera, scene, renderer, mesh, material;
init();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    // Create scene.
    scene = new THREE.Scene();
    // Add fog to scene
    scene.fog = new THREE.Fog(0xff0000, 200, 400);
    
    // Create texture for material
    var loader = new THREE.TextureLoader();
    var texture = loader.load( getImageData() );

    // Create material
    var uniforms = {
      texture:		 { type: "t", value: texture},
			fogColor:    { type: "c", value: scene.fog.color },
    	fogNear:     { type: "f", value: scene.fog.near },
    	fogFar:      { type: "f", value: scene.fog.far }
    };
    var vertexShader = document.getElementById('vertexShader').text;
    var fragmentShader = document.getElementById('fragmentShader').text;
    material = new THREE.ShaderMaterial(
      {
        uniforms : uniforms,
        vertexShader : vertexShader,
        fragmentShader : fragmentShader,
        fog: true
      });

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Create ambient light and add to scene.
    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);

}

function animate() {
   ...