blob: a94aa41773b2a5d2ff25714c6ae952a567575ce3 [file] [log] [blame]
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width">
<style>
body {
margin: 0;
background-size: 100px 100px;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><rect width="0.5" height="0.5" fill="blue"/><rect x="0.5" y="0.5" width="0.5" height="0.5" fill="orange"/><rect x="0" y="0.5" width="0.5" height="0.5" fill="yellow"/><rect x="0.5" y="0" width="0.5" height="0.5" fill="pink"/></svg>');
}
canvas {
width: 200px;
height: 200px;
}
</style>
</head>
<script id="vertexShaderSource" type="text/glsl">
attribute vec4 position;
void main() {
gl_Position = position;
}
</script>
<script id="fragmentShaderSource" type="text/glsl">
#ifdef GL_ES
precision mediump float;
#endif
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);
}
</script>
<script>
function drawTriangle(canvas, alpha) {
canvas.width = 200;
canvas.height = 200;
var gl = canvas.getContext("webgl", { alpha: alpha });
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, document.getElementById("vertexShaderSource").textContent);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
console.error("Vertex Shader failed to compile.");
console.log(gl.getShaderInfoLog(vertexShader));
return;
}
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, document.getElementById("fragmentShaderSource").textContent);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
console.error("Fragment Shader failed to compile.");
console.log(gl.getShaderInfoLog(fragmentShader));
return;
}
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error("Unable to link shaders into program.");
return;
}
gl.useProgram(program);
var positionAttribute = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionAttribute);
var vertices = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0, 0.5
]);
var triangleBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.clearColor(0, 1, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleBuffer);
gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
window.addEventListener("load", function () {
var canvases = document.querySelectorAll("canvas");
drawTriangle(canvases[0], true);
drawTriangle(canvases[1], false);
}, false);
</script>
<body>
<canvas></canvas><canvas></canvas>
</body>