A Pen by Xanmia.

index.html

	<script id="vertexShader" type="x-shader/x-vertex">

// Uniforms
uniform float time;
varying vec3 vNormal;
      
void main(void) {
   vec3 v = position;
   vNormal = normal;
   v.y += sin(1.0 * position.x + (time)) * 85.5;
   v.x += sin(1.0 * position.y + (time)) * 85.5;
	//v.z += sin(1.0 * position.x + (time)) * 85.5;
   gl_Position = projectionMatrix *
                modelViewMatrix *
                vec4(v, 1.0);
}

		</script>

		<script id="fragmentShader" type="x-shader/x-fragment">
varying vec3 vNormal;
uniform float time;
      
void main(void) {
    vec3 light = vec3(0.1, 0.1, .5);

    light = normalize(light);


    float dProd = max(0.2, dot(vNormal, light));

    gl_FragColor = vec4(.65, // R
                      dProd, // G
                      (time*.2)*.1, // B
                      1.0);  // A
}

		</script>

script.js

var vertexHeight = 10;
var Definition = 25;
var Size = 1500;
var frame = 0;
var container = document.createElement('div');
document.body.appendChild( container );

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,10, 6000)
camera.position.z = 5000; 

var scene = new THREE.Scene();

var uniforms = 
    {
      time: { type: "f", value: 0.0 }
    };


	var material = new THREE.ShaderMaterial( {
            uniforms: uniforms,
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
            wireframe: false
				} );


var	plane = new THREE.Mesh( new THREE.SphereGeometry( Size, Definition, Definition ), material );

scene.add( plane );

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );


render();

			function render() {
        requestAnimationFrame( render );
         uniforms.time.value = frame;
        frame += .1;
        renderer.render( scene, camera );
			}

Shader-Fun....markdown

Shader Fun...

grrrr

A Pen by Xanmia on CodePen.

License.

style.css

body{
  background-color: #000000;
  margin: 0px;
  overflow: hidden;
}