Perlin noise Texturing

2D, 3D

by jmcjc5u

HTML

<div id="info">Terrain</div>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
<script id='myVertexShader' type="x-shader/x-vertex">
    uniform vec2 scale;
    uniform vec2 offset;
    uniform int terms;
    varying float height;
    uniform float time;

    //
    // FROM: http://jsfiddle.net/jmchen/cby3d1ag/
    //
    vec3 mod289(vec3 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
    }

    vec4 mod289(vec4 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
    }

    vec4 permute(vec4 x) {
        return mod289(((x * 34.0) + 1.0) * x);
    }

    vec4 taylorInvSqrt(vec4 r) {
        return 1.79284291400159 - 0.85373472095314 * r;
    }

    float snoise(vec3 v) {
        const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
        const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);

        // First corner
        vec3 i = floor(v + dot(v, C.yyy));
        vec3 x0 = v - i + dot(i, C.xxx);

        // Other corners
        vec3 g = step(x0.yzx, x0.xyz);
        vec3 l = 1.0 - g;
        vec3 i1 = min(g.xyz, l.zxy);
        vec3 i2 = max(g.xyz, l.zxy);

        //   x0 = x0 - 0.0 + 0.0 * C.xxx;
        //   x1 = x0 - i1  + 1.0 * C.xxx;
        //   x2 = x0 - i2  + 2.0 * C.xxx;
        //   x3 = x0 - 1.0 + 3.0 * C.xxx;
        vec3 x1 = x0 - i1 + C.xxx;
        vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
        vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y

        // Permutations
        i = mod289(i);
        vec4 p = permute(permute(permute(
        i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));

        // Gradients: 7x7 points over a square, mapped onto an octahedron.
        // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
        float n_ = 0.142857142857; // 1.0/7.0
        vec3 ns = n_ * D.wyz - D.xzx;

        vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // ...

CSS

#info {
    position: absolute;
    top: 2%;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow: hidden;
}

JavaScript

var renderer, scene, camera, controls, mesh;
var clock;
var mesh2;

init();
animate();

function makeShaderMaterial() {
 	var material = new THREE.ShaderMaterial({
  	//wireframe: true,
        side: THREE.DoubleSide,
        uniforms: {
            terms: {
                type: 'i',
                value: 5
            },
            time: {
                type: 'f',
                value: 1.0
            },
            scale: {
                type: 'v2',
                value: new THREE.Vector2(1, 1)
            },
            offset: {
                type: 'v2',
                value: new THREE.Vector2(0, 0)
            }
        },
        vertexShader: document.getElementById('myVertexShader').textContent,
        fragmentShader: document.getElementById('myFragmentShader').textContent,

    });	
	return material;
}

function init() {
	clock = new THREE.Clock();
	
	renderer	= new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor (0x888888);
	document.body.appendChild( renderer.domElement );

	scene	= new THREE.Scene();
	camera	= new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.z = 200;
 
	controls = new THREE.OrbitControls(camera, renderer.domElement);
 
	//////////////////////////////////////////////////////////////  
  material = makeShaderMaterial();
	mesh2 = new THREE.Mesh (new THREE.PlaneGeometry (100,100,100,100), material)
  scene.add( mesh2 );
}

function animate() {
	var delta = clock.getDelta();
	mesh2.material.uniforms[ "time" ].value	+= delta/15;
    
	requestAnimationFrame (animate);
	renderer.render( scene, camera );		
}