1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/shadereditor/test/doc_blended-geometry.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,136 @@
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 + uniform float uDepth;
1.17 +
1.18 + void main(void) {
1.19 + gl_Position = vec4(aVertexPosition, uDepth);
1.20 + }
1.21 + </script>
1.22 +
1.23 + <script id="shader-fs-0" type="x-shader/x-fragment">
1.24 + precision lowp float;
1.25 +
1.26 + void main(void) {
1.27 + gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);
1.28 + }
1.29 + </script>
1.30 +
1.31 + <script id="shader-fs-1" type="x-shader/x-fragment">
1.32 + precision lowp float;
1.33 +
1.34 + void main(void) {
1.35 + gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
1.36 + }
1.37 + </script>
1.38 + </head>
1.39 +
1.40 + <body>
1.41 + <canvas id="canvas" width="128" height="128"></canvas>
1.42 +
1.43 + <script type="text/javascript;version=1.8">
1.44 + "use strict";
1.45 +
1.46 + let canvas, gl;
1.47 + let program = [];
1.48 + let squareVerticesPositionBuffer;
1.49 + let vertexPositionAttribute = [];
1.50 + let depthUniform = [];
1.51 +
1.52 + window.onload = function() {
1.53 + canvas = document.querySelector("canvas");
1.54 + gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });
1.55 + gl.clearColor(0.0, 0.0, 0.0, 1.0);
1.56 +
1.57 + initProgram(0);
1.58 + initProgram(1);
1.59 + initBuffers();
1.60 + drawScene();
1.61 + }
1.62 +
1.63 + function initProgram(i) {
1.64 + let vertexShader = getShader("shader-vs");
1.65 + let fragmentShader = getShader("shader-fs-" + i);
1.66 +
1.67 + program[i] = gl.createProgram();
1.68 + gl.attachShader(program[i], vertexShader);
1.69 + gl.attachShader(program[i], fragmentShader);
1.70 + gl.linkProgram(program[i]);
1.71 +
1.72 + vertexPositionAttribute[i] = gl.getAttribLocation(program[i], "aVertexPosition");
1.73 + gl.enableVertexAttribArray(vertexPositionAttribute[i]);
1.74 +
1.75 + depthUniform[i] = gl.getUniformLocation(program[i], "uDepth");
1.76 + }
1.77 +
1.78 + function getShader(id) {
1.79 + let script = document.getElementById(id);
1.80 + let source = script.textContent;
1.81 + let shader;
1.82 +
1.83 + if (script.type == "x-shader/x-fragment") {
1.84 + shader = gl.createShader(gl.FRAGMENT_SHADER);
1.85 + } else if (script.type == "x-shader/x-vertex") {
1.86 + shader = gl.createShader(gl.VERTEX_SHADER);
1.87 + }
1.88 +
1.89 + gl.shaderSource(shader, source);
1.90 + gl.compileShader(shader);
1.91 +
1.92 + return shader;
1.93 + }
1.94 +
1.95 + function initBuffers() {
1.96 + squareVerticesPositionBuffer = gl.createBuffer();
1.97 + gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesPositionBuffer);
1.98 + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
1.99 + 1.0, 1.0, 0.0,
1.100 + -1.0, 1.0, 0.0,
1.101 + 1.0, -1.0, 0.0,
1.102 + -1.0, -1.0, 0.0
1.103 + ]), gl.STATIC_DRAW);
1.104 + }
1.105 +
1.106 + function drawScene() {
1.107 + gl.clear(gl.COLOR_BUFFER_BIT);
1.108 +
1.109 + for (let i = 0; i < 2; i++) {
1.110 + gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesPositionBuffer);
1.111 + gl.vertexAttribPointer(vertexPositionAttribute[i], 3, gl.FLOAT, false, 0, 0);
1.112 +
1.113 + gl.useProgram(program[i]);
1.114 + gl.uniform1f(depthUniform[i], i + 1);
1.115 + blend(i);
1.116 + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
1.117 + }
1.118 +
1.119 + window.requestAnimationFrame(drawScene);
1.120 + }
1.121 +
1.122 + function blend(i) {
1.123 + if (i == 0) {
1.124 + gl.disable(gl.BLEND);
1.125 + }
1.126 + else if (i == 1) {
1.127 + gl.enable(gl.BLEND);
1.128 + gl.blendColor(0.5, 0, 0, 0.25);
1.129 + gl.blendEquationSeparate(
1.130 + gl.FUNC_REVERSE_SUBTRACT, gl.FUNC_SUBTRACT);
1.131 + gl.blendFuncSeparate(
1.132 + gl.CONSTANT_COLOR, gl.ONE_MINUS_CONSTANT_COLOR,
1.133 + gl.ONE_MINUS_CONSTANT_COLOR, gl.CONSTANT_COLOR);
1.134 + }
1.135 + }
1.136 + </script>
1.137 + </body>
1.138 +
1.139 +</html>
