Better error message when WebGL not found.

samples/o3djs/webgl.js

Index: samples/o3djs/webgl.js
===================================================================
--- samples/o3djs/webgl.js	(revision 46638)
+++ samples/o3djs/webgl.js	(working copy)
@@ -77,7 +77,9 @@
       }
     }
     var objElem = o3djs.webgl.createClient(element, features, opt_debug);
-    clientElements.push(objElem);
+    if (objElem) {
+      clientElements.push(objElem);
+    }
   }
 
   // Wait for the client elements to be fully initialized. This
@@ -138,13 +140,44 @@
 
 
 /**
+ * Inserts text indicating that a WebGL context could not be created under
+ * the given node and links to the site about WebGL capable browsers.
+ */
+o3djs.webgl.webGlCanvasError = function(parentNode, unavailableElement) {
+  var background = document.createElement('div');
+  background.style.backgroundColor='#ccffff';
+  background.style.textAlign='center';
+  background.style.margin='10px';
+
+  var message = document.createElement('p');
+  var messageText = document.createTextNode(
+      unavailableElement + ' unavailable.  ' +
+      'Make sure you are using a WebGL capable browser ' +
+      'and WebGL is enabled.  Click here for more information:');
+  message.appendChild(messageText);
+
+  var url = 'http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation';
+  var link = document.createElement('a');
+  link.appendChild(document.createTextNode(url));
+  link.href = url;
+
+  background.appendChild(message);
+  background.appendChild(link);
+  background.appendChild(document.createElement('br'));
+
+  parentNode.appendChild(background);
+};
+
+
+/**
  * Creates a canvas under the given parent element and an o3d.Client
  * under that.
  *
- * @ param {!Element} element The element under which to insert the client.
- * @ param {string} opt_features Features to turn on.
- * @ param {boolean} opt_debug Whether gl debugging features should be
+ * @param {!Element} element The element under which to insert the client.
+ * @param {string} opt_features Features to turn on.
+ * @param {boolean} opt_debug Whether gl debugging features should be
  *     enabled.
+ * @return {HTMLCanvas} The canvas element, or null if initializaton failed.
  */
 o3djs.webgl.createClient = function(element, opt_features, opt_debug) {
   opt_features = opt_features || '';
@@ -162,6 +195,11 @@
   canvas.style.width = "100%";
   canvas.style.height = "100%";
 
+  if (!canvas) {
+    o3djs.webgl.webGlCanvasError(element, 'HTMLCanvas');
+    return null;
+  }
+
   var client = new o3d.Client;
 
   var resizeHandler = function() {
@@ -175,7 +213,11 @@
   window.addEventListener('resize', resizeHandler, false);
   setTimeout(resizeHandler, 0);
 
-  client.initWithCanvas(canvas);
+  if (!client.initWithCanvas(canvas)) {
+    o3djs.webgl.webGlCanvasError(element, 'WebGL context');
+    return null;
+  }
+
   canvas.client = client;
   canvas.o3d = o3d;