プログラミング今回はBlenderで自作した3DグラフィックをWebページ上で表示する方法を紹介いたします。Blenderでグラフィックを作成する様子:(クリックすると拡大します)Webページで表示する様子:実際にWeb上で表示した動画のページはこちらです。(Chrome、Firefox最新版、IE11以上のブラウザをご利用ください)データ処理の流れ3Dグラフィックを表示する際に利用する技術はHTML5のWebGLです。Blenderで3Dグラフィックのオブジェクトを作成し、ChromeやIE11でWebGLを利用すれば、グラフィックをWebページで表示できます。Blenderでモデリングしたオブジェクトを、さまざまなファイル形式で外へのエクスポートが可能です。今回では平文(PlainTextObj)であるObjフォーマットを採用します。(Objフォーマットについてこちらの英語のページをご参照ください)モデリングとObjエクスポート3DグラフィックをBlenderでモデリングした後に、Objファイルフォーマットとして外にエクスポートできます。(.obj)をクリックします。左側にエクスポートの設定画面が表示され、以下の設定を行います。Onlyを選択し、現在選択されているオブジェクトのみをエクスポート対象とします。Modifiersを選択し、Mirror、SubdivisionなどのModifierが設定されている場合、すべてModifierを適用してからエクスポートするようにします。Normalsを選択し、法線データもエクスポートします。Facesを選択し、頂点データを三角形に揃えます。エクスポートしたグラフィックが画面に表示された時、サイズが大きすぎることがあります。その場合このScaleの値をより小さく(0.1~1)設定し、ちょうどいいサイズに調整することが可能です。設定が完了したらファイル名とパスも指定して、エクスポートを実行します。(この文書でモデリングしたObjファイルは、こちらです)Objファイル→Modelファイルに変換Objファイルは平文(PlainText)で頂点、法線などのデータを記録するファイルです。このファイルから頂点データをWebGLに渡しても3Dグラフィックを再生できますが、テキストの解析に時間がかかりますので、プログラムの初期化性能が落ちます。そのために、事前にObjファイルを解析し、表示用のバイナリデータを用意しファイルに保存します。この保存されたファイルはModelファイルと言い、ネコ技術のオリジナルファイルフォーマットです。ネコ技術はObjファイルからModelファイルに変換するプログラムを実装しましたので、無償で提供いたします。ダウンロードはこちらです。<出力Modelファイルのパス>cmd.exeを起動し、画面でコマンドを実行します。入力Objファイルを正しく解析した場合、指定されたパスにModelファイルが生成されます。開いて、cat.modファイルが確かに存在することを確認します。WebGLでModelファイルを画面に出力WebGLについて基本的な利用方法は他の書籍、資料などをご参照ください。ネコ技術が作成したJavaScriptプログラムとHTMLの一式を、こちらからダウンロードすることが可能です。以下はプログラムのキーの部分のみを紹介いたします。main.jsとmodel.jsはネコ技術が作成したWebGLの共通JavaScriptです。model.jsは、上記Objファイルから転換されたModelファイルを読み込み、WebGLによって画面に描画するプログラムの一式を実装しています。メインHTMLメインHTMLからJavaScriptファイルを参照します。src="js/model.js"></script></head>...</html>WebGLの準備WebGLによって3Dグラフィック表示するため、Webページで表示用領域を用意する必要があります。HTML5のCanvasタグを利用します。該当ブラウザはHTML5のCanvasをサポートしていません。</canvas>...</body>もしCanvasをサポートしないブラウザを利用した場合、「サポートしない」というメッセージが表示されます。Canvasのidを「glcanvas」と設定し、JavaScript側はこのidを利用します。ライティングWebGLはOpenGLと違い、内部にライティングと照明のAPIを用意していません。シェーダプログラムで自分のライティング計算プログラムを書く必要があります。簡単に3Dのように見えるライティング計算はそれほど難しくありません。WebGLは頂点シェーダプログラムとフラグメントシェーダプログラムを、両方とも用意する必要があります。}</script>フラグメントシェーダでは特に計算するものはありませんので、頂点シェーダから渡されたvLightingの色をそのままPixelに設定します。Modelファイルの準備window.onloadイベントより、プログラムの初期化処理を行います。model.jsファイルに以下のファンクションを用意しています。modelオブジェクトをWebGLのAPIを利用して3D描画処理を行いますmodel.jsを参照に設定した場合、デフォルトでmodelManagerというグローバル変数があります。modelManager.loadModelファンクションを利用し、上記で作成したcat.modファイルを読み込みます。パスはcat.htmlファイルからの相対パスです。});};loadModelの二つ目のパラメータは、Modelファイルを正しく読み取れた場合に呼び出されるファンクションです。このファンクションで、引き続きWebGLの初期化処理を行います。WebGLに関する共通初期化処理は、main.jsのstartファンクションに実装しています。WebGLの初期化処理main.jsのstartファンクションより、initSceneファンクションが呼び出されます。このファンクションで、WebGL共通初期化以外、HTML毎の初期化処理を行うことが可能です。gl.depthFunc(gl.LEQUAL);}すべての処理化処理を行ってから、drawScene()を呼び出して描画処理を始めます。}}frameファンクションはフレーム毎にオブジェクトのステータスを更新します。回転させたり色を変更したりするような処理を行います。drawSceneファンクションは画面にオブジェクトを描画処理を行います。drawModel(model);}プログラムの紹介は以上です。Chrome、最新版Firefox、IE11でcat.htmlファイルを開いて、リアルタイムの3Dグラフィックをお楽しみください。ダウンロードとサンプルこの文書で利用したファイル一式のダウンロードはこちらです。WebGLJing北海道の田舎で暮らしているプログラマーです。最近山登りにハマりました。