Webglのメッシュをアニメートする方法

Question

私はフィールドWebGLで新しく、人間の顔をアニメーションする必要があります。https://sketchfab.com/models/4d07eb2030db4406bc7eee971d1d3a97からダウンロードしたポリゴンのメッシュがあります。どのようにして目や口などの点を選択しますか？式を作成するために移動しますか？ありがとうございます。

Answer 1

私はダウンロードを手動で解凍しました。静的な照明で焼いたテクスチャ、バンプマップなどを教えてください。静的3DモデルとしてモデルをレンダリングできるようにしましたWebGL/OpenGLを使用して...素早く簡単に調べると、動く/動かされる様々な動く/動くビットとボブをすべて特定することができます。

これはあなたを落胆させるものではありません。

これを静的にレンダリングしたら、次のステップはpickerを作成することです。これはproceですあなたがインタラクティブに：（モデルやカメラや目を）動かすことで、所望のセグメント（頂点/ポリゴン）のXYZ位置を特定し、そのようなセグメントをグループ化します。

pickerを使用して、首から頭全体を区切ったり、顔から1つの目を言うことができます。それぞれをモデル内の独自のオブジェクトに分割します。この分離により、各オブジェクトを他のオブジェクトとは独立して全体として移動することができます。最初はモデル全体が単一のオブジェクトであり、モノリシックなブロブとして移動する必要がありました

元のソースデータセットは独立した移動可能なオブジェクトのセットになっていますので、元のデータセットの一部ではない新しいグラフィック機能を導入できます。ここで創造的になる場所です。プログラム的に、メッシュのサブセクションを動的に移動することができます。頂点とエッジのグループ。これらの頂点/辺のさまざまなテクスチャファイルに対応するすべてのエントリを同時に移動させなければならないということは、悪夢であり、与えられたデータセットの意図されたユースケースではありません。

あなたが選択したデータセットは、静的レンダリング/ライティングの現在の状態に完全に対応しているテクスチャファイルのレイヤードセットのため、非常にリアルです。おそらく、メッシュを動的にアニメートするのに役立つものは、簡単なメッシュで始めることです。あるいは、独自のメッシュ "ab initio"を動的に簡単に合成することもできます。あなた自身の照明を自分自身で、後処理スナップを与えることができます。

Answer 2

WebGL is just a rasterization library。線、点、三角形を描画します。それでおしまい。他のすべてはあなた次第です。

3Dモデルの読み込みと描画には、数百行または数千行のコードが必要です。モデルの一部（目、口、舌）を選択できることは、WebGLには何もない、さらに多くのコードと構造を必要とします。このようなモデルをアニメートするには、WebGLとは関係のないコードも必要です。

three.jsのようなライブラリを使用して、モデルの読み込み、モデルの一部の選択、アニメーション化をサポートすることをお勧めします。 WebGLで直接すべてのことを行う方法を教えても、基本的には本の全体となり、Stack Overflowに関する1つの質問については広すぎます。

WebGLでそれ以外の作業を行うには、多くの作業が必要です。

最初に、上記のようにWebGL is just a rasterization libraryという3Dエンジンを作成する必要があります。それはあなたのために3Dをしません。あなたはそれが3Dになるようにコードを書く必要があります。

3Dモデルをロードします。あなたはシェーダの複数の種類を記述する必要がWebGLの中でその画像をレンダリングするために、この画像

にリンクされています。その画像を見ると、最低でもshadow casting system、何らかの種類のnormal mapping shader with lighting、bloom post processsing system（頭の上の輝きを参照）を書く必要があります。それらのトピックのそれぞれは、3Dグラフィックに関する書籍の章全体です。 WebGLはあなたのためにそれをしません。三角形を描くだけです。 WebGLがそのようなことを描くようにするには、すべてのコードを提供する必要があります。

頭部のさまざまな部分（目、耳、鼻、口など）を表現するために、scene graphを作成する必要があります。これは、モデルが部品に設定されていることを前提としています。単なるメッシュであるかもしれません。

これを部品に設定すると仮定すると、skinning systemを実装する必要があります。これは、3Dグラフィックに関する本の別の全体の章です。皮むきシステムでは、例えば、まぶたや口を開閉することができます。皮むきシステムがなければ、頭を作るポリゴンは離れて飛びます。別のオプションは、同じトポロジを共有する複数のモデルの間でモーフを変形させたが、このようなシステムを使用して別々に目と口をアニメーション化するのは難しいだろうというのシェイプを使用することです。

これ以降、スキニングシステムのボーンをアニメーション化するためのアニメーションシステムを実装することができます。

次に、あなたがリンクしたモデルからデータを取り込んで、それをデータに変換する方法を理解する必要があります。

WebGLは三角形を描画しているだけなので、WebGLはそれを何もしないので、どれくらいの作業が行われるのか分からないと思います。あなたが本当にすべてを学びたいと思っているならば、私はhttp://webglfundamentals.orgからWebGLの基礎を学び、そのすべてをやり遂げることができるまでそれらの展開から始めます。それは素晴らしい学習体験になるでしょう。私はあなたがその頭部をロードし、自分のWebGLコードで部品をアニメーション化できるようになるまで数ヶ月かかるだろうと推測しています。

これ以上のものはスキップしてもかまいません。すでにほとんどのことを行っているuse a libraryだけです。