| <!DOCTYPE html> |
| <body> |
| <span id="description" style="color: white"> |
| This test is only useful as a pixel test. You should see two rows with 4 canvases in each. The top row of canvases should have a black background, the bottom row should have a dark blue background. |
| Each canvas should have a green triangle in it. If multisampling is supported, the odd columns should have smooth edges instead of jagged stair-stepping. Otherwise, all canvases within a row should be identical to each other. |
| </span> |
| <br> |
| <style> |
| canvas { |
| outline: 1px solid blue; |
| } |
| body { |
| background-color: darkblue; |
| } |
| </style> |
| <script id="2d-fragment-shader" type="x-shader/x-fragment"> |
| precision mediump float; |
| |
| uniform vec4 u_color; |
| |
| void main() { |
| gl_FragColor = u_color; |
| } |
| </script> |
| <script id="2d-vertex-shader" type="x-shader/x-vertex"> |
| attribute vec2 a_position; |
| |
| uniform vec2 u_resolution; |
| |
| void main() { |
| // convert the rectangle from pixels to 0.0 to 1.0 |
| vec2 zeroToOne = a_position / u_resolution; |
| |
| // convert from 0->1 to 0->2 |
| vec2 zeroToTwo = zeroToOne * 2.0; |
| |
| // convert from 0->2 to -1->+1 (clipspace) |
| vec2 clipSpace = zeroToTwo - 1.0; |
| |
| gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); |
| } |
| </script> |
| <script src="resources/webgl-test-utils.js"></script> |
| <script> |
| |
| var ctxs = [] |
| |
| document.getElementById("description").style.position = "absolute"; |
| document.getElementById("description").style.top = "-5000px"; |
| |
| for (var i=0; i<8; ++i) { |
| var attrs = { |
| 'alpha': (i >= 4), |
| 'preserveDrawingBuffer': (i % 4) >= 2, |
| 'antialias': (i % 2) == 1 |
| }; |
| var can = document.createElement('canvas'); |
| can.width = can.height = 100; |
| can.style.position = "absolute"; |
| can.style.left = 10 + (i % 4) * 120 + "px"; |
| can.style.top = (i < 4 ? 40 : 150) + "px"; |
| document.body.appendChild(can); |
| if (i == 3) |
| document.body.appendChild(document.createElement('br')); |
| ctxs[i] = can.getContext("webgl", attrs); |
| setup(ctxs[i]); |
| draw(ctxs[i]); |
| } |
| |
| function setup(gl) { |
| // setup a GLSL program |
| var wtu = WebGLTestUtils; |
| var vertexShader = WebGLTestUtils.loadShaderFromScript(gl, "2d-vertex-shader"); |
| var fragmentShader = WebGLTestUtils.loadShaderFromScript(gl, "2d-fragment-shader"); |
| var program = gl.createProgram(); |
| gl.attachShader(program, vertexShader, gl.VERTEX_SHADER); |
| gl.attachShader(program, fragmentShader, gl.FRAGMENT_SHADER); |
| gl.linkProgram(program); |
| gl.useProgram(program); |
| |
| // look up where the vertex data needs to go. |
| gl.myPositionLocation = gl.getAttribLocation(program, "a_position"); |
| |
| // set the resolution |
| var resolutionLocation = gl.getUniformLocation(program, "u_resolution"); |
| gl.uniform2f(resolutionLocation, 100, 100); |
| |
| var colorLocation = gl.getUniformLocation(program, "u_color"); |
| gl.uniform4f(colorLocation, 0, 1, 0, 1); |
| } |
| |
| function draw(gl) { |
| var buffer = gl.createBuffer(); |
| gl.bindBuffer(gl.ARRAY_BUFFER, buffer); |
| gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ |
| 80, 20, |
| 10, 10, |
| 10, 80]), gl.STATIC_DRAW); |
| |
| gl.enableVertexAttribArray(gl.myPositionLocation); |
| gl.vertexAttribPointer(gl.myPositionLocation, 2, gl.FLOAT, false, 0, 0); |
| |
| // draw |
| gl.drawArrays(gl.TRIANGLES, 0, 3); |
| } |
| </script> |
