1/17

日記

2026/01/17

review

復習

CatmullRomCurve

current、0.4, 0.8　みたいに、徐々に補完するほうがきれいに見えると思ったけど、実際はcurrent, 0.1, 0.9にしたらよく見える理由。

CatmullRomCurve は、点列をただ結ぶだけでなく、前後の点の並び（間隔・方向）から“曲がり具合”を決めます。
ここで 0.1 と 0.9にすると、各区間の端に点が“密集”します。するとカーブ生成側から見ると、
端点付近は「ほぼ直線方向が確定している点が近くにある」状態になり
角で急に大きく曲がる自由度が減る（＝丸まりすぎ・膨らみすぎが起きにくい）
- 一方で 0.4 / 0.8みたいに中ほどに寄せると、端点近くの“拘束”が弱くなりやすく、曲線としては
  角をより大きく丸める
  曲がりが強い場所で ショートカット気味になったり、場合によっては 外に膨らむ

英語

got it って I got it と You got it の2通りあるみたい。。。 Like I care!

「I got it」：相手の言ったことを理解できた時の「分かりました」
「You got it」：相手の頼み事や依頼を承諾する時の「了解しました」

Three.js オフスクリーンピッキング

先日わからなかったオフスクリーンレイキャストをやっているが、奇しくも昨日やったwaterのheightmapをcpuテクスチャに戻す作業にかなり似通ったところがある。

やること：ピッキング（当たり判定）するための“専用シーン”を1pxだけ描画して、その1pxの色から選択オブジェクトを特定する

色

オフスクリーンでID用の色を描いてピッキングする。（色をID用途で使用する）

ただmaterial({color:})で実装すると、色がレンダリング途中で変換されるとIDが壊れる、ライト計算の影響で色が変わる。
なので以下のようにして

NoColorSpaceで余計な変換でRGBが変わるのを避ける。
照明に左右されない一定成分である「emissive」を使う。

const pickingMaterial = new THREE.MeshPhongMaterial({
 emissive: new THREE.Color().setHex(id, THREE.NoColorSpace),
 color: new THREE.Color(0, 0, 0),
 specular: new THREE.Color(0, 0, 0),
 map: this.texture,
 transparent: true,
 side: THREE.DoubleSide,
 alphaTest: 0.5,
 blending: THREE.NoBlending,
});

setViewOffset

camera.setViewOffset(fullW, fullH, x, y, 1, 1) で
画面全体のうち、(x,y) の 1×1 の領域だけを見るカメラに一時的にする。

そしてsetRenderTarget → renderで描画、

readRenderTargetPixelsでバッファに出力し、そのidから実際のシーンのメッシュを復元する。

rgb → id

pixelBufferはr,g,b,a

const id =
 (this.pixelBuffer[0] << 16) |
 (this.pixelBuffer[1] << 8) |
 (this.pixelBuffer[2]);

一つにつき256通り = 8左へ移動させ、| で合成

デザイン

ポラロイド風：　ポラロイドとは、写真を取ったら出てくるやつ。チェキみたいなやつ。
プレーンすぎるものをそういうフレームにいれたら楽しい感じになるかも
背景色が同じなセクションが続いて間延びするのを防ぐ
半端な位置に背景色を変えている感じのものは、その背景色の境で一体となっている情報を分断しないようにする。
そして、それは画像の端とかにある物体でもその分断は起こり得る。

うわー違和感を言葉にしていく感じがすごい。