BIRDMAN - www.birdman.ne.jp

初ポストです。中島賢志郎と申しますー！
去年の９月頃から、developerで勤務しております。
現在２４歳、精一杯努めていくので、宜しくお願いします！

あけましておめでとうございます！、、というのは遅いですが、
いつブログを書くか迷っていて、こんなタイミングになってしましました、、。

というのも、

書くネタをつくりたい！という思いがあるものの、
何にしようかな？がズルズルと、、、そして、現在に至る次第です。
（一時は、ランチブログ的な案があったのですが、それはまたいつかの時に！）


そして、本題です。
タイトルにある通り、流行のWebGLを触ってみたので、レポートです。

まずは、今回の成果を！
http://www.birdman.ne.jp/works/nakashima/webgltest1/
（※動作はchromeしか確認してませんー）

見れる方はゆるーいキャラクターが表示されたと思います！
それでは、当初何の知識もない自分が、ここまでに辿り着く経緯を、順を追って。

———————————————————————————————————-
1. WebGLって何？
———————————————————————————————————-

最近Chromeで動くコンテンツの中にこれどうやってるんだ？的なコンテンツがあると思います。
すごいヤツだとこれとか。
そこに使われているのがWebGLという話題の３D描画技術です。
WebGLはwebkit系で実験的に実装してるらしいのですが、GPUを使えるのでこんな高速らしいです。
仕組みとしては、OpenGL ES 2.0をjavascriptで動かして、HTML5で実装するcanvasタグを使って描画する、といったものです。

ここまでは、あいた時間を使ってちょこちょこ調べてました。

———————————————————————————————————-
2. とりあえず作る。
———————————————————————————————————-

誰かがやってるなら自分もできる！ということで、早速サンプルを探す旅に。
結構サンプルはあるのですが、どうにも記述が統一されておらず、
結局は一から書きはじめ、ちょこちょこ改造していった感じです。
（※途中、有方さんに助けを求めました！感謝です！）

そして、はじめにできたのはコチラ。

頂点座標バッファ　→　テスクチャバッファ　→　シェーダーひもづけ　→　レンダリング　といった流れでJSを書いてます。
自分はOpenGLを触ったことがなかったのでシェーダー部分に一番時間かかりました、、。

———————————————————————————————————-
3. 立方体とか球じゃ物足りないです。
———————————————————————————————————-

ここまでは動いた事に満足していましたが、やはり自分で作った何かを動かしたい欲は出てきます。
そこで、ローポリのモデルを作成することに。できたのが、あのゆるキャラです。

モデリングはlight waveで、さくっと終わらせました！！
と言いたい所ですが、、、metasequoiaしか触ったことなかったので、こちらも調べながら作りました、、。
（※途中、有方さんと荒川さんに助けてもらいました。ありがとうございます！）

モデルの完成後はobjに書き出して、頂点データを抜き取って表示。問題なく成功です。

———————————————————————————————————-
4. 顔を書きたい。
———————————————————————————————————-

モデルをつくったものの、単色だったのでテスクチャをはって顔を書くことに。
前回同様、UVマップをつくりobjで吐き出し、出力。
ここで問題発生でした。
うまく貼れないという現象ならばよかったのですが、モデル自体も表示されない状態に。

急遽PHPをかえしてパース済みのJSを出力する方法にし、試行錯誤に数日間。

最終的には、
・light waveからmetasequoiaに読み出してobj出力
・頂点とテクスチャデータが前と違うものは頂点を複製
といった形で対応しました。

———————————————————————————————————-
5. ちょっとズレてる。
———————————————————————————————————-

ここまでで一通りできたと思うのですが、
最初にお見せしたものをよーく見ると、耳の裏に黒のラインが入っていたり、
まだまだ完璧とはいかないようです。

更にシェーダーも、単純にテクスチャを張っているだけなので、光源や影を入れないと！
課題は山済みですが、、、以上です！


次回はこのゆるキャラに、リッチな表現・機能を実装してみたいなと思っていますー。
ではではー！

中島