code for get.webgl.org/webgl2

will need to update the upgradeUrls once each browser ships enabled to stable
KhronosGroup · Sep 19, 2016 · c364ec3 · c364ec3
1 parent c9d4d25
commit c364ec3
Show file tree

Hide file tree

Showing 6 changed files with 965 additions and 0 deletions.
diff --git a/other/get.webgl.org/webgl2/cube.js b/other/get.webgl.org/webgl2/cube.js
@@ -0,0 +1,71 @@
+function initializeLogo(canvas) {
+  try {
+    startLogo(canvas);
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+function startLogo(canvas) {
+  "use strict";
+  var m4 = twgl.m4;
+  var gl = canvas.getContext("webgl2");
+  var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
+  var devicePixelRatio = window.devicePixelRatio | 1;
+
+
+  var bufferInfo = twgl.primitives.createCubeBufferInfo(gl, 2);
+
+  var ctx = document.createElement("canvas").getContext("2d");
+  ctx.canvas.width = 256;
+  ctx.canvas.height = 256;
+  ctx.font = "bold 200px sans-serif";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.lineWidth = 2;
+  ctx.strokeText("2", 128, 128);
+  ctx.strokeRect(0, 0, 256, 256);
+
+  var tex = twgl.createTexture(gl, {
+    src: ctx.canvas,
+    min: gl.LINEAR_MIPMAP_LINEAR,
+    premultiplyAlpha: true,
+  });
+
+  var eye = [1, 4, -6];
+  var target = [0, 0, 0];
+  var up = [0, 1, 0];
+  var camera = m4.identity();
+  var view = m4.identity();
+  var mat = m4.identity();
+  var uniforms = {
+    u_matrix: mat,
+  };
+
+  function render(time) {
+    time *= 0.001;
+    twgl.resizeCanvasToDisplaySize(gl.canvas, devicePixelRatio);
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+
+    //gl.enable(gl.DEPTH_TEST);
+    //gl.enable(gl.CULL_FACE);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+    m4.perspective(30 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.5, 10, mat);
+
+    m4.lookAt(eye, target, up, camera);
+    m4.inverse(camera, view);
+    m4.multiply(view, mat, mat);
+    m4.rotateY(mat, time, mat);
+
+    gl.useProgram(programInfo.program);
+    twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
+    twgl.setUniforms(programInfo, uniforms);
+    twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
+
+    requestAnimationFrame(render);
+  }
+  requestAnimationFrame(render);
+}
diff --git a/other/get.webgl.org/webgl2/enable.html b/other/get.webgl.org/webgl2/enable.html
@@ -0,0 +1,182 @@
+<!--
+NOTE: If you need/want this page changed to include
+other browsers see https://github.com/KhronosGroup/WebGL/tree/master/other/get.webgl.org
+-->
+<!doctype html>
+<html>
+  <head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="chrome=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
+    <style>
+
+      body {
+
+        font-family: ubuntu, helvetica, arial, sans, sans-serif;
+
+      }
+
+      a {
+
+        color: #3194d5;
+
+      }
+
+      .webgl-div {
+          text-align: left;
+      }
+      .webgl-div li {
+          margin-top: 1em;
+      }
+      .webgl-div code {
+          background: #eee;
+          padding: 0.3em;
+      }
+
+      @media (max-device-width: 480px) {
+
+          #wrapper #support h1 {
+            font-weight: bold;
+            font-size: 20px;
+            margin: 10px 0px;
+          }
+          #wrapper #support .webgl-div div {
+            margin: 10px 10px;
+          }
+          #wrapper #support #logo-container {
+            text-align: center;
+          }
+          #wrapper #support canvas {
+            margin: 10px 0px 10px 0px;
+          }
+          #wrapper hr {
+            margin: 10px 0px;
+          }
+          #wrapper #moreinfo {
+            margin: 10px 0px 0px 0px;
+          }
+
+      }
+
+      @media (min-device-width: 600px) {
+
+          #wrapper #support h1 {
+            font-weight: normal;
+            font-size: 40px;
+            margin: 40px 0px;
+          }
+
+          #wrapper #support {
+            text-align: center;
+          }
+
+          #wrapper #support canvas {
+            margin: 30px 0px 10px 0px;
+          }
+
+          #wrapper hr {
+            margin: 40px 0px;
+          }
+
+          #wrapper {
+            width: 600px;
+          }
+
+          #wrapper #moreinfo {
+            width: 250px;
+            margin: 0px 20px 0px 20px;
+            float: left;
+          }
+
+          #wrapper #resources {
+            width: 250px;
+            height: 150px;
+            margin: 0px 20px 0px 40px;
+            float: left;
+          }
+
+          #wrapper #support .webgl-div div {
+            margin: 20px 100px;
+          }
+      }
+
+      #wrapper {
+        margin: auto;
+      }
+
+      #wrapper hr {
+        border-top: solid #e3e3e3;
+        border-width: 1px 0px 0px 0px;
+        height: 0px;
+      }
+
+      #wrapper #support h1 {
+        color: #33a933;
+      }
+
+      #wrapper #resources div {
+        font-size: 13px;
+      }
+
+      #wrapper #moreinfo div {
+        font-size: 13px;
+      }
+
+      .webgl-hidden {
+          display: none;
+      }
+
+      #webgl-browser-list {
+          white-space: nowrap;
+      }
+
+      #hostedby, #hostedby a {
+          clear: left;
+          font-size: 12px;
+          text-align: center;
+          color: #e5e5e5;
+      }
+
+    </style>
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="support">
+
+            <h1 class="good">Enabling WebGL2</h1>
+            <div class="webgl-div">
+                <p>
+                  As of September 13, 2016 WebGL2 is still an experimental web technology.
+                  It is available in both Firefox 48 and Chrome 53.
+                </p>
+                <p>
+                  To enable it:
+                </p>
+                <ul>
+                  <li><a id="firefox"></a>
+                      In Firefox
+                      <ol>
+                         <li>Go to <code>about:config</code>
+                         <li>search for <code>webgl2</code>
+                         <li>double click on <code>webgl.enable-prototype-webgl2</code> until the value is <code>true</code>
+                         <li>restart Firefox
+                      </ol>
+                  </li>
+                  <li><a id="chrome"></a>
+                     In Chrome
+                        <ol>
+                           <li>Go to <code>about:flags</code>
+                           <li>Press Ctrl-F or Cmd-F and search for <code>webgl 2.0</code>
+                           <li>Find <code>WebGL 2.0 Prototype</code> and click <code>enable</code>
+                           <li>restart Chrome
+                        </ol>
+                  </li>
+                </ul>
+
+
+            </div>
+      </div>
+    </div>
+  </body>
+</html>
+