3/11

2026/03/11

Three.js

https://three-training2.vercel.app/src/examples/58-gpgpu-particle-types/index.html

これを理解する。

Canvasのピクセル情報を配列として取り出す

const imageData = context.getImageData(x, y, width, height).data;

これでそれまでにcanvasに書かれた全部のピクセル情報（RGBA）を取得できる。
長さはwidth*height*4の配列。

最初のgpuComputationRenderer用fill

positionとcolorを扱う。

const pixelCount = imageData.length / 4; // imageDataの個数
const activePositions = [];
const activeColors = [];

for(let i = 0; i < pixelCount; i++) {
  // imageDataに何も入っていない箇所を除外
  const i4 = i * 4;
  const alpha = imageData[i4 * 3];
  if(alpha === 0) continue;

  // activePositions, activeColors配列に、imageDataに入っているところを入れる。
}

その後、gpuCompute.createTextureしたものにactivePositions,activeColorsを割り当てる。

その時、シャッフルして割り当てる。なぜかは今のところ謎。

時間とともに減衰するポインターの強さ

いままでcanvasTextureで操作するときは、前の位置と現在の位置を見比べて、同じだったら強さを0にするみたいな感じだった。

以下のようにするともっと簡単に減衰できおる。

onPointerEvents() {
 this.pointerActive = 1;
}

update() {
 this.pointerActive *= 0.9
}

gpucompute勘違い

addVariableに書いた依存の中のものは多分shader側で使えるようになるんだ。
自分の前回の値だけかと思っていた。

粒子を「A」にする

2dcanvasをcreate, context.fillText("A", x, y);　で文字を書く
canvasTexture(canvas),そしてつくったテクスチャをfragmentにわたす。

3. particleのfragmentでこうする

vec4 glyph = texture2D(pointTexture, uv);
vec4 color = glyph * vColor;
if (color.a <= 0.0) discard;

zustand

useStore.getState()
「今この瞬間の値を1回読む」だけ
useStore.subscribe(...)
「値が変わるたびにコールバックを実行する」

内省

ポートフォリオ制作を初めた。なかなかおもしろい構成思いついて、自分の想像をそれ通り3dで作れるか楽しみ。

‹

3/10

日記

2026/03/10