nakashima

    流行のWebGLさわってみました！

    初ポストです。中島賢志郎と申しますー！
    去年の９月頃から、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. ちょっとズレてる。
    ———————————————————————————————————-

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

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

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

    中島

    ＜ Back to List