https://agormley3424.github.io/graphics/3d/lib/webgl-utils.js

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