Ensure buffergeom attributes map correctly

Author: vidartf

js/src/core/BufferAttribute.js

@@ -4,25 +4,51 @@ var BufferAttributeAutogen = require('./BufferAttribute.autogen').BufferAttribut
 
 var BufferAttributeModel = BufferAttributeAutogen.extend({
 
-    constructThreeObject: function() {
+    createPropertiesArrays: function() {
+        BufferAttributeAutogen.prototype.createPropertiesArrays.call(this);
+
+        // three.js DataTexture stores the data, width, and height props together in a dict called 'image'
+        this.property_mappers['BufferAttributeArray'] = 'mapBufferAttributeArray';
+        delete this.property_converters['array'];
+    },
 
-        var array = this.get('array');
-        if (array.dimension > 2) {
+    decodeData() {
+        var rawData = this.get('array');
+        if (rawData.dimension > 2) {
             throw Error('Array has too many dimensions:', array)
         }
-        var itemSize = array.dimension === 1 ? 1 : array.shape[1];
+        var itemSize = rawData.dimension === 1 ? 1 : rawData.shape[1];
+
+        var data = this.convertArrayBufferModelToThree(rawData, 'array');
+        return {
+            array: data,
+            itemSize: itemSize,
+        }
+    },
 
+    constructThreeObject: function() {
+        var data = this.decodeData();
         var result = new THREE.BufferAttribute(
-            this.convertArrayBufferModelToThree(array, 'array'),
-            itemSize,
+            data.array,
+            data.itemSize,
             this.get('normalized')
         );
+        result.needsUpdate = true;
         return Promise.resolve(result);
 
     },
 
-    assignAttributeMap: function() {
+    mapBufferAttributeArrayModelToThree: function() {
+        var data = this.decodeData();
+        this.obj.setArray(data.array);
+        this.obj.needsUpdate = true;
+        this.set({ version: this.obj.version }, 'pushFromThree');
+    },
 
+    mapBufferAttributeArrayThreeToModel: function() {
+        var attributeData = this.obj.array;
+        var modelNDArray = this.get('array');
+        modelNDArray.data.set(attributeData);
     },
 
 }, {

js/src/geometries/PlainBufferGeometry.js

@@ -1,8 +1,14 @@
+var _ = require('underscore');
 var AutogenPlainBufferGeometryModel = require('../geometries/PlainBufferGeometry.autogen').PlainBufferGeometryModel;
 
 
 var PlainBufferGeometryModel = AutogenPlainBufferGeometryModel.extend({
 
+    createPropertiesArrays: function() {
+        AutogenPlainBufferGeometryModel.prototype.createPropertiesArrays.call(this);
+        this.property_assigners['attributes'] = 'assignAttributesMap';
+    },
+
     constructThreeObject: function() {
 
         var result = new THREE.BufferGeometry();
@@ -33,6 +39,34 @@ var PlainBufferGeometryModel = AutogenPlainBufferGeometryModel.extend({
 
     },
 
+    assignAttributesMap: function(obj, key, value) {
+
+        var three = obj[key];
+        var oldKeys = three ? Object.keys(three).sort() : [];
+        var newKeys = value ? Object.keys(value).sort() : [];
+
+        var added = _.difference(newKeys, oldKeys);
+        var removed = _.difference(oldKeys, newKeys);
+        var common = _.intersection(oldKeys, newKeys);
+
+        if (removed.length > 0) {
+            console.warn('Cannot remove buffer geometry attributes:', removed);
+        }
+        added.forEach(key => {
+            obj.addAttribute(key, value[key]);
+        });
+
+        var current;
+        common.forEach(key => {
+            current = obj.getAttribute(key);
+            if (current !== value[key]) {
+                console.warn('Cannot reassign buffer geometry attribute:', key);
+                return;  // continue
+            }
+        });
+
+    },
+
 });
 
 module.exports = {