bellbind/texture.html

## texture.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 textureWidth = 256;
  var textureCanvas = document.getElementById("texture");
  //var textureCanvas = document.createElement("canvas");
  textureCanvas.width = textureCanvas.height = textureWidth;
  var textureContext = textureCanvas.getContext("2d");
  var textureImage =
    textureContext.createImageData(textureWidth, textureWidth);
  for (var i = 0; i < textureWidth; i += 1) {
    for (var j = 0; j < textureWidth; j += 1) {
      var index = (j * textureWidth + i) * 4;
      textureImage.data[index + 0] = i;
      textureImage.data[index + 1] = Math.floor((i + j) / 2);
      textureImage.data[index + 2] = j;
      textureImage.data[index + 3] = 255;
    }
  }
  textureContext.putImageData(textureImage, 0, 0);

  var texture = gl.createTexture();
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, textureCanvas);
  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>
<canvas id="texture" style="width: 256px; height: 256px;" />
</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 textureWidth = 256;
	var textureCanvas = document.getElementById("texture");
	//var textureCanvas = document.createElement("canvas");
	textureCanvas.width = textureCanvas.height = textureWidth;
	var textureContext = textureCanvas.getContext("2d");
	var textureImage =
	textureContext.createImageData(textureWidth, textureWidth);
	for (var i = 0; i < textureWidth; i += 1) {
	for (var j = 0; j < textureWidth; j += 1) {
	var index = (j * textureWidth + i) * 4;
	textureImage.data[index + 0] = i;
	textureImage.data[index + 1] = Math.floor((i + j) / 2);
	textureImage.data[index + 2] = j;
	textureImage.data[index + 3] = 255;
	}
	}
	textureContext.putImageData(textureImage, 0, 0);

	var texture = gl.createTexture();
	gl.activeTexture(gl.TEXTURE0);
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.texImage2D(gl.TEXTURE_2D, 0, textureCanvas);
	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>
	<canvas id="texture" style="width: 256px; height: 256px;" />
	</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>