WIP: GLTF loading support

examples/Assets.ipynb

@@ -0,0 +1,184 @@
+{
+ "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": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "2a9300ccfd0d40fa99fc6d0c1d807f96",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Renderer(camera=PerspectiveCamera(children=(DirectionalLight(color='white', intensity=0.5, position=(3.0, 5.0,…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "ab0cd8cb585941de846b1e0e05d0e343",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Output()"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "e7ca01b0ce554cd097bcc3b0794aadda",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Text(value='adfas')"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "text/plain": [
+       "<Task pending name='Task-1' coro=<show_model() running at <ipython-input-4-ab9b2bd45a01>:1>>"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "async def show_model(out, t, scene):\n",
+    "    print(out)\n",
+    "    t.value = 'pre-out'\n",
+    "    with out:\n",
+    "        t.value += ', pre-asset'\n",
+    "        print(\"pre-asset\")\n",
+    "        gltf_model = GLTFAsset(\"assets/pythreejs.gltf\")\n",
+    "        t.value += ', post-asset' + str(gltf_model)\n",
+    "        print(\"post-asset\")\n",
+    "        print(gltf_model)\n",
+    "\n",
+    "        x = await wait_for_change(gltf_model, 'scene')\n",
+    "        t.value = 'post-wait'\n",
+    "        print(x)\n",
+    "        print(gltf_model)\n",
+    "\n",
+    "\n",
+    "        assert gltf_model.scene is not None\n",
+    "        print(scene)\n",
+    "        t.value = str(scene)\n",
+    "        scene.children = gltf_model.scene.children\n",
+    "        print(scene)\n",
+    "\n",
+    "\n",
+    "ball = Mesh(geometry=SphereGeometry(),\n",
+    "            material=MeshLambertMaterial(color='red'))\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",
+    "scene = Scene(children=[ball, c, AmbientLight(color='#777777')], background=None)\n",
+    "\n",
+    "\n",
+    "renderer = Renderer(camera=c,\n",
+    "                    scene=scene,\n",
+    "                    alpha=True,\n",
+    "                    clearOpacity=0,\n",
+    "                    controls=[OrbitControls(controlling=c)])\n",
+    "\n",
+    "out = Output()\n",
+    "with out:\n",
+    "    print(\"test\")\n",
+    "t = Text()\n",
+    "t.value = \"adfas\"\n",
+    "display(renderer,out, t)\n",
+    "with out:\n",
+    "    print(\"test2\")\n",
+    "asyncio.ensure_future(show_model(out, t, scene))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "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

@@ -55,14 +55,18 @@ class BaseType {
     }
 }
 
-function genInstanceTraitlet(typeName, nullable, args, kwargs, tagParts) {
+function genInstanceTraitlet(typeName, nullable, args, kwargs, tagParts, use_instancedict) {
+    let traitType = 'Instance';
+    if (use_instancedict === true) {
+        traitType = 'InstanceDict'
+    }
     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}`;
     }
@@ -71,7 +75,7 @@ function genInstanceTraitlet(typeName, nullable, args, kwargs, tagParts) {
         return `This()${tagStr}`;
     }
 
-    let ret = `Instance(${typeName}`;
+    let ret = `${traitType}(${typeName}`;
     if (args !== undefined) {
         ret += `, args=${args}`;
     }
@@ -90,6 +94,7 @@ class ThreeType extends BaseType {
         this.defaultValue = null;
         this.serializer = JS_WIDGET_SERIALIZER;
         this.nullable = options.nullable !== false;
+        this.use_instancedict = options.use_instancedict === true;
         this.args = options.args;
         this.kwargs = options.kwargs;
     }
@@ -103,7 +108,7 @@ class ThreeType extends BaseType {
             typeName = `${typeName || 'ThreeWidget'}`;
         }
         return genInstanceTraitlet(
-            typeName, this.nullable, this.args, this.kwargs, this.getTagParts());
+            typeName, this.nullable, this.args, this.kwargs, this.getTagParts(), this.use_instancedict);
     }
     getPropArrayName() {
         return 'three_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: './textures/GLTFAsset',
+        properties: {
+            scene: new Types.ThreeType('Scene', {use_instancedict: true}),
+            gltfUri: new Types.String(''),
+        },
+        constructorArgs: [ 'gltfUri' ],
+    },
     Audio: {
         relativePath: './audio/Audio',
     },

js/src/assets/GLTFAsset.js

@@ -0,0 +1,49 @@
+var Promise = require('bluebird');
+var GLTFAssetBase = require('./GLTFAsset.autogen');
+
+var widgets = require('@jupyter-widgets/base');
+
+// HACK: examples expect THREE in globals
+global.THREE = require('three');
+
+require('three/examples/js/loaders/GLTFLoader.js');
+
+var THREE = require('three');
+
+var GLTFAssetModel = GLTFAssetBase.GLTFAssetModel.extend({
+    constructThreeObjectAsync: function() {
+        var manager = THREE.DefaultLoadingManager;
+        var loader = new THREE.GLTFLoader(manager);
+        // Ensure we resolve any local paths according to current notebook location:
+        var gltfUriPromise = this.widget_manager.resolveUrl(this.get('gltfUri'));
+
+        var p = new Promise(function(resolve, reject) {
+            gltfUriPromise.then(function (gltfUri) {
+                loader.load(
+                    gltfUri,
+                    function(gltf) {
+                        console.debug('Successfully loaded ' + gltfUri);
+                        return resolve(gltf);
+                    },
+                    function(xhr) {
+                        console.debug(gltfUri + ': ' + (xhr.loaded / xhr.total * 100) + '%');
+                    },
+                    function(xhr) {
+                        console.log('Error loading GLTF: ' + gltfUri);
+                        return reject(new Error(xhr));
+                    }
+                );
+            }, reject);
+        });
+        return p.bind(this).then(function(gltf) {
+            this.set({ scene: gltf.scene }, 'pushFromThree');
+            return gltf;
+        });
+
+    },
+
+});
+
+module.exports = {
+    GLTFAssetModel: GLTFAssetModel,
+};