duhaime/index.html

## index.html
<DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>title</title>
    <style>
    * {
      margin: 0;
      padding: 0;
    }

    body, html {
      height: 100%;
      width: 100%;
      overflow: hidden;
      background: #000;
    }
    </style>

    <script id='shader-vs' type='x-shader/x-vertex'>
      attribute vec3 aVertexPosition;
      varying highp vec2 vTexCoord;

      void main() {
        gl_Position = vec4(aVertexPosition, 1.0);
        // use the x and y positional attributes to specify coords
        vTexCoord = aVertexPosition.xy + 0.5;
      }
    </script>

    <script id='shader-fs' type='x-shader/x-fragment'>
      uniform sampler2D uSampler;

      varying highp vec2 vTexCoord;

      void main() {
        gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));
      }
    </script>
  </head>
  <body>

    <canvas />

    <script>
    var gl, fs, vs, glProgram,
        // texture
        img, texture,
        // buffers
        vertices, vertexBuffer;

    function initWebgl() {
      var canvas = document.querySelector('canvas');
      canvas.width = 1024 || window.innerWidth;
      canvas.height = 1024 || window.innerHeight;
      try {
        gl = canvas.getContext('webgl')
      } catch(err) {
        alert('Your browser does not support Webgl')
        return;
      }
      // set the default background color
      gl.clearColor(0.0, 0.0, 0.0, 0.0)
      gl.clear(gl.COLOR_BUFFER_BIT)
    }

    function initShaders() {
      vs = buildShader('#shader-vs', gl.VERTEX_SHADER)
      fs = buildShader('#shader-fs', gl.FRAGMENT_SHADER)
    }

    function buildShader(selector, type) {
      var src = document.querySelector(selector).innerHTML;
      var shader = gl.createShader(type)
      gl.shaderSource(shader, src)
      gl.compileShader(shader)
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.warn('Shader error', selector, gl.getShaderInfoLog(shader))
      }
      return shader;
    }

    function initProgram() {
      glProgram = gl.createProgram()
      gl.attachShader(glProgram, vs)
      gl.attachShader(glProgram, fs)
      gl.linkProgram(glProgram)
      if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
        console.warn('Program link error')
      }
      gl.useProgram(glProgram)
    }

    function loadImage() {
      img = new Image();
      img.onload = onImageLoad;
      img.src = 'pattern.png';
    }

    function onImageLoad() {
      texture = gl.createTexture();
      gl.bindTexture(gl.TEXTURE_2D, texture);
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
      gl.uniform1i(glProgram.samplerUniform, 0);
      if (!gl.isTexture(texture)) console.warn('Texture invalid');
      glProgram.samplerUniform = gl.getUniformLocation(glProgram, 'uSampler');
      gl.uniform1i(glProgram.samplerUniform, 0);
      // call render
      render()
    }

    function getVertices() {
      vertices = new Float32Array([
        // bottom left triangle
        -1.0, -1.0, 0.0,
        1.0, -1.0, 0.0,
        1.0, 1.0, 0.0,
        // upper right triangle
        -1.0, -1.0, 0.0,
        1.0, 1.0, 0.0,
        -1.0, 1.0, 0.0,
      ])
      vertexBuffer = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
    }

    function render() {
      // vertex positions
      aPosition = gl.getAttribLocation(glProgram, 'aVertexPosition');
      gl.enableVertexAttribArray(aPosition);
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
      // draw!
      gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);
    }

    initWebgl()
    initShaders()
    initProgram()
    loadImage()
    getVertices()

    </script>
  </body>
</html>

## pattern.png

      
    Raw
  

              pattern.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<DOCTYPE html>
	<html>
	<head>
	<meta charset='UTF-8'>
	<title>title</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	body, html {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: #000;
	}
	</style>

	<script id='shader-vs' type='x-shader/x-vertex'>
	attribute vec3 aVertexPosition;
	varying highp vec2 vTexCoord;

	void main() {
	gl_Position = vec4(aVertexPosition, 1.0);
	// use the x and y positional attributes to specify coords
	vTexCoord = aVertexPosition.xy + 0.5;
	}
	</script>

	<script id='shader-fs' type='x-shader/x-fragment'>
	uniform sampler2D uSampler;

	varying highp vec2 vTexCoord;

	void main() {
	gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));
	}
	</script>
	</head>
	<body>

	<canvas />

	<script>
	var gl, fs, vs, glProgram,
	// texture
	img, texture,
	// buffers
	vertices, vertexBuffer;

	function initWebgl() {
	var canvas = document.querySelector('canvas');
	canvas.width = 1024 \|\| window.innerWidth;
	canvas.height = 1024 \|\| window.innerHeight;
	try {
	gl = canvas.getContext('webgl')
	} catch(err) {
	alert('Your browser does not support Webgl')
	return;
	}
	// set the default background color
	gl.clearColor(0.0, 0.0, 0.0, 0.0)
	gl.clear(gl.COLOR_BUFFER_BIT)
	}

	function initShaders() {
	vs = buildShader('#shader-vs', gl.VERTEX_SHADER)
	fs = buildShader('#shader-fs', gl.FRAGMENT_SHADER)
	}

	function buildShader(selector, type) {
	var src = document.querySelector(selector).innerHTML;
	var shader = gl.createShader(type)
	gl.shaderSource(shader, src)
	gl.compileShader(shader)
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	console.warn('Shader error', selector, gl.getShaderInfoLog(shader))
	}
	return shader;
	}

	function initProgram() {
	glProgram = gl.createProgram()
	gl.attachShader(glProgram, vs)
	gl.attachShader(glProgram, fs)
	gl.linkProgram(glProgram)
	if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
	console.warn('Program link error')
	}
	gl.useProgram(glProgram)
	}

	function loadImage() {
	img = new Image();
	img.onload = onImageLoad;
	img.src = 'pattern.png';
	}

	function onImageLoad() {
	texture = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, texture);
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
	gl.uniform1i(glProgram.samplerUniform, 0);
	if (!gl.isTexture(texture)) console.warn('Texture invalid');
	glProgram.samplerUniform = gl.getUniformLocation(glProgram, 'uSampler');
	gl.uniform1i(glProgram.samplerUniform, 0);
	// call render
	render()
	}

	function getVertices() {
	vertices = new Float32Array([
	// bottom left triangle
	-1.0, -1.0, 0.0,
	1.0, -1.0, 0.0,
	1.0, 1.0, 0.0,
	// upper right triangle
	-1.0, -1.0, 0.0,
	1.0, 1.0, 0.0,
	-1.0, 1.0, 0.0,
	])
	vertexBuffer = gl.createBuffer()
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
	}

	function render() {
	// vertex positions
	aPosition = gl.getAttribLocation(glProgram, 'aVertexPosition');
	gl.enableVertexAttribArray(aPosition);
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
	// draw!
	gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);
	}

	initWebgl()
	initShaders()
	initProgram()
	loadImage()
	getVertices()

	</script>
	</body>
	</html>