Themaister · September 15, 2011 22:31
diff --git a/gistfile1.txt b/gistfile1.txt
 <html>
   <head>
      <title>WebGL test ...</title>
   </head>
   <body onload="webGLStart();">
      <p>Hai! :D WebGL test ...</p>

      <canvas id="test_canvas" style="border: none" width="640" height="480"></canvas>
   </body>

   <script id="vertex_shader" type="x-shader/x-vertex">
      attribute vec2 vert;
      uniform mat4 matrix;
      varying vec3 color;
      void main(void) {
         gl_Position = matrix * vec4(vert, 0.0, 1.0);
         color = 0.2 * sin(vec3(exp(vert), 1.0));
      }
   </script>

   <script id="fragment_shader" type="x-shader/x-fragment">
      #ifdef GL_ES
      precision highp float;
      #endif

      varying vec3 color;
      void main(void) {
         gl_FragColor = vec4(color, 1.0);
      }
   </script>

   <script type="text/javascript">
      var gl;
      function initGL(canvas) {
         try {
            gl = canvas.getContext("experimental-webgl");
            gl.viewportWidth = canvas.width;
            gl.viewportHeight = canvas.height;
         } catch (e) {}
         if (!gl) {
            alert("Could not init WebGL ... :(");
         }
      }

      function getShader(id) {
         var script = document.getElementById(id);
         if (!script) { return null; }

         var str = "";
         var k = script.firstChild;
         while (k) {
            if (k.nodeType == 3) { // Magic number 3, what :v
               str += k.textContent;
            }
            k = k.nextSibling;
         }

         var shader;
         if (script.type == "x-shader/x-fragment") {
            shader = gl.createShader(gl.FRAGMENT_SHADER);
         } else if (script.type == "x-shader/x-vertex") {
            shader = gl.createShader(gl.VERTEX_SHADER);
         } else {
            return null;
         }

         gl.shaderSource(shader, str);
         gl.compileShader(shader);

         if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert(gl.getShaderInfoLog(shader));
            return null;
         }

         return shader;
      }

      var prog;
      function initShaders() {
         var frag = getShader("fragment_shader");
         var vertex = getShader("vertex_shader");
         prog = gl.createProgram();
         gl.attachShader(prog, frag);
         gl.attachShader(prog, vertex);
         gl.linkProgram(prog);

         if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
            alert("Failed to init shader!");
         }

         gl.useProgram(prog);
         prog.vert_attr = gl.getAttribLocation(prog, "vert");
         gl.enableVertexAttribArray(prog.vert_attr);
         prog.matrix_uniform = gl.getUniformLocation(prog, "matrix");
      }

      var vert_buf;
      function initBuffers() {
         vert_buf = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, vert_buf);
         var verts = [
            -0.5, -0.5,
            0.5, -0.5,
            0.0, 0.5,
         ];

         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STREAM_DRAW);
         gl.vertexAttribPointer(prog.vert_attr, 2, gl.FLOAT, false, 0, 0);

         var ident_matrix = [
            1.0, 0.0, 0.0, 0.0,
            0.0, 1.0, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0
         ];
         gl.uniformMatrix4fv(prog.matrix_uniform, false, new Float32Array(ident_matrix));
      }

      var render_count = 0.0;
      function do_render() {
         render_count += 0.01;
         var c_x = 0.4 * Math.cos(render_count);
         var c_y = 0.4 * Math.sin(render_count);
         gl.bufferSubData(gl.ARRAY_BUFFER,
               0,
               new Float32Array([
                  -0.5 + c_x, -0.5 + c_y,
                  0.5 + c_x, -0.5 + c_y,
                  0.0 + c_x, 0.5 + c_y,
              ]));

         gl.clear(gl.COLOR_BUFFER_BIT);
         gl.drawArrays(gl.TRIANGLES, 0, 3);
         gl.flush();
      }

      function webGLStart() {
         try {
            var canvas = document.getElementById("test_canvas");
            initGL(canvas);
            initShaders();
            initBuffers();

            gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
            gl.clearColor(0.2, 0.2, 0.2, 1.0);

            var f = function() {
               window.setTimeout(f, 1000 / 60);
               do_render();
            };
            f();

         } catch (e) {
            alert(e);
         }
      }
   </script>
 </html>
	<html>
	<head>
	<title>WebGL test ...</title>
	</head>
	<body onload="webGLStart();">
	<p>Hai! :D WebGL test ...</p>

	<canvas id="test_canvas" style="border: none" width="640" height="480"></canvas>
	</body>

	<script id="vertex_shader" type="x-shader/x-vertex">
	attribute vec2 vert;
	uniform mat4 matrix;
	varying vec3 color;
	void main(void) {
	gl_Position = matrix * vec4(vert, 0.0, 1.0);
	color = 0.2 * sin(vec3(exp(vert), 1.0));
	}
	</script>

	<script id="fragment_shader" type="x-shader/x-fragment">
	#ifdef GL_ES
	precision highp float;
	#endif

	varying vec3 color;
	void main(void) {
	gl_FragColor = vec4(color, 1.0);
	}
	</script>

	<script type="text/javascript">
	var gl;
	function initGL(canvas) {
	try {
	gl = canvas.getContext("experimental-webgl");
	gl.viewportWidth = canvas.width;
	gl.viewportHeight = canvas.height;
	} catch (e) {}
	if (!gl) {
	alert("Could not init WebGL ... :(");
	}
	}

	function getShader(id) {
	var script = document.getElementById(id);
	if (!script) { return null; }

	var str = "";
	var k = script.firstChild;
	while (k) {
	if (k.nodeType == 3) { // Magic number 3, what :v
	str += k.textContent;
	}
	k = k.nextSibling;
	}

	var shader;
	if (script.type == "x-shader/x-fragment") {
	shader = gl.createShader(gl.FRAGMENT_SHADER);
	} else if (script.type == "x-shader/x-vertex") {
	shader = gl.createShader(gl.VERTEX_SHADER);
	} else {
	return null;
	}

	gl.shaderSource(shader, str);
	gl.compileShader(shader);

	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	alert(gl.getShaderInfoLog(shader));
	return null;
	}

	return shader;
	}

	var prog;
	function initShaders() {
	var frag = getShader("fragment_shader");
	var vertex = getShader("vertex_shader");
	prog = gl.createProgram();
	gl.attachShader(prog, frag);
	gl.attachShader(prog, vertex);
	gl.linkProgram(prog);

	if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
	alert("Failed to init shader!");
	}

	gl.useProgram(prog);
	prog.vert_attr = gl.getAttribLocation(prog, "vert");
	gl.enableVertexAttribArray(prog.vert_attr);
	prog.matrix_uniform = gl.getUniformLocation(prog, "matrix");
	}

	var vert_buf;
	function initBuffers() {
	vert_buf = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vert_buf);
	var verts = [
	-0.5, -0.5,
	0.5, -0.5,
	0.0, 0.5,
	];

	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STREAM_DRAW);
	gl.vertexAttribPointer(prog.vert_attr, 2, gl.FLOAT, false, 0, 0);

	var ident_matrix = [
	1.0, 0.0, 0.0, 0.0,
	0.0, 1.0, 0.0, 0.0,
	0.0, 0.0, 1.0, 0.0,
	0.0, 0.0, 0.0, 1.0
	];
	gl.uniformMatrix4fv(prog.matrix_uniform, false, new Float32Array(ident_matrix));
	}

	var render_count = 0.0;
	function do_render() {
	render_count += 0.01;
	var c_x = 0.4 * Math.cos(render_count);
	var c_y = 0.4 * Math.sin(render_count);
	gl.bufferSubData(gl.ARRAY_BUFFER,
	0,
	new Float32Array([
	-0.5 + c_x, -0.5 + c_y,
	0.5 + c_x, -0.5 + c_y,
	0.0 + c_x, 0.5 + c_y,
	]));

	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.drawArrays(gl.TRIANGLES, 0, 3);
	gl.flush();
	}

	function webGLStart() {
	try {
	var canvas = document.getElementById("test_canvas");
	initGL(canvas);
	initShaders();
	initBuffers();

	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	gl.clearColor(0.2, 0.2, 0.2, 1.0);

	var f = function() {
	window.setTimeout(f, 1000 / 60);
	do_render();
	};
	f();

	} catch (e) {
	alert(e);
	}
	}
	</script>
	</html>