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

package/src/modules/ForceManyBodyQuadtree/index.ts

@@ -0,0 +1,157 @@
+import regl from 'regl'
+import { CoreModule } from '@/graph/modules/core-module'
+import calculateLevelFrag from '@/graph/modules/ForceManyBody/calculate-level.frag?raw'
+import calculateLevelVert from '@/graph/modules/ForceManyBody/calculate-level.vert?raw'
+import { forceFrag } from '@/graph/modules/ForceManyBody/quadtree-frag-shader'
+import { createIndexesForBuffer, createQuadBuffer } 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 ForceManyBodyQuadtree extends CoreModule {
+  private randomValuesFbo: regl.Framebuffer2D | undefined
+  private levelsTextures = new Map<string, regl.Texture2D>()
+  private levelsFbos = new Map<string, regl.Framebuffer2D>()
+  private clearLevelsCommand: regl.DrawCommand | undefined
+  private calculateLevelsCommand: regl.DrawCommand | undefined
+  private quadtreeCommand: regl.DrawCommand | undefined
+  private quadtreeLevels = 0
+  private randomValuesTexture: regl.Texture2D | undefined
+  private pointIndices: regl.Buffer | undefined
+
+  public create (): void {
+    const { reglInstance, store } = this
+    if (!store.pointsTextureSize) return
+    this.quadtreeLevels = Math.log2(store.adjustedSpaceSize)
+    for (let i = 0; i < this.quadtreeLevels; i += 1) {
+      const levelTextureSize = Math.pow(2, i + 1)
+      const levelKey = `level[${i}]`
+      if (!this.levelsTextures.has(levelKey)) {
+        this.levelsTextures.set(levelKey, reglInstance.texture())
+      }
+      const texture = this.levelsTextures.get(levelKey)
+      if (texture) {
+        texture({
+          data: new Float32Array(levelTextureSize * levelTextureSize * 4),
+          shape: [levelTextureSize, levelTextureSize, 4],
+          type: 'float',
+        })
+      }
+      if (!this.levelsFbos.has(levelKey)) {
+        this.levelsFbos.set(levelKey, reglInstance.framebuffer())
+      }
+      const fbo = this.levelsFbos.get(levelKey)
+      if (fbo) {
+        fbo({
+          color: this.levelsTextures.get(levelKey),
+          depth: false,
+          stencil: false,
+        })
+      }
+    }
+
+    // Create random number to prevent point to stick together in one coordinate
+    const randomValuesState = new Float32Array(store.pointsTextureSize * store.pointsTextureSize * 4)
+    for (let i = 0; i < store.pointsTextureSize * store.pointsTextureSize; ++i) {
+      randomValuesState[i * 4] = store.getRandomFloat(-1, 1) * 0.00001
+      randomValuesState[i * 4 + 1] = store.getRandomFloat(-1, 1) * 0.00001
+    }
+
+    if (!this.randomValuesTexture) this.randomValuesTexture = reglInstance.texture()
+    this.randomValuesTexture({
+      data: randomValuesState,
+      shape: [store.pointsTextureSize, store.pointsTextureSize, 4],
+      type: 'float',
+    })
+    if (!this.randomValuesFbo) this.randomValuesFbo = reglInstance.framebuffer()
+    this.randomValuesFbo({
+      color: this.randomValuesTexture,
+      depth: false,
+      stencil: false,
+    })
+
+    if (!this.pointIndices) this.pointIndices = reglInstance.buffer(0)
+    this.pointIndices(createIndexesForBuffer(store.pointsTextureSize))
+  }
+
+  public initPrograms (): void {
+    const { reglInstance, config, store, data, points } = this
+    if (!this.clearLevelsCommand) {
+      this.clearLevelsCommand = reglInstance({
+        frag: clearFrag,
+        vert: updateVert,
+        framebuffer: (_: regl.DefaultContext, props: { levelFbo: regl.Framebuffer2D }) => props.levelFbo,
+        primitive: 'triangle strip',
+        count: 4,
+        attributes: { vertexCoord: createQuadBuffer(reglInstance) },
+      })
+    }
+
+    if (!this.calculateLevelsCommand) {
+      this.calculateLevelsCommand = reglInstance({
+        frag: calculateLevelFrag,
+        vert: calculateLevelVert,
+        framebuffer: (_: regl.DefaultContext, props: { levelFbo: regl.Framebuffer2D; levelTextureSize: number; cellSize: number }) => props.levelFbo,
+        primitive: 'points',
+        count: () => data.pointsNumber ?? 0,
+        attributes: {
+          pointIndices: {
+            buffer: this.pointIndices,
+            size: 2,
+          },
+        },
+        uniforms: {
+          positionsTexture: () => points?.previousPositionFbo,
+          pointsTextureSize: () => store.pointsTextureSize,
+          levelTextureSize: (_: regl.DefaultContext, props: { levelTextureSize: number }) => props.levelTextureSize,
+          cellSize: (_: regl.DefaultContext, props: { cellSize: number }) => props.cellSize,
+        },
+        blend: {
+          enable: true,
+          func: {
+            src: 'one',
+            dst: 'one',
+          },
+          equation: {
+            rgb: 'add',
+            alpha: 'add',
+          },
+        },
+        depth: { enable: false, mask: false },
+        stencil: { enable: false },
+      })
+    }
+
+    this.quadtreeCommand = reglInstance({
+      frag: forceFrag(config.simulationRepulsionQuadtreeLevels ?? this.quadtreeLevels, this.quadtreeLevels),
+      vert: updateVert,
+      framebuffer: () => points?.velocityFbo as regl.Framebuffer2D,
+      primitive: 'triangle strip',
+      count: 4,
+      attributes: { vertexCoord: createQuadBuffer(reglInstance) },
+      uniforms: {
+        positionsTexture: () => points?.previousPositionFbo,
+        randomValues: () => this.randomValuesFbo,
+        spaceSize: () => store.adjustedSpaceSize,
+        repulsion: () => config.simulationRepulsion,
+        theta: () => config.simulationRepulsionTheta,
+        alpha: () => store.alpha,
+        ...Object.fromEntries(this.levelsFbos),
+      },
+    })
+  }
+
+  public run (): void {
+    const { store } = this
+    for (let i = 0; i < this.quadtreeLevels; i += 1) {
+      this.clearLevelsCommand?.({ levelFbo: this.levelsFbos.get(`level[${i}]`) })
+      const levelTextureSize = Math.pow(2, i + 1)
+      const cellSize = store.adjustedSpaceSize / levelTextureSize
+      this.calculateLevelsCommand?.({
+        levelFbo: this.levelsFbos.get(`level[${i}]`),
+        levelTextureSize,
+        cellSize,
+      })
+    }
+    this.quadtreeCommand?.()
+  }
+}

package/src/modules/ForceManyBodyQuadtree/quadtree-frag-shader.ts

@@ -0,0 +1,93 @@
+/* The fragment shader calculates the velocity of a point based on its position,
+* the positions of other points in a spatial hierarchy, and random factors.
+**/
+export function forceFrag (startLevel: number, maxLevels: number): string {
+  startLevel = Math.min(startLevel, maxLevels)
+  const delta = maxLevels - startLevel
+  const calculateVelocityAdjustment = `
+    float dist = sqrt(l);
+    if (dist > 0.0) {
+      float c = alpha * repulsion * centermass.b;
+      addVelocity += calculateAdditionalVelocity(vec2(x, y), l, c);
+      addVelocity += addVelocity * random.rg;
+    }
+  `
+  function quad (level: number): string {
+    if (level >= maxLevels) {
+      return calculateVelocityAdjustment
+    } else {
+      const groupSize = Math.pow(2, level + 1)
+
+      const iEnding = new Array(level + 1 - delta).fill(0).map((_, l) => `pow(2.0, ${level - (l + delta)}.0) * i${l + delta}`).join('+')
+      const jEnding = new Array(level + 1 - delta).fill(0).map((_, l) => `pow(2.0, ${level - (l + delta)}.0) * j${l + delta}`).join('+')
+
+      return `
+      for (float ij${level} = 0.0; ij${level} < 4.0; ij${level} += 1.0) {
+        float i${level} = 0.0;
+        float j${level} = 0.0;
+        if (ij${level} == 1.0 || ij${level} == 3.0) i${level} = 1.0;
+        if (ij${level} == 2.0 || ij${level} == 3.0) j${level} = 1.0;
+        float i = pow(2.0, ${startLevel}.0) * n / width${level + 1} + ${iEnding};
+        float j = pow(2.0, ${startLevel}.0) * m / width${level + 1} + ${jEnding};
+        float groupPosX = (i + 0.5) / ${groupSize}.0;
+        float groupPosY = (j + 0.5) / ${groupSize}.0;
+        
+        vec4 centermass = texture2D(level[${level}], vec2(groupPosX, groupPosY));
+        if (centermass.r > 0.0 && centermass.g > 0.0 && centermass.b > 0.0) {
+          float x = centermass.r / centermass.b - pointPosition.r;
+          float y = centermass.g / centermass.b - pointPosition.g;
+          float l = x * x + y * y;
+          if ((width${level + 1} * width${level + 1}) / theta < l) {
+            ${calculateVelocityAdjustment}
+          } else {
+            ${quad(level + 1)}
+          }
+        }
+      }
+      `
+    }
+  }
+  return `
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform sampler2D positionsTexture;
+uniform sampler2D randomValues;
+uniform float spaceSize;
+uniform float repulsion;
+uniform float theta;
+uniform float alpha;
+uniform sampler2D level[${maxLevels}];
+varying vec2 textureCoords;
+
+vec2 calculateAdditionalVelocity(vec2 xy, float l, float c) {
+  float distanceMin2 = 1.0;
+  if (l < distanceMin2) l = sqrt(distanceMin2 * l);
+  float add = c / l;
+  return add * xy;
+}
+
+void main() {
+  vec4 pointPosition = texture2D(positionsTexture, textureCoords);
+  vec4 random = texture2D(randomValues, textureCoords);
+
+  float width0 = spaceSize;
+
+  vec2 velocity = vec2(0.0);
+  vec2 addVelocity = vec2(0.0);
+
+  ${new Array(maxLevels).fill(0).map((_, i) => `float width${i + 1} = width${i} / 2.0;`).join('\n')}
+
+  for (float n = 0.0; n < pow(2.0, ${delta}.0); n += 1.0) {
+    for (float m = 0.0; m < pow(2.0, ${delta}.0); m += 1.0) {
+      ${quad(delta)}
+    }
+  }
+
+  velocity -= addVelocity;
+
+  gl_FragColor = vec4(velocity, 0.0, 0.0);
+}
+`
+}

package/src/modules/ForceMouse/force-mouse.frag

@@ -0,0 +1,35 @@
+#version 300 es
+precision highp float;
+
+uniform sampler2D positionsTexture;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform forceMouseUniforms {
+  float repulsion;
+  vec2 mousePos;
+} forceMouse;
+
+#define repulsion forceMouse.repulsion
+#define mousePos forceMouse.mousePos
+#else
+uniform float repulsion;
+uniform vec2 mousePos;
+#endif
+
+in vec2 textureCoords;
+out vec4 fragColor;
+
+void main() {
+  vec4 pointPosition = texture(positionsTexture, textureCoords);
+  vec4 velocity = vec4(0.0);
+  vec2 mouse = mousePos;
+  // Move particles away from the mouse position using a repulsive force
+  vec2 distVector = mouse - pointPosition.rg;
+  float dist = sqrt(dot(distVector, distVector));
+  dist = max(dist, 10.0);
+  float angle = atan(distVector.y, distVector.x);
+  float addV = 100.0 * repulsion / (dist * dist);
+  velocity.rg -= addV * vec2(cos(angle), sin(angle));
+
+  fragColor = velocity;
+}

package/src/modules/ForceMouse/index.ts

@@ -0,0 +1,102 @@
+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/ForceMouse/force-mouse.frag?raw'
+import updateVert from '@/graph/modules/Shared/quad.vert?raw'
+
+export class ForceMouse extends CoreModule {
+  private runCommand: Model | undefined
+  private vertexCoordBuffer: Buffer | undefined
+  private uniformStore: UniformStore<{
+    forceMouseUniforms: {
+      repulsion: number;
+      mousePos: [number, number];
+    };
+  }> | undefined
+
+  public initPrograms (): void {
+    const { device, points } = this
+    if (!points) 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({
+        forceMouseUniforms: {
+          uniformTypes: {
+            repulsion: 'f32',
+            mousePos: 'vec2<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: {
+          forceMouseUniforms: this.uniformStore.getManagedUniformBuffer(device, 'forceMouseUniforms'),
+          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({
+      forceMouseUniforms: {
+        repulsion: this.config.simulationRepulsionFromMouse ?? 0,
+        mousePos: [store.mousePosition[0] ?? 0, store.mousePosition[1] ?? 0],
+      },
+    })
+
+    this.runCommand.setBindings({
+      forceMouseUniforms: this.uniformStore.getManagedUniformBuffer(device, 'forceMouseUniforms'),
+      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
+
+    this.runCommand?.destroy()
+    this.runCommand = undefined
+
+    if (this.vertexCoordBuffer && !this.vertexCoordBuffer.destroyed) this.vertexCoordBuffer.destroy()
+    this.vertexCoordBuffer = undefined
+  }
+}