browser/devtools/shadereditor/test/doc_blended-geometry.html@6474c204b198
browser/devtools/shadereditor/test/doc_blended-geometry.html
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 <!-- Any copyright is dedicated to the Public Domain.
2 http://creativecommons.org/publicdomain/zero/1.0/ -->
3 <!doctype html>
5 <html>
6 <head>
7 <meta charset="utf-8"/>
8 <title>WebGL editor test page</title>
10 <script id="shader-vs" type="x-shader/x-vertex">
11 precision lowp float;
12 attribute vec3 aVertexPosition;
13 uniform float uDepth;
15 void main(void) {
16 gl_Position = vec4(aVertexPosition, uDepth);
17 }
18 </script>
20 <script id="shader-fs-0" type="x-shader/x-fragment">
21 precision lowp float;
23 void main(void) {
24 gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);
25 }
26 </script>
28 <script id="shader-fs-1" type="x-shader/x-fragment">
29 precision lowp float;
31 void main(void) {
32 gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
33 }
34 </script>
35 </head>
37 <body>
38 <canvas id="canvas" width="128" height="128"></canvas>
40 <script type="text/javascript;version=1.8">
41 "use strict";
43 let canvas, gl;
44 let program = [];
45 let squareVerticesPositionBuffer;
46 let vertexPositionAttribute = [];
47 let depthUniform = [];
49 window.onload = function() {
50 canvas = document.querySelector("canvas");
51 gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });
52 gl.clearColor(0.0, 0.0, 0.0, 1.0);
54 initProgram(0);
55 initProgram(1);
56 initBuffers();
57 drawScene();
58 }
60 function initProgram(i) {
61 let vertexShader = getShader("shader-vs");
62 let fragmentShader = getShader("shader-fs-" + i);
64 program[i] = gl.createProgram();
65 gl.attachShader(program[i], vertexShader);
66 gl.attachShader(program[i], fragmentShader);
67 gl.linkProgram(program[i]);
69 vertexPositionAttribute[i] = gl.getAttribLocation(program[i], "aVertexPosition");
70 gl.enableVertexAttribArray(vertexPositionAttribute[i]);
72 depthUniform[i] = gl.getUniformLocation(program[i], "uDepth");
73 }
75 function getShader(id) {
76 let script = document.getElementById(id);
77 let source = script.textContent;
78 let shader;
80 if (script.type == "x-shader/x-fragment") {
81 shader = gl.createShader(gl.FRAGMENT_SHADER);
82 } else if (script.type == "x-shader/x-vertex") {
83 shader = gl.createShader(gl.VERTEX_SHADER);
84 }
86 gl.shaderSource(shader, source);
87 gl.compileShader(shader);
89 return shader;
90 }
92 function initBuffers() {
93 squareVerticesPositionBuffer = gl.createBuffer();
94 gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesPositionBuffer);
95 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
96 1.0, 1.0, 0.0,
97 -1.0, 1.0, 0.0,
98 1.0, -1.0, 0.0,
99 -1.0, -1.0, 0.0
100 ]), gl.STATIC_DRAW);
101 }
103 function drawScene() {
104 gl.clear(gl.COLOR_BUFFER_BIT);
106 for (let i = 0; i < 2; i++) {
107 gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesPositionBuffer);
108 gl.vertexAttribPointer(vertexPositionAttribute[i], 3, gl.FLOAT, false, 0, 0);
110 gl.useProgram(program[i]);
111 gl.uniform1f(depthUniform[i], i + 1);
112 blend(i);
113 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
114 }
116 window.requestAnimationFrame(drawScene);
117 }
119 function blend(i) {
120 if (i == 0) {
121 gl.disable(gl.BLEND);
122 }
123 else if (i == 1) {
124 gl.enable(gl.BLEND);
125 gl.blendColor(0.5, 0, 0, 0.25);
126 gl.blendEquationSeparate(
127 gl.FUNC_REVERSE_SUBTRACT, gl.FUNC_SUBTRACT);
128 gl.blendFuncSeparate(
129 gl.CONSTANT_COLOR, gl.ONE_MINUS_CONSTANT_COLOR,
130 gl.ONE_MINUS_CONSTANT_COLOR, gl.CONSTANT_COLOR);
131 }
132 }
133 </script>
134 </body>
136 </html>
