Method buildConnections

assets/main.js:2626–2676

()

  }

  buildConnections() {
    this.maxConnectionWeightMagnitude = 0;
    const connectionRadius = this.options.connectionRadius ?? 0.005;
    const baseGeometry = new THREE.CylinderGeometry(connectionRadius, connectionRadius, 1, 10, 1, true);
    const material = new THREE.MeshLambertMaterial();
    // Do not set vertexColors explicitly; instancing color works independently

    this.mlp.layers.forEach((layer, layerIndex) => {
      const { selected, maxAbsWeight } = this.findImportantConnections(layer);
      if (Number.isFinite(maxAbsWeight) && maxAbsWeight > this.maxConnectionWeightMagnitude) {
        this.maxConnectionWeightMagnitude = maxAbsWeight;
      }
      if (!selected.length) return;

      // Clone geometry per mesh so instanceColor can be bound independently
      const mesh = new THREE.InstancedMesh(baseGeometry.clone(), material.clone(), selected.length);
      mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
      const colorAttribute = new THREE.InstancedBufferAttribute(new Float32Array(selected.length * 3), 3);
      colorAttribute.setUsage(THREE.DynamicDrawUsage);
      mesh.instanceColor = colorAttribute;

      selected.forEach((connection, instanceIndex) => {
        const sourcePosition = this.layerMeshes[layerIndex].positions[connection.sourceIndex];
        const targetPosition = this.layerMeshes[layerIndex + 1].positions[connection.targetIndex];
        const direction = targetPosition.clone().sub(sourcePosition);
        const length = direction.length();
        const midpoint = sourcePosition.clone().addScaledVector(direction, 0.5);

        this.tempObject.position.copy(midpoint);
        const quaternion = new THREE.Quaternion().setFromUnitVectors(
          new THREE.Vector3(0, 1, 0),
          direction.clone().normalize(),
        );
        this.tempObject.scale.set(1, length, 1);
        this.tempObject.quaternion.copy(quaternion);
        this.tempObject.updateMatrix();
        mesh.setMatrixAt(instanceIndex, this.tempObject.matrix);
        mesh.setColorAt(instanceIndex, this.tempColor.setRGB(1, 1, 1));
      });

      mesh.instanceMatrix.needsUpdate = true;
      mesh.instanceColor.needsUpdate = true;
      this.scene.add(mesh);
      this.connectionGroups.push({
        mesh,
        connections: selected,
        sourceLayer: layerIndex,
        maxAbsWeight,
      });
    });
  }

  disposeConnectionMeshes() {
    this.connectionGroups.forEach((group) => {