mbostock/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Part four of my introduction to WebGL, wherein an image is displayed.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec2 a_position;

void main(void) {
  gl_Position = vec4(a_position, 0.0, 1.0);
}

</script>
<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

uniform sampler2D u_image;
uniform vec2 u_size;

void main(void) {
  gl_FragColor = texture2D(u_image, vec2(gl_FragCoord.x / u_size.x, 1.0 - gl_FragCoord.y / u_size.y));
}

</script>
<script>

// Select the canvas from the document.
var canvas = document.querySelector("canvas");

// Create the WebGL context, with fallback for experimental support.
var context = canvas.getContext("webgl")
    || canvas.getContext("experimental-webgl");

// Compile the vertex shader.
var vertexShader = context.createShader(context.VERTEX_SHADER);
context.shaderSource(vertexShader, document.querySelector("#vertex-shader").textContent);
context.compileShader(vertexShader);
if (!context.getShaderParameter(vertexShader, context.COMPILE_STATUS)) throw new Error(context.getShaderInfoLog(vertexShader));

// Compile the fragment shader.
var fragmentShader = context.createShader(context.FRAGMENT_SHADER);
context.shaderSource(fragmentShader, document.querySelector("#fragment-shader").textContent);
context.compileShader(fragmentShader);
if (!context.getShaderParameter(fragmentShader, context.COMPILE_STATUS)) throw new Error(context.getShaderInfoLog(fragmentShader));

// Link and use the program.
var program = context.createProgram();
context.attachShader(program, vertexShader);
context.attachShader(program, fragmentShader);
context.linkProgram(program);
if (!context.getProgramParameter(program, context.LINK_STATUS)) throw new Error(context.getProgramInfoLog(program));
context.useProgram(program);

// Define the positions (as vec2) of the square that covers the canvas.
var positionBuffer = context.createBuffer();
context.bindBuffer(context.ARRAY_BUFFER, positionBuffer);
context.bufferData(context.ARRAY_BUFFER, new Float32Array([
    -1.0, -1.0,
    +1.0, -1.0,
    +1.0, +1.0,
    -1.0, +1.0
  ]), context.STATIC_DRAW);

// Bind the position buffer to the position attribute.
var positionAttribute = context.getAttribLocation(program, "a_position");
context.enableVertexAttribArray(positionAttribute);
context.vertexAttribPointer(positionAttribute, 2, context.FLOAT, false, 0, 0);

// Load the reference image.
var image = new Image;
image.src = "mandrill.jpg";
image.onload = loaded;

// When the image is loaded…
function loaded() {

  // Define the size.
  var sizeUniform = context.getUniformLocation(program, "u_size");
  context.uniform2fv(sizeUniform, [image.width, image.height]);

  // Create a texture.
  var texture = context.createTexture();
  context.bindTexture(context.TEXTURE_2D, texture);
  context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MIN_FILTER, context.NEAREST);
  context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MAG_FILTER, context.NEAREST);
  context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, context.RGBA, context.UNSIGNED_BYTE, image);

  // Draw the square!
  context.drawArrays(context.TRIANGLE_FAN, 0, 4);
}

</script>

## mandrill.jpg

      
    Raw
  

              mandrill.jpg
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<canvas width="960" height="500"></canvas>
	<script id="vertex-shader" type="x-shader/x-vertex">

	attribute vec2 a_position;

	void main(void) {
	gl_Position = vec4(a_position, 0.0, 1.0);
	}

	</script>
	<script id="fragment-shader" type="x-shader/x-fragment">

	precision mediump float;

	uniform sampler2D u_image;
	uniform vec2 u_size;

	void main(void) {
	gl_FragColor = texture2D(u_image, vec2(gl_FragCoord.x / u_size.x, 1.0 - gl_FragCoord.y / u_size.y));
	}

	</script>
	<script>

	// Select the canvas from the document.
	var canvas = document.querySelector("canvas");

	// Create the WebGL context, with fallback for experimental support.
	var context = canvas.getContext("webgl")
	\|\| canvas.getContext("experimental-webgl");

	// Compile the vertex shader.
	var vertexShader = context.createShader(context.VERTEX_SHADER);
	context.shaderSource(vertexShader, document.querySelector("#vertex-shader").textContent);
	context.compileShader(vertexShader);
	if (!context.getShaderParameter(vertexShader, context.COMPILE_STATUS)) throw new Error(context.getShaderInfoLog(vertexShader));

	// Compile the fragment shader.
	var fragmentShader = context.createShader(context.FRAGMENT_SHADER);
	context.shaderSource(fragmentShader, document.querySelector("#fragment-shader").textContent);
	context.compileShader(fragmentShader);
	if (!context.getShaderParameter(fragmentShader, context.COMPILE_STATUS)) throw new Error(context.getShaderInfoLog(fragmentShader));

	// Link and use the program.
	var program = context.createProgram();
	context.attachShader(program, vertexShader);
	context.attachShader(program, fragmentShader);
	context.linkProgram(program);
	if (!context.getProgramParameter(program, context.LINK_STATUS)) throw new Error(context.getProgramInfoLog(program));
	context.useProgram(program);

	// Define the positions (as vec2) of the square that covers the canvas.
	var positionBuffer = context.createBuffer();
	context.bindBuffer(context.ARRAY_BUFFER, positionBuffer);
	context.bufferData(context.ARRAY_BUFFER, new Float32Array([
	-1.0, -1.0,
	+1.0, -1.0,
	+1.0, +1.0,
	-1.0, +1.0
	]), context.STATIC_DRAW);

	// Bind the position buffer to the position attribute.
	var positionAttribute = context.getAttribLocation(program, "a_position");
	context.enableVertexAttribArray(positionAttribute);
	context.vertexAttribPointer(positionAttribute, 2, context.FLOAT, false, 0, 0);

	// Load the reference image.
	var image = new Image;
	image.src = "mandrill.jpg";
	image.onload = loaded;

	// When the image is loaded…
	function loaded() {

	// Define the size.
	var sizeUniform = context.getUniformLocation(program, "u_size");
	context.uniform2fv(sizeUniform, [image.width, image.height]);

	// Create a texture.
	var texture = context.createTexture();
	context.bindTexture(context.TEXTURE_2D, texture);
	context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MIN_FILTER, context.NEAREST);
	context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MAG_FILTER, context.NEAREST);
	context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, context.RGBA, context.UNSIGNED_BYTE, image);

	// Draw the square!
	context.drawArrays(context.TRIANGLE_FAN, 0, 4);
	}

	</script>