WebGLで3D手ビューワを作りました【WebGL,Unity】

https://zdoton.github.io/HandViewer/

Web上で手の3Dモデルを表示する手ビューワを作りました。
絵を描く時のポーズ確認や、アニメ風イラスト用の線画抽出などに使えます。

概要

Webサイト「Posemaniacs」では、手の3DモデルをWeb上で確認できる「手ビューワ」というページが公開されていました。その後、Flashのサービス終了に伴い、Flash版の手ビューワは一度使えなくなり、現在は他のサイトでFlashを使用しない新しいバージョンが公開されています。

POSEMANIACS - Royalty free 3d pose reference for all artists

現在の手ビューワ

現在の手ビューワと比較して、Flashを使用していた従来の手ビューワは3Dモデルの面をフラットに描写して面の向きを分かりやすくするローポリシェーダーが標準で搭載され、ポーズも20種類と豊富にありました。

従来の手ビューワのイメージ（https://conte-anime.jp/draw/how-to-draw-handsより引用）

そこで、Flash版手ビューワのようなローポリシェーダーが使えるWeb手ビューワを作りたいと思い、開発＆実装しました。

自作した手ビューワの画面（ポリゴンシェーダー）

また、線画をなぞったりキャプチャした画像を貼り付けたりすることで、そのままアニメ風イラストに利用できる輪郭付きトゥーンシェーダーも実装しました。

自作した手ビューワの画面（輪郭付きトゥーンシェーダー）

冒頭のリンク（https://zdoton.github.io/HandViewer/）にアクセスしてすぐ利用できます。

基本的な機能

・シェーダー4種切り替え
（ポリゴン、ソリッド、輪郭なしトゥーンシェーダー、輪郭付きトゥーンシェーダーの4種類）
・ポーズ6種切り替え

基本操作

左クリック…モデル回転
右クリック…照明回転
Rキーまたは右上のReverseボタン…左右反転
Zキーまたは右上ChangeMatボタン…シェーダー変更
右下のボタン…ポーズ変更（3種類）

使ってみて下さい

バグ修正やポーズ追加も予定してます。
3DモデルをUnityへインポートしてWebGL出力する方法は、後ほど別記事で解説します。