WIP use BufferGeometry for the plain geometry.

We probably should have a separate PlainGeometry and PlainBufferGeometry.

Note that with this change, faceColors is *actually* a list of colors for each vertex. Also, it seems that the cube example has the normals slightly off.

Author: jasongrout

examples/Examples.ipynb

@@ -327,13 +327,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 22,
+   "execution_count": 16,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "14b729d1bb674cefb80aa5a9d0a3f990"
+       "model_id": "e447091aeb744189850523e511566d2c"
       }
      },
      "metadata": {},
@@ -375,13 +375,11 @@
     "        [5, 6, 7]\n",
     "    ])\n",
     "\n",
-    "vertexcolors = [(0,0,0), (0,0,1), (0,1,0), (1,0,0), (0,1,1), (1,0,1), (1,1,0), (1,1,1)]\n",
-    "faceColors=np.asarray([[vertexcolors[i] for i in f] for f in faces])\n",
+    "vertexcolors = np.asarray([(1,1,1)]*8)\n",
     "\n",
+    "cubeGeometry = PlainGeometry(vertices=vertices, faces=faces, faceColors = vertexcolors)\n",
     "\n",
-    "cubeGeometry = PlainGeometry(vertices=vertices, faces=faces, faceColors = faceColors)\n",
-    "\n",
-    "myobjectCube = Mesh(geometry=cubeGeometry, material = PhongMaterial(color='white', vertexColors = 'VertexColors'))\n",
+    "myobjectCube = Mesh(geometry=cubeGeometry, material = PhongMaterial( 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",

js/src/jupyter-threejs.js

@@ -591,14 +591,14 @@ define(["jupyter-js-widgets", "underscore", "three", "ndarray"],
 
     var PlainGeometryView = ThreeView.extend({
         update: function() {
-            var geometry = new THREE.Geometry();
+            var geometry = new THREE.BufferGeometry();
             var vertices = this.model.get('vertices');
             var faces = this.model.get('faces');
             var colors = this.model.get('colors');
             var faceColors = this.model.get('faceColors');
             var faceNormals = this.model.get('faceNormals');
-            var faceVertexUvs = this.model.get('faceVertexUvs')
-
+            var faceVertexUvs = this.model.get('faceVertexUvs');
+/*
             if (faceNormals.length === 0) {
                 faceNormals = void 0;
             }
@@ -616,7 +616,14 @@ define(["jupyter-js-widgets", "underscore", "three", "ndarray"],
             var i, len;
             var f;
             var face;
-            for(i = 0, len=vertices.shape[0]; i<len; i+=1) {
+*/
+            geometry.addAttribute('position', new THREE.BufferAttribute(vertices.data, 3));
+            geometry.addAttribute('color', new THREE.BufferAttribute(faceColors.data, 3));
+            geometry.setIndex(new THREE.BufferAttribute(faces.data, 1));
+            geometry.computeVertexNormals();
+            geometry.computeBoundingSphere();
+
+            /*for(i = 0, len=vertices.shape[0]; i<len; i+=1) {
                 geometry.vertices.push(toVec(vertices.pick(i)));
             }
             for(i=0, len=faces.shape[0]; i<len; i+=1) {
@@ -639,14 +646,17 @@ define(["jupyter-js-widgets", "underscore", "three", "ndarray"],
             for(i=0, len=colors.length; i<len; i+=1) {
                 geometry.colors.push(new THREE.Color(colors[i]));
             }
+            */
             // TODO: faceVertexUvs
-            geometry.verticesNeedUpdate = true;
-            geometry.elementsNeedUpdate = true;
+            geometry.attributes.position.needsUpdate = true;
+            geometry.attributes.color.needsUpdate = true;
+            /*geometry.elementsNeedUpdate = true;
             geometry.uvsNeedUpdate = true;
             geometry.normalsNeedUpdate = true;
             geometry.tangentsNeedUpdate = true;
             geometry.colorsNeedUpdate = true;
             geometry.lineDistancesNeedUpdate = true;
+            */
             this.replace_obj(geometry);
         },
     });

pythreejs/pythreejs.py

@@ -274,7 +274,7 @@ class PlainGeometry(Geometry):
     vertices = Array(dtype='float32').tag(sync=True, **array_serialization).valid(shape_constraints(None,3))
     faces = Array(dtype='uint32').tag(sync=True, **array_serialization).valid(shape_constraints(None,3))
     # list of [[v1_r,v1_g,v1_b], [v2_r,v2_g,v2_b], [v3_r,v3_g,v3_b]] for each face
-    faceColors = Array(dtype='float32').tag(sync=True, **array_serialization).valid(shape_constraints(None,3,3))
+    faceColors = Array(dtype='float32').tag(sync=True, **array_serialization).valid(shape_constraints(None,3))
     #vertices = List(vector3(CFloat)).tag(sync=True)
     colors = List(Color).tag(sync=True)
     #faces = List(List(CFloat)).tag(sync=True)