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

package/src/modules/ForceLink/force-spring.ts

@@ -0,0 +1,89 @@
+export function forceFrag (maxLinks: number): string {
+  return `#version 300 es
+precision highp float;
+
+uniform sampler2D positionsTexture;
+uniform sampler2D linkInfoTexture; // Texture storing first link indices and amount
+uniform sampler2D linkIndicesTexture;
+uniform sampler2D linkPropertiesTexture; // Texture storing link bias and strength
+uniform sampler2D linkRandomDistanceTexture;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform forceLinkUniforms {
+  float linkSpring;
+  float linkDistance;
+  vec2 linkDistRandomVariationRange;
+  float pointsTextureSize;
+  float linksTextureSize;
+  float alpha;
+} forceLink;
+
+#define linkSpring forceLink.linkSpring
+#define linkDistance forceLink.linkDistance
+#define linkDistRandomVariationRange forceLink.linkDistRandomVariationRange
+#define pointsTextureSize forceLink.pointsTextureSize
+#define linksTextureSize forceLink.linksTextureSize
+#define alpha forceLink.alpha
+#else
+uniform float linkSpring;
+uniform float linkDistance;
+uniform vec2 linkDistRandomVariationRange;
+uniform float pointsTextureSize;
+uniform float linksTextureSize;
+uniform float alpha;
+#endif
+
+in vec2 textureCoords;
+out vec4 fragColor;
+
+const float MAX_LINKS = ${maxLinks}.0;
+
+void main() {
+  vec4 pointPosition = texture(positionsTexture, textureCoords);
+  vec4 velocity = vec4(0.0);
+
+  vec4 linkInfo = texture(linkInfoTexture, textureCoords);
+  float iCount = linkInfo.r;
+  float jCount = linkInfo.g;
+  float linkAmount = linkInfo.b;
+  if (linkAmount > 0.0) {
+    for (float i = 0.0; i < MAX_LINKS; i += 1.0) {
+      if (i < linkAmount) {
+        if (iCount >= linksTextureSize) {
+          iCount = 0.0;
+          jCount += 1.0;
+        }
+        vec2 linkTextureIndex = (vec2(iCount, jCount) + 0.5) / linksTextureSize;
+        vec4 connectedPointIndex = texture(linkIndicesTexture, linkTextureIndex);
+        vec4 biasAndStrength = texture(linkPropertiesTexture, linkTextureIndex);
+        vec4 randomMinDistance = texture(linkRandomDistanceTexture, linkTextureIndex);
+        float bias = biasAndStrength.r;
+        float strength = biasAndStrength.g;
+        float randomMinLinkDist = randomMinDistance.r * (linkDistRandomVariationRange.g - linkDistRandomVariationRange.r) + linkDistRandomVariationRange.r;
+        randomMinLinkDist *= linkDistance;
+
+        iCount += 1.0;
+
+        vec4 connectedPointPosition = texture(positionsTexture, (connectedPointIndex.rg + 0.5) / pointsTextureSize);
+        float x = connectedPointPosition.x - (pointPosition.x + velocity.x);
+        float y = connectedPointPosition.y - (pointPosition.y + velocity.y);
+        float l = sqrt(x * x + y * y);
+
+        // Apply the link force
+        l = max(l, randomMinLinkDist * 0.99);
+        l = (l - randomMinLinkDist) / l;
+        l *= linkSpring * alpha;
+        l *= strength;
+        l *= bias;
+        x *= l;
+        y *= l;
+        velocity.x += x;
+        velocity.y += y;
+      }
+    }
+  }
+
+  fragColor = vec4(velocity.rg, 0.0, 0.0);
+}
+  `
+}

package/src/modules/ForceLink/index.ts

@@ -0,0 +1,293 @@
+import { Buffer, RenderPass, Texture, UniformStore } from '@luma.gl/core'
+import { Model } from '@luma.gl/engine'
+import { CoreModule } from '@/graph/modules/core-module'
+import { forceFrag } from '@/graph/modules/ForceLink/force-spring'
+import updateVert from '@/graph/modules/Shared/quad.vert?raw'
+
+export enum LinkDirection {
+  OUTGOING = 'outgoing',
+  INCOMING = 'incoming'
+}
+
+export class ForceLink extends CoreModule {
+  private linkFirstIndicesAndAmount: Float32Array = new Float32Array()
+  private indices: Float32Array = new Float32Array()
+  private maxPointDegree = 0
+  private previousMaxPointDegree: number | undefined
+  private previousPointsTextureSize: number | undefined
+  private previousLinksTextureSize: number | undefined
+
+  private runCommand: Model | undefined
+  private vertexCoordBuffer: Buffer | undefined
+  private uniformStore: UniformStore<{
+    forceLinkUniforms: {
+      linkSpring: number;
+      linkDistance: number;
+      linkDistRandomVariationRange: [number, number];
+      pointsTextureSize: number;
+      linksTextureSize: number;
+      alpha: number;
+    };
+  }> | undefined
+
+  private linkFirstIndicesAndAmountTexture: Texture | undefined
+  private indicesTexture: Texture | undefined
+  private biasAndStrengthTexture: Texture | undefined
+  private randomDistanceTexture: Texture | undefined
+
+  public create (direction: LinkDirection): void {
+    const { device, store: { pointsTextureSize, linksTextureSize }, data } = this
+    if (!pointsTextureSize || !linksTextureSize) return
+
+    this.linkFirstIndicesAndAmount = new Float32Array(pointsTextureSize * pointsTextureSize * 4)
+    this.indices = new Float32Array(linksTextureSize * linksTextureSize * 4)
+    const linkBiasAndStrengthState = new Float32Array(linksTextureSize * linksTextureSize * 4)
+    const linkDistanceState = new Float32Array(linksTextureSize * linksTextureSize * 4)
+
+    const grouped = direction === LinkDirection.INCOMING ? data.sourceIndexToTargetIndices : data.targetIndexToSourceIndices
+    this.maxPointDegree = 0
+    let linkIndex = 0
+    grouped?.forEach((connectedPointIndices, pointIndex) => {
+      if (connectedPointIndices) {
+        this.linkFirstIndicesAndAmount[pointIndex * 4 + 0] = linkIndex % linksTextureSize
+        this.linkFirstIndicesAndAmount[pointIndex * 4 + 1] = Math.floor(linkIndex / linksTextureSize)
+        this.linkFirstIndicesAndAmount[pointIndex * 4 + 2] = connectedPointIndices.length ?? 0
+
+        connectedPointIndices.forEach(([connectedPointIndex, initialLinkIndex]) => {
+          this.indices[linkIndex * 4 + 0] = connectedPointIndex % pointsTextureSize
+          this.indices[linkIndex * 4 + 1] = Math.floor(connectedPointIndex / pointsTextureSize)
+          const degree = data.degree?.[connectedPointIndex] ?? 0
+          const connectedDegree = data.degree?.[pointIndex] ?? 0
+          const degreeSum = degree + connectedDegree
+          // Prevent division by zero
+          const bias = degreeSum !== 0 ? degree / degreeSum : 0.5
+          const minDegree = Math.min(degree, connectedDegree)
+          // Prevent division by zero
+          let strength = data.linkStrength?.[initialLinkIndex] ?? (1 / Math.max(minDegree, 1))
+          strength = Math.sqrt(strength)
+          linkBiasAndStrengthState[linkIndex * 4 + 0] = bias
+          linkBiasAndStrengthState[linkIndex * 4 + 1] = strength
+          linkDistanceState[linkIndex * 4] = this.store.getRandomFloat(0, 1)
+
+          linkIndex += 1
+        })
+
+        this.maxPointDegree = Math.max(this.maxPointDegree, connectedPointIndices.length ?? 0)
+      }
+    })
+
+    // Recreate textures if sizes changed
+    const recreatePointTextures =
+      !this.linkFirstIndicesAndAmountTexture ||
+      this.linkFirstIndicesAndAmountTexture.width !== pointsTextureSize ||
+      this.linkFirstIndicesAndAmountTexture.height !== pointsTextureSize
+
+    const recreateLinkTextures =
+      !this.indicesTexture ||
+      this.indicesTexture.width !== linksTextureSize ||
+      this.indicesTexture.height !== linksTextureSize
+
+    if (recreatePointTextures) {
+      if (this.linkFirstIndicesAndAmountTexture && !this.linkFirstIndicesAndAmountTexture.destroyed) {
+        this.linkFirstIndicesAndAmountTexture.destroy()
+      }
+      this.linkFirstIndicesAndAmountTexture = device.createTexture({
+        width: pointsTextureSize,
+        height: pointsTextureSize,
+        format: 'rgba32float',
+        usage: Texture.SAMPLE | Texture.COPY_DST,
+      })
+    }
+    this.linkFirstIndicesAndAmountTexture!.copyImageData({
+      data: this.linkFirstIndicesAndAmount,
+      bytesPerRow: pointsTextureSize,
+      mipLevel: 0,
+      x: 0,
+      y: 0,
+    })
+
+    if (recreateLinkTextures) {
+      if (this.indicesTexture && !this.indicesTexture.destroyed) this.indicesTexture.destroy()
+      if (this.biasAndStrengthTexture && !this.biasAndStrengthTexture.destroyed) this.biasAndStrengthTexture.destroy()
+      if (this.randomDistanceTexture && !this.randomDistanceTexture.destroyed) this.randomDistanceTexture.destroy()
+
+      this.indicesTexture = device.createTexture({
+        width: linksTextureSize,
+        height: linksTextureSize,
+        format: 'rgba32float',
+        usage: Texture.SAMPLE | Texture.COPY_DST,
+      })
+      this.biasAndStrengthTexture = device.createTexture({
+        width: linksTextureSize,
+        height: linksTextureSize,
+        format: 'rgba32float',
+        usage: Texture.SAMPLE | Texture.COPY_DST,
+      })
+      this.randomDistanceTexture = device.createTexture({
+        width: linksTextureSize,
+        height: linksTextureSize,
+        format: 'rgba32float',
+        usage: Texture.SAMPLE | Texture.COPY_DST,
+      })
+    }
+
+    this.indicesTexture!.copyImageData({
+      data: this.indices,
+      bytesPerRow: linksTextureSize,
+      mipLevel: 0,
+      x: 0,
+      y: 0,
+    })
+    this.biasAndStrengthTexture!.copyImageData({
+      data: linkBiasAndStrengthState,
+      bytesPerRow: linksTextureSize,
+      mipLevel: 0,
+      x: 0,
+      y: 0,
+    })
+    this.randomDistanceTexture!.copyImageData({
+      data: linkDistanceState,
+      bytesPerRow: linksTextureSize,
+      mipLevel: 0,
+      x: 0,
+      y: 0,
+    })
+
+    // Force shader rebuild if degree changed
+    if (this.previousMaxPointDegree !== undefined && this.previousMaxPointDegree !== this.maxPointDegree) {
+      this.runCommand?.destroy()
+      this.runCommand = undefined
+    }
+
+    this.previousMaxPointDegree = this.maxPointDegree
+    this.previousPointsTextureSize = pointsTextureSize
+    this.previousLinksTextureSize = linksTextureSize
+  }
+
+  public initPrograms (): void {
+    const { device, store, points } = this
+    if (!points || !store.pointsTextureSize || !store.linksTextureSize) return
+    if (!this.linkFirstIndicesAndAmountTexture || !this.indicesTexture || !this.biasAndStrengthTexture || !this.randomDistanceTexture) 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({
+        forceLinkUniforms: {
+          uniformTypes: {
+            linkSpring: 'f32',
+            linkDistance: 'f32',
+            linkDistRandomVariationRange: 'vec2<f32>',
+            pointsTextureSize: 'f32',
+            linksTextureSize: 'f32',
+            alpha: 'f32',
+          },
+        },
+      })
+    }
+
+    if (!this.runCommand) {
+      this.runCommand = new Model(device, {
+        fs: forceFrag(this.maxPointDegree),
+        vs: updateVert,
+        topology: 'triangle-strip',
+        vertexCount: 4,
+        attributes: {
+          vertexCoord: this.vertexCoordBuffer,
+        },
+        bufferLayout: [
+          { name: 'vertexCoord', format: 'float32x2' },
+        ],
+        defines: {
+          USE_UNIFORM_BUFFERS: true,
+        },
+        bindings: {
+          forceLinkUniforms: this.uniformStore.getManagedUniformBuffer(device, 'forceLinkUniforms'),
+          positionsTexture: points.previousPositionTexture!,
+          linkInfoTexture: this.linkFirstIndicesAndAmountTexture,
+          linkIndicesTexture: this.indicesTexture,
+          linkPropertiesTexture: this.biasAndStrengthTexture,
+          linkRandomDistanceTexture: this.randomDistanceTexture,
+        },
+        parameters: {
+          depthWriteEnabled: false,
+          depthCompare: 'always',
+        },
+      })
+    }
+  }
+
+  public run (renderPass?: RenderPass): void {
+    const { device, store, points } = this
+    if (!points || !this.runCommand || !this.uniformStore) return
+    if (!points.previousPositionTexture || points.previousPositionTexture.destroyed) return
+    if (!this.linkFirstIndicesAndAmountTexture || !this.indicesTexture || !this.biasAndStrengthTexture || !this.randomDistanceTexture) return
+    if (!renderPass && (!points.velocityFbo || points.velocityFbo.destroyed)) return
+
+    // Skip if sizes changed and create() wasn't called again
+    if (
+      store.pointsTextureSize !== this.previousPointsTextureSize ||
+      store.linksTextureSize !== this.previousLinksTextureSize
+    ) {
+      return
+    }
+
+    this.uniformStore.setUniforms({
+      forceLinkUniforms: {
+        linkSpring: this.config.simulationLinkSpring ?? 0,
+        linkDistance: this.config.simulationLinkDistance ?? 0,
+        linkDistRandomVariationRange: [
+          this.config.simulationLinkDistRandomVariationRange?.[0] ?? 0,
+          this.config.simulationLinkDistRandomVariationRange?.[1] ?? 0,
+        ],
+        pointsTextureSize: store.pointsTextureSize,
+        linksTextureSize: store.linksTextureSize,
+        alpha: store.alpha,
+      },
+    })
+
+    this.runCommand.setBindings({
+      forceLinkUniforms: this.uniformStore.getManagedUniformBuffer(device, 'forceLinkUniforms'),
+      positionsTexture: points.previousPositionTexture!,
+      linkInfoTexture: this.linkFirstIndicesAndAmountTexture,
+      linkIndicesTexture: this.indicesTexture,
+      linkPropertiesTexture: this.biasAndStrengthTexture,
+      linkRandomDistanceTexture: this.randomDistanceTexture,
+    })
+
+    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
+
+    if (this.linkFirstIndicesAndAmountTexture && !this.linkFirstIndicesAndAmountTexture.destroyed) this.linkFirstIndicesAndAmountTexture.destroy()
+    this.linkFirstIndicesAndAmountTexture = undefined
+
+    if (this.indicesTexture && !this.indicesTexture.destroyed) this.indicesTexture.destroy()
+    this.indicesTexture = undefined
+
+    if (this.biasAndStrengthTexture && !this.biasAndStrengthTexture.destroyed) this.biasAndStrengthTexture.destroy()
+    this.biasAndStrengthTexture = undefined
+
+    if (this.randomDistanceTexture && !this.randomDistanceTexture.destroyed) this.randomDistanceTexture.destroy()
+    this.randomDistanceTexture = undefined
+  }
+}

package/src/modules/ForceManyBody/calculate-level.frag

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

package/src/modules/ForceManyBody/calculate-level.vert

@@ -0,0 +1,37 @@
+#version 300 es
+precision highp float;
+
+uniform sampler2D positionsTexture;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform calculateLevelsUniforms {
+  float pointsTextureSize;
+  float levelTextureSize;
+  float cellSize;
+} calculateLevels;
+
+#define pointsTextureSize calculateLevels.pointsTextureSize
+#define levelTextureSize calculateLevels.levelTextureSize
+#define cellSize calculateLevels.cellSize
+#else
+uniform float pointsTextureSize;
+uniform float levelTextureSize;
+uniform float cellSize;
+#endif
+
+in vec2 pointIndices;
+
+out vec4 vColor;
+
+void main() {
+  vec4 pointPosition = texture(positionsTexture, pointIndices / pointsTextureSize);
+  vColor = vec4(pointPosition.rg, 1.0, 0.0);
+
+  float n = floor(pointPosition.x / cellSize);
+  float m = floor(pointPosition.y / cellSize);
+  
+  vec2 levelPosition = 2.0 * (vec2(n, m) + 0.5) / levelTextureSize - 1.0;
+
+  gl_Position = vec4(levelPosition, 0.0, 1.0);
+  gl_PointSize = 1.0;
+}

package/src/modules/ForceManyBody/force-centermass.frag

@@ -0,0 +1,61 @@
+#version 300 es
+precision highp float;
+
+uniform sampler2D positionsTexture;
+uniform sampler2D levelFbo;
+uniform sampler2D randomValues;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform forceCenterUniforms {
+  float levelTextureSize;
+  float repulsion;
+  float alpha;
+} forceCenter;
+
+#define levelTextureSize forceCenter.levelTextureSize
+#define repulsion forceCenter.repulsion
+#define alpha forceCenter.alpha
+#else
+uniform float levelTextureSize;
+uniform float repulsion;
+uniform float alpha;
+#endif
+
+in vec2 textureCoords;
+out vec4 fragColor;
+
+// Calculate the additional velocity based on the center of mass
+vec2 calculateAdditionalVelocity (vec2 ij, vec2 pp) {
+  vec2 add = vec2(0.0);
+  vec4 centermass = texture(levelFbo, ij);
+  if (centermass.r > 0.0 && centermass.g > 0.0 && centermass.b > 0.0) {
+    vec2 centermassPosition = vec2(centermass.rg / centermass.b);
+    vec2 distVector = pp - centermassPosition;
+    float l = dot(distVector, distVector);
+    float dist = sqrt(l);
+    if (l > 0.0) {
+      float angle = atan(distVector.y, distVector.x);
+      float c = alpha * repulsion * centermass.b;
+
+      float distanceMin2 = 1.0;
+      if (l < distanceMin2) l = sqrt(distanceMin2 * l);
+      float addV = c / sqrt(l);
+      add = addV * vec2(cos(angle), sin(angle));
+    }
+  }
+  return add;
+}
+
+void main() {
+  vec4 pointPosition = texture(positionsTexture, textureCoords);
+  vec4 random = texture(randomValues, textureCoords);
+
+  vec4 velocity = vec4(0.0);
+
+  // Calculate additional velocity based on the point position
+  velocity.xy += calculateAdditionalVelocity(pointPosition.xy / levelTextureSize, pointPosition.xy);
+  // Apply random factor to the velocity
+  velocity.xy += velocity.xy * random.rg;
+
+  fragColor = velocity;
+}

package/src/modules/ForceManyBody/force-level.frag

@@ -0,0 +1,138 @@
+#version 300 es
+precision highp float;
+
+uniform sampler2D positionsTexture;
+uniform sampler2D levelFbo;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform forceUniforms {
+  float level;
+  float levels;
+  float levelTextureSize;
+  float repulsion;
+  float alpha;
+  float spaceSize;
+  float theta;
+} force;
+
+#define level force.level
+#define levels force.levels
+#define levelTextureSize force.levelTextureSize
+#define repulsion force.repulsion
+#define alpha force.alpha
+#define spaceSize force.spaceSize
+#define theta force.theta
+#else
+uniform float level;
+uniform float levels;
+uniform float levelTextureSize;
+uniform float repulsion;
+uniform float alpha;
+uniform float spaceSize;
+uniform float theta;
+#endif
+
+in vec2 textureCoords;
+out vec4 fragColor;
+
+const float MAX_LEVELS_NUM = 14.0;
+
+vec2 calculateAdditionalVelocity (vec2 ij, vec2 pp) {
+  vec2 add = vec2(0.0);
+  vec4 centermass = texture(levelFbo, ij);
+  if (centermass.r > 0.0 && centermass.g > 0.0 && centermass.b > 0.0) {
+    vec2 centermassPosition = vec2(centermass.rg / centermass.b);
+    vec2 distVector = pp - centermassPosition;
+    float l = dot(distVector, distVector);
+    float dist = sqrt(l);
+    if (l > 0.0) {
+      float c = alpha * repulsion * centermass.b;
+
+      float distanceMin2 = 1.0;
+      if (l < distanceMin2) l = sqrt(distanceMin2 * l);
+      float addV = c / sqrt(l);
+      add = addV * normalize(distVector);
+    }
+  }
+  return add;
+}
+
+void main() {
+  vec4 pointPosition = texture(positionsTexture, textureCoords);
+  float x = pointPosition.x;
+  float y = pointPosition.y;
+
+  float left = 0.0;
+  float top = 0.0;
+  float right = spaceSize;
+  float bottom = spaceSize;
+
+  float n_left = 0.0;
+  float n_top = 0.0;
+  float n_right = 0.0;
+  float n_bottom = 0.0;
+
+  float cellSize = 0.0;
+
+  // Iterate over levels to adjust the boundaries based on the current level
+  for (float i = 0.0; i < MAX_LEVELS_NUM; i += 1.0) {
+    if (i <= level) {
+      left += cellSize * n_left;
+      top += cellSize * n_top;
+      right -= cellSize * n_right;
+      bottom -= cellSize * n_bottom;
+
+      cellSize = pow(2.0 , levels - i - 1.0);
+
+      float dist_left = x - left;
+      n_left = max(0.0, floor(dist_left / cellSize - theta));
+
+      float dist_top = y - top;
+      n_top = max(0.0, floor(dist_top / cellSize - theta));
+      
+      float dist_right = right - x;
+      n_right = max(0.0, floor(dist_right / cellSize - theta));
+
+      float dist_bottom = bottom - y;
+      n_bottom = max(0.0, floor(dist_bottom / cellSize - theta));
+
+    }
+  }
+
+  vec4 velocity = vec4(vec2(0.0), 1.0, 0.0);
+
+  // Calculate the additional velocity based on neighboring cells
+  for (float i = 0.0; i < 12.0; i += 1.0) {
+    for (float j = 0.0; j < 4.0; j += 1.0) {
+      float n = left + cellSize * j;
+      float m = top + cellSize * n_top + cellSize * i;
+
+      if (n < (left + n_left * cellSize) && m < bottom) {
+        velocity.xy += calculateAdditionalVelocity(vec2(n / cellSize, m / cellSize) / levelTextureSize, pointPosition.xy);
+      }
+
+      n = left + cellSize * i;
+      m = top + cellSize * j;
+
+      if (n < (right - n_right * cellSize) && m < (top + n_top * cellSize)) {
+        velocity.xy += calculateAdditionalVelocity(vec2(n / cellSize, m / cellSize) / levelTextureSize, pointPosition.xy);
+      }
+
+      n = right - n_right * cellSize + cellSize * j;
+      m = top + cellSize * i;
+
+      if (n < right && m < (bottom - n_bottom * cellSize)) {
+        velocity.xy += calculateAdditionalVelocity(vec2(n / cellSize, m / cellSize) / levelTextureSize, pointPosition.xy);
+      }
+
+      n = left + n_left * cellSize + cellSize * i;
+      m = bottom - n_bottom * cellSize + cellSize * j;
+
+      if (n < right && m < bottom) {
+        velocity.xy += calculateAdditionalVelocity(vec2(n / cellSize, m / cellSize) / levelTextureSize, pointPosition.xy);
+      }
+    }
+  }
+
+  fragColor = velocity;
+}