| [email protected] | 6392162 | 2010-01-20 01:10:15 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <style type="text/css" media="screen"> |
| 5 | canvas { |
| 6 | margin: 20px; |
| 7 | width: 200px; |
| 8 | height: 200px; |
| 9 | padding: 0 20px; |
| 10 | border: 2px solid black; |
| 11 | -webkit-box-reflect: below 20px; |
| 12 | outline: 10px solid transparent; /* affects layer sizes */ |
| 13 | } |
| 14 | |
| 15 | </style> |
| 16 | <script id="vertexShader" type="x-shader/x-vertex"> |
| 17 | attribute vec4 vPosition; |
| 18 | |
| 19 | void main() { |
| 20 | gl_Position = vPosition; |
| 21 | } |
| 22 | </script> |
| 23 | |
| 24 | <script id="fragmentShader" type="x-shader/x-fragment"> |
| 25 | void main() { |
| 26 | gl_FragColor = vec4(0.0, 0.5, 0.0, 1.0); |
| 27 | } |
| 28 | </script> |
| 29 | <script> |
| [email protected] | b71a8c4 | 2012-06-11 18:29:22 | [diff] [blame] | 30 | if (window.testRunner) |
| 31 | testRunner.overridePreference("WebKitWebGLEnabled", "1"); |
| [email protected] | 267fab0 | 2010-03-12 00:03:42 | [diff] [blame] | 32 | |
| [email protected] | 6392162 | 2010-01-20 01:10:15 | [diff] [blame] | 33 | var gl = null; |
| 34 | |
| 35 | function draw() |
| 36 | { |
| 37 | var vertices = [ 0.0, 0.8, 0.0, |
| 38 | -0.8, -0.8, 0.0, |
| 39 | 0.8, -0.8, 0.0 ]; |
| [email protected] | f5c3539 | 2010-08-12 00:12:26 | [diff] [blame] | 40 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); |
| [email protected] | 6392162 | 2010-01-20 01:10:15 | [diff] [blame] | 41 | |
| 42 | gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the vertex data |
| 43 | gl.enableVertexAttribArray(0); |
| 44 | gl.drawArrays(gl.TRIANGLES, 0, 3); |
| 45 | gl.flush(); |
| 46 | } |
| 47 | |
| 48 | function getFragmentShader() |
| 49 | { |
| 50 | var shaderNode = document.getElementById("fragmentShader"); // fragmentShader has been defined at the top |
| 51 | var shaderSource = getShaderSource(shaderNode); |
| 52 | |
| 53 | var shader = gl.createShader(gl.FRAGMENT_SHADER); |
| 54 | gl.shaderSource(shader, shaderSource); |
| 55 | gl.compileShader(shader); |
| 56 | |
| 57 | return shader; |
| 58 | } |
| 59 | |
| 60 | function getShaderSource(shaderNode) |
| 61 | { |
| 62 | var shaderSource = ""; |
| 63 | var node = shaderNode.firstChild; |
| 64 | while (node) { |
| 65 | if (node.nodeType == 3) // Node.TEXT_NODE |
| 66 | shaderSource += node.textContent; |
| 67 | node = node.nextSibling; |
| 68 | } |
| 69 | |
| 70 | return shaderSource; |
| 71 | } |
| 72 | |
| 73 | function getVertexShader() |
| 74 | { |
| 75 | var shaderNode = document.getElementById("vertexShader"); |
| 76 | var shaderSource = getShaderSource(shaderNode); |
| 77 | |
| 78 | var shader = gl.createShader(gl.VERTEX_SHADER); |
| 79 | gl.shaderSource(shader, shaderSource); |
| 80 | gl.compileShader(shader); |
| 81 | |
| 82 | return shader; |
| 83 | } |
| 84 | |
| 85 | function initialize() |
| 86 | { |
| 87 | var theCanvas = document.getElementById("canvas"); |
| 88 | gl = theCanvas.getContext("experimental-webgl"); |
| 89 | |
| 90 | var vertexShader = getVertexShader(); |
| 91 | var fragmentShader = getFragmentShader(); |
| 92 | |
| 93 | var shaderProgram = gl.createProgram(); |
| 94 | gl.attachShader(shaderProgram, vertexShader); |
| 95 | gl.attachShader(shaderProgram, fragmentShader); |
| 96 | gl.bindAttribLocation(shaderProgram, 0, "vPosition"); // vPosition has been defined at the top |
| 97 | gl.linkProgram(shaderProgram); |
| 98 | |
| 99 | gl.useProgram(shaderProgram); |
| 100 | |
| 101 | var buffer = gl.createBuffer(); |
| 102 | gl.bindBuffer(gl.ARRAY_BUFFER, buffer); |
| 103 | } |
| 104 | |
| 105 | function drawCanvas() |
| 106 | { |
| 107 | initialize(); |
| 108 | draw(); |
| 109 | } |
| 110 | </script> |
| 111 | </head> |
| 112 | <body onload="drawCanvas()"> |
| 113 | |
| 114 | <p>You should see a green triangle and its reflection.</p> |
| 115 | <canvas id="canvas" style="left: 20px" width="200" height="200"></canvas> |
| 116 | |
| 117 | </body> |
| 118 | </html> |
