Perlin Noise with Normal Map

2D (uv, time) texture

by jmchen

HTML

<div id="info">Noise 2D Texture</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

<script id='myVertexShader' type="x-shader/x-vertex">
    varying vec4 wPos;
    varying vec2 vUv;
    uniform vec2 scale;
    uniform vec2 offset;

    void main() {
        vUv = uv * scale + offset;
        wPos = modelMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>
<script id='myFragmentShader' type="x-shader/x-vertex">
    //
    // 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 +...

CSS

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

JavaScript

var renderer, scene, camera, controls, mesh;
var clock;
var angle = 0,
    sign = 1;
var light, lightball;
var gcontrols;

init();
animate();

function init() {
    clock = new THREE.Clock();

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x777777);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100);
    camera.position.z = 3;

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    light = new THREE.PointLight();
    light.position.set(3, 3, 3);
    scene.add(light);

    lightball = new THREE.Mesh(
    new THREE.SphereGeometry(0.03, 8, 8),
    new THREE.MeshBasicMaterial({
        color: 0xffff00,
        wireframe:true
    }));
    scene.add(lightball);
    var geometry = new THREE.PlaneGeometry(1, 1);
    var material = new THREE.ShaderMaterial({
        side: THREE.DoubleSide,
        uniforms: {
            terms: {
                type: 'i',
                value: 1
            },
            normalMap: {
                type: 'i',
                value: 0
            },
            modified: {
                type: 'i',
                value: 0
            },
            wLightPos: {
                type: 'v3',
                value: new THREE.Vector3()
            },
            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,

    });
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    
   ...