yohhoy · October 29, 2015 02:11
diff --git a/webgl1.html b/webgl1.html
 <!DOCTYPE html>
 <html>
 <head>
 <title>WebGL</title>
 <style type="text/css">
 <!--
 #c { background-color: #eee; }
 //-->
 </style>
 <script id="vs" type="x-shader/x-vertex">
 attribute vec3 pos;

 void main() {
  gl_Position = vec4(pos, 1.0);
 }
 </script>
 <script id="fs" type="x-shader/x-fragment">
 precision mediump float;

 void main() {
  gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
 }
 </script>
 <script>
 <!--
 function $(id) { return document.getElementById(id); }

 var c, gl;

 function initWebGL() {
  c = $("c");
  gl = c.getContext('webgl') || c.getContext("experimental-webgl");
 }

 function initShaders() {
  var p = gl.createProgram();
  var vs = gl.createShader(gl.VERTEX_SHADER);
  var fs = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(vs, $("vs").text);
  gl.shaderSource(fs, $("fs").text);
  gl.compileShader(vs);
  gl.compileShader(fs);
  gl.attachShader(p, vs);
  gl.attachShader(p, fs);
  gl.linkProgram(p);
  gl.useProgram(p);
  gl.bindAttribLocation(p, 0, "pos");
  gl.enableVertexAttribArray(0);
 }

 function draw() {
  var vertices = [
     1.0,  1.0,  0.0,
    -1.0,  1.0,  0.0,
     1.0, -1.0,  0.0,
    -1.0, -1.0,  0.0];
  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  gl.flush();
 }

 window.onload = function() {
  initWebGL();
  initShaders();
  draw();
 }
 //-->
 </script>
 </head>

 <body>
 <canvas id="c" width="512" height="512"></canvas>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>WebGL</title>
	<style type="text/css">
	<!--
	#c { background-color: #eee; }
	//-->
	</style>
	<script id="vs" type="x-shader/x-vertex">
	attribute vec3 pos;

	void main() {
	gl_Position = vec4(pos, 1.0);
	}
	</script>
	<script id="fs" type="x-shader/x-fragment">
	precision mediump float;

	void main() {
	gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
	}
	</script>
	<script>
	<!--
	function $(id) { return document.getElementById(id); }

	var c, gl;

	function initWebGL() {
	c = $("c");
	gl = c.getContext('webgl') \|\| c.getContext("experimental-webgl");
	}

	function initShaders() {
	var p = gl.createProgram();
	var vs = gl.createShader(gl.VERTEX_SHADER);
	var fs = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(vs, $("vs").text);
	gl.shaderSource(fs, $("fs").text);
	gl.compileShader(vs);
	gl.compileShader(fs);
	gl.attachShader(p, vs);
	gl.attachShader(p, fs);
	gl.linkProgram(p);
	gl.useProgram(p);
	gl.bindAttribLocation(p, 0, "pos");
	gl.enableVertexAttribArray(0);
	}

	function draw() {
	var vertices = [
	1.0, 1.0, 0.0,
	-1.0, 1.0, 0.0,
	1.0, -1.0, 0.0,
	-1.0, -1.0, 0.0];
	gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
	gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
	gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
	gl.flush();
	}

	window.onload = function() {
	initWebGL();
	initShaders();
	draw();
	}
	//-->
	</script>
	</head>

	<body>
	<canvas id="c" width="512" height="512"></canvas>
	</body>
	</html>