Vertex Shader Plane Vibrate

THREE.js R54

by steveow

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">
    uniform float span;

    attribute float displacement;

    varying vec3 vNormal;
    varying float color_according_to_z;

    float z_actual;


    void main() {
        vNormal = normal;

        vec3 newPosition = position + normal * vec3(0.0, 0.0, displacement);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);

        z_actual = gl_Position.z + span / 2.0;
    color_according_to_z = displacement; //1.0 / span * z_actual; // CHANGED
    }
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
    uniform float span;

    varying float color_according_to_z;

    void main() {
        gl_FragColor = vec4(color_according_to_z, 0.0, 0.0, 1.0);
    }
</script>
<div id="container"></div>

JavaScript

Array.prototype.max = function () {
    return Math.max.apply(null, this)
}

Array.prototype.min = function () {
    return Math.min.apply(null, this)
}

alert ("THREE Revision:" + THREE.REVISION);

$(function () {

    var WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight;

    var VIEW_ANGLE = 45,
        ASPECT = WIDTH / HEIGHT,
        NEAR = 0.1,
        FAR = 1000;

    var global_x_rotation = 0,
        global_z_rotation = 0;

    var container = $('#container');

    var renderer = new THREE.WebGLRenderer();
    var camera = new THREE.PerspectiveCamera(
    VIEW_ANGLE,
    ASPECT,
    NEAR,
    FAR);

    var scene = new THREE.Scene();

    var attributes = {
        displacement: {
            type: 'f',
            value: []
        }
    }
    var uniforms = {
        lowest: {
            type: 'f',
            value: 0.0
        },
        highest: {
            type: 'f',
            value: 0.0
        },
        span: {
            type: 'f',
            value: 0.0
        }
    }

    scene.add(camera);
    camera.position.z = 100;
    renderer.setSize(WIDTH, HEIGHT);

    container.append(renderer.domElement);

    var plane = new THREE.Mesh(
    new THREE.PlaneGeometry(100, 100, 5, 5),
    new THREE.ShaderMaterial({
        uniforms: uniforms,
        attributes: attributes,
        vertexShader: $('#vertexshader').text(),
        fragmentShader: $('#fragmentshader').text()
    }));

    console.log(plane);

    plane.material.side = THREE.DoubleSide;
    plane.geometry.dynamic = true;

    for (var v = 0; v < plane.geometry.vertices.length; v++) {
        attributes.displacement.value[v] = Math.random() * 10.0;
    }

    scene.add(plane);

    function render() {
        requestAnimationFrame(render);

        plane.rotation.x = global_x_rotation;
        plane.rotation.z = global_z_rotation;

        var max = -1.0e30;
        var min = +1.0e30;
        var x;

        for (var i = attributes.displacement.value.length - 1; i >=...