12/24

今日で旅行に行ってやる気になってからちょうど一ヶ月。
日記の更新や、諸々のあたらしいルーティンなども一ヶ月はやっていることになる。
毎月24日と 10日くらいは前一ヶ月の復習に使おう。

ということで、午前はobsidianと日記帳を見返して復習した。

次一ヶ月やること

• 日記帳継続
• webハイパフォーマンスチューニング一周目読破
• 日記帳見直し - ISR化したい
• 日記帳PWA化
• Three.js journey shader終了（3周目）・manual終了
• サイト模写数個
• wp-headless終了
• エンジニアの卵たち向け日記webアプリ開発

Three.js

WobblyのIndexの最適化について

日記を見直していて、ここの理解が浅いと思ったので。多分何度か引っかかると思う。

import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';

geometry = BufferGeometryUtils.mergeVertices(geometry);

デフォルトでは、indexはデフォルトで最適化されている。
上のように書いて何が変わるかというと、面をまたぐような頂点も同一化するらしい。

morph例

ポートフォリオでも使ったパーティクル移動を久しぶりに実装。

教訓は、ノイズとかはglslで使い回せるのでjs側でなくsimplexNoiseとかを使うと良いかも。

fog - manual

materialにfogプロパティがあり、booleanを受け取る。
fogを受け取るかどうかを指定できるわけだ。家からの視点だと、家の中はfogを受け取らないが、風景はfogをするとか。

Scripting実行 パフォーマンス最適化

UIスレッド（メインスレッド）

JSの実行はWebWorkers/ServiceWorkersを除いては、必ずUIスレッド上で実行される。
UIスレッドとは、ブラウザのUIに関数処理を行うスレッド。ブラウザの１つのタブにつき１つ存在する。
JSの実行に限らず、レイアウトの計算やレンダリング処理、DOMイベントのハッカも行う。

なので、これらの処理はお互いにブロックしうる。

JSのボトルネックの特定

フレーム通して、パフォーマンス解析をするならばまずPerformanceパネルでプロファイルを取る。

黄色がJSの実行。赤い箇所は警告。
画像で見えていないが下に「メイン」という欄があり、多分これがメインスレッドかな。

本来メインには関数名が書かれているけど、バンドルツールでミニファイされてるからわからん。

JSはメモリを解放するガベージコレクションという機能が備わっているが、その際カクつく。メインスレッドに黄色で表示される。多かったら、毎フレーム実行される関数を見直すとよいかも

メモリリーク

誤って参照を持っていたりしてGCで解放されるべきメモリを保持し続けちゃうことをメモリリークと呼ぶ。
メモリにチェックをつけると↓

上の図は2~30秒くらい観測した例。下の「JSヒープ」の波に注目。
ガクッと下がっているのはGCのメモリ解放。だいたい同じ位置に下がっているので、きちんとメモリ解放できている。

メモリリークを起こしていると、右肩上がりになるらしい。
検証ツールのメモリタブをうまく使うことで、メモリリークの原因の特定が可能。

また、console.logで出力された値やオブジェクトはガベージコレクションされない。メモリリークする。

DOMリーク

img要素のデータもメモリから解放されなくなるので注意

「Node数」グラフで確認

wp-headless再開

shadcn拡張機能で追加とからくらく

colorに「muted」 がデフォルトで登録されるので使っていく。

感想

カフェ行ってニトリで加湿器買ってイオン行って勉強した。
子供の頃はイオンとかクリスマスだともっと賑わっているイメージだったけど、全然普段通りだった。
子供フィルターかな。なんかあの雰囲気がすきだった気がするが。。。

加湿器を買った。電化製品を「店舗で」買ったのは多分人生初。憧れのニトリ。最高に部屋が潤った。いいね。

I bought a humidifier. this is probably the first time I've ever bought an appliance in a physical store. My dream Nitori. my room feels so moisturized now. Nice.