PHP, WebGLによる.objファイルのインタラクティブ表示を行うウェブサービスの作成記録。

1. プロジェクト 中間発表

2. 取組内容
主にJavaScript(WebGL) , PHP を利用し、.objモデルをインタラクティブにプレ
ビュー表示し、配布するWebサービスの開発を行う。
同時に3DCGプログラミングの深い理解も行う。
サービス例 : http://www.turbosquid.com/3d-models/

3. HTML5のcanvas要素を利用して、ユーザーがアップロードしたオブジェ
クトファイルをインタラクティブに3DCG表示。
ページへジャンプ
後でPHPによるユーザー処理等を行う予定のため、それに適した配置、
HTMLクラス、ID分けを行っている。

4. 内部処理(JavaScript)
今回の3Dオブジェクト表示の流れ
1. .objファイルから頂点位置情報(ローカル座標系)を取得
2. これらの頂点情報から、対応する数値列を生成(JSON形式)
3. それらの配列を頂点シェーダに受け渡す(座標変換処理)
4. レンダリング(再帰によるアニメーション処理)
※今回は3DCGプログラミング理解の為three.jsといったライブラリを使
用していないので、かなりめんどくさい手順を踏んでいます。

5. 1. .objファイルから頂点位置情報を取得
.objファイルの保存形式

6. 1. .objファイルから頂点位置情報を取得
今回使用したcube.obj(右画像)
このデータをサーバーディレクトリから取得す
る為にAjaxなるものを使用。

7. 2. 頂点情報から、対応する数値列を生成
.objファイルから読み込んだ情報を、JavaScript上で扱いやすいよう
にJSON形式にすると同時に配列に格納。
※ ここで致命的な穴に気付く
ファイルをJavaScriptで扱う都合上、ページ閲覧者にモデルデータが
筒抜けである。
→ これによりWebGLによってモデルプレビューができる配布
サイトが存在しなかったのでは？と推測。
解決策 : PHPでファイル読み込み→ JavaScriptに変数受け渡し

8. 3. 配列を頂点シェーダに受け渡す
WebGLには固定機能パイプラインが存在しない。
→ シェーダを自前で用意しなければならない(GLSL)
頂点シェーダと
フラグメントシェーダを
自前でHTMLの
script要素に用意

9. 4. レンダリング
シェーダによって正常に座標変換、色変換された最終的なモデル
をCanvas上にレンダリング。
再帰処理によって逐次y軸回転させている。
また、マウス操作によって視点を変えることも可能
(これらは変更が加えられた毎に座標変換を行っている)

10. 予定ワークフロー
1. HTML(CSS)/JavaScriptでウェブページを用意
→ ダウンロード、アップロード、オブジェクト一覧ページ
2. .objファイルをWebGLを用いてWebページに3D表示
→ マウスによるカメラ視点操作も可能にさせる予定。
3. PHPを用いて会員登録システムを導入。
4. SQLデータベースによる.objファイルの保存?及び会員とオブジェクトの結び付
け
→ 難しそう
Hard

11. 参考サイト等
・ wgld.org ・・・ http://wgld.org/
WebGLの学習サイト
・ポンクソフト ・・・ http://ponk.jp/php/basic/ec
PHPとSQLによるショッピングサイトの作り方