Control Scenegraph position interpolation with a time controller

[mobhuiyan98]

I am currently at my wits end with this. I want to be able to load time-series, with a [x,y,z] position into the scenegraph layer, and be able control the position with a time controller. Current I am using a useEffect that triggers the time and calls a function to manually calculate interpolation of the position which then updates the state of the data. However, this seems to be intensive for large amounts of data and inefficient. How can I have the interpolation done on the GPU while still controlling the time. This should be able to be done with layer prop transitions, but I am unable to get it working correctly. Is this possible with the Data Filter Extension or hubble.gl? If someone could show me an example it would be much appreciated.

[abitwired]

I'm working on the same problem right now. For now, I'm just trying to see if I can use a similar method to the Trips-Layer in their example. However, the Trips-Layer only uses the prop currentTime to hide/show the line during the rendering process. In our case, we kind of want to overwrite the getPosition function call happening in the ScenegraphLayer to incorporate the currentTime prop.

For now, I have something like this:

export type MyCustomLayerProps<DataT> = {
  currentTime?: number;
  getPosition?: Accessor<object: DataT, Position>;
} & ScenegraphLayerProps<DataT>;

However, the getPosition method doesn't have access to the currentTime prop passed into the layer. I don't know how to "hook" into the layer to expose the prop prior/during the position calculation. My current thoughts are that we need to somehow do that here?

  initializeState() {
    super.initializeState();
    const attributeManager = this.getAttributeManager();
    // attributeManager is always defined for primitive layers
    attributeManager!.addInstanced({
      instancePositions: {
        size: 3,
        type: 'float64',
        fp64: this.use64bitPositions(),
        accessor: 'getPosition',
        transition: true
      },
    })
  }

I think the accessor should be configurable to inject more than one object (the data). The accessor property type should allow you to define additional props (or pass all props) into the function as part of the second argument.

[mobhuiyan98]

In order to get this done, there needs to be a method of adjusting the position of the object within the shader code.

https://deck.gl/docs/developer-guide/custom-layers/writing-shaders

"VertexGeometry struct

vec3 worldPosition - The world position of the current geometry, usually populated from a getPosition accessor.
vec3 worldPositionAlt - The secondary world position of the current geometry. This property is populated if the geometry is instanced between a source position and a target position, for example ArcLayer.
vec3 normal - The normal at the current vertex in common space. Only populated for 3D layers.
vec2 uv - The uv position at the current vertex.
vec4 position - The position of the current vertex in common space. Populated during projection.
vec3 pickingColor - The picking color of the current vertex."

The worldPosition variable would need to be adjusted in the vertex shader, I've tried my hand at making the vertex shader injection code to do so, however I am completely out of my depth when it comes to coding GLSL. I've spent about a week trying to figure it out.

@Pessimistress Are you able to provide any tips or direction on how to tackle this?

[mobhuiyan98]

https://codesandbox.io/p/sandbox/wandering-fire-vmy8ft

Here is a codesandbox to show exactly the behavior I am describing. This solution does work, as the number of objects increase the performance decreases. All of the interpolation happens on the cpu and I would like for this to happen on the gpu. I am inexperienced with shader injection, and would like some assistance.

[just-website]

@mobhuiyan98 do you have any progress?

[mobhuiyan98]

I'm currently working on a solution with bufferTransform with luma.gl. You can do some data transformation with it. Hopefully I'll be able to have a solution and I'll share with you guys. If there is anyone who is working on something similar and has some advice for me, it would be much appreciated.