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

1. プロジェクト 最終発表

2. 取組内容
WebGL, PHP, MySQLデータベースを利用し、OBJフォーマットモデルをイ
ンタラクティブに表示するWebサービスの開発を行う。
同時に3DCGプログラミングの深い理解も行う。
最終的な使用言語(文)
HTML5, CSS3, JavaScript, jQuery(JS), PHP, SQL

3. HTML5のcanvas要素を利用して、ユーザーがアップロードしたオブジェ
クトファイルをインタラクティブに3DCG表示。
localhostにて実行。(XAMPP, Apacheサーバ, MySQLデータベース)

4. 内部処理(JavaScript)
前回発表までは3DCGプログラミング理解の為ライブラリを使用せず実
装していたが、あまりにも動作が重い、jQueryとの干渉が発生する等
の問題が生じたため、three.jsのOBJローダーを使用。
WebGL関連JavaScriptコード量
前回 : 1004行 → 今回 : 102行

5. 内部処理(MySQLデータベース)
PHPプログラムを組む前に、データベースとして何を保持したいかを明
確にするため、テーブル定義書を作成。後にphpMyAdminにてSQL文
を発行し、テーブル生成。
作成したテーブル
・ モデル情報の保持「items」
・ 会員情報の保持「members」

6. テーブル定義書と実際のテーブル

7. 内部処理(PHP)
HTMLにてページの基礎を作成しておき、後にPHPにて処理系を記述。
今回作成したウェブサイトでの主なPHP処理による機能
・ アカウントの作成、ログイン、ログアウト処理(create_account.php)
・ オブジェクトのアップロード(add_object.php/upload.php)
・ オブジェクト一覧の表示、検索(index.php)
・ オブジェクト詳細の表示(detail.php)
・ ユーザー登録情報の閲覧(my_page.php)

8. PHPによる処理 – ログイン/ログアウト
ログインフォームにてユーザー情報を入力、ログインボタン押下
→ POSTメソッド処理によりログイン認証に成功すると、
セッション変数にユーザーIDとユーザー名を保存
ログイン認証は、SQLのSELECT文によりmembersテーブルから一致す
るものがあればtrueを返すことにより実装。
ログインしなければオブジェクト詳細閲覧、投稿ともに不可能

9. PHPによる処理 – OBJアップロード
フォームに適切な内容を入力し、登録ボタンを押下
投稿の際にはセッション変数に格納されているユーザーIDとオブジェ
クトデータが関連付けられる。また、投稿データはAUTO_INCREMENT
による主キー(item_code)とオブジェクト名を合成した名称を付けること
により、重複のないように保存。

10. PHPによる処理 – 一覧表示
itemsテーブルに保存されているデータのすべてを表示。
→ ページング機能未実装。
それらを個々にクリックするとそれぞれのオブジェクト詳細画面に遷移。
GET情報(?code=item_code)をリンクに付加することでオブジェクトを識別。

11. PHPによる処理 – 詳細表示
一覧ページからのGET情報付きリンクからオブジェクトコードを受け取
り、そのコードに応じた情報を取得、表示。
その際、セッション処理により、ログインされていなければこのページ
を閲覧できない。
このページにてobjファイルはWebGLによってインタラクティブ表示され
る。

12. 改善すべき点
・ 検索フォームにてSQLインジェクション攻撃を行うことができる。
・ WebGL処理を覗かれるとobjファイル保存場所が丸見え。
・ PHPのデフォルト設定により2MBまでのファイルしか投稿できない。
・ 商品サムネイル画像が指定サイズでなければ表示がおかしくなる。
・ 例外処理を実装していないため、insert系の処理が雑
・ ページング機能がない
などなど…

13. おすすめ参考サイト等
・ wgld.org ・・・ http://wgld.org/
WebGLの学習サイト
・ポンクソフト ・・・ http://ponk.jp/php/basic/ec
PHPとSQLによるショッピングサイトの作り方.
・CodeZine PHP入門 ・・・ http://codezine.jp/article/detail/3982