Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
  • 4 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Showing with 226 additions and 27 deletions.
  1. +4 −27 README.md
  2. +222 −0 index.html
View
31 README.md
@@ -1,33 +1,10 @@
-# Boilerplate Boilerplate
-Boilerplates are more than just really thick sheets of steel: they're the
-totally most raddest way to get started developing. Thanks to projects
-like [HTML5Boilerplate](http://html5boilerplate.com/), [Dojo
-Boilerplate](https://github.com/rmurphey/dojo-boilerplate), [BoilerPlate Film
-Budgeting Templates](http://www.boilerplate.net/Home.html), and [JavaScript
-Library
-Boilerplate](http://benalman.com/projects/javascript-library-boilerplate/), you
-can pretty much do anything, starting on Step 2! Unfortunately, The tedium of Step 1
-inevitably creeps back up on you if you want to write your own boilerplate for
-others to use. Until now.
+# WebGL Boilerplate
-## Introducing Boilerplate Boilerplate
+WebGL Boilerplate is the fastest way to start developing a WebGL project. Leverage years of experience with WebGL in seconds flat with WebGL Boilerplate.
-Boilerplate Boilerplate is just a Git repository with a blank .gitignore and a
-README.md. This can save you up to 45 seconds per project!
-## How Do I Use It
-1. Fork this repository
-2. Edit README.md and get rid of everything before the place where it says "GET RID OF EVERYTHING BEFORE HERE."
-3. Substitute in your project's name
-4. Do all the work
-5. Give me credit
-6. Preferably using the word "excellent"
-
-# GET RID OF EVERYTHING BEFORE HERE
-
-# [YOUR PROJECT NAME] Boilerplate
-
-[YOUR PROJECT NAME] Boilerplate is the fastest way to start developing a [YOUR PROJECT TYPE] project. Leverage years of experience with [YOUR PROJECT TYPE] in seconds flat with [YOUR PROJECT NAME].
+(Pretty much all the hard work done by [mrdoob](http://mrdoob.com/lab/javascript/webgl/glsl/02/).)
+(Thx [ajpiano](https://github.com/ajpiano/boilerplate-boilerplate) for the help getting this plate boiled.)
View
222 index.html
@@ -0,0 +1,222 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>WebGL Boilerplate</title>
+
+ <style>
+ body {
+ background-color: #000000;
+ margin: 0px;
+ overflow: hidden;
+ }
+ </style>
+ </head>
+ <body>
+
+ <canvas></canvas>
+ <div id="info"></div>
+
+ <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>
+
+ <script>
+
+ /**
+ * Provides requestAnimationFrame in a cross browser way.
+ * paulirish.com/2011/requestanimationframe-for-smart-animating/
+ */
+ 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,
+ 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;
+
+
+
+ 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 );
+
+ 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>

No commit comments for this range

Something went wrong with that request. Please try again.