Merge 3a95429 into 9d96290

modules/core/src/lib/attribute/attribute-manager.js

@@ -216,7 +216,7 @@ export default class AttributeManager {
   update({
     data,
     numInstances,
-    bufferLayout,
+    vertexStarts,
     transitions,
     props = {},
     buffers = {},
@@ -246,7 +246,7 @@ export default class AttributeManager {
         this._updateAttribute({
           attribute,
           numInstances,
-          bufferLayout,
+          vertexStarts,
           data,
           props,
           context

modules/core/src/lib/attribute/attribute-transition-manager.js

@@ -116,7 +116,7 @@ export default class AttributeTransitionManager {
     // an attribute can change transition type when it updates
     // let's remove the transition when that happens so we can create the new transition type
     // TODO: when switching transition types, make sure to carry over the attribute's
-    // previous buffers, currentLength, bufferLayout, etc, to be used as the starting point
+    // previous buffers, currentLength, vertexStarts, etc, to be used as the starting point
     // for the next transition
     let isNew = !transition || transition.type !== settings.type;
     if (isNew) {

modules/core/src/lib/attribute/attribute-transition-utils.js

@@ -89,21 +89,21 @@ export function padBuffer({
   numInstances,
   attribute,
   fromLength,
-  fromBufferLayout,
+  fromVertexStarts,
   getData = x => x
 }) {
   // TODO: move the precisionMultiplier logic to the attribute when retrieving
   // its `size` and `elementOffset`?
   const precisionMultiplier = attribute.doublePrecision ? 2 : 1;
   const size = attribute.size * precisionMultiplier;
   const offset = attribute.elementOffset * precisionMultiplier;
-  const toBufferLayout = attribute.bufferLayout;
-  const hasBufferLayout = fromBufferLayout && toBufferLayout;
+  const toVertexStarts = attribute.vertexStarts;
+  const hasVertexStarts = fromVertexStarts && toVertexStarts;
   const toLength = getAttributeBufferLength(attribute, numInstances);
   const isConstant = attribute.state.constant;
 
   // check if buffer needs to be padded
-  if (!hasBufferLayout && fromLength >= toLength) {
+  if (!hasVertexStarts && fromLength >= toLength) {
     return;
   }
 
@@ -122,8 +122,8 @@ export function padBuffer({
   padArray({
     source,
     target: data,
-    sourceLayout: fromBufferLayout,
-    targetLayout: toBufferLayout,
+    sourceVertexStarts: fromVertexStarts,
+    targetVertexStarts: toVertexStarts,
     offset,
     size,
     getData: getMissingData

modules/core/src/lib/attribute/attribute.js

@@ -19,7 +19,7 @@ export default class Attribute extends DataColumn {
       update = null,
       accessor = null,
       transform = null,
-      bufferLayout = null
+      vertexStarts = null
     } = opts;
 
     Object.assign(this.settings, {
@@ -36,7 +36,7 @@ export default class Attribute extends DataColumn {
       needsUpdate: true,
       needsRedraw: false,
       updateRanges: range.FULL,
-      bufferLayout
+      vertexStarts
     });
 
     Object.seal(this.settings);
@@ -46,12 +46,12 @@ export default class Attribute extends DataColumn {
     this._validateAttributeUpdaters();
   }
 
-  get bufferLayout() {
-    return this.state.bufferLayout;
+  get vertexStarts() {
+    return this.state.vertexStarts;
   }
 
-  set bufferLayout(layout) {
-    this.state.bufferLayout = layout;
+  set vertexStarts(layout) {
+    this.state.vertexStarts = layout;
   }
 
   needsUpdate() {
@@ -136,7 +136,7 @@ export default class Attribute extends DataColumn {
     return false;
   }
 
-  updateBuffer({numInstances, bufferLayout, data, props, context}) {
+  updateBuffer({numInstances, vertexStarts, data, props, context}) {
     if (!this.needsUpdate()) {
       return false;
     }
@@ -150,7 +150,7 @@ export default class Attribute extends DataColumn {
     if (update) {
       // Custom updater - typically for non-instanced layers
       for (const [startRow, endRow] of updateRanges) {
-        update.call(context, this, {data, startRow, endRow, props, numInstances, bufferLayout});
+        update.call(context, this, {data, startRow, endRow, props, numInstances, vertexStarts});
       }
       if (!this.value) {
         // no value was assigned during update
@@ -221,20 +221,9 @@ export default class Attribute extends DataColumn {
     return true;
   }
 
-  getVertexOffset(row, bufferLayout = this.bufferLayout) {
-    let offset = this.settings.elementOffset;
-    if (bufferLayout) {
-      let index = 0;
-      for (const geometrySize of bufferLayout) {
-        if (index >= row) {
-          break;
-        }
-        offset += geometrySize * this.size;
-        index++;
-      }
-      return offset;
-    }
-    return offset + row * this.size;
+  getVertexOffset(row, vertexStarts = this.vertexStarts) {
+    const vertexIndex = vertexStarts ? vertexStarts[row] : row;
+    return this.settings.elementOffset + vertexIndex * this.size;
   }
 
   getShaderAttributes() {
@@ -251,15 +240,15 @@ export default class Attribute extends DataColumn {
     return shaderAttributes;
   }
 
-  _standardAccessor(attribute, {data, startRow, endRow, props, numInstances, bufferLayout}) {
+  _standardAccessor(attribute, {data, startRow, endRow, props, numInstances, vertexStarts}) {
     const {settings, value, size} = attribute;
 
     const {accessor, transform} = settings;
     const accessorFunc = typeof accessor === 'function' ? accessor : props[accessor];
 
     assert(typeof accessorFunc === 'function', `accessor "${accessor}" is not a function`);
 
-    let i = attribute.getVertexOffset(startRow, bufferLayout);
+    let i = attribute.getVertexOffset(startRow, vertexStarts);
     const {iterable, objectInfo} = createIterable(data, startRow, endRow);
     for (const object of iterable) {
       objectInfo.index++;
@@ -271,9 +260,10 @@ export default class Attribute extends DataColumn {
         objectValue = transform.call(this, objectValue);
       }
 
-      if (bufferLayout) {
+      if (vertexStarts) {
         attribute._normalizeValue(objectValue, objectInfo.target);
-        const numVertices = bufferLayout[objectInfo.index];
+        const numVertices =
+          (vertexStarts[objectInfo.index + 1] || numInstances) - vertexStarts[objectInfo.index];
         fillArray({
           target: attribute.value,
           source: objectInfo.target,
@@ -287,7 +277,7 @@ export default class Attribute extends DataColumn {
       }
     }
     attribute.constant = false;
-    attribute.bufferLayout = bufferLayout;
+    attribute.vertexStarts = vertexStarts;
   }
 
   // Validate deck.gl level fields

modules/core/src/lib/layer.js

@@ -425,12 +425,12 @@ export default class Layer extends Component {
 
     // Figure out data length
     const numInstances = this.getNumInstances(props);
-    const bufferLayout = this.getBufferLayout(props);
+    const vertexStarts = this.getVertexStarts(props);
 
     attributeManager.update({
       data: props.data,
       numInstances,
-      bufferLayout,
+      vertexStarts,
       props,
       transitions: props.transitions,
       buffers: props,
@@ -554,17 +554,17 @@ export default class Layer extends Component {
   // The default (null) is one value each object.
   // Some data formats (e.g. paths, polygons) have various length. Their buffer layout
   //  is in the form of [L0, L1, L2, ...]
-  getBufferLayout(props) {
+  getVertexStarts(props) {
     props = props || this.props;
 
-    // First Check if bufferLayout is provided as an explicit value
-    if (props.bufferLayout !== undefined) {
-      return props.bufferLayout;
+    // First Check if vertexStarts is provided as an explicit value
+    if (props.vertexStarts !== undefined) {
+      return props.vertexStarts;
     }
 
     // Second check if the layer has set its own value
-    if (this.state && this.state.bufferLayout !== undefined) {
-      return this.state.bufferLayout;
+    if (this.state && this.state.vertexStarts) {
+      return this.state.vertexStarts;
     }
 
     return null;

modules/core/src/transitions/gpu-interpolation-transition.js

@@ -21,7 +21,7 @@ export default class GPUInterpolationTransition {
     // `attribute.userData` is the original options passed when constructing the attribute.
     // This ensures that we set the proper `doublePrecision` flag and shader attributes.
     this.attributeInTransition = new Attribute(gl, attribute.settings);
-    this.currentBufferLayout = attribute.bufferLayout;
+    this.currentVertexStarts = attribute.vertexStarts;
     // storing currentLength because this.buffer may be larger than the actual length we want to use
     // this is because we only reallocate buffers when they grow, not when they shrink,
     // due to performance costs
@@ -45,7 +45,7 @@ export default class GPUInterpolationTransition {
   // we need to start animating towards the new values
   // this also correctly resizes / pads the transform's buffers
   // in case the attribute's buffer has changed in length or in
-  // bufferLayout
+  // vertexStarts
   start(transitionSettings, numInstances) {
     if (transitionSettings.duration <= 0) {
       this.transition.cancel();
@@ -62,15 +62,15 @@ export default class GPUInterpolationTransition {
       numInstances,
       attribute,
       fromLength: this.currentLength,
-      fromBufferLayout: this.currentBufferLayout,
+      fromVertexStarts: this.currentVertexStarts,
       getData: transitionSettings.enter
     };
 
     for (const buffer of buffers) {
       padBuffer({buffer, ...padBufferOpts});
     }
 
-    this.currentBufferLayout = attribute.bufferLayout;
+    this.currentVertexStarts = attribute.vertexStarts;
     this.currentLength = getAttributeBufferLength(attribute, numInstances);
     this.attributeInTransition.update({
       buffer: buffers[1],

modules/core/src/transitions/gpu-spring-transition.js

@@ -25,7 +25,7 @@ export default class GPUSpringTransition {
       gl,
       Object.assign({}, attribute.settings, {normalized: false})
     );
-    this.currentBufferLayout = attribute.bufferLayout;
+    this.currentVertexStarts = attribute.vertexStarts;
     // storing currentLength because this.buffer may be larger than the actual length we want to use
     // this is because we only reallocate buffers when they grow, not when they shrink,
     // due to performance costs
@@ -52,22 +52,22 @@ export default class GPUSpringTransition {
   // we need to start animating towards the new values
   // this also correctly resizes / pads the transform's buffers
   // in case the attribute's buffer has changed in length or in
-  // bufferLayout
+  // vertexStarts
   start(transitionSettings, numInstances) {
     const {gl, buffers, attribute} = this;
     const padBufferOpts = {
       numInstances,
       attribute,
       fromLength: this.currentLength,
-      fromBufferLayout: this.currentBufferLayout,
+      fromVertexStarts: this.currentVertexStarts,
       getData: transitionSettings.enter
     };
 
     for (const buffer of buffers) {
       padBuffer({buffer, ...padBufferOpts});
     }
 
-    this.currentBufferLayout = attribute.bufferLayout;
+    this.currentVertexStarts = attribute.vertexStarts;
     this.currentLength = getAttributeBufferLength(attribute, numInstances);
     this.attributeInTransition.update({
       buffer: buffers[1],

modules/core/src/utils/array-utils.js

@@ -52,17 +52,25 @@ function padArrayChunk({source, target, start = 0, end, getData}) {
 /*
  * The padArray function stretches a source array to the size of a target array.
    The arrays can have internal structures (like the attributes of PathLayer and
-   SolidPolygonLayer), defined by the optional sourceLayout and targetLayout parameters.
+   SolidPolygonLayer), defined by the optional sourceVertexStarts and targetVertexStarts parameters.
    If the target array is larger, the getData callback is used to fill in the blanks.
  * @params {TypedArray} source - original data
  * @params {TypedArray} target - output data
  * @params {Number} size - length per datum
  * @params {Function} getData - callback to get new data when source is short
- * @params {Array<Number>} [sourceLayout] - subdivision of the original data in [chunkSize0, chunkSize1, ...]
- * @params {Array<Number>} [targetLayout] - subdivision of the output data in [chunkSize0, chunkSize1, ...]
+ * @params {Array<Number>} [sourceVertexStarts] - subdivision of the original data in [object0StartIndex, object1StartIndex, ...]
+ * @params {Array<Number>} [targetVertexStarts] - subdivision of the output data in [object0StartIndex, object1StartIndex, ...]
  */
-export function padArray({source, target, size, offset = 0, getData, sourceLayout, targetLayout}) {
-  if (!Array.isArray(targetLayout)) {
+export function padArray({
+  source,
+  target,
+  size,
+  offset = 0,
+  getData,
+  sourceVertexStarts,
+  targetVertexStarts
+}) {
+  if (!Array.isArray(targetVertexStarts)) {
     // Flat arrays
     padArrayChunk({
       source,
@@ -77,22 +85,22 @@ export function padArray({source, target, size, offset = 0, getData, sourceLayou
   let targetIndex = offset;
   const getChunkData = getData && ((i, chunk) => getData(i + targetIndex, chunk));
 
-  const n = Math.min(sourceLayout.length, targetLayout.length);
+  const n = Math.min(sourceVertexStarts.length, targetVertexStarts.length);
 
-  for (let i = 0; i < n; i++) {
-    const sourceChunkLength = sourceLayout[i] * size;
-    const targetChunkLength = targetLayout[i] * size;
+  for (let i = 1; i < n; i++) {
+    const nextSourceIndex = sourceVertexStarts[i] * size + offset;
+    const nextTargetIndex = targetVertexStarts[i] * size + offset;
 
     padArrayChunk({
-      source: source.subarray(sourceIndex, sourceIndex + sourceChunkLength),
+      source: source.subarray(sourceIndex, nextSourceIndex),
       target,
       start: targetIndex,
-      end: targetIndex + targetChunkLength,
+      end: nextTargetIndex,
       getData: getChunkData
     });
 
-    sourceIndex += sourceChunkLength;
-    targetIndex += targetChunkLength;
+    sourceIndex = nextSourceIndex;
+    targetIndex = nextTargetIndex;
   }
 
   if (targetIndex < target.length) {