前回は、「プログラミング生放送」コミュニティのウェブサイトから「今川焼き」の 3D データをダウンロードする手順を紹介しました。
入手した fbx をプログラミング言語 HSP3 の HGIMG4 で扱える gpb に、GBP converter ver.0.6 を用いて変換する手順も紹介しました。
立方体を回転させる HSP3.6 に内蔵されているサンプルプログラムのコードと実行結果も紹介しました。
前回の記事：HSP3 HGIMG4で3Dモデルの今川焼きを回転させる1/2 | Compota-Soft-Press
今回は、サンプルプログラムのコピーを改造して、「今川焼き」の 3D モデルを HSP3 で回転しながら表示させます。
※ HSP3.6を使用しています。
フォルダ構成
前回紹介した回転する立方体を表示するプログラムは HSP アシスタントでは Sample タブの HGIMG4 フォルダの test1 から参照・実行できます。
test1.hsp は HSP3.6 のインストールフォルダの中の sample/hgimg4/ の中にあります。
この test1.hsp を前回 gpb と material ファイルを出力した「ImagawaYaki」フォルダに貼り付けます。
test1.hsp を今川焼きの gpb の置いてあるフォルダにコピーします。
GuruGuruImagawaYaki.hsp に区別しやすいようにリネームしました。
GuruGuruImagawaYaki.hsp をダブルクリックして HSP スクリプトエディタを起動して、「ＨＳＰ実行」ボタンを押して実行します。
しかし、コードは変更していないのに、真っ暗な画面が表示されるだけでした。
「HGIMG4プログラミングガイド」を読むと、3D の機能を利用する際にシェーダーが必要になるらしく、res/shaders フォルダをコピーしておく必要があります。
リソースフォルダについて
HGIMG4では、3D描画使用時にスクリプトと同じフォルダにある「res」フォルダから必要なリソースを読み込みます。 リソースファイルは、「sample/hgimg4/res」のフォルダに含まれています。 以下のファイルは、起動のために必要ですので、実行ファイル作成時なども必ず入れておいてください。 res/shaders フォルダ(中のファイルも含む)
HGIMG4プログラミングガイド
HSP3.6 インストールフォルダの sample/hgimg4 の中の res フォルダを、今川焼きの gpb やコピーしたサンプルプログラムのおいてある「ImagawaYaki」フォルダにコピーします。
res フォルダの中には duck.gpb （あひるの 3D モデル）などの様々なデータがありますが、test1 にはシェーダーのみが必要なので、res の中の shaders フォルダ以外は削除しました。
再び、test1.hsp をリネームした GuruGuruImagawayaki.hsp を実行すると、コピーした shaders フォルダの中のシェーダーのおかげで立方体が表示されるようになりました。
今川焼きの 3D モデルに差し替える
サンプルプログラム test1 の gpbox で立方体を作成して第一引数の id_model にその識別番号を与えている部分を変更します。
gpbox のかわりに gpload で gpb ファイルの今川焼き 3D モデルを読み込みます。
#include "hgimg4.as"
title "HGIMG4 Test"
gpreset
setcls CLSMODE_SOLID, 0 ; 画面クリア設定
setpos GPOBJ_CAMERA, 0,0,5 ; カメラ位置を設定
// gpbox id_model, 1 ; 箱ノードを追加
gpload id_model, "imagawayaki" ; 今川焼きの 3D モデル (gpb) を読み込みます。
repeat
redraw 0 ; 描画開始
addang id_model,0,0.02,0.01 ; ノード回転
gpdraw ; シーンの描画
color 255,255,255
pos 8,8:mes "HGIMG4 sample"
redraw 1 ; 描画終了
await 1000/60 ; 待ち時間
loop実行すると、遠くに小さな白い物体が回転しているように見えます。
GuruGuruImagawayaki.hsp の 9 行目のカメラの位置の Z 座標を 5 から 1 へ変えて、近づいて表示するようにしました。
setpos GPOBJ_CAMERA, 0,0,1 ; カメラ位置を設定実行するとワイヤーフレームのように線だけで構成された 3D モデルが回転しているようです。
テクスチャ bake.png が読み込まれなかったようです。
imagawayaki.material ファイルをテキストエディタで開いて確認すると、res/bake.png と指定されています。
他にも shaders フォルダのシェーダを参照しています。
以下は imagawayaki.material の一部です。
technique
{
pass
{
vertexShader = res/shaders/textured.vert
fragmentShader = res/shaders/textured.frag
}
}
}
material kaitenyaki_material : textured
{
u_ambientColor = 0.0508761, 0.0508761, 0.0508761
u_cameraPosition = CAMERA_WORLD_POSITION
u_inverseTransposeWorldViewMatrix = INVERSE_TRANSPOSE_WORLD_VIEW_MATRIX
u_specularExponent = 7.19215
sampler u_diffuseTexture
{
path = res/bake.png
wrapS = REPEAT
wrapT = REPEAT
}
このパスに合わせるために、imagawayaki.gpb と imagawayaki.material と bake.png を res フォルダの中に移動しました。
GuruGuruImagawayaki.hsp の 12 行目の gpload の gpb のファイルパスも “imagawayaki” から “res/imagawayaki” に変更します。
gpload id_model, "res/imagawayaki" ; 今川焼きの 3D モデル (gpb) を読み込みます。実行すると、bake.png のテクスチャ画像も 3D モデルに適用されて、今川焼きが回転しました。
gpb 3D モデルを回転させるプログラム
自己責任でご利用ください。
HSP3.6 sample/hgimg4/test1.hsp のカメラ位置と、3D モデルの作成関数を gpbox から gpload に変更したものです。
#include "hgimg4.as"
title "HGIMG4 Test"
gpreset
setcls CLSMODE_SOLID, 0 ; 画面クリア設定
setpos GPOBJ_CAMERA, 0,0,1 ; カメラ位置を設定
// gpbox id_model, 1 ; 箱ノードを追加
gpload id_model, "res/imagawayaki" ; res フォルダの今川焼きの 3D モデル (gpb) を読み込みます。
repeat
redraw 0 ; 描画開始
addang id_model,0,0.02,0.01 ; ノード回転
gpdraw ; シーンの描画
color 255,255,255
pos 8,8:mes "HGIMG4 sample"
redraw 1 ; 描画終了
await 1000/60 ; 待ち時間
loopファイル構成は以下です。
fbx ファイルは gpb と material ファイルを作るために配置したもので、実行時は参照されません。
まとめ
今回は、「プログラミング生放送」コミュニティのウェブサイトからダウンロードして fbx から gpb , material ファイルに変換した「今川焼き」の 3D モデルを HSP3.6 の HGIMG4 のサンプル test1.hsp のプログラムの一部を変更することで回転しながら表示する手順と結果、プログラムとファイル構成について紹介しました。
参照サイト Thank You!
- プログラミング言語 HSP3 公式 – HSPTV!
- HGIMG4プログラミングガイド
- HGIMG4 Unity連携ガイド
- OHDL – gpload
- プログラミング生放送 – 略してプロ生
- [Blender][Unity] 今川焼き・回転焼き・大判焼き・ベイクドモチョチョ・精霊馬 3Dデータ公開 – プログラミング生放送
- HSP3.7に向けたβテストについてのお願い – HSPTV!掲示板
記事一覧 → Compota-Soft-Press
コメント