splatted terrain

Demonstrates the use of a splatting shader on terrain. Four terrain textures (grass, rock, etc.) are provided. A fifth texture codes the blending weights for the four basic terrain textures in each of its four color channels (including the alpha channel). Three's first person motion model is used (mouse to steer, WASD to move).

1-2-three
example 31: splatted terrain

<html>
<head>
<title>example 31: splatted terrain</title>
</head>
<body style="margin: 0px;overflow: hidden;">

var camera, controls, scene, renderer;

// Number of times each texture repeats in x and y
var nReps = 100.0;
terrainUniforms.uSplat1Repeat.value.x = nReps;
terrainUniforms.uSplat1Repeat.value.y = nReps;
terrainUniforms.uSplat2Repeat.value.x = nReps;
terrainUniforms.uSplat2Repeat.value.y = nReps;
terrainUniforms.uSplat3Repeat.value.x = nReps;
terrainUniforms.uSplat3Repeat.value.y = nReps;
terrainUniforms.uSplat4Repeat.value.x = nReps;
terrainUniforms.uSplat4Repeat.value.y = nReps;

var texture;
var terrainMaterial, terrainMesh, terrainHeight, skyMaterial;
var uniforms;

var clock = new THREE.Clock();
initScene();
initTerrain();

function initScene() {

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 10000 );
  camera.position.y = 1.5;

scene = new THREE.Scene();
  scene.add( new THREE.AmbientLight( 0xffffff ));  
  
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor(new THREE.Color(0xeeeeee), 1);

document.body.appendChild( renderer.domElement );

controls = new THREE.FirstPersonControls(camera, renderer.domElement);
  controls.movementSpeed = 10;
  controls.lookSpeed = 0.5;
  controls.lookVertical = false;
}

function initTerrain() {

function onGeometryLoaded( geometry, materials ) {

terrainUniforms.tSplat1.value = THREE.ImageUtils.loadTexture("images/terrain/SUNNY-Assorted-Ground.png");
    terrainUniforms.tSplat2.value = THREE.ImageUtils.loadTexture("images/terrain/grass-and-rock.png");
    terrainUniforms.tSplat3.value = THREE.ImageUtils.loadTexture("images/terrain/SUNNY-Mottled-Stone-and-Dirt.png");
    terrainUniforms.tSplat4.value = THREE.ImageUtils.loadTexture("images/terrain/snow.png");
    terrainUniforms.tAlphaMap.value = THREE.ImageUtils.loadTexture("images/terrain/splat2.png");

terrainMaterial = new THREE.TerrainMaterial( {
      uniforms: terrainUniforms,
      vertexShader: terrainVertexShader,
      fragmentShader: terrainFragShader,
      lights: false,
    });

terrainMesh = new THREE.Mesh(geometry, terrainMaterial);
    scene.add( terrainMesh );

animate();
  }

var loader = new THREE.JSONLoader();
  loader.load( "models/plane/plane.js", onGeometryLoaded );
}

function animate() {
  var delta = clock.getDelta();
  controls.update( delta );
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
}
</script>
</body>
</html>

splatted terrain

1-2-threeexample 31: splatted terrain

1-2-three
example 31: splatted terrain