@cosmos.gl/graph 2.6.2 → 2.7.0-beta.0

package/src/modules/Lines/index.ts

@@ -0,0 +1,661 @@
+import { Framebuffer, Buffer, Texture, UniformStore, RenderPass } from '@luma.gl/core'
+import { Model } from '@luma.gl/engine'
+import { CoreModule } from '@/graph/modules/core-module'
+import drawLineFrag from '@/graph/modules/Lines/draw-curve-line.frag?raw'
+import drawLineVert from '@/graph/modules/Lines/draw-curve-line.vert?raw'
+import hoveredLineIndexFrag from '@/graph/modules/Lines/hovered-line-index.frag?raw'
+import hoveredLineIndexVert from '@/graph/modules/Lines/hovered-line-index.vert?raw'
+import { defaultConfigValues } from '@/graph/variables'
+import { getCurveLineGeometry } from '@/graph/modules/Lines/geometry'
+
+export class Lines extends CoreModule {
+  public linkIndexFbo: Framebuffer | undefined
+  public hoveredLineIndexFbo: Framebuffer | undefined
+  private drawCurveCommand: Model | undefined
+  private hoveredLineIndexCommand: Model | undefined
+  private pointABuffer: Buffer | undefined
+  private pointBBuffer: Buffer | undefined
+  private colorBuffer: Buffer | undefined
+  private widthBuffer: Buffer | undefined
+  private arrowBuffer: Buffer | undefined
+  private curveLineGeometry: number[][] | undefined
+  private curveLineBuffer: Buffer | undefined
+  private linkIndexBuffer: Buffer | undefined
+  private quadBuffer: Buffer | undefined
+  private linkIndexTexture: Texture | undefined
+  private hoveredLineIndexTexture: Texture | undefined
+
+  // Uniform stores for scalar uniforms
+  private drawLineUniformStore: UniformStore<{
+    drawLineUniforms: {
+      transformationMatrix: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number];
+      pointsTextureSize: number;
+      widthScale: number;
+      linkArrowsSizeScale: number;
+      spaceSize: number;
+      screenSize: [number, number];
+      linkVisibilityDistanceRange: number[];
+      linkVisibilityMinTransparency: number;
+      linkOpacity: number;
+      greyoutOpacity: number;
+      curvedWeight: number;
+      curvedLinkControlPointDistance: number;
+      curvedLinkSegments: number;
+      scaleLinksOnZoom: number;
+      maxPointSize: number;
+      renderMode: number;
+      hoveredLinkIndex: number;
+      hoveredLinkColor: number[];
+      hoveredLinkWidthIncrease: number;
+    };
+    drawLineFragmentUniforms: {
+      renderMode: number;
+    };
+  }> | undefined
+
+  private hoveredLineIndexUniformStore: UniformStore<{
+    hoveredLineIndexUniforms: {
+      mousePosition: number[];
+      screenSize: [number, number];
+    };
+  }> | undefined
+
+  // Track previous screen size to detect changes
+  private previousScreenSize: [number, number] | undefined
+
+  public initPrograms (): void {
+    const { device, config, store } = this
+
+    this.updateLinkIndexFbo()
+
+    // Initialize the hovered line index FBO
+    if (!this.hoveredLineIndexTexture) {
+      this.hoveredLineIndexTexture = device.createTexture({
+        width: 1,
+        height: 1,
+        format: 'rgba32float',
+        usage: Texture.SAMPLE | Texture.RENDER | Texture.COPY_DST,
+      })
+      this.hoveredLineIndexTexture.copyImageData({
+        data: new Float32Array(4).fill(0),
+        bytesPerRow: 1,
+        mipLevel: 0,
+        x: 0,
+        y: 0,
+      })
+      this.hoveredLineIndexFbo = device.createFramebuffer({
+        width: 1,
+        height: 1,
+        colorAttachments: [this.hoveredLineIndexTexture],
+      })
+    }
+
+    // Ensure geometry buffer exists (create empty if needed)
+    if (!this.curveLineGeometry) {
+      this.updateCurveLineGeometry()
+    }
+
+    // Ensure all attribute buffers exist (create empty if needed) so Model has all attributes
+    const linksNumber = this.data.linksNumber ?? 0
+    if (!this.pointABuffer) {
+      this.pointABuffer = device.createBuffer({
+        data: new Float32Array(linksNumber * 2),
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    }
+    if (!this.pointBBuffer) {
+      this.pointBBuffer = device.createBuffer({
+        data: new Float32Array(linksNumber * 2),
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    }
+    if (!this.colorBuffer) {
+      this.colorBuffer = device.createBuffer({
+        data: new Float32Array(linksNumber * 4),
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    }
+    if (!this.widthBuffer) {
+      this.widthBuffer = device.createBuffer({
+        data: new Float32Array(linksNumber),
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    }
+    if (!this.arrowBuffer) {
+      this.arrowBuffer = device.createBuffer({
+        data: new Float32Array(linksNumber),
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    }
+    if (!this.linkIndexBuffer) {
+      this.linkIndexBuffer = device.createBuffer({
+        data: new Float32Array(linksNumber),
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    }
+
+    if (!this.drawCurveCommand) {
+      // Create UniformStore for drawLine uniforms
+      if (!this.drawLineUniformStore) {
+        this.drawLineUniformStore = new UniformStore({
+          drawLineUniforms: {
+            uniformTypes: {
+              transformationMatrix: 'mat4x4<f32>',
+              pointsTextureSize: 'f32',
+              widthScale: 'f32',
+              linkArrowsSizeScale: 'f32',
+              spaceSize: 'f32',
+              screenSize: 'vec2<f32>',
+              linkVisibilityDistanceRange: 'vec2<f32>',
+              linkVisibilityMinTransparency: 'f32',
+              linkOpacity: 'f32',
+              greyoutOpacity: 'f32',
+              curvedWeight: 'f32',
+              curvedLinkControlPointDistance: 'f32',
+              curvedLinkSegments: 'f32',
+              scaleLinksOnZoom: 'f32',
+              maxPointSize: 'f32',
+              renderMode: 'f32',
+              hoveredLinkIndex: 'f32',
+              hoveredLinkColor: 'vec4<f32>',
+              hoveredLinkWidthIncrease: 'f32',
+            },
+            defaultUniforms: {
+              transformationMatrix: store.transformationMatrix4x4,
+              pointsTextureSize: store.pointsTextureSize,
+              widthScale: config.linkWidthScale ?? 1,
+              linkArrowsSizeScale: config.linkArrowsSizeScale ?? 1,
+              spaceSize: store.adjustedSpaceSize ?? 0,
+              screenSize: store.screenSize ?? [0, 0],
+              linkVisibilityDistanceRange: config.linkVisibilityDistanceRange ?? [0, 0],
+              linkVisibilityMinTransparency: config.linkVisibilityMinTransparency ?? 0,
+              linkOpacity: config.linkOpacity ?? 1,
+              greyoutOpacity: config.linkGreyoutOpacity ?? 1,
+              curvedWeight: config.curvedLinkWeight ?? 0,
+              curvedLinkControlPointDistance: config.curvedLinkControlPointDistance ?? 0,
+              curvedLinkSegments: config.curvedLinks ? config.curvedLinkSegments ?? defaultConfigValues.curvedLinkSegments : 1,
+              scaleLinksOnZoom: (config.scaleLinksOnZoom ?? true) ? 1 : 0,
+              maxPointSize: store.maxPointSize ?? 100,
+              renderMode: 0.0,
+              hoveredLinkIndex: store.hoveredLinkIndex ?? -1,
+              hoveredLinkColor: store.hoveredLinkColor ?? [-1, -1, -1, -1],
+              hoveredLinkWidthIncrease: config.hoveredLinkWidthIncrease ?? 0,
+            },
+          },
+          drawLineFragmentUniforms: {
+            uniformTypes: {
+              renderMode: 'f32',
+            },
+            defaultUniforms: {
+              renderMode: 0.0,
+            },
+          },
+        })
+      }
+
+      this.drawCurveCommand = new Model(device, {
+        vs: drawLineVert,
+        fs: drawLineFrag,
+        topology: 'triangle-strip',
+        vertexCount: this.curveLineGeometry?.length ?? 0,
+        attributes: {
+          position: this.curveLineBuffer!,
+          pointA: this.pointABuffer!,
+          pointB: this.pointBBuffer!,
+          color: this.colorBuffer!,
+          width: this.widthBuffer!,
+          arrow: this.arrowBuffer!,
+          linkIndices: this.linkIndexBuffer!,
+        },
+        bufferLayout: [
+          { name: 'position', format: 'float32x2' },
+          { name: 'pointA', format: 'float32x2', stepMode: 'instance' },
+          { name: 'pointB', format: 'float32x2', stepMode: 'instance' },
+          { name: 'color', format: 'float32x4', stepMode: 'instance' },
+          { name: 'width', format: 'float32', stepMode: 'instance' },
+          { name: 'arrow', format: 'float32', stepMode: 'instance' },
+          { name: 'linkIndices', format: 'float32', stepMode: 'instance' },
+        ],
+        defines: {
+          USE_UNIFORM_BUFFERS: true,
+        },
+        bindings: {
+          drawLineUniforms: this.drawLineUniformStore.getManagedUniformBuffer(device, 'drawLineUniforms'),
+          drawLineFragmentUniforms: this.drawLineUniformStore.getManagedUniformBuffer(device, 'drawLineFragmentUniforms'),
+          ...(this.points?.currentPositionTexture && { positionsTexture: this.points.currentPositionTexture }),
+          ...(this.points?.greyoutStatusTexture && { pointGreyoutStatus: this.points.greyoutStatusTexture }),
+        },
+        /**
+         * Blending behavior for link index rendering (renderMode: 1.0 - hover detection):
+         *
+         * When rendering link indices to the framebuffer, we use full opacity (1.0).
+         * This means:
+         * - The source color completely overwrites the destination
+         * - No blending occurs - it's like drawing with a permanent marker
+         * - This preserves the exact index values we need for picking/selection
+         */
+        parameters: {
+          cullMode: 'back',
+          blend: true,
+          blendColorOperation: 'add',
+          blendColorSrcFactor: 'src-alpha',
+          blendColorDstFactor: 'one-minus-src-alpha',
+          blendAlphaOperation: 'add',
+          blendAlphaSrcFactor: 'one',
+          blendAlphaDstFactor: 'one-minus-src-alpha',
+          depthWriteEnabled: false,
+          depthCompare: 'always',
+        },
+      })
+    }
+
+    if (!this.hoveredLineIndexCommand) {
+      // Initialize quad buffer for full-screen rendering
+      if (!this.quadBuffer) {
+        this.quadBuffer = device.createBuffer({
+          data: new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          usage: Buffer.VERTEX | Buffer.COPY_DST,
+        })
+      }
+
+      if (!this.hoveredLineIndexUniformStore) {
+        this.hoveredLineIndexUniformStore = new UniformStore({
+          hoveredLineIndexUniforms: {
+            uniformTypes: {
+              mousePosition: 'vec2<f32>',
+              screenSize: 'vec2<f32>',
+            },
+            defaultUniforms: {
+              mousePosition: store.screenMousePosition ?? [0, 0],
+              screenSize: store.screenSize ?? [0, 0],
+            },
+          },
+        })
+      }
+
+      this.hoveredLineIndexCommand = new Model(device, {
+        vs: hoveredLineIndexVert,
+        fs: hoveredLineIndexFrag,
+        topology: 'triangle-strip',
+        vertexCount: 4,
+        attributes: {
+          vertexCoord: this.quadBuffer,
+        },
+        bufferLayout: [
+          { name: 'vertexCoord', format: 'float32x2' },
+        ],
+        defines: {
+          USE_UNIFORM_BUFFERS: true,
+        },
+        bindings: {
+          hoveredLineIndexUniforms: this.hoveredLineIndexUniformStore.getManagedUniformBuffer(device, 'hoveredLineIndexUniforms'),
+          ...(this.linkIndexTexture && { linkIndexTexture: this.linkIndexTexture }),
+        },
+      })
+    }
+  }
+
+  public draw (renderPass: RenderPass): void {
+    if (!this.pointABuffer || !this.pointBBuffer) return
+    if (!this.colorBuffer) this.updateColor()
+    if (!this.widthBuffer) this.updateWidth()
+    if (!this.arrowBuffer) this.updateArrow()
+    if (!this.curveLineGeometry) this.updateCurveLineGeometry()
+    if (!this.drawCurveCommand || !this.drawLineUniformStore) return
+
+    // Update uniforms
+    const { config, store } = this
+    this.drawLineUniformStore.setUniforms({
+      drawLineUniforms: {
+        transformationMatrix: store.transformationMatrix4x4,
+        pointsTextureSize: store.pointsTextureSize,
+        widthScale: config.linkWidthScale ?? 1,
+        linkArrowsSizeScale: config.linkArrowsSizeScale ?? 1,
+        spaceSize: store.adjustedSpaceSize ?? 0,
+        screenSize: store.screenSize ?? [0, 0],
+        linkVisibilityDistanceRange: config.linkVisibilityDistanceRange ?? [0, 0],
+        linkVisibilityMinTransparency: config.linkVisibilityMinTransparency ?? 0,
+        linkOpacity: config.linkOpacity ?? 1,
+        greyoutOpacity: config.linkGreyoutOpacity ?? 1,
+        curvedWeight: config.curvedLinkWeight ?? 0,
+        curvedLinkControlPointDistance: config.curvedLinkControlPointDistance ?? 0,
+        curvedLinkSegments: config.curvedLinks ? config.curvedLinkSegments ?? defaultConfigValues.curvedLinkSegments : 1,
+        scaleLinksOnZoom: (config.scaleLinksOnZoom ?? true) ? 1 : 0,
+        maxPointSize: store.maxPointSize ?? 100,
+        renderMode: 0.0, // Normal rendering
+        hoveredLinkIndex: store.hoveredLinkIndex ?? -1,
+        hoveredLinkColor: store.hoveredLinkColor ?? [-1, -1, -1, -1],
+        hoveredLinkWidthIncrease: config.hoveredLinkWidthIncrease ?? 0,
+      },
+      drawLineFragmentUniforms: {
+        renderMode: 0.0, // Normal rendering
+      },
+    })
+
+    // Update bindings dynamically (use textures directly from points module)
+    this.drawCurveCommand.setBindings({
+      drawLineUniforms: this.drawLineUniformStore.getManagedUniformBuffer(this.device, 'drawLineUniforms'),
+      drawLineFragmentUniforms: this.drawLineUniformStore.getManagedUniformBuffer(this.device, 'drawLineFragmentUniforms'),
+      ...(this.points?.currentPositionTexture && { positionsTexture: this.points.currentPositionTexture }),
+      ...(this.points?.greyoutStatusFbo?.colorAttachments[0] && { pointGreyoutStatus: this.points.greyoutStatusFbo.colorAttachments[0] }),
+    })
+
+    // Update instance count
+    this.drawCurveCommand.setInstanceCount(this.data.linksNumber ?? 0)
+
+    // Render normal links
+    this.drawCurveCommand.draw(renderPass)
+  }
+
+  public updateLinkIndexFbo (): void {
+    const { device, store } = this
+
+    // Only create and update the link index FBO if link hovering is enabled
+    if (!this.store.isLinkHoveringEnabled) return
+
+    const screenSize = store.screenSize ?? [0, 0]
+    const screenWidth = screenSize[0]
+    const screenHeight = screenSize[1]
+
+    // Avoid invalid uploads when size is zero
+    if (!screenWidth || !screenHeight) return
+
+    // Check if screen size changed
+    const screenSizeChanged =
+      this.previousScreenSize?.[0] !== screenWidth ||
+      this.previousScreenSize?.[1] !== screenHeight
+
+    if (!this.linkIndexTexture || screenSizeChanged) {
+      // Destroy old framebuffer and texture if they exist
+      if (this.linkIndexFbo && !this.linkIndexFbo.destroyed) {
+        this.linkIndexFbo.destroy()
+      }
+      if (this.linkIndexTexture && !this.linkIndexTexture.destroyed) {
+        this.linkIndexTexture.destroy()
+      }
+
+      // Create new texture
+      this.linkIndexTexture = device.createTexture({
+        width: screenWidth,
+        height: screenHeight,
+        format: 'rgba32float',
+        usage: Texture.SAMPLE | Texture.RENDER | Texture.COPY_DST,
+      })
+      this.linkIndexTexture.copyImageData({
+        data: new Float32Array(screenWidth * screenHeight * 4).fill(0),
+        bytesPerRow: screenWidth,
+        mipLevel: 0,
+        x: 0,
+        y: 0,
+      })
+
+      // Create new framebuffer
+      this.linkIndexFbo = device.createFramebuffer({
+        width: screenWidth,
+        height: screenHeight,
+        colorAttachments: [this.linkIndexTexture],
+      })
+
+      this.previousScreenSize = [screenWidth, screenHeight]
+    }
+  }
+
+  public updatePointsBuffer (): void {
+    const { device, data, store } = this
+    if (data.linksNumber === undefined || data.links === undefined) return
+
+    // Create separate buffers for pointA and pointB
+    const pointAData = new Float32Array(data.linksNumber * 2)
+    const pointBData = new Float32Array(data.linksNumber * 2)
+
+    for (let i = 0; i < data.linksNumber; i++) {
+      const fromIndex = data.links[i * 2] as number
+      const toIndex = data.links[i * 2 + 1] as number
+      const fromX = fromIndex % store.pointsTextureSize
+      const fromY = Math.floor(fromIndex / store.pointsTextureSize)
+      const toX = toIndex % store.pointsTextureSize
+      const toY = Math.floor(toIndex / store.pointsTextureSize)
+
+      pointAData[i * 2] = fromX
+      pointAData[i * 2 + 1] = fromY
+      pointBData[i * 2] = toX
+      pointBData[i * 2 + 1] = toY
+    }
+
+    // Check if buffer needs to be resized (buffers can't be resized, need to recreate)
+    const currentSize = (this.pointABuffer?.byteLength ?? 0) / (Float32Array.BYTES_PER_ELEMENT * 2)
+    if (!this.pointABuffer || currentSize !== data.linksNumber) {
+      if (this.pointABuffer && !this.pointABuffer.destroyed) {
+        this.pointABuffer.destroy()
+      }
+      this.pointABuffer = device.createBuffer({
+        data: pointAData,
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+      // Note: Model attributes are set at creation time, so if Model exists and buffer is recreated,
+      // the Model will need to be recreated too. For now, we ensure buffers exist before initPrograms.
+    } else {
+      this.pointABuffer.write(pointAData)
+    }
+
+    if (!this.pointBBuffer || currentSize !== data.linksNumber) {
+      if (this.pointBBuffer && !this.pointBBuffer.destroyed) {
+        this.pointBBuffer.destroy()
+      }
+      this.pointBBuffer = device.createBuffer({
+        data: pointBData,
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    } else {
+      this.pointBBuffer.write(pointBData)
+    }
+
+    const linkIndices = new Float32Array(data.linksNumber)
+    for (let i = 0; i < data.linksNumber; i++) {
+      linkIndices[i] = i
+    }
+    if (!this.linkIndexBuffer || currentSize !== data.linksNumber) {
+      if (this.linkIndexBuffer && !this.linkIndexBuffer.destroyed) {
+        this.linkIndexBuffer.destroy()
+      }
+      this.linkIndexBuffer = device.createBuffer({
+        data: linkIndices,
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    } else {
+      this.linkIndexBuffer.write(linkIndices)
+    }
+  }
+
+  public updateColor (): void {
+    const { device, data } = this
+    const linksNumber = data.linksNumber ?? 0
+    const colorData = data.linkColors ?? new Float32Array(linksNumber * 4).fill(0)
+
+    if (!this.colorBuffer) {
+      this.colorBuffer = device.createBuffer({
+        data: colorData,
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    } else {
+      // Check if buffer needs to be resized
+      const currentSize = (this.colorBuffer.byteLength ?? 0) / (Float32Array.BYTES_PER_ELEMENT * 4)
+      if (currentSize !== linksNumber) {
+        if (this.colorBuffer && !this.colorBuffer.destroyed) {
+          this.colorBuffer.destroy()
+        }
+        this.colorBuffer = device.createBuffer({
+          data: colorData,
+          usage: Buffer.VERTEX | Buffer.COPY_DST,
+        })
+      } else {
+        this.colorBuffer.write(colorData)
+      }
+    }
+  }
+
+  public updateWidth (): void {
+    const { device, data } = this
+    const linksNumber = data.linksNumber ?? 0
+    const widthData = data.linkWidths ?? new Float32Array(linksNumber).fill(0)
+
+    if (!this.widthBuffer) {
+      this.widthBuffer = device.createBuffer({
+        data: widthData,
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    } else {
+      // Check if buffer needs to be resized
+      const currentSize = (this.widthBuffer.byteLength ?? 0) / Float32Array.BYTES_PER_ELEMENT
+      if (currentSize !== linksNumber) {
+        if (this.widthBuffer && !this.widthBuffer.destroyed) {
+          this.widthBuffer.destroy()
+        }
+        this.widthBuffer = device.createBuffer({
+          data: widthData,
+          usage: Buffer.VERTEX | Buffer.COPY_DST,
+        })
+      } else {
+        this.widthBuffer.write(widthData)
+      }
+    }
+  }
+
+  public updateArrow (): void {
+    const { device, data } = this
+    // linkArrows is number[] not Float32Array, so we need to convert it
+    // Ensure we have the right size even if linkArrows is undefined
+    const linksNumber = data.linksNumber ?? 0
+    const arrowData = data.linkArrows
+      ? new Float32Array(data.linkArrows)
+      : new Float32Array(linksNumber).fill(0)
+
+    if (!this.arrowBuffer) {
+      this.arrowBuffer = device.createBuffer({
+        data: arrowData,
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    } else {
+      // Check if buffer needs to be resized
+      const currentSize = (this.arrowBuffer.byteLength ?? 0) / Float32Array.BYTES_PER_ELEMENT
+      if (currentSize !== linksNumber) {
+        if (this.arrowBuffer && !this.arrowBuffer.destroyed) {
+          this.arrowBuffer.destroy()
+        }
+        this.arrowBuffer = device.createBuffer({
+          data: arrowData,
+          usage: Buffer.VERTEX | Buffer.COPY_DST,
+        })
+      } else {
+        this.arrowBuffer.write(arrowData)
+      }
+    }
+  }
+
+  public updateCurveLineGeometry (): void {
+    const { device, config: { curvedLinks, curvedLinkSegments } } = this
+    this.curveLineGeometry = getCurveLineGeometry(curvedLinks ? curvedLinkSegments ?? defaultConfigValues.curvedLinkSegments : 1)
+
+    // Flatten the 2D array to 1D
+    const flatGeometry = new Float32Array(this.curveLineGeometry.length * 2)
+    for (let i = 0; i < this.curveLineGeometry.length; i++) {
+      flatGeometry[i * 2] = this.curveLineGeometry[i]![0]!
+      flatGeometry[i * 2 + 1] = this.curveLineGeometry[i]![1]!
+    }
+
+    if (!this.curveLineBuffer) {
+      this.curveLineBuffer = device.createBuffer({
+        data: flatGeometry,
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    } else {
+      this.curveLineBuffer.write(flatGeometry)
+    }
+
+    // Update vertex count in model if it exists
+    if (this.drawCurveCommand) {
+      this.drawCurveCommand.setVertexCount(this.curveLineGeometry.length)
+    }
+  }
+
+  public findHoveredLine (): void {
+    if (!this.data.linksNumber || !this.store.isLinkHoveringEnabled) return
+    if (!this.linkIndexFbo || !this.drawCurveCommand || !this.drawLineUniformStore) return
+
+    // Update uniforms for index rendering
+    const { config, store } = this
+    this.drawLineUniformStore.setUniforms({
+      drawLineUniforms: {
+        transformationMatrix: store.transformationMatrix4x4,
+        pointsTextureSize: store.pointsTextureSize,
+        widthScale: config.linkWidthScale ?? 1,
+        linkArrowsSizeScale: config.linkArrowsSizeScale ?? 1,
+        spaceSize: store.adjustedSpaceSize ?? 0,
+        screenSize: store.screenSize ?? [0, 0],
+        linkVisibilityDistanceRange: config.linkVisibilityDistanceRange ?? [0, 0],
+        linkVisibilityMinTransparency: config.linkVisibilityMinTransparency ?? 0,
+        linkOpacity: config.linkOpacity ?? 1,
+        greyoutOpacity: config.linkGreyoutOpacity ?? 1,
+        curvedWeight: config.curvedLinkWeight ?? 0,
+        curvedLinkControlPointDistance: config.curvedLinkControlPointDistance ?? 0,
+        curvedLinkSegments: config.curvedLinks ? config.curvedLinkSegments ?? defaultConfigValues.curvedLinkSegments : 1,
+        scaleLinksOnZoom: (config.scaleLinksOnZoom ?? true) ? 1 : 0,
+        maxPointSize: store.maxPointSize ?? 100,
+        renderMode: 1.0, // Index rendering for picking
+        hoveredLinkIndex: store.hoveredLinkIndex ?? -1,
+        hoveredLinkColor: store.hoveredLinkColor ?? [-1, -1, -1, -1],
+        hoveredLinkWidthIncrease: config.hoveredLinkWidthIncrease ?? 0,
+      },
+      drawLineFragmentUniforms: {
+        renderMode: 1.0, // Index rendering for picking
+      },
+    })
+
+    this.drawCurveCommand.setBindings({
+      drawLineUniforms: this.drawLineUniformStore.getManagedUniformBuffer(this.device, 'drawLineUniforms'),
+      drawLineFragmentUniforms: this.drawLineUniformStore.getManagedUniformBuffer(this.device, 'drawLineFragmentUniforms'),
+      ...(this.points?.currentPositionTexture && { positionsTexture: this.points.currentPositionTexture }),
+      ...(this.points?.greyoutStatusFbo?.colorAttachments[0] && { pointGreyoutStatus: this.points.greyoutStatusFbo.colorAttachments[0] }),
+    })
+
+    // Update instance count
+    this.drawCurveCommand.setInstanceCount(this.data.linksNumber ?? 0)
+
+    // Clear and render to index buffer
+    const clearPass = this.device.beginRenderPass({
+      framebuffer: this.linkIndexFbo,
+      clearColor: [0, 0, 0, 0],
+    })
+    clearPass.end()
+
+    // Render to index buffer for picking/hover detection
+    const indexPass = this.device.beginRenderPass({
+      framebuffer: this.linkIndexFbo,
+      // Note: We explicitly set clearColor to [0, 0, 0, 0] to prevent re-clearing the framebuffer.
+      // Without this, luma.gl would use its default clearColor of [0, 0, 0, 1] (opaque black)
+      clearColor: [0, 0, 0, 0], // or `clearColor: false`
+    })
+    this.drawCurveCommand.draw(indexPass)
+    indexPass.end()
+
+    if (this.hoveredLineIndexCommand && this.hoveredLineIndexFbo && this.hoveredLineIndexUniformStore) {
+      this.hoveredLineIndexUniformStore.setUniforms({
+        hoveredLineIndexUniforms: {
+          mousePosition: store.screenMousePosition ?? [0, 0],
+          screenSize: store.screenSize ?? [0, 0],
+        },
+      })
+
+      this.hoveredLineIndexCommand.setBindings({
+        hoveredLineIndexUniforms: this.hoveredLineIndexUniformStore.getManagedUniformBuffer(this.device, 'hoveredLineIndexUniforms'),
+        ...(this.linkIndexTexture && { linkIndexTexture: this.linkIndexTexture }),
+      })
+
+      const hoverPass = this.device.beginRenderPass({
+        framebuffer: this.hoveredLineIndexFbo,
+      })
+      this.hoveredLineIndexCommand.draw(hoverPass)
+      hoverPass.end()
+    }
+  }
+}