Notify if WebGL is not supported

examples/layer-clipping-webgl.html

@@ -28,6 +28,10 @@
         </div>
       </div>
 
+      <div id="no-webgl" class="alert alert-error" style="display: none">
+        This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+      </div>
+
       <div class="row-fluid">
 
         <div class="span12">

examples/layer-clipping-webgl.js

@@ -4,11 +4,19 @@ goog.require('ol.View2D');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
 
-var osm = new ol.layer.Tile({
+if (!ol.webgl.SUPPORTED) {
-  source: new ol.source.OSM()
+  var info = document.getElementById('no-webgl');
-});
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
 
-var map = new ol.Map({
+  var osm = new ol.layer.Tile({
+    source: new ol.source.OSM()
+  });
+
+  var map = new ol.Map({
     layers: [osm],
     renderer: ol.RendererHint.WEBGL,
     target: 'map',
@@ -16,22 +24,22 @@ var map = new ol.Map({
       center: [0, 0],
       zoom: 2
     })
-});
+  });
 
-var fragmentShaderSource = [
+  var fragmentShaderSource = [
     'precision mediump float;',
     'void main() {',
     '}'
-].join('');
+  ].join('');
 
-var vertexShaderSource = [
+  var vertexShaderSource = [
     'attribute vec2 a_position;',
     'void main() {',
-  'gl_Position = vec4(a_position, 0, 1);',
+    '  gl_Position = vec4(a_position, 0, 1);',
     '}'
-].join('');
+  ].join('');
 
-osm.on('precompose', function(event) {
+  osm.on('precompose', function(event) {
     var context = event.getGlContext();
 
     var gl = context.getGL();
@@ -84,10 +92,11 @@ osm.on('precompose', function(event) {
     gl.colorMask(true, true, true, true);
     gl.stencilFunc(gl.NOTEQUAL, 0, 0xff);
     gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
-});
+  });
 
-osm.on('postcompose', function(event) {
+  osm.on('postcompose', function(event) {
     var context = event.getGlContext();
     var gl = context.getGL();
     gl.disable(gl.STENCIL_TEST);
-});
+  });
+}