Merge pull request #105 from vidartf/renderer

Auto-gen continuation

Author: vidartf

README.md

@@ -1,7 +1,7 @@
 pythreejs
 =========
 
-This is a _significant_ re-work of the pythreejs extension that introduces an "autogen" script that generates the majority of the ipython-widget code to wrap each of three.js's types.  It also takes a different view towards the pythreejs API.  Whereas pythreejs adds custom functionality to the classes, sometimes renaming, etc., this approach attempts to mimic the low-level three.js API as closely as possible, opening up the possibility for others to build utility libraries on top of this.  
+This is a _significant_ re-work of the pythreejs extension that introduces an "autogen" script that generates the majority of the ipython-widget code to wrap each of three.js's types.  It also takes a different view towards the pythreejs API.  Whereas pythreejs adds custom functionality to the classes, sometimes renaming, etc., this approach attempts to mimic the low-level three.js API as closely as possible, opening up the possibility for others to build utility libraries on top of this.
 
 This branch does not support all the functionality of the current pythreejs, but it is a significant step forward in terms of the potential to support the majority of three.js's features.  Currently supported features:
 - Basic building blocks of a scene:
@@ -15,7 +15,7 @@ This branch does not support all the functionality of the current pythreejs, but
 
 The autogen script, `generate-wrappers.js`, takes advantage of a config file `three-class-config.js` to auto-generate both javascript and python files to define the ipywidget wrappers for each three.js class.  The generated javascript files will have `.autogen.js` as the extension.  The generated python files have `_autogen.py` as their extension.  The script uses the handlebars template system to generate the various code files.
 
-The autogen solution allows for overriding the default behavior of the generated classes.  E.g., if `Object3D.js` is present, then it will be loaded into the namespace as opposed to loading `Object3D.autogen.js`.  It is up to the author of the override classe to decide whether to inherit behavior from the autogen class or not.  Same goes for the python modules.  This allows for writing custom methods on both the python and javascript side when needed.  
+The autogen solution allows for overriding the default behavior of the generated classes.  E.g., if `Object3D.js` is present, then it will be loaded into the namespace as opposed to loading `Object3D.autogen.js`.  It is up to the author of the override classe to decide whether to inherit behavior from the autogen class or not.  Same goes for the python modules.  This allows for writing custom methods on both the python and javascript side when needed.
 
 The autogen script relies on a json-like config file (`three-class-config.js`) to describe the classes.  Reasonable defaults should take care of most, but it allows specifying the base class, constructor args, etc. for each of the wrappers.  A base version of this file can be generated by `generate-class-config.js`, but beware, it overwrites any customization to the config file that has already been done.
 
@@ -43,37 +43,37 @@ js/package.json
 js/webpack.config.js
 
 # Files for auto-generation
-js/scripts/clean-generated-files.js
-js/scripts/generate-class-config.js
-js/scripts/generate-wrappers.js
-js/scripts/prop-types.js
-js/scripts/templates/js_index.mustache
-js/scripts/templates/js_param_obj.mustache
-js/scripts/templates/js_wrapper.mustache
-js/scripts/templates/py_top_level_init.mustache
-js/scripts/templates/py_wrapper.mustache
-js/scripts/three-class-config-defaults.js
-js/scripts/three-class-config.js
-js/scripts/three-class-config.js.backup
+js/scripts/*
 
 # New bases classes for supporting wrapper classes
-js/src/_base/RendererPool.js
-js/src/_base/Three.js
-js/src/_base/enums.js
+js/src/_base/*
 pythreejs/_base/Three.py
 pythreejs/enums.py
 pythreejs/traits.py
 
 # Overridden classes
 js/src/core/Object3D.js
+js/src/cameras/OrthographicCamera.js
+js/src/cameras/PerspectiveCamera.js
+js/src/controls/OrbitControls.js
+js/src/controls/TrackballControls.js
+js/src/controls/FlyControls.js
+js/src/controls/Picker.js
 js/src/textures/DataTexture.js
+js/src/textures/DepthTexture.js
 js/src/renderers/WebGLRenderer.js
+
 pythreejs/core/Object3D.py
 pythreejs/renderers/WebGLRenderer.py
 
 # Custom classes
+js/src/core/Renderer.js
+js/src/textures/ImageTexture.js  # created to ease image texture loading
 js/src/textures/ImageTexture.js  # created to ease image texture loading
 js/src/textures/TextTexture.js  # created to ease creation of textures of rasterized text
+js/src/geometry/PlainGeometry.js  # created to not auto-sync geometry data of generated geometry
+pythreejs/core/Renderer.py
+
 
 # Updated examples notesbooks
 examples/Examples.ipynb
@@ -89,13 +89,12 @@ js/src/examples/Detector.js
 js/src/examples/controls/MomentumCameraControls.js
 js/src/examples/controls/OrbitControls.js
 js/src/examples/controls/TrackballControls.js
-js/src/examples/js/controls/OrbitControls.js
 js/src/examples/renderers/CanvasRenderer.js
 js/src/examples/renderers/Projector.js
 ```
 
 
-TODO: Everything below here is probably outdated. 
+TODO: Everything below here is probably outdated.
 
 Getting Started
 ---------------

examples/Examples.ipynb

@@ -29,7 +29,7 @@
    "outputs": [],
    "source": [
     "ball = Mesh(geometry=SphereGeometry(radius=1), \n",
-    "                                    material=LambertMaterial(color='red'),\n",
+    "                                    material=MeshLambertMaterial(color='red'),\n",
     "                                    position=[2, 1, 0])\n",
     "\n",
     "scene = Scene(children=[ball, AmbientLight(color='#777777')])\n",
@@ -100,9 +100,9 @@
     "                         width_segments=nx - 1,\n",
     "                         height_segments=ny - 1)\n",
     "\n",
-    "surf = Mesh(geometry=surf_g, material=LambertMaterial(map=height_texture(z[::-1], 'YlGnBu_r')))\n",
+    "surf = Mesh(geometry=surf_g, material=MeshLambertMaterial(map=height_texture(z[::-1], 'YlGnBu_r')))\n",
     "surfgrid = SurfaceGrid(geometry=surf_g, material=LineBasicMaterial(color='black'))\n",
-    "hover_point = Mesh(geometry=SphereGeometry(radius=0.05), material=LambertMaterial(color='hotpink'))\n",
+    "hover_point = Mesh(geometry=SphereGeometry(radius=0.05), material=MeshLambertMaterial(color='hotpink'))\n",
     "scene = Scene(children=[surf, surfgrid, hover_point, AmbientLight(color='#777777')])\n",
     "c = PerspectiveCamera(position=[0, 3, 3], up=[0, 0, 1], \n",
     "                      children=[DirectionalLight(color='white', position=[3, 5, 1], intensity=0.6)])\n",
@@ -114,7 +114,7 @@
     "    value = change['new']\n",
     "    print('Clicked on %s' % value)\n",
     "    point = Mesh(geometry=SphereGeometry(radius=0.05), \n",
-    "                 material=LambertMaterial(color='red'),\n",
+    "                 material=MeshLambertMaterial(color='red'),\n",
     "                 position=value)\n",
     "    scene.children = list(scene.children) + [point]\n",
     "\n",
@@ -179,7 +179,7 @@
     "t = DataTexture(data=rgba_list, format='RGBAFormat', width=size, height=size)\n",
     "\n",
     "geometry = SphereGeometry()#TorusKnotGeometry(radius=2, radialSegments=200)\n",
-    "material = LambertMaterial(map=t)\n",
+    "material = MeshLambertMaterial(map=t)\n",
     "\n",
     "myobject = Mesh(geometry=geometry, material=material)\n",
     "c = PerspectiveCamera(position=[0, 3, 3], fov=40,\n",
@@ -254,8 +254,8 @@
     "\"\"\"\n",
     "surf_g = ParametricGeometry(func=f);\n",
     "\n",
-    "surf = Mesh(geometry=surf_g, material=LambertMaterial(color='green', side='FrontSide'))\n",
-    "surf2 = Mesh(geometry=surf_g, material=LambertMaterial(color='yellow', side='BackSide'))\n",
+    "surf = Mesh(geometry=surf_g, material=MeshLambertMaterial(color='green', side='FrontSide'))\n",
+    "surf2 = Mesh(geometry=surf_g, material=MeshLambertMaterial(color='yellow', side='BackSide'))\n",
     "scene = Scene(children=[surf, surf2, AmbientLight(color='#777777')])\n",
     "c = PerspectiveCamera(position=[5, 5, 3], up=[0, 0, 1],\n",
     "                      children=[DirectionalLight(color='white',\n",
@@ -314,7 +314,7 @@
     "facecolors = [[vertexcolors[i] for i in f] for f in faces]\n",
     "cubeGeometry = PlainGeometry(vertices=vertices, faces=faces, faceColors = facecolors)\n",
     "\n",
-    "myobjectCube = Mesh(geometry=cubeGeometry, material = LambertMaterial(vertexColors = 'VertexColors'))\n",
+    "myobjectCube = Mesh(geometry=cubeGeometry, material = MeshLambertMaterial(vertexColors = 'VertexColors'))\n",
     "cCube = PerspectiveCamera(position=[3, 3, 3], fov=20,\n",
     "                      children=[DirectionalLight(color='#ffffff', position=[-3, 5, 1], intensity=0.5)])\n",
     "sceneCube = Scene(children=[myobjectCube, AmbientLight(color='#dddddd')])\n",
@@ -374,7 +374,7 @@
     "\n",
     "cubeGeometry = PlainBufferGeometry(vertices=vertices, faces=faces, colors = vertexcolors)\n",
     "\n",
-    "myobjectCube = Mesh(geometry=cubeGeometry, material = LambertMaterial(vertexColors = 'VertexColors'))\n",
+    "myobjectCube = Mesh(geometry=cubeGeometry, material = MeshLambertMaterial(vertexColors = 'VertexColors'))\n",
     "cCube = PerspectiveCamera(position=[3, 3, 3], fov=20,\n",
     "                      children=[DirectionalLight(color='#ffffff', position=[-3, 5, 1], intensity=0.5)])\n",
     "sceneCube = Scene(children=[myobjectCube, AmbientLight(color='#dddddd')])\n",

examples/threejs/voxel_painter.ipynb

@@ -155,7 +155,7 @@
     "    depth = csize\n",
     ")\n",
     "\n",
-    "cube_mat = LambertMaterial(\n",
+    "cube_mat = MeshLambertMaterial(\n",
     "    color = 0xfeb74c,\n",
     "    shading = 'FlatShading',\n",
     "    map = cube_tex\n",

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupyter-threejs",
-  "version": "0.2.0",
+  "version": "0.3.0-alpha.0",
   "description": "jupyter - threejs bridge",
   "author": "Jupyter-Threejs development team",
   "license": "BSD-3-Clause",
@@ -11,7 +11,9 @@
   },
   "scripts": {
     "clean": "node ./scripts/clean-generated-files.js",
-    "autogen": "node ./scripts/generate-wrappers.js",
+    "autogen-enums": "node ./scripts/generate-enums.js",
+    "autogen-wrappers": "node ./scripts/generate-wrappers.js",
+    "autogen": "npm run autogen-enums && npm run autogen-wrappers",
     "build": "webpack",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -25,9 +27,9 @@
     "webpack": "^1.12.14"
   },
   "dependencies": {
-    "jupyter-js-widgets": "^2.1.4",
+    "@jupyter-widgets/base": "^0.2.0",
     "ndarray": "^1.0.18",
-    "three": "^0.75.0",
+    "three": "^0.85.2",
     "underscore": "^1.8.3"
   }
 }

js/scripts/generate-enums.js

@@ -0,0 +1,169 @@
+var _ = require('underscore');
+var path = require('path');
+var fs = require('fs');
+var fse = require('fs-extra');
+var Promise = require('bluebird');
+var Handlebars = require('handlebars');
+
+Promise.promisifyAll(fs);
+Promise.promisifyAll(fse);
+
+const enumConfigs = require('./three-enum-config');
+
+const scriptDir = __dirname;
+const baseDir = path.resolve(scriptDir, '..');
+
+const jsSrcDir = path.resolve(baseDir, 'src/');
+const pySrcDir = path.resolve(baseDir, '..', 'pythreejs');
+const templateDir = path.resolve(scriptDir, 'templates');
+
+const threeSrcDir = path.resolve(baseDir, 'node_modules', 'three', 'src');
+
+const jsEnumDst = path.resolve(jsSrcDir, '_base', 'enums.js');
+const pyEnumDst = path.resolve(pySrcDir, 'enums.py');
+
+//
+// Actual THREE constants:
+//
+
+function parseThreeConstants() {
+    var content = fs.readFileSync(path.resolve(threeSrcDir, 'constants.js'), 'utf-8');
+    eval('var result = new function() {\n' + content.replace(/export var (.*?);/g, 'var $1;\nthis.$1;') + '}()');
+    return result;
+}
+
+const threeEnums = parseThreeConstants();
+
+
+//
+// Templates
+//
+
+function compileTemplate(templateName) {
+    var templateName = path.basename(templateName, '.mustache');
+    var templatePath = path.resolve(templateDir, templateName + '.mustache');
+    return Handlebars.compile(fs.readFileSync(templatePath, {
+        encoding: 'utf-8'
+    }));
+}
+
+var jsEnumTemplate = compileTemplate('js_enums');
+var pyEnumTemplate = compileTemplate('py_enums');
+
+
+//
+// Helper functions
+//
+
+function checkUnused() {
+    return new Promise(function(resolve, reject) {
+        var unusedThreeEnums = _.keys(threeEnums);
+
+        _.keys(enumConfigs).map(function(category) {
+            values = enumConfigs[category];
+            values.forEach(function(enumKey) {
+                 if (Array.isArray(enumKey)) {
+                    // Several keys share the same value, remove all.
+                    enumKey.forEach(function(subKey) {
+                        unusedThreeEnums.splice(unusedThreeEnums.indexOf(subKey), 1);
+                    });
+                } else {
+                    unusedThreeEnums.splice(unusedThreeEnums.indexOf(enumKey), 1);
+                }
+            }, this);
+        }, this);
+
+        if (unusedThreeEnums.length > 0) {
+            console.error('Unreferenced constants: ', unusedThreeEnums);
+        }
+    });
+}
+
+
+//
+// Generator functions
+//
+
+function writeJavascriptFile() {
+    // Here we generate a code to enum string LUT
+
+    var categories = [];
+
+    _.keys(enumConfigs).map(function(category) {
+        var categoryObj = {key: category, enums: []};
+        categories.push(categoryObj);
+        enumConfigs[category].forEach(function(enumKey) {
+            if (Array.isArray(enumKey)) {
+                // Several keys share the same value, use the first one.
+                enumKey = enumKey[0];
+            }
+            categoryObj.enums.push({ key: enumKey, value: threeEnums[enumKey] });
+        }, this);
+    }, this);
+
+    var content = jsEnumTemplate({
+        now: new Date(),
+        generatorScriptName: path.basename(__filename),
+
+        categories: categories
+    });
+
+    return fse.outputFileAsync(jsEnumDst, content);
+}
+
+function createJavascriptFiles() {
+    return new Promise(function(resolve, reject) {
+        resolve(writeJavascriptFile());
+    });
+}
+
+function writePythonFile() {
+    // Here we generate lists of enum keys
+
+    var categories = [];
+
+    _.keys(enumConfigs).map(function(category) {
+        var enums = [];
+        enumConfigs[category].forEach(function(enumKey) {
+            if (Array.isArray(enumKey)) {
+                // Several keys share the same value, include all.
+                enums = enums.concat(enumKey);
+            } else {
+                enums.push(enumKey);
+            }
+        });
+        var categoryObj = {key: category, enums: enums};
+        categories.push(categoryObj);
+    });
+
+    var content = pyEnumTemplate({
+        now: new Date(),
+        generatorScriptName: path.basename(__filename),
+
+        categories: categories,
+    });
+
+    return fse.outputFileAsync(pyEnumDst, content);
+}
+
+function createPythonFiles() {
+    return new Promise(function(resolve, reject) {
+        resolve(writePythonFile());
+    });
+}
+
+function generateFiles() {
+
+    return Promise.all([
+        createJavascriptFiles(),
+        createPythonFiles(),
+        checkUnused(),
+    ]);
+
+}
+
+if (require.main === module) {
+    generateFiles().then(function() {
+        console.log('DONE');
+    });
+}