1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/shadereditor/test/doc_multiple-contexts.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,112 @@
1.4 +<!-- Any copyright is dedicated to the Public Domain.
1.5 + http://creativecommons.org/publicdomain/zero/1.0/ -->
1.6 +<!doctype html>
1.7 +
1.8 +<html>
1.9 + <head>
1.10 + <meta charset="utf-8"/>
1.11 + <title>WebGL editor test page</title>
1.12 +
1.13 + <script id="shader-vs" type="x-shader/x-vertex">
1.14 + precision lowp float;
1.15 + attribute vec3 aVertexPosition;
1.16 +
1.17 + void main(void) {
1.18 + gl_Position = vec4(aVertexPosition, 1);
1.19 + }
1.20 + </script>
1.21 +
1.22 + <script id="shader-fs" type="x-shader/x-fragment">
1.23 + precision lowp float;
1.24 + uniform vec3 uColor;
1.25 +
1.26 + void main(void) {
1.27 + gl_FragColor = vec4(uColor, 1);
1.28 + }
1.29 + </script>
1.30 + </head>
1.31 +
1.32 + <body>
1.33 + <canvas id="canvas1" width="128" height="128"></canvas>
1.34 + <canvas id="canvas2" width="128" height="128"></canvas>
1.35 +
1.36 + <script type="text/javascript;version=1.8">
1.37 + "use strict";
1.38 +
1.39 + let canvas = [], gl = [];
1.40 + let program = [];
1.41 + let squareVerticesPositionBuffer = [];
1.42 + let vertexPositionAttribute = [];
1.43 + let colorUniform = [];
1.44 +
1.45 + window.onload = function() {
1.46 + for (let i = 0; i < 2; i++) {
1.47 + canvas[i] = document.querySelector("#canvas" + (i + 1));
1.48 + gl[i] = canvas[i].getContext("webgl", { preserveDrawingBuffer: true });
1.49 + gl[i].clearColor(0.0, 0.0, 0.0, 1.0);
1.50 +
1.51 + initProgram(i);
1.52 + initBuffers(i);
1.53 + drawScene(i);
1.54 + }
1.55 + }
1.56 +
1.57 + function initProgram(i) {
1.58 + let vertexShader = getShader(gl[i], "shader-vs");
1.59 + let fragmentShader = getShader(gl[i], "shader-fs");
1.60 +
1.61 + program[i] = gl[i].createProgram();
1.62 + gl[i].attachShader(program[i], vertexShader);
1.63 + gl[i].attachShader(program[i], fragmentShader);
1.64 + gl[i].linkProgram(program[i]);
1.65 +
1.66 + vertexPositionAttribute[i] = gl[i].getAttribLocation(program[i], "aVertexPosition");
1.67 + gl[i].enableVertexAttribArray(vertexPositionAttribute[i]);
1.68 +
1.69 + colorUniform[i] = gl[i].getUniformLocation(program[i], "uColor");
1.70 + }
1.71 +
1.72 + function getShader(gl, id) {
1.73 + let script = document.getElementById(id);
1.74 + let source = script.textContent;
1.75 + let shader;
1.76 +
1.77 + if (script.type == "x-shader/x-fragment") {
1.78 + shader = gl.createShader(gl.FRAGMENT_SHADER);
1.79 + } else if (script.type == "x-shader/x-vertex") {
1.80 + shader = gl.createShader(gl.VERTEX_SHADER);
1.81 + }
1.82 +
1.83 + gl.shaderSource(shader, source);
1.84 + gl.compileShader(shader);
1.85 +
1.86 + return shader;
1.87 + }
1.88 +
1.89 + function initBuffers(i) {
1.90 + squareVerticesPositionBuffer[i] = gl[i].createBuffer();
1.91 + gl[i].bindBuffer(gl[i].ARRAY_BUFFER, squareVerticesPositionBuffer[i]);
1.92 + gl[i].bufferData(gl[i].ARRAY_BUFFER, new Float32Array([
1.93 + 1.0, 1.0, 0.0,
1.94 + -1.0, 1.0, 0.0,
1.95 + 1.0, -1.0, 0.0,
1.96 + -1.0, -1.0, 0.0
1.97 + ]), gl[i].STATIC_DRAW);
1.98 + }
1.99 +
1.100 + function drawScene(i) {
1.101 + gl[i].clear(gl[i].COLOR_BUFFER_BIT);
1.102 +
1.103 + gl[i].bindBuffer(gl[i].ARRAY_BUFFER, squareVerticesPositionBuffer[i]);
1.104 + gl[i].vertexAttribPointer(vertexPositionAttribute[i], 3, gl[i].FLOAT, false, 0, 0);
1.105 +
1.106 + gl[i].useProgram(program[i]);
1.107 + gl[i].uniform3fv(colorUniform[i], i == 0 ? [1, 1, 0] : [0, 1, 1]);
1.108 + gl[i].drawArrays(gl[i].TRIANGLE_STRIP, 0, 4);
1.109 +
1.110 + window.requestAnimationFrame(() => drawScene(i));
1.111 + }
1.112 + </script>
1.113 + </body>
1.114 +
1.115 +</html>
