scripts/webgl-utils.js
author Eugen Sawin <sawine@me73.com>
Wed, 27 Apr 2011 14:14:07 +0200
changeset 30 95688249c40c
permissions -rw-r--r--
Added per-vertex positional lighting.
sawine@6
     1
/*
sawine@6
     2
 * Copyright 2010, Google Inc.
sawine@6
     3
 * All rights reserved.
sawine@6
     4
 *
sawine@6
     5
 * Redistribution and use in source and binary forms, with or without
sawine@6
     6
 * modification, are permitted provided that the following conditions are
sawine@6
     7
 * met:
sawine@6
     8
 *
sawine@6
     9
 *     * Redistributions of source code must retain the above copyright
sawine@6
    10
 * notice, this list of conditions and the following disclaimer.
sawine@6
    11
 *     * Redistributions in binary form must reproduce the above
sawine@6
    12
 * copyright notice, this list of conditions and the following disclaimer
sawine@6
    13
 * in the documentation and/or other materials provided with the
sawine@6
    14
 * distribution.
sawine@6
    15
 *     * Neither the name of Google Inc. nor the names of its
sawine@6
    16
 * contributors may be used to endorse or promote products derived from
sawine@6
    17
 * this software without specific prior written permission.
sawine@6
    18
 *
sawine@6
    19
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
sawine@6
    20
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
sawine@6
    21
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
sawine@6
    22
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
sawine@6
    23
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
sawine@6
    24
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
sawine@6
    25
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
sawine@6
    26
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
sawine@6
    27
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
sawine@6
    28
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
sawine@6
    29
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
sawine@6
    30
 */
sawine@6
    31
sawine@6
    32
sawine@6
    33
/**
sawine@6
    34
 * @fileoverview This file contains functions every webgl program will need
sawine@6
    35
 * a version of one way or another.
sawine@6
    36
 *
sawine@6
    37
 * Instead of setting up a context manually it is recommended to
sawine@6
    38
 * use. This will check for success or failure. On failure it
sawine@6
    39
 * will attempt to present an approriate message to the user.
sawine@6
    40
 *
sawine@6
    41
 *       gl = WebGLUtils.setupWebGL(canvas);
sawine@6
    42
 *
sawine@6
    43
 * For animated WebGL apps use of setTimeout or setInterval are
sawine@6
    44
 * discouraged. It is recommended you structure your rendering
sawine@6
    45
 * loop like this.
sawine@6
    46
 *
sawine@6
    47
 *       function render() {
sawine@6
    48
 *         window.requestAnimFrame(render, canvas);
sawine@6
    49
 *
sawine@6
    50
 *         // do rendering
sawine@6
    51
 *         ...
sawine@6
    52
 *       }
sawine@6
    53
 *       render();
sawine@6
    54
 *
sawine@6
    55
 * This will call your rendering function up to the refresh rate
sawine@6
    56
 * of your display but will stop rendering if your app is not
sawine@6
    57
 * visible.
sawine@6
    58
 */
sawine@6
    59
sawine@6
    60
WebGLUtils = function() {
sawine@6
    61
sawine@6
    62
/**
sawine@6
    63
 * Creates the HTLM for a failure message
sawine@6
    64
 * @param {string} canvasContainerId id of container of th
sawine@6
    65
 *        canvas.
sawine@6
    66
 * @return {string} The html.
sawine@6
    67
 */
sawine@6
    68
var makeFailHTML = function(msg) {
sawine@6
    69
  return '' +
sawine@6
    70
    '<table style="background-color: #8CE; width: 100%; height: 100%;"><tr>' +
sawine@6
    71
    '<td align="center">' +
sawine@6
    72
    '<div style="display: table-cell; vertical-align: middle;">' +
sawine@6
    73
    '<div style="">' + msg + '</div>' +
sawine@6
    74
    '</div>' +
sawine@6
    75
    '</td></tr></table>';
sawine@6
    76
};
sawine@6
    77
sawine@6
    78
/**
sawine@6
    79
 * Mesasge for getting a webgl browser
sawine@6
    80
 * @type {string}
sawine@6
    81
 */
sawine@6
    82
var GET_A_WEBGL_BROWSER = '' +
sawine@6
    83
  'This page requires a browser that supports WebGL.<br/>' +
sawine@6
    84
  '<a href="http://get.webgl.org">Click here to upgrade your browser.</a>';
sawine@6
    85
sawine@6
    86
/**
sawine@6
    87
 * Mesasge for need better hardware
sawine@6
    88
 * @type {string}
sawine@6
    89
 */
sawine@6
    90
var OTHER_PROBLEM = '' +
sawine@6
    91
  "It doesn't appear your computer can support WebGL.<br/>" +
sawine@6
    92
  '<a href="http://get.webgl.org/troubleshooting/">Click here for more information.</a>';
sawine@6
    93
sawine@6
    94
/**
sawine@6
    95
 * Creates a webgl context. If creation fails it will
sawine@6
    96
 * change the contents of the container of the <canvas>
sawine@6
    97
 * tag to an error message with the correct links for WebGL.
sawine@6
    98
 * @param {Element} canvas. The canvas element to create a
sawine@6
    99
 *     context from.
sawine@6
   100
 * @param {WebGLContextCreationAttirbutes} opt_attribs Any
sawine@6
   101
 *     creation attributes you want to pass in.
sawine@6
   102
 * @return {WebGLRenderingContext} The created context.
sawine@6
   103
 */
sawine@6
   104
var setupWebGL = function(canvas, opt_attribs) {
sawine@6
   105
  function showLink(str) {
sawine@6
   106
    var container = canvas.parentNode;
sawine@6
   107
    if (container) {
sawine@6
   108
      container.innerHTML = makeFailHTML(str);
sawine@6
   109
    }
sawine@6
   110
  };
sawine@6
   111
sawine@6
   112
  if (!window.WebGLRenderingContext) {
sawine@6
   113
    showLink(GET_A_WEBGL_BROWSER);
sawine@6
   114
    return null;
sawine@6
   115
  }
sawine@6
   116
sawine@6
   117
  var context = create3DContext(canvas, opt_attribs);
sawine@6
   118
  if (!context) {
sawine@6
   119
    showLink(OTHER_PROBLEM);
sawine@6
   120
  }
sawine@6
   121
  return context;
sawine@6
   122
};
sawine@6
   123
sawine@6
   124
/**
sawine@6
   125
 * Creates a webgl context.
sawine@6
   126
 * @param {!Canvas} canvas The canvas tag to get context
sawine@6
   127
 *     from. If one is not passed in one will be created.
sawine@6
   128
 * @return {!WebGLContext} The created context.
sawine@6
   129
 */
sawine@6
   130
var create3DContext = function(canvas, opt_attribs) {
sawine@6
   131
  var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
sawine@6
   132
  var context = null;
sawine@6
   133
  for (var ii = 0; ii < names.length; ++ii) {
sawine@6
   134
    try {
sawine@6
   135
      context = canvas.getContext(names[ii], opt_attribs);
sawine@6
   136
    } catch(e) {}
sawine@6
   137
    if (context) {
sawine@6
   138
      break;
sawine@6
   139
    }
sawine@6
   140
  }
sawine@6
   141
  return context;
sawine@6
   142
}
sawine@6
   143
sawine@6
   144
return {
sawine@6
   145
  create3DContext: create3DContext,
sawine@6
   146
  setupWebGL: setupWebGL
sawine@6
   147
};
sawine@6
   148
}();
sawine@6
   149
sawine@6
   150
/**
sawine@6
   151
 * Provides requestAnimationFrame in a cross browser way.
sawine@6
   152
 */
sawine@6
   153
window.requestAnimFrame = (function() {
sawine@6
   154
  return window.requestAnimationFrame ||
sawine@6
   155
         window.webkitRequestAnimationFrame ||
sawine@6
   156
         window.mozRequestAnimationFrame ||
sawine@6
   157
         window.oRequestAnimationFrame ||
sawine@6
   158
         window.msRequestAnimationFrame ||
sawine@6
   159
         function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
sawine@6
   160
           window.setTimeout(callback, 1000/60);
sawine@6
   161
         };
sawine@6
   162
})();
sawine@6
   163
sawine@6
   164