WebGL Triangle + Texture
HTML
<!-- Vertex shader -->
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main() {
gl_Position = vPosition;
gl_PointSize = 20.0;
}
</script>
<!-- Fragment shader -->
<script id="shader-fs" type="x-shader/x-fragment">
precision highp float;
uniform sampler2D pTexture;
void main() {
vec4 pixel = texture2D(pTexture, gl_PointCoord);
gl_FragColor = pixel;
}
</script>
<!-- Canvas -->
<canvas id="canvas" width="500" height="500"></canvas>
CSS
html, body {
background: #f2f2f2;
}
#canvas {
background: #222;
}
JavaScript
var gl;
var shaderProgram;
var vertexBuffer;
var vertexAttrLoc;
var textureUniLoc;
var texture;
var canvas = document.getElementById('canvas');
// Initialises WebGL context (if available)
function initGL(canvas) {
try {
gl = canvas.getContext('experimental-webgl');
gl.viewport(0, 0, canvas.width, canvas.height);
} catch(error) {}
}
// Load and bind texture
function loadTexture() {
texture = gl.createTexture(); // Returns allocated texture ID
texture.image = new Image();
texture.image.onLoad = function(){
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
};
texture.image.src = 'http://images.wikia.com/hogwartsrpg/images/9/95/KittenCareCat.png';
}
// Loads and compiles shader code from the DOM
function loadShader(id) {
var src = document.getElementById(id);
if (!src) { return null; }
var str = "";
var k = src.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
var shader;
if (src.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (src.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
// Initialises shaders and creates the shader program
function initShaders() {
var vertShader =...