WebGL研究所
WeBGLのすすめ
このページでは、HSP3DISHを使ったwebでのHSPの利用について掲載したいと思います。ここでは、特に「HGIMG4」を使ったHSP3DISHに特化した情報をまとめていけたらと思っております。
HSP3DISHの通常版についてや、豊富な知見は下記のサイトを参考にさせていただきました。
https://junji.jp/net/hsp3/
①準備するもの
・HSP3DISHを使ったプログラミングは、基本的に通常のHSPと同じですが、
#include "hgimg4.as" ←これがソースコードに記述必要です。これでDishも準備完了
・また、hgimg4を使用する場合には、フォルダを作成し、ソーススクリプトと同じフォルダに「res」フォルダ、さらにその中に「shaders」フォルダを作成しておきましょう(左記画像参照)。HSPのサンプルフォルダのhgimg4フォルダ内にあるものをコピーしても良いです。システムが使用するシェーダーファイルなどがあるので、自分が使っていなくても必要なファイルがありますので注意してください。このresフォルダ内に自身が使う画像ファイルやgpbファイルを入れておきましょう。
(注意）hsp3dish.iniファイルは、画面の解像度を指定するために必要です。HSPのサンプルフォルダからコピーしておきましょう。
②変換ツール
・WEBで公開するためには、標準のスクリプトエディタ内の「ツール」メニューからHSP3DISH/Cｿｰｽ変換ツールを選択します。
・ソーススクリプトを指定し、HGIMG4を使用するにチェックを入れ、HSP3dish.jsを選択してから、「変換」ボタンを押す。以上
先の①準備するもので、正しく作成したフォルダがあれば、自動的に必要なファイルを作成してくれます。
(注意）hgimg4を使用しない場合に必要な「data」フォルダは、逆に作成してはいけません。
(注意）gpbファイルを読み込む場合に、
gpload id_model,"tamane"
gpload id_model,"tamane.gpb"
という風に拡張子を指定するのは誤りではありませんが、HSP3DISHに変換する際にマテリアルファイル名が tamane.gpb.material と認識されてしまい、エラーが起こります。ファイル名を修正しても良いですが、面倒なので、拡張子を含まない形でソースコードを記述したほうがよさそうです。落とし穴がすぎますね
③ｱｯﾌﾟﾛｰﾄﾞ
・変換ツールを実行すると、左記のようなファイル構成になるはずです。
このうち、WEBにアップする必要があるのは、
・ hsp3dish-gp.js
・ (名前).data
・ (名前).html
の、三つです。
「res」フォルダの中に入っている画像素材や「shaders」フォルダ内のファイルは、(名前).dataファイル内にpackされます。
(注意）したがって、resフォルダやshadersフォルダをWEBサイトにアップロードする必要はありません。
なんかエラーが表示されていますが、検証中です
ブロック崩しテスト
（HSPのサンプルコードそのままで、HGIMG4は使用していません）