Support and default to webgl2

Author: vidartf

js/src/_base/Renderable.js

@@ -413,6 +413,7 @@ var RenderableView = widgets.DOMWidgetView.extend({
         var config = {
             antialias: this.model.get('_antialias'),
             alpha: this.model.get('_alpha'),
+            webglVersion: this.model.get('_webgl_version'),
         };
         this.renderer = RendererPool.acquire(
             config,

js/src/_base/RendererPool.js

@@ -61,6 +61,22 @@ _.extend(KeyedCollection.prototype, {
     },
 });
 
+var isWebgl2Available = (function() {
+    var isAvailable;
+    function inner() {
+        if (isAvailable === undefined) {
+            try {
+                var canvas = document.createElement( 'canvas' );
+                isAvailable = !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) );
+            } catch ( e ) {
+                isAvailable = false;
+            }
+        }
+        return isAvailable;
+    }
+    return inner;
+})();
+
 function RendererPool() {
     this.numCreated = 0;
     this.freePool = new KeyedCollection();
@@ -69,6 +85,25 @@ function RendererPool() {
 _.extend(RendererPool.prototype, {
 
     _createRenderer: function(config) {
+        config = _.extend({}, config);
+        var webglVersion = config.webglVersion;
+        delete config.webglVersion;
+
+        if (webglVersion === 2 && isWebgl2Available()) {
+            // We need to map the right config for the context ourselves:
+            var canvas = document.createElement('canvas');
+            config =_.extend({
+                depth: true,
+                stencil: true,
+                premultipliedAlpha: true,
+                preserveDrawingBuffer: false,
+                powerPreference: 'default'
+            }, config);
+            var context = canvas.getContext('webgl2', config);
+            config.canvas = canvas;
+            config.context = context;
+        }
+
         var renderer = new THREE.WebGLRenderer(
             _.extend({},
                 config,

pythreejs/_base/renderable.py

@@ -1,5 +1,5 @@
 from ipywidgets import DOMWidget, Widget, widget_serialization
-from traitlets import Unicode, CInt, CFloat, Enum, Bool, Instance, List
+from traitlets import Unicode, CInt, CFloat, Enum, Bool, Int, Instance, List
 
 from .._package import npm_pkg_name
 from .._version import EXTENSION_SPEC_VERSION
@@ -21,6 +21,7 @@ class RenderableWidget(DOMWidget):
     _height = CInt(200).tag(sync=True)
     _antialias = Bool(False).tag(sync=True)
     _alpha = Bool(False).tag(sync=True)
+    _webgl_version = Int(2).tag(sync=True)
 
     autoClear = Bool(True).tag(sync=True)
     autoClearColor = Bool(True).tag(sync=True)

pythreejs/core/Renderer.py

@@ -32,13 +32,14 @@ class Renderer(RenderableWidget):
     background = Color('black', allow_none=True).tag(sync=True)
     background_opacity = Float(1.0, min=0.0, max=1.0).tag(sync=True)
 
-    def __init__(self, scene, camera, controls=None, antialias=False, alpha=False, **kwargs):
+    def __init__(self, scene, camera, controls=None, antialias=False, alpha=False, webgl_version=2, **kwargs):
         super(Renderer, self).__init__(
             scene=scene,
             camera=camera,
             controls=controls or [],
             _antialias=antialias,
             _alpha=alpha,
+            _webgl_version=webgl_version,
             **kwargs)
         link((self, 'width'), (self, '_width'))
         link((self, 'height'), (self, '_height'))

pythreejs/renderers/WebGLRenderer.py

@@ -19,8 +19,12 @@ class WebGLRenderer(RenderableWidget):
     width = CInt(200)
     height = CInt(200)
 
-    def __init__(self, antialias=False, alpha=False, **kwargs):
-        super(WebGLRenderer, self).__init__(_antialias=antialias, _alpha=alpha, **kwargs)
+    def __init__(self, antialias=False, alpha=False, webgl_version=2, **kwargs):
+        super(WebGLRenderer, self).__init__(
+            _antialias=antialias,
+            _alpha=alpha,
+            _webgl_version=webgl_version,
+            **kwargs)
         link((self, 'width'), (self, '_width'))
         link((self, 'height'), (self, '_height'))