4/4
2026/04/04
Three.js particle-love
positionとpositionFlip?
- パーティクルに見えるが、三角形を描画している
- 正三角形の頂点座標をanglesで先に計算
- シェーダー側でflipRatioを変えて、固定された属性であるpositionとpositionFliipをブレンドする。同じ粒子で三角形の向き・形が反転する
- 毎フレーム
^= 1で、0と1を毎フレーム入れ替えている。(XOR)
なぜPointsではなく三角形か
- 見た目
三角形なら頂点をずらして形を変えられるので、粒というより薄い帯・煙に近いシルエットにしやすい。 - 影
Pointsでは厚みがないので影がつかないが、三角形にcastShadowとか付けれる。
Pointsよりもリッチな見た目ということか。
クラスのstatic
ポートフォリオ作っていて思ったが、使いづらい。デバイスによって数を変えたりというのが面倒。クラス外に出した方がやりやすいかな。
ピンポンバッファ
GPUComputationRendererが内部でやっていた、ShaderMaterialの作成もしなければならない。
resolutionも自分でuniform送ってやる。
マテリアルは2つ作る必要あり。テクスチャをそのまま別のレンダーターゲットに書き込むためのシェーダーマテリアル。
シミュレーションはせず、テクスチャをRTにコピーするだけのコピーパス用。
RenderTargetのTypeの種類
忘れてる。復習。
UnsignedByteType（デフォルト） | FloatType | HalfFloatType | |
|---|---|---|---|
内容 | 0〜255 の 8bit 整数 → 通常 0〜1 に正規化 | 32bit 浮動小数（単精度） | 16bit 浮動小数（半精度） |
メリット | どの環境でも軽くて速い | 位置・速度のような連続値をそのまま書ける | 浮動小数で、バイト型より広いレンジ |
デメリット | 小数・大きい数・負の数を正確に持てない | メモリ増えがち | FloatType より精度は落ちる |
RenderTargetはParticleでは位置と寿命を持つ。
これは負の数、大きい数、小数をもつのでFloatType。（HalfFloatTypeでも可）
内省
自分がC++とか勉強初めることを考えたら、少しワクワクすることを発見。
いろんな言語学んでみたいなあ。色々な都合から無理なんだけど。将来的にはだな。
最近、大器晩成列伝やら宇宙兄弟やら、挑戦する勇気をもらえる作品を見ることが多い。
たまたまなんだけども。
天才じゃなくても人生勉強かー。
Even if I'm not a genius, I'll keep learning my whole life.