three.js, WebGPU에서 지오메트리를 구성하는 좌표에 파티클 배치하기

위의 결과를 위해서 3가지 방식이 있습니다. 첫번째는 …

private setupModel() {
  const knotGeometry = new THREE.TorusKnotGeometry(1, 0.3, 256, 64);
  const positionAttribute = knotGeometry.attributes.position;
  const count = positionAttribute.count;

  const instancePositions = new Float32Array(count * 3);
  for (let i = 0; i < count; i++) {
    instancePositions[i * 3] = positionAttribute.getX(i);
    instancePositions[i * 3 + 1] = positionAttribute.getY(i);
    instancePositions[i * 3 + 2] = positionAttribute.getZ(i);
  }

  const spriteMaterial = new THREE.SpriteNodeMaterial({
    transparent: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending
  });

  const dist = uv().distance(vec2(0.5, 0.5));
  const alphaNode = dist.smoothstep(0.5, 0.0);

  spriteMaterial.colorNode = color(0xff0000);
  spriteMaterial.opacityNode = alphaNode;

  const instancePositionNode = instancedBufferAttribute(
    new THREE.InstancedBufferAttribute(instancePositions, 3)
  );

  spriteMaterial.positionNode = instancePositionNode;
  spriteMaterial.scaleNode = vec2(.05);

  // const spriteGeometry = new THREE.PlaneGeometry(0.08, 0.08);
  // const instancedSprites = new THREE.Mesh(spriteGeometry, spriteMaterial);
  const instancedSprites = new THREE.Sprite(spriteMaterial); // 상기 코드와 동일
  instancedSprites.count = count;

  this.scene.add(instancedSprites);
}

두번째 방식은 ...

private setupModel() {
  const knotGeometry = new THREE.TorusKnotGeometry(1, 0.3, 256, 64);
  const positionAttribute = knotGeometry.attributes.position;
  const count = positionAttribute.count; // 정점 개수

  const spriteMaterial = new THREE.SpriteNodeMaterial({
    transparent: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending
  });

  const dist = uv().distance(vec2(0.5, 0.5));
  const alphaNode = dist.smoothstep(0.5, 0.0);

  spriteMaterial.colorNode = color(0xff0000);
  spriteMaterial.opacityNode = alphaNode;
  spriteMaterial.vertexNode = billboarding({
    horizontal: true,
    vertical: true,
    horizontalRotation: false
  });

  const spriteGeometry = new THREE.PlaneGeometry(0.05, 0.05);
  const instancedSprites = new THREE.InstancedMesh(spriteGeometry, spriteMaterial, count);

  const dummy = new THREE.Object3D();
  const vertex = new THREE.Vector3();

  for (let i = 0; i < count; i++) {
    vertex.fromBufferAttribute(positionAttribute, i);

    dummy.position.copy(vertex);
    dummy.updateMatrix();

    instancedSprites.setMatrixAt(i, dummy.matrix);
  }
  instancedSprites.instanceMatrix.needsUpdate = true;

  this.scene.add(instancedSprites);
}

세번째 방식은 다음과 같습니다.

private setupModel() {
  const knotGeometry = new THREE.TorusKnotGeometry(1, 0.3, 256, 64);
  const positionAttr = knotGeometry.attributes.position;
  const count = positionAttr.count;

  const positionArray = new Float32Array(count * 3);
  for (let i = 0; i < count; i++) {
    positionArray[i * 3] = positionAttr.getX(i);
    positionArray[i * 3 + 1] = positionAttr.getY(i);
    positionArray[i * 3 + 2] = positionAttr.getZ(i);
  }

  const positionStorageBuffer = new THREE.StorageBufferAttribute(positionArray, 3);
  const positionStorageNode = storage(positionStorageBuffer, 'vec3', count);

  const spriteMaterial = new THREE.SpriteNodeMaterial({
    transparent: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending
  });

  const dist = uv().distance(vec2(0.5, 0.5));
  const alphaNode = dist.smoothstep(0.5, 0.0);

  spriteMaterial.colorNode = color(0xff0000);
  spriteMaterial.opacityNode = alphaNode;

  spriteMaterial.positionNode = positionStorageNode.element(THREE.TSL.instanceIndex);

  const spriteGeometry = new THREE.PlaneGeometry(0.08, 0.08);
  const instancedSprites = new THREE.Mesh(spriteGeometry, spriteMaterial);

  instancedSprites.count = count;

  this.scene.add(instancedSprites);
}