CodeIQ MAGAZINECodeIQ MAGAZINE

3DモデルをWebGLで描画する「きゃん家!」技術解説(2)──外部3Dデータの読み込み・描画処理 #5jcup

2014.07.23 Category:技術コラム Tag: , , , , ,

  • 15
  • このエントリーをはてなブックマークに追加

WebGLでモデル(きゃんち)とステージ(一般家屋)を3DCG描画する「きゃん家!」についての技術解説第二弾です。

今回は、主に外部3Dデータの読み込み・描画処理についてjThreeの松田さんに解説いただきました。
by 馬場美由紀 (CodeIQ中の人)

3DきゃんちをWebGLで描画する

モデルデータ(PMXファイル)を読み込む

jThreeの松田光秀です。
前回は「きゃん家!」の特徴や、音声合成、開発の舞台裏などを中心にレポートしました。

きゃん家!

次世代型3DCGカタログ「きゃん家!

3DきゃんちモデルはMMD(MikuMikuDance)で使われるPMX形式のデータです。

チームグリグリの小川幸作さんに、モデルの作成を相談したのが応募締め切り1週間前。限られた時間の中で審査期間に間に合わせてくれました。

WebGLの基本操作にはjThree、PMXファイルの読み込みにはkatwatさん作成のmmd.three.jsをベースにしたjThree.MMD.jsを利用しました。

jThreeはjQuery+three.jsを実現したWebGLライブラリです。GOMLというマークアップ言語でWebGLコンテンツを作ることができて、jQueryの記法でJavaScript部分のコーディングが可能になります。

「きゃん家!」では以下のようなGOMLファイルでコンテンツを構築しました。

<?xml version="1.0" encoding="UTF-8"?>
<goml>
    <head>
        <model id="mikuPmx" src="model/kyanti4.pmx" />
        <model id="toire" src="../asset/house/トイレ.pmx"/>
        <model id="doa" src="../asset/house/扉.pmx" />

        <motion src="kao.vmd" />

        <txr id="blueSky" src="../asset/img/blueSky.png" onLoad="misc.loaded()" />
        <txr id="groundTxr" src="../asset/img/ground.jpg" param="repeat: 100; wrap: 0;" onLoad="misc.loaded()" />

        <gmt type="Sphere" id="domeGmt" param="450 32 16" />
        <gmt type="Plane" id="groundGmt" param="900 900" />

        <mtr type="MeshPhong" id="skyMtr" param="side:1;ambient: #fff; map:#blueSky;"/>
        <mtr type="MeshLambert" id="groundMtr" param="ambient: #fff; map:#groundTxr; bumpScale: 1;"/>

        <rdr frame="#jThree" param="antialias: true;"/>
    </head>
    <body>
        <scene>
            <mesh gmt="#domeGmt" mtr="#skyMtr" />
            <mesh gmt="#groundGmt" mtr="#groundMtr" style="positionY: -.5; rotateX: -1.57;" />

            <light type="Amb" />
            <light type="Dir" style="light-color: #9f9f9f; position: -50 30 10;" />

            <camera />
            <obj id="miku">
                <mmd model="#mikuPmx" motion="motion" onLoad="misc.loaded()"/>
                <obj id="lip" />
            </obj>
            <mmd model="#toire" onLoad="misc.loaded()"/>
            <mmd model="#doa" onLoad="misc.loaded()"/>
            <obj id="xfile" style="scale: 10;"/>
        </scene>
    </body>
</goml>

モデルにモーション(VMDファイル)を適用する

jThree.MMD.jsを使うと、MMDのモーションデータであるVMDファイルを、PMX形式のモデルに適用することができます。今回のケースだと3Dきゃんちがソファに座っていて手を左右に差し出す動作でした。

上記のGOMLファイルにある通りmotionタグを追記して、mmdタグのmotion属性で指定するだけで簡単に設定できるのですが、ここでトラブルが発生しました。

3Dきゃんちが全く動かない…。小川さんに何度もボーンの構造を修正してもらったんですが改善の兆しが見えずにお手上げ状態。

この時点でモデルではなく、私のプログラムに問題があることがわかったのですが、エラーが一切出ていないこともあって恥ずかしいことに、どこが悪いのか見当もつきませんでした。

そこでkatwatさんに協力を要請。協力と言えば聞こえはいいですが、実際は「3Dきゃんちが動かないので助けてください」と泣きついたといったほうが正しいかも…。それでもお忙しい中で修正作業をしていただき、たった2日で、jThree.MMD.jsのパッチが私の手元に届きました。スゴイ!

ステージをWebGLで描画する

一般家屋の読み込み

家屋のモデルは、MMDでも使われているDirectXのXファイル(テキスト形式)のデータです。ちょうどいいプラグインがあるだろうとネットで探したものの、見つからなかったので0からローダーを作成。

Xファイルの仕様自体は単純ですが、座標系の違いを修正するのに苦労しました。

WebGLはベースがOpenGLなので右手系、対してXファイルはDirectX用データなので左手系です。

実は現時点でもXファイルデータの完全な再現はできていません。DirectXのテクスチャにはアドレッシングモードという仕様があるのですが、実装に手間がかかるので、応急処置で対応しています。

ご覧のとおり電子レンジのスイッチのテクスチャは正しく貼れていますが、芝生は全然貼れていません。根気の問題ですので、いずれ何とかしたいですね。今回作ったXファイルローダーはthree.js用プラグインですが、jThreeのプラグインとして修正し、近日中に無料公開します。

以下はサンプルコードです。インスタンスを生成させていますが、いまのところ使い道がありません(笑)。

new THREE.XLoader( "ファイルのURL", function( mesh ) {
    jThree( "scene" ).three( 0 ).add( mesh );//meshはthree.jsオブジェクトです。
} );

空と地面の描画

空と地面は、jThreeの基本的な機能で描画しています。空は球体オブジェクトを裏面(内側)表示にして、青空の画像を貼り付けました。地面は平面オブジェクトに芝生画像を貼り付けただけです。

まとめ

今回は、主に外部3Dデータの読み込み・描画処理についてご紹介しました。この記事だけでWebGLコンテンツを作れるようにはなりませんが、jThreeを使ってほぼマークアップで手軽に構築していたことが伝わったのではないかなと思います。最後となる次回は花王製品周りのイベント処理を中心に解説します。

⇒次回、「花王製品周りのイベント処理」に続く

<<関連レポート>>

寄稿者プロフィール jThree合同会社 松田 光秀氏
松田 光秀氏jQueryの記法で操作できるWebGLライブラリ「jThree」の開発者でjThree合同会社の代表。JavaScriptのスキルのみで平成26年2月に1人で起業する。平成元年生まれの24歳で現役高校生(平成26年5月時点)。

Twitter: 松田光秀

松田光秀さんからJavaScript問題が出題中!

今回記事を書いてくれたjThreeの松田光秀さんから、JavaScript問題を出題していただきました。
ぜひチャレンジしてくださいね!

受付締切:2014年8月18日 AM10:00まで
挑戦はこちらから

自分の書いたコードを誰かに評価されたいエンジニアは、けっこう多い?

ITエンジニアのための実務スキル評価サービス『CodeIQ』で出題されている「コード銀行」問題に挑戦すると、あなたのコードが評価されます。

評価(1)出題者からの評価  ⇒評価フィードバック例を見る

  • 企業ではたらくという観点からあなたのコードをチェックします
  • フィードバックされた観点をふまえてコードを書くと世の中の企業にとって「いいコード」が書けるようになります

評価(2)企業からの評価  ⇒評価フィードバック例を見る

  • 「あなたと一緒にはたらきたい」という企業からスカウトが届きます
  • あなたのコードが社会でどこまで通用するか、リアルな評価が得られます

興味を持った方はこちらからチャレンジを!

  • 15
  • このエントリーをはてなブックマークに追加

■関連記事

ブラウザ戦争、HTML5の標準化、ブラウザの未来──歴史を語り尽くすWebブラウザ談義【後編】... 「ブラウザ戦争」とは何だったのか Webブラウザの歴史を辿ると、歴代のブラウザが、技術的にもビジネス的にも激しい覇権競争を繰り広げたことが、結果としてWebの普及を促したことがわかる。 94年12月にリリースされた Netscape Navigatorは順調にバージョンを重ねるが、これに対抗して...
インターネットとWebの誕生が、いつか知ってる?──歴史を語り尽くすWebブラウザ談義【前編】... 今あらためてWebブラウザの歴史を辿る意味 Webブラウザはたかだか四半世紀の歴史とはいえ、世界を変えたこの25年はあまりにも劇的で、細かい歴史は忘れられていることも多い。 しかし、Webブラウザの歴史をたどることで、インターネット技術がどのように発展してきたのか、そしてこれからはどのようにそれ...
Azureで仮想マシンを作り、リモートデスクトップ接続で『Visual Studio』を使ってみよう... AzureならインストールすることなくVisual Studioが使える!? 現在、CodeIQで展開されているキャンペーン問題、日本マイクロソフト・エバンジェリストである物江修さんが出題する「HTML5+JSで落ちものゲームを作ってみよう」と、同じくエバンジェリストの高橋忍さんが出題する「きゃん...
HTML5、C#を使ったスマートフォン・タブレット向けアプリ開発を基礎から学ぼう!... 中学1年生になったシュン君とゲームアプリ問題に挑戦! タブレットやスマートフォンのエンタープライズ環境への導入が増えているとはいえ、そのような端末向けのアプリケーション開発に携わっているITエンジニアはまだまだ少ない。 今回のキャンペーン問題は、「HTML5/JavaScript」と「XAML/...
【アニメ用語続出】喜屋武ちあき、マイクロソフトでエバンジェリストと「Visual Studio」を学... エバンジェリストって何? きゃんち:お二人ともエバンジェリストという肩書きとなっていますが、これはどういうお仕事をする人ですか? 砂金:エバンジェリストという職種を説明する前に、まずは自己紹介から。勝手な思い込みなんだけど、僕はシャアの前世だと思っているんです。 ▲日本マイクロソフト株式会社 ...
「Webこそがゲーム・プラットフォームである」──Mozilla開発者が語るWebブラウザ戦略 vo... Webこそがプラットフォームである──Mozillaが描くゲーム流通戦略 ──WebGLを活用して、Mozillaのゲーム・プラットフォームチームは、どのようなビジネスを展開しようとしているのでしょうか? Martin Best氏(以下、Best):前回も指摘したように、Webはゲーム開発の重要...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ