122 lines
3.6 KiB
HTML
122 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<body onload="runRepaintTest()">
|
|
<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.
|
|
The canvases in the first two rows should have a single triangle. The canvases on the left should have two triangles superimposed on top of each other.
|
|
If multisampling is supported, the odd columns should have smooth edges instead of jagged stair-stepping.
|
|
</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 src="../../repaint/resources/repaint.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]);
|
|
}
|
|
|
|
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, offset) {
|
|
var buffer = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
|
80 + offset, 20,
|
|
10 + offset, 10,
|
|
10 + offset, 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);
|
|
}
|
|
|
|
function drawAll(offset) {
|
|
for (var i=0; i<8; ++i)
|
|
draw(ctxs[i], offset);
|
|
}
|
|
|
|
drawAll(0);
|
|
|
|
function repaintTest() {
|
|
drawAll(50);
|
|
}
|
|
</script>
|