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