Help us understand the problem. What is going on with this article?

WebGLで女子高生がるんるんしてるだけ。

More than 3 years have passed since last update.

この記事は WebGL Advent Calendar 2016 の11日目の記事です。

image.png

年の瀬せまる師走の日曜日。皆様はどうお過ごしでしょうか。
筆者はもちろんWebGLでした!

ま、担当日ですから…

それで、結論としては記事タイトルのようなものを作りました。

ライブデモはこちら

【発端】 PTW Tipsというリポジトリを作りました

個人的に、「ファンタスティック トリノワールド」というゲームをもうずっと作っているのですが、ある程度完成が近づいてきて、色々思うところあり、技術的な総まとめを目的としたリポジトリを作りました。

今回の記事はある意味その一環なのです。

PTW Tips

コンセプトというかやりたいことは次のようなことです。

  • WebGLの技術を自分なりにまとめたい
  • ゲームプログラミングの基礎を自分なりにまとめたい
  • TypeScriptでクラスを活用したプログラミングを模索したい(PG的欲求)
  • ゲーム開発に関連する作業を統合して自動化するツールを作りたい
  • ツールの実行環境はElectron(どこでも動く、ライブラリも豊富)
  • コンバート処理と描画処理は分離する(描画処理は最適化されたjsonファイルを読み込むだけ)

まだまだ作成中ですが、今のところTypeScriptでWebGLを扱うための基礎的な部分はだいたい作りました。

WebGLでスキンモデルを扱うためのデータ作成と描画の簡単なサンプルも作ったのですが、モデルが簡単すぎてものたりないので、少しきちんとしたモデルでサンプルを作ろうと思いました。

で、時期が合うのでアドベントカレンダーで出すことにしました。

スキンモデルでトゥーンレンダリングで髪を揺らしたい

また個人的な話ですが、実は映像作品を作りたいという気持ちから、トゥーンレンダリングで髪を揺らすのをやりたいなと常々思っておりました。それでアドベントカレンダーでやろうと。

しかしなかなかに厳しく遠い道です。必要なものが色々あります。ゲームエンジン?知りまs

  • スキンモデルのコンバータ作成(鬼畜難易度)
  • アニメーションのコンバータ作成(わりと簡単)
  • アニメーションの計算実装(わりと簡単)
  • スキンモデルの描画実装(けっこう面倒)
  • レンダーバッファ描画(仕組みは簡単だが数が増えるととややこしい)
  • トゥーンレンダリングの実装(たいてい微妙にうまくいかない)

スキンモデルデータ作成、コンバートの流れ

  1. Blenderでモデルを作る
  2. Collada(.dae)形式でエクスポート
  3. Electron 上で THREE.js の Collada ローダで読み込む(THREE.jsを描画には使わない...合掌)
  4. TypeScriptで書いたコンバート処理でjsonファイルを作成

image.png

アニメーションデータ作成、コンバートの流れ

  1. Blenderでアニメーションを作る
  2. Electron上で BlendFileReader.js (拙作)で読み込む
  3. TypeScriptで書いたコンバート処理でjsonファイルを作成

image.png

スキンモデルの描画

モデルを分割して描画します。
コンバータの段階でボーン2つを使用するパーツ、ボーン4つを使用するパーツに分けています。
ドローコールはそれなりに多くなりますが、シェーダの処理は比較的単純になります。

image.png

シェーダはTypeScriptでクラスで作成し、共通する部分は継承を使ってできるだけ差分だけ書きます。
文字列で埋め込んだりしていて、少し特殊かもしれません。
それでも関数の中でソースコードを組み立てることができるので、工夫しだいで差分プログラミング的な
こともできるはず。

トゥーンレンダリング

トゥーンレンダリングは色々考えた結果、形状を決めるためのモデルと影を付けるためのモデルをそれぞれ用意する方法をとることにしました。

image.png
形状モデル

image.png
影用モデルと重ねた状態

下の画像はBlenderからエクスポートするとき選択状態のオブジェクトを出力するため常にこの状態にするのですが、なんというか絵づらがやばい。

描画の流れは次のようになります。

  1. 背景を描画
  2. バッファに顔の中(目、口など)以外のモデルを描画
  3. バッファに深度テストオフで顔の中のモデルを描画
  4. バッファを参照しながら影モデルを描画

4ではキャラをすっぽり覆う影用モデルを描画して、HSVで明度を落として影を付けます。
影用モデルのアルファ値は無視してバッファのアルファ値を使うことで、
キャラ部分だけに影を付けたような感じになります。

image.png

image.png

最後に

なかなかWebGLらしいネタって難しいですが、
ひたすらjsonをデータとして使ってるのがWebGLらしいと思いました。
glTFも熱いですし。

それではよいお年を!

warotarock
現在進行形で個人でゲームやら何やら作ってます。
http://www.geocities.jp/warotarock/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした