WebGLで3D手ビューワを作りました【WebGL,Unity】
https://zdoton.github.io/HandViewer/
Web上で手の3Dモデルを表示する手ビューワを作りました。
絵を描く時のポーズ確認や、アニメ風イラスト用の線画抽出などに使えます。
概要
Webサイト「Posemaniacs」では、手の3DモデルをWeb上で確認できる「手ビューワ」というページが公開されていました。その後、Flashのサービス終了に伴い、Flash版の手ビューワは一度使えなくなり、現在は他のサイトでFlashを使用しない新しいバージョンが公開されています。
現在の手ビューワと比較して、Flashを使用していた従来の手ビューワは3Dモデルの面をフラットに描写して面の向きを分かりやすくするローポリシェーダーが標準で搭載され、ポーズも20種類と豊富にありました。
そこで、Flash版手ビューワのようなローポリシェーダーが使えるWeb手ビューワを作りたいと思い、開発&実装しました。
また、線画をなぞったりキャプチャした画像を貼り付けたりすることで、そのままアニメ風イラストに利用できる輪郭付きトゥーンシェーダーも実装しました。
冒頭のリンク(https://zdoton.github.io/HandViewer/)にアクセスしてすぐ利用できます。
基本的な機能
・シェーダー4種切り替え
(ポリゴン、ソリッド、輪郭なしトゥーンシェーダー、輪郭付きトゥーンシェーダーの4種類)
・ポーズ6種切り替え
基本操作
左クリック…モデル回転
右クリック…照明回転
Rキーまたは右上のReverseボタン…左右反転
Zキーまたは右上ChangeMatボタン…シェーダー変更
右下のボタン…ポーズ変更(3種類)
バグ修正やポーズ追加も予定してます。
3DモデルをUnityへインポートしてWebGL出力する方法は、後ほど別記事で解説します。
この記事が参加している募集
感謝します