1/3

2026/01/03

復習

動画スクロールアニメーションについて

Retinaディスプレイで見たら画像が小さく表示されていた。

pixelRatioを掛けているのに描画座標が通常サイズのため、画像が小さく表示された。ctx.scale(pixelRatio, pixelRatio)で座標系を調整する必要がある。

const pixelRatio = window.devicePixelRatio;
canvas.width = window.innerWidth * pixelRatio;
canvas.height = window.innerHeight * pixelRatio;
canvas.style.width = ${window.innerWidth}px;
canvas.style.height = ${window.innerHeight}px;

// 座標系をスケールして、通常の座標で描画できるようにする
ctx.scale(pixelRatio, pixelRatio);

TSL

いいこと考えた。TSL勉強して、今までやったことやり直したら勉強にも復習にもなって一石二鳥や。

Three.js

ジオメトリの合成

gpgpu練習にて、モデルに複数あるジオメトリを一つのbufferGeometryに合成したい時があった。

BufferGeometryUtils.mergeGeometries([])を使う。

const geometries: THREE.BufferGeometry[] = [];
model.scene.traverse((child: THREE.Mesh) => {
  if (child instanceof THREE.Mesh && child.geometry) {
    const geometry = child.geometry.clone();
    geometry.applyMatrix4(child.matrixWorld);
    geometries.push(geometry);
  }
});
const geo = BufferGeometryUtils.mergeGeometries(geometries);
geo.scale(20, 20, 20);

applyMatrix4()部分について
GLBモデルでは、メッシュが親のGroupやTransformの影響を受けて配置・回転・スケールされる。ジオメトリの頂点はローカル座標（メッシュ自身の座標系）で保存されている。
matrixWorldは親の変換も含むメッシュのワールド変換行列。
なのでこの部分でローカル座標をワールド座標に変換する。
scaleについて
小さいので大きくしてあげた。これで変換された。

感想

何も頭に入りそうになかったので映画見に行った。ポップコーンあんなに不味かったっけ。

Nothing seemed to stick in my head, so I went to see a movie. Was that popcorn so terrible?

‹

1/2

日記

2026/01/02

›

1/4

日記

2026/01/04