Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 479
Bachalo Avatar asked Mar 28 '12 00:03

Bachalo


1 Answers

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

About WebGL detection:

1) Read this WebGL wiki article: http://www.khronos.org/webgl/wiki/FAQ

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

2) Three.js already has a WebGL detector: https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

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

3) Check also the Modernizr detector: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl.js

like image 93
Juan Mellado Avatar answered Sep 28 '22 00:09

Juan Mellado