添付URLの様な３Dが動くWEBサイトの作り方。※どんなツール。技術が使われているの？

https://recruit.industry.panasonic.com/
上記URLの様な３Dが動くWEBサイトの作り方。※どんなツール。技術が使われているの？

No.3 回答者： kamiyasiro 回答日時： 2024/11/26 10:19

これ、No.1様につられて動画ファイルだと思っていましたが、ファイルに記録されたものではなく、スクリプトが送られてきており、手元のPCで描いていますね。

タスクマネージャーでGPUの負荷を見ていると、このサイトに繋いだとたん、一気に負荷が上がります。

PCの性能により、再生速度が違うのが稚拙です。

ところで・・・、

ロボットアームの絵を見ると、ファセットの方向で濃淡を変えて、立体感を出しているようですが、自身のアームの影が入らないので、それほど高度なグラフィック処理はしていません。

高度なグラフィックになると、照明方向を考えて、前にある物体の影が後ろの物体に映るとかの処理をします。

もちろんGPUの性能によって有無を切り替えできますが・・・。

たしかファイナルファンタジーには、影を付けるかどうかの切り替えがあったかと思います。

また、自動車の窓（特にフロントガラス）に映る絵も誤魔化しています。ちゃんとしたグラフィックなら、ガラスの湾曲も考慮した反射画像を描きます。

技術に興味がおありなら、その辺に注意して観ると面白いです。

No.2 回答者： kamiyasiro 回答日時： 2024/11/26 00:24

技術としては、

①図形（キャラクタ）を座標点を結んだワイヤーフレームとして定義する（メッシュ図のようなもの）。
②座標点をクォータニオンという計算技術で３D化する。クォータニオンは遠近を出すときに視点を変えるための計算方法です。
③直交空間で座標点を動かす。そのたびに②の３D処理を行う。
④それと同時に、ファセット（切り口）のテクスチャ（塗り方）を指示に従って描画する。
⑤それを動画として表示・記録する。

ゲームなどでは、ユーザーの操作により視点が変わったりしますので、⑤のように記録できません。そのため、ゲーム機内やPC内のGPU（グラフィック・プロセッサ）で視点変更や遠近の変更、ファセットのテクスチャの描画が行われます。

ここで、一連の動き（例えば腕を振り下ろすまで）に対して何枚の絵を作るか、ファセットの塗りつぶしをどれだけ精彩に描くか、隣接するファセット間のテクスチャ（例えば布地の模様とか）の連続性をどれくらい担保するかなどは、GPUの性能に応じてユーザーが決めます。

ファイナルファンタジーのベンチマークテストがありますね。これは、あなたのPCでは、精細に描くことは無理ですから、このくらいの設定にして下さい、というソフトです。

ゲームでは①と②の間に腕を動かしたり弾が発射されたりするアクションや、女の子の髪が風に揺れるとか、が入ります。

特に体の動きはエルゴノミクスという運動理論に沿って動作を生成し座標点を動かしていきます。

ここを手抜きしたソフトでは、腕を振り下ろしたりする一連の動きをセットで組み込んでしまっているものもあります。それらは、毎回同じ動きで敵をやっつけます。

No.1 回答者： kon77 回答日時： 2024/11/23 07:50

その3D自体は、動画ファイル（mp4）ですので、高度なWEB技術が使われているというよりは、3DCGソフトによる部分が大きいかと思います。