@antv/layout 0.3.11 → 1.0.0-alpha.0

package/src/layout/gpu/fruchterman.ts

@@ -1,314 +0,0 @@
-// @ts-nocheck
-/**
- * @fileOverview fruchterman layout
- * @author shiwu.wyy@antfin.com
- */
-
-import {
-  OutNode,
-  Edge,
-  PointTuple,
-  IndexMap,
-  FruchtermanGPULayoutOptions
-} from "../types";
-import { Base } from "../base";
-import { isNumber } from "../../util";
-// @ts-ignore
-import { World } from "@antv/g-webgpu";
-// compile at runtime in dev mode
-import { buildTextureData, attributesToTextureData } from "../../util/gpu";
-// use compiled bundle in prod mode
-import { fruchtermanBundle, clusterBundle } from "./fruchtermanShader";
-import { LAYOUT_MESSAGE } from "../constants";
-// @ts-ignore
-// import { Compiler } from '@antv/g-webgpu-compiler'
-// import { fruchtermanCode, clusterCode } from './fruchtermanShader'
-
-type INode = OutNode & {
-  cluster: string | number;
-};
-
-type NodeMap = {
-  [key: string]: INode;
-};
-
-/**
- * fruchterman 布局
- */
-export class FruchtermanGPULayout extends Base {
-  /** 布局中心 */
-  public center: PointTuple;
-
-  /** 停止迭代的最大迭代数 */
-  public maxIteration: number = 1000;
-
-  /** 重力大小，影响图的紧凑程度 */
-  public gravity: number = 10;
-
-  /** 速度 */
-  public speed: number = 1;
-
-  /** 是否产生聚类力 */
-  public clustering: boolean = false;
-
-  /** 根据哪个字段聚类 */
-  public clusterField: string = "cluster";
-
-  /** 聚类力大小 */
-  public clusterGravity: number = 10;
-
-  /** 是否启用web worker。前提是在web worker里执行布局，否则无效	*/
-  public workerEnabled: boolean = false;
-
-  public nodes: INode[] = [];
-
-  public edges: Edge[] = [];
-
-  public width: number = 300;
-
-  public height: number = 300;
-
-  public nodeMap: NodeMap = {};
-
-  public nodeIdxMap: IndexMap = {};
-
-  public canvasEl: HTMLCanvasElement;
-
-  public onLayoutEnd: () => void;
-
-  constructor(options?: FruchtermanGPULayoutOptions) {
-    super();
-    this.updateCfg(options);
-  }
-
-  public getDefaultCfg() {
-    return {
-      maxIteration: 1000,
-      gravity: 10,
-      speed: 1,
-      clustering: false,
-      clusterGravity: 10
-    };
-  }
-
-  /**
-   * 执行布局
-   */
-  public async execute() {
-    const self = this;
-    const nodes = self.nodes;
-
-    if (!nodes || nodes.length === 0) {
-      if (self.onLayoutEnd) self.onLayoutEnd();
-      return;
-    }
-    if (!self.width && typeof window !== "undefined") {
-      self.width = window.innerWidth;
-    }
-    if (!self.height && typeof window !== "undefined") {
-      self.height = window.innerHeight;
-    }
-    if (!self.center) {
-      self.center = [self.width / 2, self.height / 2];
-    }
-    const center = self.center;
-    if (nodes.length === 1) {
-      nodes[0].x = center[0];
-      nodes[0].y = center[1];
-      if (self.onLayoutEnd) self.onLayoutEnd();
-      return;
-    }
-    const nodeMap: NodeMap = {};
-    const nodeIdxMap: IndexMap = {};
-    nodes.forEach((node, i) => {
-      if (!isNumber(node.x)) node.x = Math.random() * this.width;
-      if (!isNumber(node.y)) node.y = Math.random() * this.height;
-      nodeMap[node.id] = node;
-      nodeIdxMap[node.id] = i;
-    });
-    self.nodeMap = nodeMap;
-    self.nodeIdxMap = nodeIdxMap;
-    // layout
-    await self.run();
-  }
-
-  public async executeWithWorker(canvas?: HTMLCanvasElement, ctx?: any) {
-    const self = this;
-    const nodes = self.nodes;
-    const center = self.center;
-
-    if (!nodes || nodes.length === 0) {
-      return;
-    }
-    if (nodes.length === 1) {
-      nodes[0].x = center[0];
-      nodes[0].y = center[1];
-      return;
-    }
-    const nodeMap: NodeMap = {};
-    const nodeIdxMap: IndexMap = {};
-    nodes.forEach((node, i) => {
-      if (!isNumber(node.x)) node.x = Math.random() * this.width;
-      if (!isNumber(node.y)) node.y = Math.random() * this.height;
-      nodeMap[node.id] = node;
-      nodeIdxMap[node.id] = i;
-    });
-    self.nodeMap = nodeMap;
-    self.nodeIdxMap = nodeIdxMap;
-    // layout
-    await self.run(canvas, ctx);
-  }
-
-  public async run(canvas?: HTMLCanvasElement, ctx?: any) {
-    const self = this;
-    const nodes = self.nodes;
-    const edges = self.edges;
-    const maxIteration = self.maxIteration;
-    const center = self.center;
-    const area = self.height * self.width;
-    let maxDisplace = Math.sqrt(area) / 10;
-    const k2 = area / (nodes.length + 1);
-    const k = Math.sqrt(k2);
-    const speed = self.speed;
-    const clustering = self.clustering;
-
-    const {
-      array: attributeArray,
-      count: clusterCount
-    } = attributesToTextureData([self.clusterField], nodes);
-
-    // pushing the fx and fy
-    nodes.forEach((node, i) => {
-      let fx = 0;
-      let fy = 0;
-      if (isNumber(node.fx) && isNumber(node.fy)) {
-        fx = node.fx || 0.001;
-        fy = node.fy || 0.001;
-      }
-      attributeArray[4 * i + 1] = fx;
-      attributeArray[4 * i + 2] = fy;
-    });
-
-
-    const numParticles = nodes.length;
-    const { maxEdgePerVetex, array: nodesEdgesArray } = buildTextureData(
-      nodes,
-      edges
-    );
-
-    const workerEnabled = self.workerEnabled;
-
-    let world;
-
-    if (workerEnabled) {
-      world = World.create({
-        canvas,
-        engineOptions: {
-          supportCompute: true
-        }
-      });
-    } else {
-      world = World.create({
-        engineOptions: {
-          supportCompute: true
-        }
-      });
-    }
-
-    // compile at runtime in dev mode
-    // const compiler = new Compiler()
-    // const fruchtermanBundle = compiler.compileBundle(fruchtermanCode)
-    // const clusterBundle = compiler.compileBundle(clusterCode)
-
-    // use compiled bundle in prod mode
-    // console.log(fruchtermanBundle.toString())
-    // console.log(clusterBundle.toString())
-
-    const onLayoutEnd = self.onLayoutEnd;
-
-    const clusterCenters = [];
-    for (let i = 0; i < clusterCount; i++) {
-      clusterCenters.push(0, 0, 0, 0);
-    }
-
-    const kernelFruchterman = world
-      .createKernel(fruchtermanBundle)
-      .setDispatch([numParticles, 1, 1])
-      .setBinding({
-        u_Data: nodesEdgesArray,
-        u_K: k,
-        u_K2: k2,
-        u_Gravity: self.gravity,
-        u_ClusterGravity: self.clusterGravity || self.gravity || 1,
-        u_Speed: speed,
-        u_MaxDisplace: maxDisplace,
-        u_Clustering: clustering ? 1 : 0,
-        u_Center: center,
-        u_AttributeArray: attributeArray,
-        u_ClusterCenters: clusterCenters,
-        MAX_EDGE_PER_VERTEX: maxEdgePerVetex,
-        VERTEX_COUNT: numParticles
-      });
-
-    let kernelCluster: any;
-    if (clustering) {
-      kernelCluster = world
-        .createKernel(clusterBundle)
-        .setDispatch([clusterCount, 1, 1])
-        .setBinding({
-          u_Data: nodesEdgesArray,
-          u_NodeAttributes: attributeArray,
-          u_ClusterCenters: clusterCenters,
-          VERTEX_COUNT: numParticles,
-          CLUSTER_COUNT: clusterCount
-        });
-    }
-
-    const execute = async () => {
-      for (let i = 0; i < maxIteration; i++) {
-        // eslint-disable-next-line no-await-in-loop
-        await kernelFruchterman.execute();
-
-        if (clustering) {
-          kernelCluster.setBinding({
-            u_Data: kernelFruchterman
-          });
-          // eslint-disable-next-line no-await-in-loop
-          await kernelCluster.execute();
-          kernelFruchterman.setBinding({
-            u_ClusterCenters: kernelCluster
-          });
-        }
-
-        kernelFruchterman.setBinding({
-          u_MaxDisplace: maxDisplace *= 0.99
-        });
-      }
-
-      const finalParticleData = await kernelFruchterman.getOutput();
-
-      if (canvas) {
-        // 传递数据给主线程
-        ctx.postMessage({
-          type: LAYOUT_MESSAGE.GPUEND,
-          vertexEdgeData: finalParticleData
-          // edgeIndexBufferData,
-        });
-      } else {
-        nodes.forEach((node, i) => {
-          const x = finalParticleData[4 * i];
-          const y = finalParticleData[4 * i + 1];
-          node.x = x;
-          node.y = y;
-        });
-      }
-      if (onLayoutEnd) onLayoutEnd();
-    };
-
-    await execute();
-  }
-
-  public getType() {
-    return "fruchterman-gpu";
-  }
-}

package/src/layout/gpu/fruchtermanShader.ts

@@ -1,203 +0,0 @@
-export const fruchtermanCode = `
-import { globalInvocationID } from 'g-webgpu';
-const MAX_EDGE_PER_VERTEX;
-const VERTEX_COUNT;
-@numthreads(1, 1, 1)
-class Fruchterman {
-  @in @out
-  u_Data: vec4[];
-  @in
-  u_K: float;
-  @in
-  u_K2: float;
-  
-  @in
-  u_Center: vec2;
-  @in
-  u_Gravity: float;
-  @in
-  u_ClusterGravity: float;
-  @in
-  u_Speed: float;
-  @in
-  u_MaxDisplace: float;
-  @in
-  u_Clustering: float;
-  @in
-  u_AttributeArray: vec4[];
-  @in
-  u_ClusterCenters: vec4[];
-  calcRepulsive(i: int, currentNode: vec4): vec2 {
-    let dx = 0, dy = 0;
-    for (let j = 0; j < VERTEX_COUNT; j++) {
-      if (i != j) {
-        const nextNode = this.u_Data[j];
-        const xDist = currentNode[0] - nextNode[0];
-        const yDist = currentNode[1] - nextNode[1];
-        const dist = (xDist * xDist + yDist * yDist) + 0.01;
-        let param = this.u_K2 / dist;
-        
-        if (dist > 0.0) {
-          dx += param * xDist;
-          dy += param * yDist;
-          if (xDist == 0 && yDist == 0) {
-            const sign = i < j ? 1 : -1;
-            dx += param * sign;
-            dy += param * sign;
-          }
-        }
-      }
-    }
-    return [dx, dy];
-  }
-  calcGravity(currentNode: vec4, nodeAttributes: vec4): vec2 { // 
-    let dx = 0, dy = 0;
-    const vx = currentNode[0] - this.u_Center[0];
-    const vy = currentNode[1] - this.u_Center[1];
-    const gf = 0.01 * this.u_K * this.u_Gravity;
-    dx = gf * vx;
-    dy = gf * vy;
-    if (this.u_Clustering == 1) {
-      const clusterIdx = int(nodeAttributes[0]);
-      const center = this.u_ClusterCenters[clusterIdx];
-      const cvx = currentNode[0] - center[0];
-      const cvy = currentNode[1] - center[1];
-      const dist = sqrt(cvx * cvx + cvy * cvy) + 0.01;
-      const parma = this.u_K * this.u_ClusterGravity / dist;
-      dx += parma * cvx;
-      dy += parma * cvy;
-    }
-    return [dx, dy];
-  }
-  calcAttractive(i: int, currentNode: vec4): vec2 {
-    let dx = 0, dy = 0;
-    const arr_offset = int(floor(currentNode[2] + 0.5));
-    const length = int(floor(currentNode[3] + 0.5));
-    const node_buffer: vec4;
-    for (let p = 0; p < MAX_EDGE_PER_VERTEX; p++) {
-      if (p >= length) break;
-      const arr_idx = arr_offset + p;
-      // when arr_idx % 4 == 0 update currentNodedx_buffer
-      const buf_offset = arr_idx - arr_idx / 4 * 4;
-      if (p == 0 || buf_offset == 0) {
-        node_buffer = this.u_Data[int(arr_idx / 4)];
-      }
-      const float_j = buf_offset == 0 ? node_buffer[0] :
-                      buf_offset == 1 ? node_buffer[1] :
-                      buf_offset == 2 ? node_buffer[2] :
-                                        node_buffer[3];
-      const nextNode = this.u_Data[int(float_j)];
-      const xDist = currentNode[0] - nextNode[0];
-      const yDist = currentNode[1] - nextNode[1];
-      const dist = sqrt(xDist * xDist + yDist * yDist) + 0.01;
-      let attractiveF = dist / this.u_K;
-    
-      if (dist > 0.0) {
-        dx -= xDist * attractiveF;
-        dy -= yDist * attractiveF;
-        if (xDist == 0 && yDist == 0) {
-          const sign = i < int(float_j) ? 1 : -1;
-          dx -= sign * attractiveF;
-          dy -= sign * attractiveF;
-        }
-      }
-    }
-    return [dx, dy];
-  }
-  @main
-  compute() {
-    const i = globalInvocationID.x;
-    const currentNode = this.u_Data[i];
-    let dx = 0, dy = 0;
-    if (i >= VERTEX_COUNT) {
-      this.u_Data[i] = currentNode;
-      return;
-    }
-
-    // [gravity, fx, fy, 0]
-    const nodeAttributes = this.u_AttributeArray[i];
-
-    if (nodeAttributes[1] != 0 && nodeAttributes[2] != 0) {
-      // the node is fixed
-      this.u_Data[i] = [
-        nodeAttributes[1],
-        nodeAttributes[2],
-        currentNode[2],
-        currentNode[3]
-      ];
-      return;
-    }
-
-    // repulsive
-    const repulsive = this.calcRepulsive(i, currentNode);
-    dx += repulsive[0];
-    dy += repulsive[1];
-    // attractive
-    const attractive = this.calcAttractive(i, currentNode);
-    dx += attractive[0];
-    dy += attractive[1];
-    // gravity
-    const gravity = this.calcGravity(currentNode, nodeAttributes);
-    dx -= gravity[0];
-    dy -= gravity[1];
-    // speed
-    dx *= this.u_Speed;
-    dy *= this.u_Speed;
-
-    // move
-    const distLength = sqrt(dx * dx + dy * dy);
-    if (distLength > 0.0) {
-      const limitedDist = min(this.u_MaxDisplace * this.u_Speed, distLength);
-      this.u_Data[i] = [
-        currentNode[0] + dx / distLength * limitedDist,
-        currentNode[1] + dy / distLength * limitedDist,
-        currentNode[2],
-        currentNode[3]
-      ];
-    }
-  }
-}
-`;
-
-export const fruchtermanBundle = `{"shaders":{"WGSL":"","GLSL450":"","GLSL100":"\\n\\nfloat epsilon = 0.00001;\\nvec2 addrTranslation_1Dto2D(float address1D, vec2 texSize) {\\n  vec2 conv_const = vec2(1.0 / texSize.x, 1.0 / (texSize.x * texSize.y));\\n  vec2 normAddr2D = float(address1D) * conv_const;\\n  return vec2(fract(normAddr2D.x + epsilon), normAddr2D.y);\\n}\\n\\nvoid barrier() {}\\n  \\n\\nuniform vec2 u_OutputTextureSize;\\nuniform int u_OutputTexelCount;\\nvarying vec2 v_TexCoord;\\n\\nbool gWebGPUDebug = false;\\nvec4 gWebGPUDebugOutput = vec4(0.0);\\n\\n#define MAX_EDGE_PER_VERTEX __DefineValuePlaceholder__MAX_EDGE_PER_VERTEX\\n#define VERTEX_COUNT __DefineValuePlaceholder__VERTEX_COUNT\\n\\nuniform sampler2D u_Data;\\nuniform vec2 u_DataSize;\\nvec4 getDatau_Data(vec2 address2D) {\\n  return vec4(texture2D(u_Data, address2D).rgba);\\n}\\nvec4 getDatau_Data(float address1D) {\\n  return getDatau_Data(addrTranslation_1Dto2D(address1D, u_DataSize));\\n}\\nvec4 getDatau_Data(int address1D) {\\n  return getDatau_Data(float(address1D));\\n}\\nuniform float u_K;\\nuniform float u_K2;\\nuniform vec2 u_Center;\\nuniform float u_Gravity;\\nuniform float u_ClusterGravity;\\nuniform float u_Speed;\\nuniform float u_MaxDisplace;\\nuniform float u_Clustering;\\nuniform sampler2D u_AttributeArray;\\nuniform vec2 u_AttributeArraySize;\\nvec4 getDatau_AttributeArray(vec2 address2D) {\\n  return vec4(texture2D(u_AttributeArray, address2D).rgba);\\n}\\nvec4 getDatau_AttributeArray(float address1D) {\\n  return getDatau_AttributeArray(addrTranslation_1Dto2D(address1D, u_AttributeArraySize));\\n}\\nvec4 getDatau_AttributeArray(int address1D) {\\n  return getDatau_AttributeArray(float(address1D));\\n}\\nuniform sampler2D u_ClusterCenters;\\nuniform vec2 u_ClusterCentersSize;\\nvec4 getDatau_ClusterCenters(vec2 address2D) {\\n  return vec4(texture2D(u_ClusterCenters, address2D).rgba);\\n}\\nvec4 getDatau_ClusterCenters(float address1D) {\\n  return getDatau_ClusterCenters(addrTranslation_1Dto2D(address1D, u_ClusterCentersSize));\\n}\\nvec4 getDatau_ClusterCenters(int address1D) {\\n  return getDatau_ClusterCenters(float(address1D));\\n}\\nvec2 calcRepulsive(int i, vec4 currentNode) {\\nivec3 workGroupSize = ivec3(1, 1, 1);\\nivec3 numWorkGroups = ivec3(1, 1, 1);     \\nint globalInvocationIndex = int(floor(v_TexCoord.x * u_OutputTextureSize.x))\\n  + int(floor(v_TexCoord.y * u_OutputTextureSize.y)) * int(u_OutputTextureSize.x);\\nint workGroupIDLength = globalInvocationIndex / (workGroupSize.x * workGroupSize.y * workGroupSize.z);\\nivec3 workGroupID = ivec3(workGroupIDLength / numWorkGroups.y / numWorkGroups.z, workGroupIDLength / numWorkGroups.x / numWorkGroups.z, workGroupIDLength / numWorkGroups.x / numWorkGroups.y);\\nint localInvocationIDZ = globalInvocationIndex / (workGroupSize.x * workGroupSize.y);\\nint localInvocationIDY = (globalInvocationIndex - localInvocationIDZ * workGroupSize.x * workGroupSize.y) / workGroupSize.x;\\nint localInvocationIDX = globalInvocationIndex - localInvocationIDZ * workGroupSize.x * workGroupSize.y - localInvocationIDY * workGroupSize.x;\\nivec3 localInvocationID = ivec3(localInvocationIDX, localInvocationIDY, localInvocationIDZ);\\nivec3 globalInvocationID = workGroupID * workGroupSize + localInvocationID;\\nint localInvocationIndex = localInvocationID.z * workGroupSize.x * workGroupSize.y\\n                + localInvocationID.y * workGroupSize.x + localInvocationID.x;\\nfloat dx = 0.0;\\nfloat dy = 0.0;\\nfor (int j = 0; j < VERTEX_COUNT; j++) {if (i != j) {vec4 nextNode = getDatau_Data(j);\\nfloat xDist = currentNode.x - nextNode.x;\\nfloat yDist = currentNode.y - nextNode.y;\\nfloat dist = ((xDist * xDist) + (yDist * yDist)) + 0.01;\\nfloat param = u_K2 / dist;\\nif (dist > 0.0) {dx += param * xDist;\\ndy += param * yDist;\\nif ((xDist == 0.0) && (yDist == 0.0)) {float sign = (i < j) ? (1.0) : (-1.0);\\ndx += param * sign;\\ndy += param * sign;}}}}\\nreturn vec2(dx, dy);}\\nvec2 calcGravity(vec4 currentNode, vec4 nodeAttributes) {\\nivec3 workGroupSize = ivec3(1, 1, 1);\\nivec3 numWorkGroups = ivec3(1, 1, 1);     \\nint globalInvocationIndex = int(floor(v_TexCoord.x * u_OutputTextureSize.x))\\n  + int(floor(v_TexCoord.y * u_OutputTextureSize.y)) * int(u_OutputTextureSize.x);\\nint workGroupIDLength = globalInvocationIndex / (workGroupSize.x * workGroupSize.y * workGroupSize.z);\\nivec3 workGroupID = ivec3(workGroupIDLength / numWorkGroups.y / numWorkGroups.z, workGroupIDLength / numWorkGroups.x / numWorkGroups.z, workGroupIDLength / numWorkGroups.x / numWorkGroups.y);\\nint localInvocationIDZ = globalInvocationIndex / (workGroupSize.x * workGroupSize.y);\\nint localInvocationIDY = (globalInvocationIndex - localInvocationIDZ * workGroupSize.x * workGroupSize.y) / workGroupSize.x;\\nint localInvocationIDX = globalInvocationIndex - localInvocationIDZ * workGroupSize.x * workGroupSize.y - localInvocationIDY * workGroupSize.x;\\nivec3 localInvocationID = ivec3(localInvocationIDX, localInvocationIDY, localInvocationIDZ);\\nivec3 globalInvocationID = workGroupID * workGroupSize + localInvocationID;\\nint localInvocationIndex = localInvocationID.z * workGroupSize.x * workGroupSize.y\\n                + localInvocationID.y * workGroupSize.x + localInvocationID.x;\\nfloat dx = 0.0;\\nfloat dy = 0.0;\\nfloat vx = currentNode.x - u_Center.x;\\nfloat vy = currentNode.y - u_Center.y;\\nfloat gf = (0.01 * u_K) * u_Gravity;\\ndx = gf * vx;\\ndy = gf * vy;\\nif (u_Clustering == 1.0) {int clusterIdx = int(nodeAttributes.x);\\nvec4 center = getDatau_ClusterCenters(clusterIdx);\\nfloat cvx = currentNode.x - center.x;\\nfloat cvy = currentNode.y - center.y;\\nfloat dist = sqrt((cvx * cvx) + (cvy * cvy)) + 0.01;\\nfloat parma = (u_K * u_ClusterGravity) / dist;\\ndx += parma * cvx;\\ndy += parma * cvy;}\\nreturn vec2(dx, dy);}\\nvec2 calcAttractive(int i, vec4 currentNode) {\\nivec3 workGroupSize = ivec3(1, 1, 1);\\nivec3 numWorkGroups = ivec3(1, 1, 1);     \\nint globalInvocationIndex = int(floor(v_TexCoord.x * u_OutputTextureSize.x))\\n  + int(floor(v_TexCoord.y * u_OutputTextureSize.y)) * int(u_OutputTextureSize.x);\\nint workGroupIDLength = globalInvocationIndex / (workGroupSize.x * workGroupSize.y * workGroupSize.z);\\nivec3 workGroupID = ivec3(workGroupIDLength / numWorkGroups.y / numWorkGroups.z, workGroupIDLength / numWorkGroups.x / numWorkGroups.z, workGroupIDLength / numWorkGroups.x / numWorkGroups.y);\\nint localInvocationIDZ = globalInvocationIndex / (workGroupSize.x * workGroupSize.y);\\nint localInvocationIDY = (globalInvocationIndex - localInvocationIDZ * workGroupSize.x * workGroupSize.y) / workGroupSize.x;\\nint localInvocationIDX = globalInvocationIndex - localInvocationIDZ * workGroupSize.x * workGroupSize.y - localInvocationIDY * workGroupSize.x;\\nivec3 localInvocationID = ivec3(localInvocationIDX, localInvocationIDY, localInvocationIDZ);\\nivec3 globalInvocationID = workGroupID * workGroupSize + localInvocationID;\\nint localInvocationIndex = localInvocationID.z * workGroupSize.x * workGroupSize.y\\n                + localInvocationID.y * workGroupSize.x + localInvocationID.x;\\nfloat dx = 0.0;\\nfloat dy = 0.0;\\nint arr_offset = int(floor(currentNode.z + 0.5));\\nint length = int(floor(currentNode.w + 0.5));\\nvec4 node_buffer;\\nfor (int p = 0; p < MAX_EDGE_PER_VERTEX; p++) {if (p >= length) {break;}\\nint arr_idx = arr_offset + int(p);\\nint buf_offset = arr_idx - ((arr_idx / 4) * 4);\\nif ((p == 0) || (buf_offset == 0)) {node_buffer = getDatau_Data(int(arr_idx / 4));}\\nfloat float_j = (buf_offset == 0) ? (node_buffer.x) : ((buf_offset == 1) ? (node_buffer.y) : ((buf_offset == 2) ? (node_buffer.z) : (node_buffer.w)));\\nvec4 nextNode = getDatau_Data(int(float_j));\\nfloat xDist = currentNode.x - nextNode.x;\\nfloat yDist = currentNode.y - nextNode.y;\\nfloat dist = sqrt((xDist * xDist) + (yDist * yDist)) + 0.01;\\nfloat attractiveF = dist / u_K;\\nif (dist > 0.0) {dx -= xDist * attractiveF;\\ndy -= yDist * attractiveF;\\nif ((xDist == 0.0) && (yDist == 0.0)) {float sign = (i < int(float_j)) ? (1.0) : (-1.0);\\ndx -= sign * attractiveF;\\ndy -= sign * attractiveF;}}}\\nreturn vec2(dx, dy);}\\nvoid main() {\\nivec3 workGroupSize = ivec3(1, 1, 1);\\nivec3 numWorkGroups = ivec3(1, 1, 1);     \\nint globalInvocationIndex = int(floor(v_TexCoord.x * u_OutputTextureSize.x))\\n  + int(floor(v_TexCoord.y * u_OutputTextureSize.y)) * int(u_OutputTextureSize.x);\\nint workGroupIDLength = globalInvocationIndex / (workGroupSize.x * workGroupSize.y * workGroupSize.z);\\nivec3 workGroupID = ivec3(workGroupIDLength / numWorkGroups.y / numWorkGroups.z, workGroupIDLength / numWorkGroups.x / numWorkGroups.z, workGroupIDLength / numWorkGroups.x / numWorkGroups.y);\\nint localInvocationIDZ = globalInvocationIndex / (workGroupSize.x * workGroupSize.y);\\nint localInvocationIDY = (globalInvocationIndex - localInvocationIDZ * workGroupSize.x * workGroupSize.y) / workGroupSize.x;\\nint localInvocationIDX = globalInvocationIndex - localInvocationIDZ * workGroupSize.x * workGroupSize.y - localInvocationIDY * workGroupSize.x;\\nivec3 localInvocationID = ivec3(localInvocationIDX, localInvocationIDY, localInvocationIDZ);\\nivec3 globalInvocationID = workGroupID * workGroupSize + localInvocationID;\\nint localInvocationIndex = localInvocationID.z * workGroupSize.x * workGroupSize.y\\n                + localInvocationID.y * workGroupSize.x + localInvocationID.x;\\nint i = globalInvocationID.x;\\nvec4 currentNode = getDatau_Data(i);\\nfloat dx = 0.0;\\nfloat dy = 0.0;\\nif (i >= VERTEX_COUNT) {gl_FragColor = vec4(currentNode);\\nreturn ;}\\nvec4 nodeAttributes = getDatau_AttributeArray(i);\\nif ((nodeAttributes.y != 0.0) && (nodeAttributes.z != 0.0)) {gl_FragColor = vec4(vec4(nodeAttributes.y, nodeAttributes.z, currentNode.z, currentNode.w));\\nreturn ;}\\nvec2 repulsive = calcRepulsive(i, currentNode);\\ndx += repulsive.x;\\ndy += repulsive.y;\\nvec2 attractive = calcAttractive(i, currentNode);\\ndx += attractive.x;\\ndy += attractive.y;\\nvec2 gravity = calcGravity(currentNode, nodeAttributes);\\ndx -= gravity.x;\\ndy -= gravity.y;\\ndx *= u_Speed;\\ndy *= u_Speed;\\nfloat distLength = sqrt((dx * dx) + (dy * dy));\\nif (distLength > 0.0) {float limitedDist = min(u_MaxDisplace * u_Speed, distLength);\\ngl_FragColor = vec4(vec4(currentNode.x + ((dx / distLength) * limitedDist), currentNode.y + ((dy / distLength) * limitedDist), currentNode.z, currentNode.w));}if (gWebGPUDebug) {\\n  gl_FragColor = gWebGPUDebugOutput;\\n}}\\n"},"context":{"name":"","dispatch":[1,1,1],"threadGroupSize":[1,1,1],"maxIteration":1,"defines":[{"name":"MAX_EDGE_PER_VERTEX","type":"Float","runtime":true},{"name":"VERTEX_COUNT","type":"Float","runtime":true}],"uniforms":[{"name":"u_Data","type":"vec4<f32>[]","storageClass":"StorageBuffer","readonly":false,"writeonly":false,"size":[1,1]},{"name":"u_K","type":"Float","storageClass":"Uniform","readonly":true,"writeonly":false,"size":[1,1]},{"name":"u_K2","type":"Float","storageClass":"Uniform","readonly":true,"writeonly":false,"size":[1,1]},{"name":"u_Center","type":"vec2<f32>","storageClass":"Uniform","readonly":true,"writeonly":false,"size":[1,1]},{"name":"u_Gravity","type":"Float","storageClass":"Uniform","readonly":true,"writeonly":false,"size":[1,1]},{"name":"u_ClusterGravity","type":"Float","storageClass":"Uniform","readonly":true,"writeonly":false,"size":[1,1]},{"name":"u_Speed","type":"Float","storageClass":"Uniform","readonly":true,"writeonly":false,"size":[1,1]},{"name":"u_MaxDisplace","type":"Float","storageClass":"Uniform","readonly":true,"writeonly":false,"size":[1,1]},{"name":"u_Clustering","type":"Float","storageClass":"Uniform","readonly":true,"writeonly":false,"size":[1,1]},{"name":"u_AttributeArray","type":"vec4<f32>[]","storageClass":"StorageBuffer","readonly":true,"writeonly":false,"size":[1,1]},{"name":"u_ClusterCenters","type":"vec4<f32>[]","storageClass":"StorageBuffer","readonly":true,"writeonly":false,"size":[1,1]}],"globalDeclarations":[],"output":{"name":"u_Data","size":[1,1],"length":1},"needPingpong":true}}`;
-
-export const clusterCode = `
-import { globalInvocationID } from 'g-webgpu';
-const VERTEX_COUNT;
-const CLUSTER_COUNT;
-@numthreads(1, 1, 1)
-class CalcCenter {
-  @in
-  u_Data: vec4[];
-  @in
-  u_NodeAttributes: vec4[]; // [[clusterIdx, 0, 0, 0], ...]
-  @in @out
-  u_ClusterCenters: vec4[]; // [[cx, cy, nodeCount, clusterIdx], ...]
-  @main
-  compute() {
-    const i = globalInvocationID.x;
-    const center = this.u_ClusterCenters[i];
-    let sumx = 0;
-    let sumy = 0;
-    let count = 0;
-    for (let j = 0; j < VERTEX_COUNT; j++) {
-      const attributes = this.u_NodeAttributes[j];
-      const clusterIdx = int(attributes[0]);
-      const vertex = this.u_Data[j];
-      if (clusterIdx == i) {
-        sumx += vertex.x;
-        sumy += vertex.y;
-        count += 1;
-      }
-    }
-    this.u_ClusterCenters[i] = [
-      sumx / count,
-      sumy / count,
-      count,
-      i
-    ];
-  }
-}
-`;
-
-export const clusterBundle = `{"shaders":{"WGSL":"","GLSL450":"","GLSL100":"\\n\\nfloat epsilon = 0.00001;\\nvec2 addrTranslation_1Dto2D(float address1D, vec2 texSize) {\\n  vec2 conv_const = vec2(1.0 / texSize.x, 1.0 / (texSize.x * texSize.y));\\n  vec2 normAddr2D = float(address1D) * conv_const;\\n  return vec2(fract(normAddr2D.x + epsilon), normAddr2D.y);\\n}\\n\\nvoid barrier() {}\\n  \\n\\nuniform vec2 u_OutputTextureSize;\\nuniform int u_OutputTexelCount;\\nvarying vec2 v_TexCoord;\\n\\nbool gWebGPUDebug = false;\\nvec4 gWebGPUDebugOutput = vec4(0.0);\\n\\n#define VERTEX_COUNT __DefineValuePlaceholder__VERTEX_COUNT\\n#define CLUSTER_COUNT __DefineValuePlaceholder__CLUSTER_COUNT\\n\\nuniform sampler2D u_Data;\\nuniform vec2 u_DataSize;\\nvec4 getDatau_Data(vec2 address2D) {\\n  return vec4(texture2D(u_Data, address2D).rgba);\\n}\\nvec4 getDatau_Data(float address1D) {\\n  return getDatau_Data(addrTranslation_1Dto2D(address1D, u_DataSize));\\n}\\nvec4 getDatau_Data(int address1D) {\\n  return getDatau_Data(float(address1D));\\n}\\nuniform sampler2D u_NodeAttributes;\\nuniform vec2 u_NodeAttributesSize;\\nvec4 getDatau_NodeAttributes(vec2 address2D) {\\n  return vec4(texture2D(u_NodeAttributes, address2D).rgba);\\n}\\nvec4 getDatau_NodeAttributes(float address1D) {\\n  return getDatau_NodeAttributes(addrTranslation_1Dto2D(address1D, u_NodeAttributesSize));\\n}\\nvec4 getDatau_NodeAttributes(int address1D) {\\n  return getDatau_NodeAttributes(float(address1D));\\n}\\nuniform sampler2D u_ClusterCenters;\\nuniform vec2 u_ClusterCentersSize;\\nvec4 getDatau_ClusterCenters(vec2 address2D) {\\n  return vec4(texture2D(u_ClusterCenters, address2D).rgba);\\n}\\nvec4 getDatau_ClusterCenters(float address1D) {\\n  return getDatau_ClusterCenters(addrTranslation_1Dto2D(address1D, u_ClusterCentersSize));\\n}\\nvec4 getDatau_ClusterCenters(int address1D) {\\n  return getDatau_ClusterCenters(float(address1D));\\n}\\nvoid main() {\\nivec3 workGroupSize = ivec3(1, 1, 1);\\nivec3 numWorkGroups = ivec3(1, 1, 1);     \\nint globalInvocationIndex = int(floor(v_TexCoord.x * u_OutputTextureSize.x))\\n  + int(floor(v_TexCoord.y * u_OutputTextureSize.y)) * int(u_OutputTextureSize.x);\\nint workGroupIDLength = globalInvocationIndex / (workGroupSize.x * workGroupSize.y * workGroupSize.z);\\nivec3 workGroupID = ivec3(workGroupIDLength / numWorkGroups.y / numWorkGroups.z, workGroupIDLength / numWorkGroups.x / numWorkGroups.z, workGroupIDLength / numWorkGroups.x / numWorkGroups.y);\\nint localInvocationIDZ = globalInvocationIndex / (workGroupSize.x * workGroupSize.y);\\nint localInvocationIDY = (globalInvocationIndex - localInvocationIDZ * workGroupSize.x * workGroupSize.y) / workGroupSize.x;\\nint localInvocationIDX = globalInvocationIndex - localInvocationIDZ * workGroupSize.x * workGroupSize.y - localInvocationIDY * workGroupSize.x;\\nivec3 localInvocationID = ivec3(localInvocationIDX, localInvocationIDY, localInvocationIDZ);\\nivec3 globalInvocationID = workGroupID * workGroupSize + localInvocationID;\\nint localInvocationIndex = localInvocationID.z * workGroupSize.x * workGroupSize.y\\n                + localInvocationID.y * workGroupSize.x + localInvocationID.x;\\nint i = globalInvocationID.x;\\nvec4 center = getDatau_ClusterCenters(i);\\nfloat sumx = 0.0;\\nfloat sumy = 0.0;\\nfloat count = 0.0;\\nfor (int j = 0; j < VERTEX_COUNT; j++) {vec4 attributes = getDatau_NodeAttributes(j);\\nint clusterIdx = int(attributes.x);\\nvec4 vertex = getDatau_Data(j);\\nif (clusterIdx == i) {sumx += vertex.x;\\nsumy += vertex.y;\\ncount += 1.0;}}\\ngl_FragColor = vec4(vec4(sumx / count, sumy / count, count, i));if (gWebGPUDebug) {\\n  gl_FragColor = gWebGPUDebugOutput;\\n}}\\n"},"context":{"name":"","dispatch":[1,1,1],"threadGroupSize":[1,1,1],"maxIteration":1,"defines":[{"name":"VERTEX_COUNT","type":"Float","runtime":true},{"name":"CLUSTER_COUNT","type":"Float","runtime":true}],"uniforms":[{"name":"u_Data","type":"vec4<f32>[]","storageClass":"StorageBuffer","readonly":true,"writeonly":false,"size":[1,1]},{"name":"u_NodeAttributes","type":"vec4<f32>[]","storageClass":"StorageBuffer","readonly":true,"writeonly":false,"size":[1,1]},{"name":"u_ClusterCenters","type":"vec4<f32>[]","storageClass":"StorageBuffer","readonly":false,"writeonly":false,"size":[1,1]}],"globalDeclarations":[],"output":{"name":"u_ClusterCenters","size":[1,1],"length":1},"needPingpong":true}}`;