browser/devtools/shadereditor/test/doc_shader-order.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.

michael@0 1 <!-- Any copyright is dedicated to the Public Domain.
michael@0 2 http://creativecommons.org/publicdomain/zero/1.0/ -->
michael@0 3 <!doctype html>
michael@0 4
michael@0 5 <html>
michael@0 6 <head>
michael@0 7 <meta charset="utf-8"/>
michael@0 8 <title>WebGL editor test page</title>
michael@0 9
michael@0 10 <script id="shader-vs" type="x-shader/x-vertex">
michael@0 11 precision lowp float;
michael@0 12
michael@0 13 void main(void) {
michael@0 14 gl_Position = vec4(0, 0, 0, 1); // I'm a vertex shader!
michael@0 15 }
michael@0 16 </script>
michael@0 17
michael@0 18 <script id="shader-fs" type="x-shader/x-fragment">
michael@0 19 precision lowp float;
michael@0 20 varying vec3 vFragmentColor;
michael@0 21
michael@0 22 void main(void) {
michael@0 23 gl_FragColor = vec4(1, 0, 0, 1); // I'm a fragment shader!
michael@0 24 }
michael@0 25 </script>
michael@0 26 </head>
michael@0 27
michael@0 28 <body>
michael@0 29 <canvas width="512" height="512"></canvas>
michael@0 30
michael@0 31 <script type="text/javascript;version=1.8">
michael@0 32 "use strict";
michael@0 33
michael@0 34 let canvas, gl;
michael@0 35
michael@0 36 window.onload = function() {
michael@0 37 canvas = document.querySelector("canvas");
michael@0 38 gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });
michael@0 39
michael@0 40 let shaderProgram = gl.createProgram();
michael@0 41 let vertexShader, fragmentShader;
michael@0 42
michael@0 43 // Compile and attach the shaders in a random order. The test will
michael@0 44 // ensure that the correct vertex and fragment source is retrieved
michael@0 45 // regardless of this crazyness.
michael@0 46 if (Math.random() > 0.5) {
michael@0 47 vertexShader = getShader(gl, "shader-vs");
michael@0 48 fragmentShader = getShader(gl, "shader-fs");
michael@0 49 } else {
michael@0 50 fragmentShader = getShader(gl, "shader-fs");
michael@0 51 vertexShader = getShader(gl, "shader-vs");
michael@0 52 }
michael@0 53 if (Math.random() > 0.5) {
michael@0 54 gl.attachShader(shaderProgram, vertexShader);
michael@0 55 gl.attachShader(shaderProgram, fragmentShader);
michael@0 56 } else {
michael@0 57 gl.attachShader(shaderProgram, fragmentShader);
michael@0 58 gl.attachShader(shaderProgram, vertexShader);
michael@0 59 }
michael@0 60
michael@0 61 gl.linkProgram(shaderProgram);
michael@0 62 }
michael@0 63
michael@0 64 function getShader(gl, id) {
michael@0 65 let script = document.getElementById(id);
michael@0 66 let source = script.textContent;
michael@0 67 let shader;
michael@0 68
michael@0 69 if (script.type == "x-shader/x-fragment") {
michael@0 70 shader = gl.createShader(gl.FRAGMENT_SHADER);
michael@0 71 } else if (script.type == "x-shader/x-vertex") {
michael@0 72 shader = gl.createShader(gl.VERTEX_SHADER);
michael@0 73 }
michael@0 74
michael@0 75 gl.shaderSource(shader, source);
michael@0 76 gl.compileShader(shader);
michael@0 77
michael@0 78 return shader;
michael@0 79 }
michael@0 80 </script>
michael@0 81 </body>
michael@0 82
michael@0 83 </html>

mercurial