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

package/src/modules/Drag/index.ts

@@ -0,0 +1,33 @@
+import { drag } from 'd3-drag'
+import { Store } from '@/graph/modules/Store'
+import { GraphConfigInterface } from '@/graph/config'
+
+export class Drag {
+  public readonly store: Store
+  public readonly config: GraphConfigInterface
+  public isActive = false
+  public behavior = drag<HTMLCanvasElement, undefined>()
+    .subject((event) => {
+      return this.store.hoveredPoint && !this.store.isSpaceKeyPressed ? { x: event.x, y: event.y } : undefined
+    })
+    .on('start', (e) => {
+      if (this.store.hoveredPoint) {
+        this.store.draggingPointIndex = this.store.hoveredPoint.index
+        this.isActive = true
+        this.config?.onDragStart?.(e)
+      }
+    })
+    .on('drag', (e) => {
+      this.config?.onDrag?.(e)
+    })
+    .on('end', (e) => {
+      this.isActive = false
+      this.store.draggingPointIndex = undefined
+      this.config?.onDragEnd?.(e)
+    })
+
+  public constructor (store: Store, config: GraphConfigInterface) {
+    this.store = store
+    this.config = config
+  }
+}

package/src/modules/FPSMonitor/css.ts

@@ -0,0 +1,53 @@
+export const benchCSS = `
+  #gl-bench {
+    position:absolute;
+    right:0;
+    top:0;
+    z-index:1000;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+  #gl-bench div {
+    position: relative;
+    display: block;
+    margin: 4px;
+    padding: 0 7px 0 10px;
+    background: #5f69de;
+    border-radius: 15px;
+    cursor: pointer;
+    opacity: 0.9;
+  }
+  #gl-bench svg {
+    height: 60px;
+    margin: 0 -1px;
+  }
+  #gl-bench text {
+    font-size: 12px;
+    font-family: Helvetica,Arial,sans-serif;
+    font-weight: 700;
+    dominant-baseline: middle;
+    text-anchor: middle;
+  }
+  #gl-bench .gl-mem {
+    font-size: 9px;
+  }
+  #gl-bench line {
+    stroke-width: 5;
+    stroke: #112211;
+    stroke-linecap: round;
+  }
+  #gl-bench polyline {
+    fill: none;
+    stroke: #112211;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 3.5;
+  }
+  #gl-bench rect {
+    fill: #8288e4;
+  }
+  #gl-bench .opacity {
+    stroke: #8288e4;
+  }
+`

package/src/modules/FPSMonitor/index.ts

@@ -0,0 +1,28 @@
+
+import { select } from 'd3-selection'
+import GLBench from 'gl-bench/dist/gl-bench'
+import { benchCSS } from './css'
+
+export class FPSMonitor {
+  private bench: GLBench | undefined
+
+  public constructor (canvas: HTMLCanvasElement) {
+    this.destroy()
+    const gl = (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')) as WebGL2RenderingContext
+    this.bench = new GLBench(gl, { css: benchCSS })
+  }
+
+  public begin (): void {
+    this.bench?.begin('frame')
+  }
+
+  public end (now: number): void {
+    this.bench?.end('frame')
+    this.bench?.nextFrame(now)
+  }
+
+  public destroy (): void {
+    this.bench = undefined
+    select('#gl-bench').remove()
+  }
+}

package/src/modules/ForceCenter/calculate-centermass.frag

@@ -0,0 +1,9 @@
+#version 300 es
+precision highp float;
+
+in vec4 rgba;
+out vec4 fragColor;
+
+void main() {
+  fragColor = rgba;
+}

package/src/modules/ForceCenter/calculate-centermass.vert

@@ -0,0 +1,26 @@
+#version 300 es
+precision highp float;
+
+uniform sampler2D positionsTexture;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform calculateCentermassUniforms {
+  float pointsTextureSize;
+} calculateCentermass;
+
+#define pointsTextureSize calculateCentermass.pointsTextureSize
+#else
+uniform float pointsTextureSize;
+#endif
+
+in vec2 pointIndices;
+
+out vec4 rgba;
+
+void main() {
+  vec4 pointPosition = texture(positionsTexture, pointIndices / pointsTextureSize);
+  rgba = vec4(pointPosition.xy, 1.0, 0.0);
+
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  gl_PointSize = 1.0;
+}

package/src/modules/ForceCenter/force-center.frag

@@ -0,0 +1,37 @@
+#version 300 es
+precision highp float;
+
+uniform sampler2D positionsTexture;
+uniform sampler2D centermassTexture;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform forceCenterUniforms {
+  float centerForce;
+  float alpha;
+} forceCenter;
+
+#define centerForce forceCenter.centerForce
+#define alpha forceCenter.alpha
+#else
+uniform float centerForce;
+uniform float alpha;
+#endif
+
+in vec2 textureCoords;
+out vec4 fragColor;
+
+void main() {
+  vec4 pointPosition = texture(positionsTexture, textureCoords);
+  vec4 velocity = vec4(0.0);
+  vec4 centermassValues = texture(centermassTexture, vec2(0.0));
+  vec2 centermassPosition = centermassValues.xy / centermassValues.b;
+  vec2 distVector = centermassPosition - pointPosition.xy;
+  float dist = sqrt(dot(distVector, distVector));
+  if (dist > 0.0) {
+    float angle = atan(distVector.y, distVector.x);
+    float addV = alpha * centerForce * dist * 0.01;
+    velocity.rg += addV * vec2(cos(angle), sin(angle));
+  }
+
+  fragColor = velocity;
+}

package/src/modules/ForceCenter/index.ts

@@ -0,0 +1,284 @@
+import { Buffer, Framebuffer, RenderPass, Texture, UniformStore } from '@luma.gl/core'
+import { Model } from '@luma.gl/engine'
+import { CoreModule } from '@/graph/modules/core-module'
+import calculateCentermassFrag from '@/graph/modules/ForceCenter/calculate-centermass.frag?raw'
+import calculateCentermassVert from '@/graph/modules/ForceCenter/calculate-centermass.vert?raw'
+import forceFrag from '@/graph/modules/ForceCenter/force-center.frag?raw'
+import { createIndexesForBuffer } from '@/graph/modules/Shared/buffer'
+import clearFrag from '@/graph/modules/Shared/clear.frag?raw'
+import updateVert from '@/graph/modules/Shared/quad.vert?raw'
+
+export class ForceCenter extends CoreModule {
+  private centermassTexture: Texture | undefined
+  private centermassFbo: Framebuffer | undefined
+  private pointIndices: Buffer | undefined
+
+  private clearCentermassCommand: Model | undefined
+  private calculateCentermassCommand: Model | undefined
+  private runCommand: Model | undefined
+
+  private clearVertexCoordBuffer: Buffer | undefined
+  private forceVertexCoordBuffer: Buffer | undefined
+
+  private calculateUniformStore: UniformStore<{
+    calculateCentermassUniforms: {
+      pointsTextureSize: number;
+    };
+  }> | undefined
+
+  private forceUniformStore: UniformStore<{
+    forceCenterUniforms: {
+      centerForce: number;
+      alpha: number;
+    };
+  }> | undefined
+
+  private previousPointsTextureSize: number | undefined
+
+  public create (): void {
+    const { device, store } = this
+    const { pointsTextureSize } = store
+    if (!pointsTextureSize) return
+
+    if (!this.centermassTexture || this.centermassTexture.destroyed) {
+      this.centermassTexture = device.createTexture({
+        width: 1,
+        height: 1,
+        format: 'rgba32float',
+        usage: Texture.SAMPLE | Texture.RENDER | Texture.COPY_DST,
+      })
+    }
+    this.centermassTexture.copyImageData({
+      data: new Float32Array(4).fill(0),
+      bytesPerRow: 1,
+      mipLevel: 0,
+      x: 0,
+      y: 0,
+    })
+
+    if (!this.centermassFbo || this.centermassFbo.destroyed) {
+      this.centermassFbo = device.createFramebuffer({
+        width: 1,
+        height: 1,
+        colorAttachments: [this.centermassTexture],
+      })
+    }
+
+    const indexData = createIndexesForBuffer(pointsTextureSize)
+    if (!this.pointIndices || this.pointIndices.byteLength !== indexData.byteLength) {
+      this.pointIndices?.destroy()
+      this.pointIndices = device.createBuffer({
+        data: indexData,
+        usage: Buffer.VERTEX | Buffer.COPY_DST,
+      })
+    } else {
+      this.pointIndices.write(indexData)
+    }
+
+    this.previousPointsTextureSize = pointsTextureSize
+  }
+
+  public initPrograms (): void {
+    const { device, store, points } = this
+    if (!points || !store.pointsTextureSize) return
+    if (!this.centermassFbo || this.centermassFbo.destroyed || !this.centermassTexture || this.centermassTexture.destroyed) return
+    if (!this.pointIndices) return
+
+    // Fullscreen quad buffer (shared by clear and force passes)
+    if (!this.clearVertexCoordBuffer || this.clearVertexCoordBuffer.destroyed) {
+      this.clearVertexCoordBuffer = device.createBuffer({
+        data: new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      })
+    }
+    if (!this.forceVertexCoordBuffer || this.forceVertexCoordBuffer.destroyed) {
+      this.forceVertexCoordBuffer = device.createBuffer({
+        data: new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      })
+    }
+
+    if (!this.calculateUniformStore) {
+      this.calculateUniformStore = new UniformStore({
+        calculateCentermassUniforms: {
+          uniformTypes: {
+            pointsTextureSize: 'f32',
+          },
+        },
+      })
+    }
+
+    if (!this.forceUniformStore) {
+      this.forceUniformStore = new UniformStore({
+        forceCenterUniforms: {
+          uniformTypes: {
+            centerForce: 'f32',
+            alpha: 'f32',
+          },
+        },
+      })
+    }
+
+    if (!this.clearCentermassCommand) {
+      this.clearCentermassCommand = new Model(device, {
+        fs: clearFrag,
+        vs: updateVert,
+        topology: 'triangle-strip',
+        vertexCount: 4,
+        attributes: {
+          vertexCoord: this.clearVertexCoordBuffer,
+        },
+        bufferLayout: [
+          { name: 'vertexCoord', format: 'float32x2' },
+        ],
+        parameters: {
+          depthWriteEnabled: false,
+          depthCompare: 'always',
+        },
+      })
+    }
+
+    if (!this.calculateCentermassCommand) {
+      this.calculateCentermassCommand = new Model(device, {
+        fs: calculateCentermassFrag,
+        vs: calculateCentermassVert,
+        topology: 'point-list',
+        vertexCount: this.data.pointsNumber ?? 0,
+        attributes: {
+          pointIndices: this.pointIndices,
+        },
+        bufferLayout: [
+          { name: 'pointIndices', format: 'float32x2' },
+        ],
+        defines: {
+          USE_UNIFORM_BUFFERS: true,
+        },
+        bindings: {
+          calculateCentermassUniforms: this.calculateUniformStore.getManagedUniformBuffer(device, 'calculateCentermassUniforms'),
+          positionsTexture: points.previousPositionTexture!,
+        },
+        parameters: {
+          blend: true,
+          blendColorOperation: 'add',
+          blendColorSrcFactor: 'one',
+          blendColorDstFactor: 'one',
+          blendAlphaOperation: 'add',
+          blendAlphaSrcFactor: 'one',
+          blendAlphaDstFactor: 'one',
+          depthWriteEnabled: false,
+          depthCompare: 'always',
+        },
+      })
+    } else {
+      this.calculateCentermassCommand.setVertexCount(this.data.pointsNumber ?? 0)
+    }
+
+    if (!this.runCommand) {
+      this.runCommand = new Model(device, {
+        fs: forceFrag,
+        vs: updateVert,
+        topology: 'triangle-strip',
+        vertexCount: 4,
+        attributes: {
+          vertexCoord: this.forceVertexCoordBuffer,
+        },
+        bufferLayout: [
+          { name: 'vertexCoord', format: 'float32x2' },
+        ],
+        defines: {
+          USE_UNIFORM_BUFFERS: true,
+        },
+        bindings: {
+          forceCenterUniforms: this.forceUniformStore.getManagedUniformBuffer(device, 'forceCenterUniforms'),
+          positionsTexture: points.previousPositionTexture!,
+          centermassTexture: this.centermassTexture,
+        },
+        parameters: {
+          depthWriteEnabled: false,
+          depthCompare: 'always',
+        },
+      })
+    }
+  }
+
+  public run (renderPass?: RenderPass): void {
+    const { device, store, points } = this
+    if (!points || !this.centermassFbo || !this.centermassTexture) return
+    if (!this.calculateCentermassCommand || !this.calculateUniformStore || !this.runCommand || !this.forceUniformStore) return
+    if (!points.previousPositionTexture || points.previousPositionTexture.destroyed) return
+    if (!renderPass && (!points.velocityFbo || points.velocityFbo.destroyed)) return
+
+    // Skip if sizes changed and create() wasn't called yet
+    if (store.pointsTextureSize !== this.previousPointsTextureSize) return
+
+    // Clear centermass then accumulate
+    const centermassPass = device.beginRenderPass({
+      framebuffer: this.centermassFbo,
+      clearColor: [0, 0, 0, 0],
+    })
+
+    this.calculateUniformStore.setUniforms({
+      calculateCentermassUniforms: {
+        pointsTextureSize: store.pointsTextureSize ?? 0,
+      },
+    })
+    this.calculateCentermassCommand.setBindings({
+      calculateCentermassUniforms: this.calculateUniformStore.getManagedUniformBuffer(device, 'calculateCentermassUniforms'),
+      positionsTexture: points.previousPositionTexture!,
+    })
+
+    // No need to draw clear model separately; pass clearColor already zeroed
+    this.calculateCentermassCommand.draw(centermassPass)
+    centermassPass.end()
+
+    // Apply center force into velocity
+    this.forceUniformStore.setUniforms({
+      forceCenterUniforms: {
+        centerForce: this.config.simulationCenter ?? 0,
+        alpha: store.alpha,
+      },
+    })
+    this.runCommand.setBindings({
+      forceCenterUniforms: this.forceUniformStore.getManagedUniformBuffer(device, 'forceCenterUniforms'),
+      positionsTexture: points.previousPositionTexture!,
+      centermassTexture: this.centermassTexture,
+    })
+
+    const pass = renderPass ?? device.beginRenderPass({
+      framebuffer: points.velocityFbo,
+    })
+
+    this.runCommand.draw(pass)
+
+    if (!renderPass) pass.end()
+  }
+
+  public destroy (): void {
+    this.calculateUniformStore?.destroy()
+    this.calculateUniformStore = undefined
+    this.forceUniformStore?.destroy()
+    this.forceUniformStore = undefined
+
+    this.clearCentermassCommand?.destroy()
+    this.clearCentermassCommand = undefined
+    this.calculateCentermassCommand?.destroy()
+    this.calculateCentermassCommand = undefined
+    this.runCommand?.destroy()
+    this.runCommand = undefined
+
+    if (this.clearVertexCoordBuffer && !this.clearVertexCoordBuffer.destroyed) this.clearVertexCoordBuffer.destroy()
+    this.clearVertexCoordBuffer = undefined
+
+    if (this.forceVertexCoordBuffer && !this.forceVertexCoordBuffer.destroyed) this.forceVertexCoordBuffer.destroy()
+    this.forceVertexCoordBuffer = undefined
+
+    this.pointIndices?.destroy()
+    this.pointIndices = undefined
+
+    if (this.centermassTexture && !this.centermassTexture.destroyed) this.centermassTexture.destroy()
+    this.centermassTexture = undefined
+
+    if (this.centermassFbo && !this.centermassFbo.destroyed) this.centermassFbo.destroy()
+    this.centermassFbo = undefined
+
+    this.previousPointsTextureSize = undefined
+  }
+}

package/src/modules/ForceGravity/force-gravity.frag

@@ -0,0 +1,40 @@
+#version 300 es
+precision highp float;
+
+uniform sampler2D positionsTexture;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform forceGravityUniforms {
+  float gravity;
+  float spaceSize;
+  float alpha;
+} forceGravity;
+
+#define gravity forceGravity.gravity
+#define spaceSize forceGravity.spaceSize
+#define alpha forceGravity.alpha
+#else
+uniform float gravity;
+uniform float spaceSize;
+uniform float alpha;
+#endif
+
+in vec2 textureCoords;
+out vec4 fragColor;
+
+void main() {
+  vec4 pointPosition = texture(positionsTexture, textureCoords);
+
+  vec4 velocity = vec4(0.0);
+
+  vec2 centerPosition = vec2(spaceSize * 0.5);
+  vec2 distVector = centerPosition - pointPosition.rg;
+  float dist = sqrt(dot(distVector, distVector));
+  if (dist > 0.0) {
+    float angle = atan(distVector.y, distVector.x);
+    float additionalVelocity = alpha * gravity * dist * 0.1;
+    velocity.rg += additionalVelocity * vec2(cos(angle), sin(angle));
+  }
+
+  fragColor = velocity;
+}

package/src/modules/ForceGravity/index.ts

@@ -0,0 +1,107 @@
+import { Buffer, RenderPass, UniformStore } from '@luma.gl/core'
+import { Model } from '@luma.gl/engine'
+import { CoreModule } from '@/graph/modules/core-module'
+import forceFrag from '@/graph/modules/ForceGravity/force-gravity.frag?raw'
+import updateVert from '@/graph/modules/Shared/quad.vert?raw'
+
+export class ForceGravity extends CoreModule {
+  private runCommand: Model | undefined
+  private vertexCoordBuffer: Buffer | undefined
+  private uniformStore: UniformStore<{
+    forceGravityUniforms: {
+      gravity: number;
+      spaceSize: number;
+      alpha: number;
+    };
+  }> | undefined
+
+  public initPrograms (): void {
+    const { device, points, store } = this
+    if (!points || !store.pointsTextureSize) return
+
+    if (!this.vertexCoordBuffer || this.vertexCoordBuffer.destroyed) {
+      this.vertexCoordBuffer = device.createBuffer({
+        data: new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      })
+    }
+
+    if (!this.uniformStore) {
+      this.uniformStore = new UniformStore({
+        forceGravityUniforms: {
+          uniformTypes: {
+            gravity: 'f32',
+            spaceSize: 'f32',
+            alpha: 'f32',
+          },
+        },
+      })
+    }
+
+    if (!this.runCommand) {
+      this.runCommand = new Model(device, {
+        fs: forceFrag,
+        vs: updateVert,
+        topology: 'triangle-strip',
+        vertexCount: 4,
+        attributes: {
+          vertexCoord: this.vertexCoordBuffer,
+        },
+        bufferLayout: [
+          { name: 'vertexCoord', format: 'float32x2' },
+        ],
+        defines: {
+          USE_UNIFORM_BUFFERS: true,
+        },
+        bindings: {
+          forceGravityUniforms: this.uniformStore.getManagedUniformBuffer(device, 'forceGravityUniforms'),
+          positionsTexture: points.previousPositionTexture!,
+        },
+        parameters: {
+          depthWriteEnabled: false,
+          depthCompare: 'always',
+        },
+      })
+    }
+  }
+
+  public run (renderPass?: RenderPass): void {
+    const { device, points, store } = this
+    if (!points || !this.runCommand || !this.uniformStore) return
+    if (!points.previousPositionTexture || points.previousPositionTexture.destroyed) return
+    if (!renderPass && (!points.velocityFbo || points.velocityFbo.destroyed)) return
+
+    this.uniformStore.setUniforms({
+      forceGravityUniforms: {
+        gravity: this.config.simulationGravity ?? 0,
+        spaceSize: store.adjustedSpaceSize ?? 0,
+        alpha: store.alpha,
+      },
+    })
+
+    this.runCommand.setBindings({
+      forceGravityUniforms: this.uniformStore.getManagedUniformBuffer(device, 'forceGravityUniforms'),
+      positionsTexture: points.previousPositionTexture!,
+    })
+
+    const pass = renderPass ?? device.beginRenderPass({
+      framebuffer: points.velocityFbo,
+    })
+
+    this.runCommand.draw(pass)
+
+    if (!renderPass) pass.end()
+  }
+
+  public destroy (): void {
+    this.uniformStore?.destroy()
+    this.uniformStore = undefined
+
+    if (this.runCommand && !this.runCommand.destroyed) this.runCommand.destroy()
+    this.runCommand = undefined
+
+    if (this.vertexCoordBuffer && !this.vertexCoordBuffer.destroyed) {
+      this.vertexCoordBuffer.destroy()
+    }
+    this.vertexCoordBuffer = undefined
+  }
+}