Handle context loss a little better

Main point is to at least ensure animations are stopped and that we do
as little work as possible (context is normally lost for resource
reasons).

Author: vidartf

js/src/_base/Preview.js

@@ -157,11 +157,16 @@ var PreviewView = RenderableView.extend({
     renderScene: function() {
         this.log('renderScene');
 
-        // TODO: check renderer.domElement.isContextLost()
-
         if (this.isFrozen) {
             this.unfreeze();
         }
+
+        if (this.renderer.context.isContextLost()) {
+            // Context is invalid, freeze for now (stops animation etc)
+            this.freeze();
+            return;
+        }
+
         if (this._rebuildNeeded) {
             this.constructScene();
         }

js/src/_base/Renderable.js

@@ -96,12 +96,16 @@ var RenderableView = widgets.DOMWidgetView.extend({
         scene = scene || this.scene;
         camera = camera || this.camera;
 
-        // TODO: check renderer.domElement.isContextLost()
-
         if (this.isFrozen) {
             this.unfreeze();
         }
 
+        if (this.renderer.context.isContextLost()) {
+            // Context is invalid, freeze for now (stops animation etc)
+            this.freeze();
+            return;
+        }
+
         this.renderer.render(scene, camera);
     },
 
@@ -119,7 +123,6 @@ var RenderableView = widgets.DOMWidgetView.extend({
         }
 
         this.acquireRenderer();
-        this.updateSize();
 
         if (this.controls) {
             this.enableControls();
@@ -137,6 +140,8 @@ var RenderableView = widgets.DOMWidgetView.extend({
 
         this.$el.css('margin-bottom', '-5px');
 
+        this.updateSize();
+
         this.log('ThreeView.acquireRenderer(' + this.renderer.poolId + ')');
     },
 
@@ -216,6 +221,7 @@ var RenderableView = widgets.DOMWidgetView.extend({
 
     onRendererReclaimed: function() {
         this.log('ThreeView WebGL context is being reclaimed: ' + this.renderer.poolId);
+
         this.freeze();
     },
 

js/src/_base/RendererPool.js

@@ -33,6 +33,7 @@ _.extend(RendererPool.prototype, {
                 // required for converting canvas to png
                 preserveDrawingBuffer: true,
             });
+            renderer.context.canvas.addEventListener("webglcontextlost", this.onContextLost.bind(this), false);
             renderer.poolId = this.numCreated;
             this.numCreated++;
 
@@ -79,6 +80,24 @@ _.extend(RendererPool.prototype, {
 
     },
 
+    onContextLost: function(event) {
+        // Find the relevant renderer:
+        var claim = _.find(this.claimedPool, function(claimToken) {
+            return claimToken.renderer.domElement === event.target;
+        });
+        if (!claim) {
+            console.warn('Could not find lost context');
+            return;
+        }
+
+        // remove claim token
+        this.claimedPool = _.without(this.claimedPool, claim);
+        this.freePool.push(renderer);
+
+        // notify holder
+        claim.onReclaim();
+    },
+
 });
 
 module.exports = new RendererPool();

js/src/core/Renderer.js

@@ -128,8 +128,8 @@ var RendererView = RenderableView.extend({
         this.tick();
     },
 
-    unfreeze: function() {
-        RenderableView.prototype.unfreeze.call(this);
+    acquireRenderer: function() {
+        RenderableView.prototype.acquireRenderer.call(this);
 
         // We need to ensure that renderer properties are applied
         // (we have no idea where the renderer has been...)

js/src/renderers/WebGLRenderer.js

@@ -9,6 +9,7 @@ var Promise = require('bluebird');
 
 var RenderableModel = require('../_base/Renderable').RenderableModel;
 var RenderableView = require('../_base/Renderable').RenderableView;
+var ThreeModel = require('../_base/Three').ThreeModel;
 
 var WebGLRendererModel = RenderableModel.extend({
 
@@ -69,6 +70,17 @@ var WebGLRendererView = RenderableView.extend({
         console.log('WGLR(' + this.id + '): ' + str);
     },
 
+    acquireRenderer: function() {
+        RenderableView.prototype.acquireRenderer.call(this);
+
+        // We need to ensure that renderer properties are applied
+        // (we have no idea where the renderer has been...)
+        var clearColor = ThreeModel.prototype.convertColorModelToThree(this.model.get('clearColor'));
+        var clearOpacity = ThreeModel.prototype.convertFloatModelToThree(this.model.get('clearOpacity'));
+        this.renderer.setClearColor(clearColor, clearOpacity);
+        // TODO: Apply other model attributes
+    },
+
     //
     // Handlers
     //