Javascript – Three.js detect webgl support and fallback to regular canvas


Can anyone who has used three.js tell me if its possible to detect webgl support, and, if not present, fallback to a standard Canvas render?

Best Solution

Yes, it's possible. You can use CanvasRenderer instead of WebGLRenderer.

About WebGL detection:

1) Read this WebGL wiki article:

 if (!window.WebGLRenderingContext) {
    // the browser doesn't even know what WebGL is
    window.location = "";
  } else {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("webgl");
    if (!context) {
      // browser supports WebGL but initialization failed.
      window.location = "";

2) Three.js already has a WebGL detector:

renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer();

3) Check also the Modernizr detector: