Portfolio

ポートフォリオを一から作り直しました。
前回は自分の部屋を3Dにしたものでしたが、今回は自分の机をそのまま3Dにしています。
前のポートフォリオの記事からちょうど1年くらいですね。w

3D表示

3D表示を押すと、こんな感じで自分の作業デスクが表示されます。

机の上の4画面(32インチ / 24インチ / iPad / iPhone)には、画像を貼っているわけではなく、
本物のReactのアプリをそのまま映しています。なので触れます。w

遊び心

自分の机

一番のこだわりは、自分が実際に使っている机をそのまま再現したところですね。
モニターも、キーボードも、iPadも、実物に寄せて作っています。
キーボードはタイピングに合わせて1キーずつ沈みます。※ 誰も気づかないと思うけど。w
Blenderと睨めっこしている時間が、一番長かったかもしれません。。。

VS Codeの中のChat

24インチのモニターに映しているVS Codeですが、ターミナルが動きます。
chatと打つと、AIと話せるようになっています。
このPlogのチャットと同じようなノリですね。w

iPadの中身

iPadには、勉強に関するものは一切入っていません。
写真とYouTubeしか詰め込んでいないです。w
実物もだいたいそんな感じなので、正直に再現しました。。。

軽量版

3D表示はやっぱり重たいので、テキスト主体の軽量版も用意しました。
入口でどちらを見るか選べるようにしているので、スマホの方は軽量版のほうがいいと思います。

構成

フロント側はAstro+React+Three.jsで描画しています。
バックエンド側はLaravelで、さっきのAIChat機能を実装しています。

てこずった部分

iOS Safariのメモリ制限

一番大変だったのはこれですね。
PNGのテクスチャが185枚あるのですが、GPU上でRGBA8に展開されてVRAMを圧迫してしまい、
iPhoneで見るとタブごと落ちる状態でした。。。
テクスチャをKTX2(BasisU)に圧縮する変換パイプラインを組んで、GPUメモリを約1/5にして解決しました。

iOSだけCSS3Dの画面がズレる

同じくらい苦しんだのがこれです。
WebKitはpreserve-3dの入れ子が合成レイヤ化した瞬間に遠近を落としてしまうらしく、
iOSだけ画面がズレて表示されていました。
遠近・カメラ・姿勢を1枚のmatrix3dに畳む、自前のCSS3Dに作り替えて解決しています。

iOSにはほんとに泣かされました。。。w