bellbind/webgl-texture-img.html

## webgl-texture-img.html
<!DOCTYPE html>
<html>
<head>
<script>//<!--
// WebGL texture example

top.CanvasFloatArray = top.CanvasFloatArray || WebGLFloatArray;

var gl;
var program;

var start = function () {
  var canvas = document.getElementById("canvas");
  try {
    gl = canvas.getContext("webkit-3d");
  } catch (ex) {
    gl = canvas.getContext("moz-webgl");
  }

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  if (gl.clearDepth) gl.clearDepth(1.0); else gl.clearDepthf(1.0);
  gl.enable(gl.DEPTH_TEST);
  gl.enable(gl.TEXTURING);
  gl.enable(gl.TEXTURE_2D);

  updateShaders();
  initTexture();
  render();
  setInterval(render, 100);
};

var updateShaders = function () {
  var vs = gl.createShader(gl.VERTEX_SHADER);
  var vsSource = document.getElementById("vs").value;
  gl.shaderSource(vs, vsSource);
  gl.compileShader(vs);
  //if (!gl.getShaderi(vs, gl.COMPILE_STATUS)) {
  //  alert(gl.getShaderInfoLog(vs));
  //}

  var fs = gl.createShader(gl.FRAGMENT_SHADER);
  var fsSource = document.getElementById("fs").value;
  gl.shaderSource(fs, fsSource);
  gl.compileShader(fs);
  //if (!gl.getShaderi(fs, gl.COMPILE_STATUS)) {
  //  alert(gl.getShaderInfoLog(fs));
  //}

  program = gl.createProgram();
  gl.attachShader(program, vs);
  gl.attachShader(program, fs);
  gl.linkProgram(program);
  //if (!gl.getProgrami(program, gl.LINK_STATUS)) {
  //  alert(gl.getProgramInfoLog(program));
  //}

  gl.useProgram(program);
};

var initTexture = function () {
  var textureImg = document.getElementById("texture");

  var texture = gl.createTexture();
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, textureImg);
  gl.generateMipmap(gl.TEXTURE_2D);
};

var render = function () {
  var verts = [
    -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0,
    0.5, 0.5, 0.0,

    -0.5, -0.5, 0.0,
    0.5, 0.5, 0.0,
    -0.5, 0.5, 0.0,
  ];
  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, new CanvasFloatArray(verts), gl.STATIC_DRAW);

  var position = gl.getAttribLocation(program, "position");
  gl.vertexAttribPointer(position, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(position);

  var texCoordData = [
    0.0, 0.01,
    1.0, 0.01,
    1.0, 1.0,

    0.0, 0.01,
    1.0, 1.0,
    0.0, 1.0,
  ];
  var tbuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, tbuffer);
  gl.bufferData(
    gl.ARRAY_BUFFER, new CanvasFloatArray(texCoordData), gl.STATIC_DRAW);

  var texCoord = gl.getAttribLocation(program, "coord");
  gl.vertexAttribPointer(texCoord, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(texCoord);

  var texture0 = gl.getUniformLocation(program, "texture0");
  gl.uniform1i(texture0, 0);

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, verts.length / 3);
};
//--></script>
</head>
<body onload="start()">
<div>
<canvas id="canvas" style="width: 300px; height: 300px;" />
</div>
<div>
<img id="texture"
src="data:img/png;base64,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" />
</div>
<hr />
<form>
<textarea id="vs" rows="10" cols="80">
#version 110

attribute vec3 position;
attribute vec2 coord;

varying vec2 texCoord;

void main(void) {
  gl_Position = vec4(position, 1.0);
  texCoord = coord;
}
</textarea>
<button type="button" onclick="updateShaders()">update</button>
<hr />

<textarea id="fs" rows="10" cols="80">
#version 110

uniform sampler2D texture0;
varying vec2 texCoord;

void main(void) {
  gl_FragColor = texture2D(texture0, texCoord);
  //gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</textarea>
<button type="button" onclick="updateShaders()">update</button>
<hr />
</form>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script>//<!--
	// WebGL texture example

	top.CanvasFloatArray = top.CanvasFloatArray \|\| WebGLFloatArray;

	var gl;
	var program;

	var start = function () {
	var canvas = document.getElementById("canvas");
	try {
	gl = canvas.getContext("webkit-3d");
	} catch (ex) {
	gl = canvas.getContext("moz-webgl");
	}

	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	if (gl.clearDepth) gl.clearDepth(1.0); else gl.clearDepthf(1.0);
	gl.enable(gl.DEPTH_TEST);
	gl.enable(gl.TEXTURING);
	gl.enable(gl.TEXTURE_2D);

	updateShaders();
	initTexture();
	render();
	setInterval(render, 100);
	};

	var updateShaders = function () {
	var vs = gl.createShader(gl.VERTEX_SHADER);
	var vsSource = document.getElementById("vs").value;
	gl.shaderSource(vs, vsSource);
	gl.compileShader(vs);
	//if (!gl.getShaderi(vs, gl.COMPILE_STATUS)) {
	// alert(gl.getShaderInfoLog(vs));
	//}

	var fs = gl.createShader(gl.FRAGMENT_SHADER);
	var fsSource = document.getElementById("fs").value;
	gl.shaderSource(fs, fsSource);
	gl.compileShader(fs);
	//if (!gl.getShaderi(fs, gl.COMPILE_STATUS)) {
	// alert(gl.getShaderInfoLog(fs));
	//}

	program = gl.createProgram();
	gl.attachShader(program, vs);
	gl.attachShader(program, fs);
	gl.linkProgram(program);
	//if (!gl.getProgrami(program, gl.LINK_STATUS)) {
	// alert(gl.getProgramInfoLog(program));
	//}

	gl.useProgram(program);
	};

	var initTexture = function () {
	var textureImg = document.getElementById("texture");

	var texture = gl.createTexture();
	gl.activeTexture(gl.TEXTURE0);
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texImage2D(gl.TEXTURE_2D, 0, textureImg);
	gl.generateMipmap(gl.TEXTURE_2D);
	};

	var render = function () {
	var verts = [
	-0.5, -0.5, 0.0,
	0.5, -0.5, 0.0,
	0.5, 0.5, 0.0,

	-0.5, -0.5, 0.0,
	0.5, 0.5, 0.0,
	-0.5, 0.5, 0.0,
	];
	var buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new CanvasFloatArray(verts), gl.STATIC_DRAW);

	var position = gl.getAttribLocation(program, "position");
	gl.vertexAttribPointer(position, 3, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(position);

	var texCoordData = [
	0.0, 0.01,
	1.0, 0.01,
	1.0, 1.0,

	0.0, 0.01,
	1.0, 1.0,
	0.0, 1.0,
	];
	var tbuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, tbuffer);
	gl.bufferData(
	gl.ARRAY_BUFFER, new CanvasFloatArray(texCoordData), gl.STATIC_DRAW);

	var texCoord = gl.getAttribLocation(program, "coord");
	gl.vertexAttribPointer(texCoord, 2, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(texCoord);

	var texture0 = gl.getUniformLocation(program, "texture0");
	gl.uniform1i(texture0, 0);

	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);
	gl.drawArrays(gl.TRIANGLES, 0, verts.length / 3);
	};
	//--></script>
	</head>
	<body onload="start()">
	<div>
	<canvas id="canvas" style="width: 300px; height: 300px;" />
	</div>
	<div>
	<img id="texture"
	src="data:img/png;base64,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" />
	</div>
	<hr />
	<form>
	<textarea id="vs" rows="10" cols="80">
	#version 110

	attribute vec3 position;
	attribute vec2 coord;

	varying vec2 texCoord;

	void main(void) {
	gl_Position = vec4(position, 1.0);
	texCoord = coord;
	}
	</textarea>
	<button type="button" onclick="updateShaders()">update</button>
	<hr />

	<textarea id="fs" rows="10" cols="80">
	#version 110

	uniform sampler2D texture0;
	varying vec2 texCoord;

	void main(void) {
	gl_FragColor = texture2D(texture0, texCoord);
	//gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
	}
	</textarea>
	<button type="button" onclick="updateShaders()">update</button>
	<hr />
	</form>
	</body>
	</html>