blob: 45829449634e98c10ae666c44aa2edf4d5e10562 [file] [log] [blame]
<!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 = []
if (window.testRunner) {
testRunner.dumpAsText(true);
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("experimental-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>