12/14

githubのprojectよいね。メモに使える。githubの使い方も勉強しなきゃなあ。

「Webフロントエンドハイパフォーマンスチューニング」を読み始めた。

Three.js

球状に配置

球座標系のx,y,zの求め方を忘れてしまっていたので、理解を深めた。
https://www.koh-fukuzawa.jp/3159c33028d

ease-outの式

これは流石に暗記か。まあスニペットとうろくすりゃいんだけど。

tが0~1をlinearに移動するとする。
tをease-outにしたいとすると。

1.0 - (1.0 - t)²

2乗のところは別になんでもよい。

ease-inは普通にt²

パーティクルアニメーションの注意

glslでパーティクルの大きさを変えていると、0にしても残り続けているように見えることがある。

もうしょうがない。以下のように対応

if(gl_PointSize < 1.0) {
 gl_Position = vec4(999.9);
}

Three.js manual

three.jsのmanualを読み始めた。これ本当のチュートリアルだから一番最初に読むべきなんだけどね。

途中まで読んで、threejs journey行ったんだよね。

基礎の振り返りになって良い。また、簡単というわけでもなく、有用。

前提知識のとこのオブジェクトのループとか、知らなかったしね。for-inでやろうとしていた。

//オブジェクトのループのベストプラクティス？
for(const [key, value] of Object.entries(obj)) {
}

Object.entriesはオブジェクトの列挙可能な固有プロパティのキー/値の配列を返します。

const obj = {a: "hoge", b: "moge"}
console.log(Object.entries(obj)); // [["a", "hoge"], ["b","moge"]]

立方体に全面texture

BoxGeometryは、materialが6つはいっているmaterials配列をMeshに渡せる。
これだけで全面違うmaterialにできる。すごい。

本を作る時、1枚の紙を作るのに2つのplaneを重ねた記憶あり。
planeGeometryでも2つのmaterial配列行けるかなと思い、試してみてもだめだった。

テクスチャのメモリ使用

やばいやばい。知らなかった。

一般的にテクスチャは幅 * 高さ * 4 * 1.33バイトのThree.jsのメモリを使用している。

たった150kのテクスチャがあるとする。速くダウンロードすることができる。
しかし、 ピクセルだと3024 x 3761の大きさだとすると、
3024 * 3761 * 4 * 1.33 = 60505764.5
となり、three.jsの60メガのメモリを消費し、メモリリークの原因となる。（公式より）

つまりテクスチャは、メモリだけでなく、幅・高さも小さくしなければならない。

アニメーション練習

https://site-training-zeta.vercel.app/site3

gsap splittextなしでspanわけと、reactでの@keyframeアニメーションとか。

久しぶりに昔ながらの方法でやったけど、結構忘れかけててやばかった。

tailwindでの作法や子要素にクラス当てたい時も忘れてたので一応

// index.cssにて
@theme {
 --animate-color-shift: colorShift 3s linear infinite;

 @keyframes colorShift {
  0% {
   filter: hue-rotate(0deg);
  }
  100% {
   filter: hue-rotate(360deg);
  }
 }
}

// 子要素に当てたい時
<p className="[&>span]:animate-color-shift">
</p>

締め

three.jsテクスチャのメモリ使用については、目からウロコだった。
ただ容量を小さくしていただけじゃだめだったんだな〜

I was shocked by memory usage of three.js textures.
I realized that just reducing the file size isn't enough.