WIP: GLTF loading support

examples/Assets.ipynb

@@ -0,0 +1,143 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Asset Loading"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%gui asyncio"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from pythreejs import *\n",
+    "from ipywidgets import Output, Text"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import asyncio\n",
+    "def wait_for_change(widget, value):\n",
+    "    future = asyncio.Future()\n",
+    "    def getvalue(change):\n",
+    "        # make the new value available\n",
+    "        future.set_result(change.new)\n",
+    "        widget.unobserve(getvalue, value)\n",
+    "    widget.observe(getvalue, value)\n",
+    "    return future"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stderr",
+     "output_type": "stream",
+     "text": [
+      "<ipython-input-5-f19de19e66af>:6: RuntimeWarning: coroutine 'wait_for' was never awaited\n",
+      "  scene = asyncio.wait_for(wait_for_change(gltf_model, 'scssene'), timeout=15.0)\n",
+      "RuntimeWarning: Enable tracemalloc to get the object allocation traceback\n"
+     ]
+    },
+    {
+     "ename": "AssertionError",
+     "evalue": "",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[1;31mAssertionError\u001b[0m                            Traceback (most recent call last)",
+      "\u001b[1;32m<ipython-input-5-f19de19e66af>\u001b[0m in \u001b[0;36m<module>\u001b[1;34m\u001b[0m\n\u001b[0;32m      5\u001b[0m \u001b[1;31m#scene = await wait_for_change(gltf_model, 'scene')\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      6\u001b[0m \u001b[0mscene\u001b[0m \u001b[1;33m=\u001b[0m \u001b[0masyncio\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mwait_for\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mwait_for_change\u001b[0m\u001b[1;33m(\u001b[0m\u001b[0mgltf_model\u001b[0m\u001b[1;33m,\u001b[0m \u001b[1;34m'scssene'\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m,\u001b[0m \u001b[0mtimeout\u001b[0m\u001b[1;33m=\u001b[0m\u001b[1;36m15.0\u001b[0m\u001b[1;33m)\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[1;32m----> 7\u001b[1;33m \u001b[1;32massert\u001b[0m \u001b[0mgltf_model\u001b[0m\u001b[1;33m.\u001b[0m\u001b[0mscene\u001b[0m \u001b[1;32mis\u001b[0m \u001b[1;32mnot\u001b[0m \u001b[1;32mNone\u001b[0m\u001b[1;33m\u001b[0m\u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0m\u001b[0;32m      8\u001b[0m \u001b[1;33m\u001b[0m\u001b[0m\n\u001b[0;32m      9\u001b[0m ball = Mesh(geometry=SphereGeometry(),\n",
+      "\u001b[1;31mAssertionError\u001b[0m: "
+     ]
+    }
+   ],
+   "source": [
+    "gltf_model = GLTFAsset(\"assets/pythreejs.gltf\")\n",
+    "\n",
+    "scene = await asyncio.wait_for(wait_for_change(gltf_model, 'scene'), timeout=15.0)\n",
+    "assert gltf_model.scene is not None\n",
+    "\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "GLTFAsset(gltfUri='assets/pythreejs.gltf', scene=Scene(background=None, fog=None, name='Scene', overrideMaterial=None, quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)))\n"
+     ]
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "de339b95f5824c1e895b2ab28ef2c98b",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Renderer(camera=PerspectiveCamera(position=(0.0, 5.0, 5.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, …"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "print(gltf_model)\n",
+    "key_light = DirectionalLight(color='white', position=[3, 5, 1], intensity=0.5)\n",
+    "\n",
+    "c = PerspectiveCamera(position=[0, 5, 5], up=[0, 1, 0], children=[key_light])\n",
+    "\n",
+    "renderer = Renderer(camera=c,\n",
+    "                    scene=gltf_model.scene,\n",
+    "                    alpha=True,\n",
+    "                    clearOpacity=0,\n",
+    "                    controls=[OrbitControls(controlling=c)])\n",
+    "display(renderer)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.8.2"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

js/scripts/generate-wrappers.js

@@ -28,6 +28,7 @@ const JS_AUTOGEN_EXT = '.' + AUTOGEN_EXT + '.js';
  * three.js library.
  */
 const CUSTOM_CLASSES = [
+    'assets/GLTFAsset.js',
     'textures/ImageTexture.js',
     'textures/TextTexture.js',
     'cameras/CombinedCamera.js',

js/scripts/prop-types.js

@@ -56,22 +56,23 @@ class BaseType {
 }
 
 function genInstanceTraitlet(typeName, nullable, args, kwargs, tagParts) {
+    let traitType = 'Instance';
     const nullableStr = `allow_none=${nullable === true ? 'True' : 'False'}`;
     tagParts = tagParts.concat(['**widget_serialization']);
     const tagStr = `.tag(${tagParts.join(', ')})`;
     // allow type unions
     if (typeName instanceof Array) {
         const instances = typeName.map(function(tname) {
-            return `        Instance(${tname}, ${nullableStr})`;
+            return `        ${traitType}(${tname}, ${nullableStr})`;
         });
-        return `Union([\n${instances.join(',\n')}\n    ])${tagStr}`;
+        return `Union([\n${instances.join(',\n')}\n    ], ${nullableStr})${tagStr}`;
     }
 
     if (typeName.toLowerCase() === 'this') {
         return `This()${tagStr}`;
     }
 
-    let ret = `Instance(${typeName}`;
+    let ret = `${traitType}(${typeName}`;
     if (args !== undefined) {
         ret += `, args=${args}`;
     }
@@ -170,20 +171,17 @@ class ThreeTypeArray extends BaseType {
         return super.getTagParts().concat(['**widget_serialization']);
     }
     getTraitlet() {
-        let baseType = 'Tuple()';
-        if (this.allow_single) {
-            if (this.typeName === 'this') {
-                baseType = 'Union([This, ' + baseType + '])';
-            } else {
-                baseType = 'Union([Instance(' + this.typeName + '), ' + baseType + '])';
-            }
+        const nullableStr = this.getNullableStr();
+        let baseType = 'Instance(' + this.typeName + ')' + this.getTagString();
+        if (this.typeName == 'this') {
+            baseType = 'This()' + this.getTagString();
         }
-        if (this.typeName === 'this') {
-            // return 'List(trait=This(), default_value=[]).tag(sync=True, **widget_serialization)';
-            return baseType + this.getTagString();
+
+        if (this.allow_single) {
+            return 'Union([' + baseType + ', List(trait=' + baseType + ', default_value=[])])';
+        } else {
+            return 'List(trait=' + baseType + ', default_value=[])';
         }
-        // return 'List(trait=Instance(' + this.typeName + ')).tag(sync=True, **widget_serialization)';
-        return baseType + this.getTagString();
     }
     getPropArrayName() {
         return 'three_nested_properties';

js/scripts/templates/py_wrapper.mustache

@@ -2,7 +2,7 @@ import six
 from ipywidgets import (
     Widget, DOMWidget, widget_serialization, register
 )
-from ipywidgets.widgets.trait_types import TypedTuple
+from ipywidgets.widgets.trait_types import TypedTuple, InstanceDict
 from traitlets import (
     Unicode, Int, CInt, Instance, ForwardDeclaredInstance, This, Enum,
     Tuple, List, Dict, Float, CFloat, Bool, Union, Any,

js/scripts/three-class-config.js

@@ -74,6 +74,14 @@ module.exports = {
     PropertyMixer: {
         relativePath: './animation/PropertyMixer',
     },
+    GLTFAsset: {
+        relativePath: './assets/GLTFAsset',
+        properties: {
+            scene: new Types.ThreeType('Scene'),
+            gltfUri: new Types.String(''),
+        },
+        constructorArgs: [ 'gltfUri' ],
+    },
     Audio: {
         relativePath: './audio/Audio',
     },
@@ -371,7 +379,7 @@ module.exports = {
             morphNormals:   new Types.Array(),
             skinWeights:    new Types.VectorArray(),
             skinIndices:    new Types.VectorArray(),
-            _ref_geometry:  new Types.ThreeType('BaseGeometry'),
+            _ref_geometry:  new Types.ThreeType('BaseGeometry', { nullable: true }),
             _store_ref:     new Types.Bool(false),
         },
     },
@@ -383,11 +391,10 @@ module.exports = {
             attributes:         new Types.ThreeTypeDict(['BufferAttribute', 'InterleavedBufferAttribute']),
             morphAttributes:    new Types.BufferMorphAttributes(),
             userData:           new Types.Dict(),
-            MaxIndex:           new Types.Int(65535),
             // TODO: These likely require special types:
             //groups:             new Types.GeometryGroup(),
             //drawRange:          new Types.DrawRange(),
-            _ref_geometry:      new Types.ThreeType(['BaseGeometry', 'BaseBufferGeometry']),
+            _ref_geometry:      new Types.ThreeType(['BaseGeometry', 'BaseBufferGeometry'], { nullable: true }),
             _store_ref:         new Types.Bool(false),
         },
     },
@@ -669,14 +676,14 @@ module.exports = {
         properties: {
             alphaTest:              new Types.Float(0.0),
             blendDst:               new Types.Enum('BlendFactors', 'OneMinusSrcAlphaFactor'),
-            blendDstAlpha:          new Types.Float(null),
+            blendDstAlpha:          new Types.Float(null, {nullable: true}),
             blending:               new Types.Enum('BlendingMode', 'NormalBlending'),
             blendSrc:               new Types.Enum('BlendFactors', 'SrcAlphaFactor'),
-            blendSrcAlpha:          new Types.Float(null),
+            blendSrcAlpha:          new Types.Float(null, {nullable: true}),
             blendEquation:          new Types.Enum('Equations', 'AddEquation'),
-            blendEquationAlpha:     new Types.Float(null),
+            blendEquationAlpha:     new Types.Float(null, {nullable: true}),
             clipIntersection:       new Types.Bool(false),
-            clippingPlanes:         new Types.ThreeTypeArray('Plane'),
+            clippingPlanes:         new Types.ThreeTypeArray('Plane', {nullable: true}),
             clipShadows:            new Types.Bool(false),
             colorWrite:             new Types.Bool(true),
             //customDepthMaterial:    new Types.ForwardDeclaredThreeType('MeshDepthMaterial', 'pythreejs', {nullable: true}),
@@ -1111,7 +1118,7 @@ module.exports = {
         constructorArgs: [ 'geometry', 'material' ],
         properties: {
             material: new Types.ThreeTypeArray('Material', {nullable: false, allow_single: true}),
-            geometry: new Types.ThreeType(['BaseGeometry', 'BaseBufferGeometry'], {nullable: false}),
+            geometry: new Types.ThreeType(['BaseGeometry', 'BaseBufferGeometry'], {nullable: true}),
             drawMode: new Types.Enum('DrawModes', 'TrianglesDrawMode'),
             morphTargetInfluences: new Types.Array(),
         },

js/src/_base/Three.js

@@ -196,7 +196,7 @@ var ThreeModel = widgets.WidgetModel.extend({
     },
 
     processNewObj: function(obj) {
-
+        console.debug("processNewObj: " + this.name);
         obj.ipymodelId = this.model_id; // brand that sucker
         obj.ipymodel = this;
 
@@ -206,14 +206,17 @@ var ThreeModel = widgets.WidgetModel.extend({
     },
 
     createUninitializedChildren: function() {
+        console.debug("createUninitializedChildren: " + this.name);
 
         // Get any properties to create from this side
         var uninit = _.filter(this.three_properties, function(propName) {
-            return this.get(propName) === 'uninitialized';
+            modelProp = this.get(propName);
+            return modelProp === 'uninitialized' ||
+                (this.obj[propName] != null && modelProp == null);
         }, this);
 
-        // Return promise for their creation
-        return Promise.all(_.map(uninit, function(propName) {
+        // Standard properties
+        var p1 = Promise.all(_.map(uninit, function(propName) {
             this.initialized_from_three[propName] = true;
             var obj = this.obj[propName];
             // First, we need to figure out which model constructor to use
@@ -224,6 +227,54 @@ var ThreeModel = widgets.WidgetModel.extend({
             var modelPromise = utils.createModel(ctor, this.widget_manager, obj);
             return modelPromise;
         }, this));
+
+        // Nested properties
+        var p2 = Promise.all(_.map(this.three_nested_properties, function(propName) {
+            this.initialized_from_three[propName] = true;
+
+            var collection = this.obj[propName];
+
+            if (collection == null)
+            {
+                return Promise.resolve();
+            }
+
+            var children;
+
+            if (Array.isArray(collection)) {
+                children = collection;
+            } else if (collection.constructor.name == 'Object') {
+                children = Object.keys(collection).map(function(childModelKey) {
+                    return collection[childModelKey];
+                });
+            } else {
+                // TODO: Check if this is actually an instance of an object -- ThreeTypeArray(allow_single = true)
+                var obj = collection;
+                // First, we need to figure out which model constructor to use
+                var ctorName = utils.lookupThreeConstructorName(obj) + 'Model';
+                var index = require('../');
+                var ctor = index[ctorName];
+                // Create the model
+                return utils.createModel(ctor, this.widget_manager, obj);
+            }
+
+            return Promise.all(_.map(children, function(childObj) {
+                    // Already has a model
+                    if (childObj.ipymodel !== undefined) {
+                        return Promise.resolve(childObj.ipymodel);
+                    }
+                    // First, we need to figure out which model constructor to use
+                    var ctorName = utils.lookupThreeConstructorName(childObj) + 'Model';
+                    var index = require('../');
+                    var ctor = index[ctorName];
+                    // Create the model
+                    var modelPromise = utils.createModel(ctor, this.widget_manager, childObj);
+                    return modelPromise;
+                }, this));
+
+        }, this));
+
+        return Promise.all(p1, p2);
     },
 
     createThreeObjectAsync: function() {
@@ -371,6 +422,7 @@ var ThreeModel = widgets.WidgetModel.extend({
 
     // push data from model to three object
     syncToThreeObj: function(force) {
+        console.debug("syncToThreeObj: " + this.name);
 
         _.each(this.property_converters, function(converterName, propName) {
             if (!force && !this.hasChanged(propName)) {
@@ -411,6 +463,7 @@ var ThreeModel = widgets.WidgetModel.extend({
 
     // push data from three object to model
     syncToModel: function(syncAllProps) {
+        console.debug("syncToModel: " + this.name);
 
         syncAllProps = syncAllProps === null ? false : syncAllProps;
 
@@ -426,6 +479,10 @@ var ThreeModel = widgets.WidgetModel.extend({
                 }
             }
 
+            if (this.obj[propName] === undefined) {
+                return;
+            }
+
             if (!converterName) {
                 toSet[propName] = this.obj[propName];
                 return;