| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| canvas { |
| width: 100px; |
| height: 100px; |
| image-rendering: pixelated; |
| } |
| #canvas2 { |
| image-rendering: auto; |
| } |
| </style> |
| <script id="vertexShader" type="x-shader/x-vertex"> |
| attribute vec4 vPosition; |
| |
| void main() { |
| gl_Position = vPosition; |
| } |
| </script> |
| |
| <script id="fragmentShader" type="x-shader/x-fragment"> |
| void main() { |
| gl_FragColor = vec4(0.0, 0.5, 0.0, 1.0); |
| } |
| </script> |
| <script> |
| function draw(gl) { |
| var vertices = [ 0.0, 0.8, 0.0, |
| -0.8, -0.8, 0.0, |
| 0.8, -0.8, 0.0 ]; |
| gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); |
| |
| gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the vertex data |
| gl.enableVertexAttribArray(0); |
| gl.drawArrays(gl.TRIANGLES, 0, 3); |
| gl.flush(); |
| } |
| |
| function getFragmentShader(gl) { |
| var shaderNode = document.getElementById("fragmentShader"); // fragmentShader has been defined at the top |
| var shaderSource = getShaderSource(shaderNode); |
| |
| var shader = gl.createShader(gl.FRAGMENT_SHADER); |
| gl.shaderSource(shader, shaderSource); |
| gl.compileShader(shader); |
| |
| return shader; |
| } |
| |
| function getShaderSource(shaderNode) { |
| var shaderSource = ""; |
| var node = shaderNode.firstChild; |
| while (node) { |
| if (node.nodeType == 3) // Node.TEXT_NODE |
| shaderSource += node.textContent; |
| node = node.nextSibling; |
| } |
| |
| return shaderSource; |
| } |
| |
| function getVertexShader(gl) { |
| var shaderNode = document.getElementById("vertexShader"); |
| var shaderSource = getShaderSource(shaderNode); |
| |
| var shader = gl.createShader(gl.VERTEX_SHADER); |
| gl.shaderSource(shader, shaderSource); |
| gl.compileShader(shader); |
| |
| return shader; |
| } |
| |
| function initialize(gl) { |
| var vertexShader = getVertexShader(gl); |
| var fragmentShader = getFragmentShader(gl); |
| |
| var shaderProgram = gl.createProgram(); |
| gl.attachShader(shaderProgram, vertexShader); |
| gl.attachShader(shaderProgram, fragmentShader); |
| gl.bindAttribLocation(shaderProgram, 0, "vPosition"); // vPosition has been defined at the top |
| gl.linkProgram(shaderProgram); |
| |
| gl.useProgram(shaderProgram); |
| |
| var buffer = gl.createBuffer(); |
| gl.bindBuffer(gl.ARRAY_BUFFER, buffer); |
| } |
| |
| function drawCanvas(canvas) { |
| var gl = canvas.getContext("webgl"); |
| initialize(gl); |
| draw(gl); |
| } |
| |
| function drawAll() { |
| drawCanvas(document.getElementById("canvas0")); |
| drawCanvas(document.getElementById("canvas1")); |
| drawCanvas(document.getElementById("canvas2")); |
| |
| document.getElementById("canvas1").style.imageRendering = "auto"; |
| document.getElementById("canvas2").style.imageRendering = "pixelated"; |
| } |
| </script> |
| </head> |
| <body onload="drawAll()"> |
| <canvas id="canvas0" width="20" height="20"></canvas> |
| <canvas id="canvas1" width="20" height="20"></canvas> |
| <canvas id="canvas2" width="20" height="20"></canvas> |
| </body> |
| </html> |
