apps/shaders.html

<!DOCTYPE html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
 body { margin: 0; }
 canvas { display: block; }
</style>
<script id="vertexShader" type="x-shader/x-vertex">
 uniform float amplitude;
 attribute float displacement;
 varying vec3 vNormal;

 void main() {
     vNormal = normal;
     
     vec3 newPosition = position + 
                        normal * amplitude *
     vec3(displacement);
     gl_Position = projectionMatrix *
     modelViewMatrix *
     vec4(newPosition, 1.0);
 }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
 varying vec3 vNormal;

 void main() {
     // dot product and clamp (0 -> 1 rather than -1 -> 1)
     vec3 light = vec3(0.5,0.2,1.0);
     light = normalize(light);
     float dProd = max(0.0, dot(vNormal, light));
     gl_FragColor = vec4(0, dProd, 0, 1.0);
 }
</script>
<script src="lib/three.min.js"></script>
<script>
 var go = function() {
     var scene = new THREE.Scene();
     var camera = new THREE.PerspectiveCamera(
         75, window.innerWidth / window.innerHeight, 0.1, 1000);
     camera.position.z = 100;

     var amplitude = { type: 'f', value: 0 };
     var sphereGeometry = new THREE.SphereGeometry(50, 32, 32);
     //var sphereGeometry = new THREE.BoxGeometry(50, 50, 50, 1, 1, 1);
     var bufferGeometry = new THREE.BufferGeometry().fromGeometry(
         sphereGeometry);
     var displacement = new Float32Array(
         bufferGeometry.getAttribute("position").count);
     bufferGeometry.addAttribute(
         'displacement', new THREE.BufferAttribute(displacement, 1));
     var shaderMaterial = new THREE.ShaderMaterial({
         uniforms: { amplitude: amplitude },
         vertexShader:   document.getElementById(
             "vertexShader").textContent,
         fragmentShader: document.getElementById(
             "fragmentShader").textContent
     });

     var renderer = new THREE.WebGLRenderer({antialias: true});
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);


     var pointLight = new THREE.PointLight(0xFFFFFF);
     pointLight.position.x = 10;
     pointLight.position.y = 50;
     pointLight.position.z = 130;

     for(var ii = 0; ii < displacement.length; ++ii) {
         displacement[ii] = Math.random() * 5;
     }

     var sphere = new THREE.Mesh(bufferGeometry, shaderMaterial);

     var scene = new THREE.Scene();
     scene.add(sphere);
     scene.add(pointLight);

     var frame = 0;
     function update() {
         amplitude.value = Math.sin(frame);
         //camera.position.x = amplitude.value * 50;
         //camera.position.y = Math.cos(frame) * 50;
         frame += 0.1;
         renderer.render(scene, camera);
         requestAnimationFrame(update);
         //console.log("DEBUG", frame);
     }
     requestAnimationFrame(update);
 };
 (document.readyState != 'loading') ? go() :
          document.addEventListener('DOMContentLoaded', go);
</script>