🏝️
魚眼カメラの映り方 3
3D描画
最初の記事と違い、3次元でz座標の考慮が必要になります。
さらに厄介なことに、投影後の重なりが発生しやすくなります。
単に順序を考えず描画するとこんな感じ。
なので、順序に気を使います。
今回は回転操作などを終えて投影直前の点群の座標を見て、カメラ中心点から遠い順に描画することにします。おおまかにはうまくいきます↓。
顔に色を付けるぞ
AIで顔画像を生成し、前の記事で保存した3d_face_dots.pngを重ね合わせ、生成した画像のサイズ合わせを行います。クロップしたりしたうえで、目や鼻、口の位置が大まかに合うようにし、画像のサイズ（最悪横だけでも）が一致するような顔画像に作り変えます。
次のようなフローで無地の3Dモデルを色付きで投影します
3Dのモデルの頂点すべてについて
頂点をに対応する色を、頂点のx,y座標をもとに、生成＋上で編集した顔画像から得る
↓
投影後の座標を計算する
↓
上記の色で描画する
結果
下記に用意しました
以前のコードに加えて足したのは、距離によるsort、zの値を使うぐらいでしょうか。
課題
- 歪みの影響の組み入れ
魚眼レンズの投影方式だけを意識して計算しましたが、実際にはレンズの歪みの考慮も必要です。
例えば以下で解説されているようなもの。
こういうのまで入れ込めると角度が上がりそうですね。
- 顔以外の部分
用意が大変なことは棚に上げたとして、3Dモデルさえあれば最終的にはできそうです。が、計算量も増えてしまうので、ブラウザでは限界が来るかもしれません。typed arrayやwasmでどこまで耐えられるのかなど、知見なしです。
- バグ類
鋭意更新中
Discussion