前回は、「プログラミング生放送」コミュニティのウェブサイトから「今川焼き」の 3D データをダウンロードする手順を紹介しました。
入手した fbx をプログラミング言語 HSP3 の HGIMG4 で扱える gpb に、GBP converter ver.0.6 を用いて変換する手順も紹介しました。
立方体を回転させる HSP3.6 に内蔵されているサンプルプログラムのコードと実行結果も紹介しました。
前回の記事:HSP3 HGIMG4で3Dモデルの今川焼きを回転させる1/2 | Compota-Soft-Press
![プログラミング生放送ウェブサイト内の今川焼き 3D データ公開ページの OneDrive のリンクをクリックします.](https://compota-soft.work/wp1/wp-content/uploads/2023/09/プログラミング生放送ウェブサイト内の今川焼き-3D-データ公開ページの-OneDrive-のリンクをクリックします-1024x741.png)
今回は、サンプルプログラムのコピーを改造して、「今川焼き」の 3D モデルを HSP3 で回転しながら表示させます。
※ HSP3.6を使用しています。
フォルダ構成
前回紹介した回転する立方体を表示するプログラムは HSP アシスタントでは Sample タブの HGIMG4 フォルダの test1 から参照・実行できます。
![HSPアシスタントのSampleタブの HGIME4 フォルダの中の test10 を選択して Edit ボタンでプログラムを開きます](https://compota-soft.work/wp1/wp-content/uploads/2023/09/HSPアシスタントのSampleタブの-HGIME4-フォルダの中の-test10-を選択して-Edit-ボタンでプログラムを開きます-1024x743.png)
test1.hsp は HSP3.6 のインストールフォルダの中の sample/hgimg4/ の中にあります。
この test1.hsp を前回 gpb と material ファイルを出力した「ImagawaYaki」フォルダに貼り付けます。
![](https://compota-soft.work/wp1/wp-content/uploads/2023/09/HSP3.6-サンプルの-HGIMG4-test1-の場所.png)
test1.hsp を今川焼きの gpb の置いてあるフォルダにコピーします。
![今川焼きの gpb ファイルのあるフォルダに test1 サンプルプログラムをコピーします.](https://compota-soft.work/wp1/wp-content/uploads/2023/09/今川焼きの-gpb-ファイルのあるフォルダに-test1-サンプルプログラムをコピーします.png)
GuruGuruImagawaYaki.hsp に区別しやすいようにリネームしました。
![サンプルプログラムtest1をコピーした後は、間違いにくいようにリネームします.](https://compota-soft.work/wp1/wp-content/uploads/2023/09/サンプルプログラムtest1をコピーした後は、間違いにくいようにリネームします.png)
GuruGuruImagawaYaki.hsp をダブルクリックして HSP スクリプトエディタを起動して、「HSP実行」ボタンを押して実行します。
![サンプルプログラムtest1をリネームしたhspファイルを開いて実行します](https://compota-soft.work/wp1/wp-content/uploads/2023/09/サンプルプログラムtest1をリネームしたhspファイルを開いて実行します-1024x743.png)
しかし、コードは変更していないのに、真っ暗な画面が表示されるだけでした。
![サンプルプログラム test1 を移動しただけなのに立方体が表示されなくなりました.](https://compota-soft.work/wp1/wp-content/uploads/2023/09/サンプルプログラム-test1-を移動しただけなのに立方体が表示されなくなりました.png)
「HGIMG4プログラミングガイド」を読むと、3D の機能を利用する際にシェーダーが必要になるらしく、res/shaders フォルダをコピーしておく必要があります。
リソースフォルダについて
HGIMG4では、3D描画使用時にスクリプトと同じフォルダにある「res」フォルダから必要なリソースを読み込みます。 リソースファイルは、「sample/hgimg4/res」のフォルダに含まれています。 以下のファイルは、起動のために必要ですので、実行ファイル作成時なども必ず入れておいてください。 res/shaders フォルダ(中のファイルも含む)
HGIMG4プログラミングガイド
HSP3.6 インストールフォルダの sample/hgimg4 の中の res フォルダを、今川焼きの gpb やコピーしたサンプルプログラムのおいてある「ImagawaYaki」フォルダにコピーします。
![ImagawaYaki フォルダに HSIMG4 サンプルフォルダの res をコピーします.](https://compota-soft.work/wp1/wp-content/uploads/2023/09/ImagawaYaki-フォルダに-HSIMG4-サンプルフォルダの-res-をコピーします.png)
res フォルダの中には duck.gpb (あひるの 3D モデル)などの様々なデータがありますが、test1 にはシェーダーのみが必要なので、res の中の shaders フォルダ以外は削除しました。
![ImagawaYaki フォルダに HSIMG4 サンプルフォルダの res の shaders フォルダ以外は削除しました.](https://compota-soft.work/wp1/wp-content/uploads/2023/09/ImagawaYaki-フォルダに-HSIMG4-サンプルフォルダの-res-の-shaders-フォルダ以外は削除しました.png)
再び、test1.hsp をリネームした GuruGuruImagawayaki.hsp を実行すると、コピーした shaders フォルダの中のシェーダーのおかげで立方体が表示されるようになりました。
![HSP3 HGIMG4 サンプル test1 の実行例](https://compota-soft.work/wp1/wp-content/uploads/2023/09/HSP3-HGIMG4-サンプル-test1-の実行例.gif)
今川焼きの 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 で gpbox から gpload に変えた実行結果](https://compota-soft.work/wp1/wp-content/uploads/2023/09/GuruGuruImagawaYaki.hsp-で-gpbox-から-gpload-に変えた実行結果.png)
GuruGuruImagawayaki.hsp の 9 行目のカメラの位置の Z 座標を 5 から 1 へ変えて、近づいて表示するようにしました。
setpos GPOBJ_CAMERA, 0,0,1 ; カメラ位置を設定
実行するとワイヤーフレームのように線だけで構成された 3D モデルが回転しているようです。
![HSP3 GuruGuruImagawaYaki.hspのカメラ位置を近づけた映像](https://compota-soft.work/wp1/wp-content/uploads/2023/09/HSP3-GuruGuruImagawaYaki.hspのカメラ位置を近づけた映像.gif)
テクスチャ 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で用いる3Dモデルのファイル3つをres に移動します.](https://compota-soft.work/wp1/wp-content/uploads/2023/09/GuruGuruImagawayaki.hspで用いる3Dモデルのファイル3つをres-に移動します.png)
GuruGuruImagawayaki.hsp の 12 行目の gpload の gpb のファイルパスも “imagawayaki” から “res/imagawayaki” に変更します。
gpload id_model, "res/imagawayaki" ; 今川焼きの 3D モデル (gpb) を読み込みます。
実行すると、bake.png のテクスチャ画像も 3D モデルに適用されて、今川焼きが回転しました。
![HSP3 GuruGuruImagawaYaki.hspのカメラ位置を近づけた映像(res に3Dモデルデータを移動するとテクスチャも読み込まれました)](https://compota-soft.work/wp1/wp-content/uploads/2023/09/HSP3-GuruGuruImagawaYaki.hspのカメラ位置を近づけた映像res-に3Dモデルデータを移動するとテクスチャも読み込まれました).gif)
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 ファイルを作るために配置したもので、実行時は参照されません。
![GuruGuruImagawayaki.hspを実行して今川焼きの3Dモデルを回転させた際のファイル構成.](https://compota-soft.work/wp1/wp-content/uploads/2023/09/GuruGuruImagawayaki.hspを実行して今川焼きの3Dモデルを回転させた際のファイル構成.png)
まとめ
今回は、「プログラミング生放送」コミュニティのウェブサイトからダウンロードして 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
コメント