Themaister · September 17, 2011 09:43 · ghost · Sep 17, 2011
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 highp vec2 tex_coord;

      void main(void) {
         gl_Position = matrix * vec4(vert, 0.0, 1.0);
         tex_coord = vert;
      }
   </script>

   <script id="fragment_shader" type="x-shader/x-fragment">
      varying highp vec2 tex_coord;
      uniform sampler2D sampler;

      void main(void) {
         gl_FragColor = vec4(0.3) + texture2D(sampler, tex_coord);
      }
   </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 texture_ = null;

      function handleImage(gl, tex) {
         if (tex.image == null) {
            alert("Error image :(");
         } else {
            alert("Resolution: " + tex.image.width + "x" + tex.image.height);
         }
         gl.bindTexture(gl.TEXTURE_2D, tex);
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, tex.image);
         alert("Handling image!");
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
         gl.bindTexture(gl.TEXTURE_2D, null);
         if (gl.getError() != gl.NO_ERROR()) {
            alert("GL error!");
         }
      }

      function initTexture(path) {
         var texture = gl.createTexture();
         texture.image = new Image();
         texture.image.onload = function() {
            handleImage(gl, texture);
         }
         texture.image.src = path;
         return texture;
      }

      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");

         gl.enable(gl.TEXTURE_2D);
         texture_ = initTexture("test.png");

         gl.uniform1i(gl.getUniformLocation(prog, "sampler"), 0);
      }

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

         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.3 * Math.cos(render_count);
         var c_y = 0.3 * Math.sin(render_count);

         /*
         if (texture_ != null) {
            alert("Have tex!");
         } else {
            alert("Does not have tex ...");
         }
         */
         gl.bindTexture(gl.TEXTURE_2D, texture_);

         gl.bufferSubData(gl.ARRAY_BUFFER,
               0,
               new Float32Array([
                  0.8 + c_x, 0.0 + c_y,
                  0.0 + c_x, 0.0 + c_y,
                  0.4 + c_x, 0.8 + 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.0, 0.0, 0.0, 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 highp vec2 tex_coord;

	void main(void) {
	gl_Position = matrix * vec4(vert, 0.0, 1.0);
	tex_coord = vert;
	}
	</script>

	<script id="fragment_shader" type="x-shader/x-fragment">
	varying highp vec2 tex_coord;
	uniform sampler2D sampler;

	void main(void) {
	gl_FragColor = vec4(0.3) + texture2D(sampler, tex_coord);
	}
	</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 texture_ = null;

	function handleImage(gl, tex) {
	if (tex.image == null) {
	alert("Error image :(");
	} else {
	alert("Resolution: " + tex.image.width + "x" + tex.image.height);
	}
	gl.bindTexture(gl.TEXTURE_2D, tex);
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, tex.image);
	alert("Handling image!");
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.bindTexture(gl.TEXTURE_2D, null);
	if (gl.getError() != gl.NO_ERROR()) {
	alert("GL error!");
	}
	}

	function initTexture(path) {
	var texture = gl.createTexture();
	texture.image = new Image();
	texture.image.onload = function() {
	handleImage(gl, texture);
	}
	texture.image.src = path;
	return texture;
	}

	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");

	gl.enable(gl.TEXTURE_2D);
	texture_ = initTexture("test.png");

	gl.uniform1i(gl.getUniformLocation(prog, "sampler"), 0);
	}

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

	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.3 * Math.cos(render_count);
	var c_y = 0.3 * Math.sin(render_count);

	/*
	if (texture_ != null) {
	alert("Have tex!");
	} else {
	alert("Does not have tex ...");
	}
	*/
	gl.bindTexture(gl.TEXTURE_2D, texture_);

	gl.bufferSubData(gl.ARRAY_BUFFER,
	0,
	new Float32Array([
	0.8 + c_x, 0.0 + c_y,
	0.0 + c_x, 0.0 + c_y,
	0.4 + c_x, 0.8 + 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.0, 0.0, 0.0, 1.0);

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

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