Added webgl-utils and update function.
authorEugen Sawin <sawine@me73.com>
Fri, 01 Apr 2011 23:38:58 +0200
changeset 6cd14e5b5296c
parent 5 ac9ba687a05c
child 7 12bb629d22b3
Added webgl-utils and update function.
machine.html
scripts/machine.js
scripts/webgl-utils.js
     1.1 --- a/machine.html	Fri Apr 01 23:28:15 2011 +0200
     1.2 +++ b/machine.html	Fri Apr 01 23:38:58 2011 +0200
     1.3 @@ -2,9 +2,10 @@
     1.4  <head>
     1.5  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     1.6  <title>Machine Alpha</title>
     1.7 -<script src="scripts/CanvasMatrix.js" type="text/javascript"> </script>
     1.8 +<script src="scripts/CanvasMatrix.js" type="text/javascript"></script>
     1.9  <script src="scripts/utils3d.js" type="text/javascript"> </script>
    1.10  <script src="scripts/glMatrix.js" type="text/javascript"></script>
    1.11 +<script src="scripts/webgl-utils.js" type="text/javascript"></script>
    1.12  
    1.13  <script id="fragment-shader" type="x-shader/x-fragment"> 
    1.14      #ifdef GL_ES
     2.1 --- a/scripts/machine.js	Fri Apr 01 23:28:15 2011 +0200
     2.2 +++ b/scripts/machine.js	Fri Apr 01 23:38:58 2011 +0200
     2.3 @@ -13,13 +13,20 @@
     2.4      gl.enable(gl.DEPTH_TEST);
     2.5      machine = new Machine(object);
     2.6      render = new Render(context);
     2.7 +    //render.draw(machine.scene);
     2.8 +    requestAnimFrame(update);
     2.9 +    update();
    2.10 +}
    2.11 +
    2.12 +function update()
    2.13 +{    
    2.14      render.draw(machine.scene);
    2.15  }
    2.16  
    2.17  function resize()
    2.18  {
    2.19 -    make_fullscreen(machine.context);
    2.20 -    machine.draw();
    2.21 +    make_fullscreen(render.context);
    2.22 +    update();
    2.23  }
    2.24  
    2.25  function make_fullscreen(context)
     3.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     3.2 +++ b/scripts/webgl-utils.js	Fri Apr 01 23:38:58 2011 +0200
     3.3 @@ -0,0 +1,164 @@
     3.4 +/*
     3.5 + * Copyright 2010, Google Inc.
     3.6 + * All rights reserved.
     3.7 + *
     3.8 + * Redistribution and use in source and binary forms, with or without
     3.9 + * modification, are permitted provided that the following conditions are
    3.10 + * met:
    3.11 + *
    3.12 + *     * Redistributions of source code must retain the above copyright
    3.13 + * notice, this list of conditions and the following disclaimer.
    3.14 + *     * Redistributions in binary form must reproduce the above
    3.15 + * copyright notice, this list of conditions and the following disclaimer
    3.16 + * in the documentation and/or other materials provided with the
    3.17 + * distribution.
    3.18 + *     * Neither the name of Google Inc. nor the names of its
    3.19 + * contributors may be used to endorse or promote products derived from
    3.20 + * this software without specific prior written permission.
    3.21 + *
    3.22 + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
    3.23 + * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
    3.24 + * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
    3.25 + * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
    3.26 + * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
    3.27 + * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
    3.28 + * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
    3.29 + * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
    3.30 + * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
    3.31 + * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
    3.32 + * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
    3.33 + */
    3.34 +
    3.35 +
    3.36 +/**
    3.37 + * @fileoverview This file contains functions every webgl program will need
    3.38 + * a version of one way or another.
    3.39 + *
    3.40 + * Instead of setting up a context manually it is recommended to
    3.41 + * use. This will check for success or failure. On failure it
    3.42 + * will attempt to present an approriate message to the user.
    3.43 + *
    3.44 + *       gl = WebGLUtils.setupWebGL(canvas);
    3.45 + *
    3.46 + * For animated WebGL apps use of setTimeout or setInterval are
    3.47 + * discouraged. It is recommended you structure your rendering
    3.48 + * loop like this.
    3.49 + *
    3.50 + *       function render() {
    3.51 + *         window.requestAnimFrame(render, canvas);
    3.52 + *
    3.53 + *         // do rendering
    3.54 + *         ...
    3.55 + *       }
    3.56 + *       render();
    3.57 + *
    3.58 + * This will call your rendering function up to the refresh rate
    3.59 + * of your display but will stop rendering if your app is not
    3.60 + * visible.
    3.61 + */
    3.62 +
    3.63 +WebGLUtils = function() {
    3.64 +
    3.65 +/**
    3.66 + * Creates the HTLM for a failure message
    3.67 + * @param {string} canvasContainerId id of container of th
    3.68 + *        canvas.
    3.69 + * @return {string} The html.
    3.70 + */
    3.71 +var makeFailHTML = function(msg) {
    3.72 +  return '' +
    3.73 +    '<table style="background-color: #8CE; width: 100%; height: 100%;"><tr>' +
    3.74 +    '<td align="center">' +
    3.75 +    '<div style="display: table-cell; vertical-align: middle;">' +
    3.76 +    '<div style="">' + msg + '</div>' +
    3.77 +    '</div>' +
    3.78 +    '</td></tr></table>';
    3.79 +};
    3.80 +
    3.81 +/**
    3.82 + * Mesasge for getting a webgl browser
    3.83 + * @type {string}
    3.84 + */
    3.85 +var GET_A_WEBGL_BROWSER = '' +
    3.86 +  'This page requires a browser that supports WebGL.<br/>' +
    3.87 +  '<a href="http://get.webgl.org">Click here to upgrade your browser.</a>';
    3.88 +
    3.89 +/**
    3.90 + * Mesasge for need better hardware
    3.91 + * @type {string}
    3.92 + */
    3.93 +var OTHER_PROBLEM = '' +
    3.94 +  "It doesn't appear your computer can support WebGL.<br/>" +
    3.95 +  '<a href="http://get.webgl.org/troubleshooting/">Click here for more information.</a>';
    3.96 +
    3.97 +/**
    3.98 + * Creates a webgl context. If creation fails it will
    3.99 + * change the contents of the container of the <canvas>
   3.100 + * tag to an error message with the correct links for WebGL.
   3.101 + * @param {Element} canvas. The canvas element to create a
   3.102 + *     context from.
   3.103 + * @param {WebGLContextCreationAttirbutes} opt_attribs Any
   3.104 + *     creation attributes you want to pass in.
   3.105 + * @return {WebGLRenderingContext} The created context.
   3.106 + */
   3.107 +var setupWebGL = function(canvas, opt_attribs) {
   3.108 +  function showLink(str) {
   3.109 +    var container = canvas.parentNode;
   3.110 +    if (container) {
   3.111 +      container.innerHTML = makeFailHTML(str);
   3.112 +    }
   3.113 +  };
   3.114 +
   3.115 +  if (!window.WebGLRenderingContext) {
   3.116 +    showLink(GET_A_WEBGL_BROWSER);
   3.117 +    return null;
   3.118 +  }
   3.119 +
   3.120 +  var context = create3DContext(canvas, opt_attribs);
   3.121 +  if (!context) {
   3.122 +    showLink(OTHER_PROBLEM);
   3.123 +  }
   3.124 +  return context;
   3.125 +};
   3.126 +
   3.127 +/**
   3.128 + * Creates a webgl context.
   3.129 + * @param {!Canvas} canvas The canvas tag to get context
   3.130 + *     from. If one is not passed in one will be created.
   3.131 + * @return {!WebGLContext} The created context.
   3.132 + */
   3.133 +var create3DContext = function(canvas, opt_attribs) {
   3.134 +  var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
   3.135 +  var context = null;
   3.136 +  for (var ii = 0; ii < names.length; ++ii) {
   3.137 +    try {
   3.138 +      context = canvas.getContext(names[ii], opt_attribs);
   3.139 +    } catch(e) {}
   3.140 +    if (context) {
   3.141 +      break;
   3.142 +    }
   3.143 +  }
   3.144 +  return context;
   3.145 +}
   3.146 +
   3.147 +return {
   3.148 +  create3DContext: create3DContext,
   3.149 +  setupWebGL: setupWebGL
   3.150 +};
   3.151 +}();
   3.152 +
   3.153 +/**
   3.154 + * Provides requestAnimationFrame in a cross browser way.
   3.155 + */
   3.156 +window.requestAnimFrame = (function() {
   3.157 +  return window.requestAnimationFrame ||
   3.158 +         window.webkitRequestAnimationFrame ||
   3.159 +         window.mozRequestAnimationFrame ||
   3.160 +         window.oRequestAnimationFrame ||
   3.161 +         window.msRequestAnimationFrame ||
   3.162 +         function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
   3.163 +           window.setTimeout(callback, 1000/60);
   3.164 +         };
   3.165 +})();
   3.166 +
   3.167 +