cube in webgl

by Thanos Saringelos

HTML

<canvas></canvas> 
 
		<script id="vs" type="x-shader/vertex"> 
 
			attribute vec3 position;
 
			void main() {
 
				gl_Position = vec4( position, 1.0 );
 
			}
 
		</script> 
 
		<script id="fs" type="x-shader/fragment"> 
 
			uniform float time;
			uniform vec2 resolution;
 
			void main( void ) {
 
				vec2 position = - 1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
				float red = abs( sin( position.x * position.y + time / 5.0 ) );
				float green = abs( sin( position.x * position.y + time / 4.0 ) );
				float blue = abs( sin( position.x * position.y + time / 3.0 ) );
				gl_FragColor = vec4( red, green, blue, 1.0 );
 
			}
 
		</script>

CSS

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block }

JavaScript

window.requestAnimationFrame = window.requestAnimationFrame || ( function() {

				return  window.webkitRequestAnimationFrame ||
				        window.mozRequestAnimationFrame ||
				        window.oRequestAnimationFrame ||
				        window.msRequestAnimationFrame ||
				        function(  callback, element ) {
					        window.setTimeout( callback, 1000 / 60 );
				        };

			})();

 
			var canvas, 
			    gl, 
			    buffer, 
			    vertex_shader, fragment_shader, 
			    currentProgram,
			    vertex_position,
			    timeLocation,
			    resolutionLocation,
			    parameters = {  start_time  : new Date().getTime(), 
			                    time        : 0, 
			                    screenWidth : 0, 
			                    screenHeight: 0 };
 
			init();
			 
			function init() {
 
				vertex_shader = document.getElementById('vs').textContent;
				fragment_shader = document.getElementById('fs').textContent;
 

 
				canvas = document.querySelector( 'canvas' );

 
				// Initialise WebGL
 
				try {
 
					gl = canvas.getContext( 'experimental-webgl' );
 
				} catch( error ) { }
 
				if ( !gl ) {
 
					throw "cannot create webgl context";
 
				}
 
				// Create Vertex buffer (2 triangles)
 
				buffer = gl.createBuffer();
				gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
				gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( [ - 1.0, - 1.0, 1.0, - 1.0, - 1.0, 1.0, 1.0, - 1.0, 1.0, 1.0, - 1.0, 1.0 ] ), gl.STATIC_DRAW );
 
				// Create Program
 
				currentProgram = createProgram( vertex_shader, fragment_shader );

				timeLocation = gl.getUniformLocation( currentProgram, 'time' );
				resolutionLocation = gl.getUniformLocation( currentProgram, 'resolution' );
 				
        animate();
			}
 
			function createProgram( vertex, fragment ) {
 
				var program = gl.createProgram();
 
				var vs = createShader( vertex, gl.VERTEX_SHADER );
				var fs = createShader( '#ifdef GL_ES\nprecision highp float;\n#endif\n\n' + fragment, gl.FRAGMENT_SHADER );
 
				if ( vs ==...