Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

initial import of mrdoob's http://mrdoob.com/lab/javascript/webgl/gls…

  • Loading branch information...
commit 9e9c869490d6e865370e88fc181bf80c8cf149c6 1 parent c772443
@paulirish authored
Showing with 237 additions and 0 deletions.
  1. +237 −0 index.html
View
237 index.html
@@ -0,0 +1,237 @@
+<!DOCTYPE HTML>
+<html lang="en">
+ <head>
+ <title>WebGL/GLSL Sandbox - Test 02</title>
+ <meta charset="utf-8">
+ <style type="text/css">
+ body {
+ background-color: #000000;
+ margin: 0px;
+ overflow: hidden;
+ }
+
+ #info {
+ position: absolute;
+ top: 0px;
+
+ color: #ffffff;
+ font-family: Monospace;
+ font-size: 14px;
+ font-weight: bold;
+ text-shadow: rgba( 0, 0, 0, 0.75 ) 0px 1px 2px;
+ }
+
+ </style>
+ </head>
+ <body>
+
+ <div id="effect"></div>
+ <div id="info"></div>
+
+ <script id="vs" type="x-shader/x-vertex">
+
+ attribute vec3 position;
+
+ void main() {
+
+ gl_Position = vec4( position, 1.0 );
+
+ }
+
+ </script>
+
+ <script id="fs" type="x-shader/x-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>
+
+ <script type="text/javascript">
+
+ /**
+ * Provides requestAnimationFrame in a cross browser way.
+ * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+ */
+
+ if ( !window.requestAnimationFrame ) {
+
+ window.requestAnimationFrame = ( function() {
+
+ return window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
+
+ window.setTimeout( callback, 1000 / 60 );
+
+ };
+
+ } )();
+
+ }
+
+ </script>
+
+ <script type="text/javascript">
+
+ var effectDiv, sourceDiv, canvas, gl, buffer, vertex_shader, fragment_shader, currentProgram,
+ vertex_position, parameters = { start_time: new Date().getTime(), time: 0, screenWidth: 0, screenHeight: 0 };
+
+ init();
+ animate();
+
+ function init() {
+
+ vertex_shader = document.getElementById( 'vs' ).textContent;
+ fragment_shader = document.getElementById( 'fs' ).textContent;
+
+ effectDiv = document.getElementById( 'effect' );
+ sourceDiv = document.getElementById( 'info' );
+ sourceDiv.innerHTML = fragment_shader.replace(/\n/gi, "<br />").replace(/\t\t/gi, "&nbsp;&nbsp;&nbsp;&nbsp;");
+
+ canvas = document.createElement( 'canvas' );
+ effectDiv.appendChild( canvas );
+
+ // Initialise WebGL
+
+ try {
+
+ gl = canvas.getContext( 'experimental-webgl' );
+
+ } catch( error ) { }
+
+ if ( !gl ) {
+
+ alert("WebGL not supported");
+ 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 );
+
+ onWindowResize();
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ }
+
+ 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 == null || fs == null ) return null;
+
+ gl.attachShader( program, vs );
+ gl.attachShader( program, fs );
+
+ gl.deleteShader( vs );
+ gl.deleteShader( fs );
+
+ gl.linkProgram( program );
+
+ if ( !gl.getProgramParameter( program, gl.LINK_STATUS ) ) {
+
+ alert( "ERROR:\n" +
+ "VALIDATE_STATUS: " + gl.getProgramParameter( program, gl.VALIDATE_STATUS ) + "\n" +
+ "ERROR: " + gl.getError() + "\n\n" +
+ "- Vertex Shader -\n" + vertex + "\n\n" +
+ "- Fragment Shader -\n" + fragment );
+
+ return null;
+
+ }
+
+ return program;
+
+ }
+
+ function createShader( src, type ) {
+
+ var shader = gl.createShader( type );
+
+ gl.shaderSource( shader, src );
+ gl.compileShader( shader );
+
+ if ( !gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) {
+
+ alert( ( type == gl.VERTEX_SHADER ? "VERTEX" : "FRAGMENT" ) + " SHADER:\n" + gl.getShaderInfoLog( shader ) );
+ return null;
+
+ }
+
+ return shader;
+
+ }
+
+ function onWindowResize( event ) {
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ parameters.screenWidth = canvas.width;
+ parameters.screenHeight = canvas.height;
+
+ gl.viewport( 0, 0, canvas.width, canvas.height );
+
+ }
+
+ function animate() {
+
+ requestAnimationFrame( animate );
+ render();
+
+ }
+
+ function render() {
+
+ if ( !currentProgram ) return;
+
+ parameters.time = new Date().getTime() - parameters.start_time;
+
+ gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
+
+ // Load program into GPU
+
+ gl.useProgram( currentProgram );
+
+ // Set values to program variables
+
+ gl.uniform1f( gl.getUniformLocation( currentProgram, 'time' ), parameters.time / 1000 );
+ gl.uniform2f( gl.getUniformLocation( currentProgram, 'resolution' ), parameters.screenWidth, parameters.screenHeight );
+
+ // Render geometry
+
+ gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
+ gl.vertexAttribPointer( vertex_position, 2, gl.FLOAT, false, 0, 0 );
+ gl.enableVertexAttribArray( vertex_position );
+ gl.drawArrays( gl.TRIANGLES, 0, 6 );
+ gl.disableVertexAttribArray( vertex_position );
+
+ }
+
+ </script>
+
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.