今日の作業は「データの保存/読込先の検討」です。
まず大事なこととして、WebGLのアプリでベースはブラウザなので、ローカルドライブには保存出来ません。
HTML5から導入されたAPI「localStorage（ローカルストレージ）」と言うものがあるみたいですが、所詮はブラウザのキャッシュを削除すると消えてしまうものです。上限も5MBまでとなります。
やはりサーバー保存が王道でしょうね。サーバーを用意する手間がありますが、どの端末からでも同じデータが読み書き出来る点も大きなメリットですよね。
ネックとしては、利用者にID/PASSWORDを入力(ユーザー登録)して使ってもらうことがあります。
すんなりとユーザー登録してもらえるよう、入力タイミングはうまく調整しようと思います。
今日は以上です！
本家デアゴGTR-NISMO箱積状況：4箱 (33,34,35,36号)
4箱たまった。そろそろ消化しないと永遠に手を出したくなくなりそう。
今週の予定です。
92日目：データの保存/読込先の検討
93日目：セーブデータのフォーマット検討
94日目：データ読込ダイアログの作成その1-テクスチャ
95日目：データ読込ダイアログの作成その2-ダイアログ表示
96日目：データ読込ダイアログの作成その3-データ表示
97日目：データ読込ダイアログの作成その4-ページ切替
98日目：予備日(次の週の予定を立てる)
WebGLって、ブラウザベースだから基本的にデータ保存できないんです。それをどうするのかを92日目に検討します。93日目はセーブデータのフォーマットを決めます。94日目からデータを読み書きするUIを作成する予定です。
以上です！
本家デアゴGTR-NISMO箱積状況：3箱 (33,34,35号)
今日の作業は「画面サイズ変更時のライフパターン最終仕上げ」です。
iOSデバイスを90度回転した場合の表示が正しく行われるようにしました。
作業結果を今回動画でアップしようとしたのですが、デバイスを回転すると録画が途中で切れてしまいました。
残念ながら回転時の様子は確認出来ませんが、現在まで作成してきたWebGLでのLifegameの動作の様子は以下となります。iPhoneXで撮影しました。
WebGLでUIを1から作成(車輪の再発明)してここまで行ったアホはあまり居ないのではないでしょうか？
自分なりには大満足しています。
今日の作業は以上です！
本家デアゴGTR-NISMO箱積状況：3箱 (33,34,35号)
やばい、明後日36号が出るから4号積むことになる。そろそろ消化せんと・・・
今日は「テクスチャからテクスチャへ回転してコピーその2」の作業で、iPadの向きを変えた際にテクスチャも回転する作業を行う予定でした。
が、iPadでうまくWebGLが動かなかったため、その原因究明に当たっていました。
mac上のSafariも同様に動きませんでした。エラーメッセージは
WebGL: INVALID_OPERATION: drawArrays: attempt to access out of bounds arrays
でした。
原因を特定したところ、gl.drawArraysの後に gl.deleteBufferを使って後片付けを行うと、何故かgl.drawArraysが動かなくなるというものでした。
ChromeやFireFoxではちゃんと動くんですけどね。多分GPUに処理を渡すタイミングがブラウザで異なるのでしょう。ブラウザ毎の挙動の差異って厄介です。
まあ、今回開発しているWebGLのアプリは、
IEは動作保証外として最初から切り捨てている
ので、そこまでブラウザの差異で困ることはないですけどね。
以上です！
本家デアゴGTR-NISMO箱積状況：3箱 (33,34,35号)
今日の作業は「テクスチャからテクスチャへ回転してコピーその1」です。
今日の作業の前に、昨日のシェーダーをちょっと改良しました。
float preTexX = gl_FragCoord.x * dotX +
float(uFromSize.x - uToSize.x) * dotX / 2.0;
float preTexY = gl_FragCoord.y * dotY +
float(uFromSize.y - uToSize.y) * dotY / 2.0;
コピー元のテクスチャ座標を示すpreTexXとpreTexYの位置を調整して、ウィンドウの真ん中を基準にコピーするようにしました。
で、今日の作業の本題、テクスチャの回転です。
preTexXとpreTexYにセットする座標について、xとyを入れ替えます。かつ、x座標を反転します。式にすると次になります。
float preTexX = 1.0 - (gl_FragCoord.y * dotX + float(uFromSize.y - uToSize.y) * dotX / 2.0);
float preTexY = gl_FragCoord.x * dotY + float(uFromSize.x - uToSize.x) * dotY / 2.0;
この画像が・・・
はい、このように90度回転しました。なんか妙に左上に寄っているのが気になりますが、ひとまず良しとします。
明日はiPad実機を使ってデバイスが回転した時にライフパターンも回転するようにしたいと思います。
以上です！
本家デアゴGTR-NISMO箱積状況：3箱 (33,34,35号)
今日の作業は「テクスチャからテクスチャへ位置変更してコピー」です。
昨日はウィンドウサイズを変更してもライフパターンが保持されるようにしましたが、ウィンドウの左下がベースなっていました。これを左上基準に変更します。
修正したシェーダーは以下のようになりました。
const LIFE_FS_COPY = '\
precision highp float;\
\
uniform sampler2D uPreTextureCoord;\
uniform ivec2 uFromSize;\
uniform ivec2 uToSize;\
\
void main() {\
float dotX = 1.0 / float(uFromSize.x);\
float dotY = 1.0 / float(uFromSize.y);\
float preTexX = gl_FragCoord.x * dotX;\
float preTexY = gl_FragCoord.y * dotY +
float(uFromSize.y - uToSize.y) * dotY;\
if (0.0 <= preTexX && preTexX < 1.0
&& 0.0 <= preTexY && preTexY < 1.0) {\
gl_FragColor =
texture2D(uPreTextureCoord, vec2(preTexX, preTexY));\
} else {\
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\
}\
}';
変更前と変更後のテクスチャサイズの差分 (uFromSize.y - uToSize.y) をpreTexY 変数に加算して調整しています。
また、サイズ変更前のテクスチャ座標を示すpreTexX と preTexY が 0〜1未満の範囲外ならば描画先を黒色にするよう変更しました。
修正後のウィンドウサイズ変更結果は次の通りです。
ウィンドウサイズを大きくすると・・・
はい、問題なく左上基準になりました。また、昨日の端のライフパターンが伸びる現象も解決しました。よかった！
以上です！
本家デアゴGTR-NISMO箱積状況：3箱 (33,34,35号)
今日の作業は「テクスチャからテクスチャへサイズ変更してコピー」です。
昨日のfragment shaderだと、コピー先のテクスチャサイズuResolution に合わせてライフサイズが変更されてライフパターンが崩れてしまっていました。
そこで、コピー元のテクスチャサイズ uFromSize を新たにshaderへ渡して、これを元に処理をするようにしました。
const LIFE_FS_COPY = '\
precision highp float;\
\
uniform sampler2D uPreTextureCoord;\
uniform ivec2 uFromSize;\
uniform ivec2 uToSize;\
\
void main() {\
float dotX = 1.0 / float(uFromSize.x);\
float dotY = 1.0 / float(uFromSize.y);\
gl_FragColor = texture2D(uPreTextureCoord, vec2(gl_FragCoord.x * dotX, gl_FragCoord.y * dotY);\
}';
これで、ウィンドウサイズを変更してもライフの形が保たれるようになりました。
元々のuResolutionは、分かり易いように変数名をuToSizeに変更しました。
これを、縦横1.5倍くらいのウィンドウサイズに変更すると
となり、gliderのライフパターンが保たれているのがわかると思います。ただし、左下基準で移動しているので、明日はこれを左上基準の位置で保持するようにしたい思います。
あとは、端のライフパターンが伸びたようになってしまうため、この対処も行う予定です。
以上です！
本家デアゴGTR-NISMO箱積状況：3箱 (33,34,35号)
今日の作業は「テクスチャからテクスチャへのコピー」です。
早速ですが出来上がったシェーダーのコード(WebGL 1.0)です。文字列として記述してるのでちょっと見難いです。
const LIFE_VS_COPY = '\
attribute vec3 aVertexPosition;\
\
void main() {\
gl_Position = vec4(aVertexPosition, 1.0);\
}';
const LIFE_FS_COPY = '\
precision highp float;\
\
uniform sampler2D uPreTextureCoord;\
uniform vec2 uResolution;\
\
void main() {\
vec2 scale = 1.0 / uResolution;\
gl_FragColor = texture2D(uPreTextureCoord, gl_FragCoord.xy * scale);\
}';
ライフを描画する画面は高速化のため1枚のテクスチャとして描いています。(ポイントスプライトを使っての描画ではありません。)
vertex shaderでは、常に1枚の四角形をTRIANGLE_STRIPで描画しているだけです。
fragment shaderでは、バインドしたテクスチャuPreTextureCoord (コピー元のライフデータの画像が入っている)を元に色付けを行なっています。uResolusionにはライフの解像度が入っています。1つのライフを1×1ピクセルで表現してテクスチャとして保持しており、テクスチャ座標(0〜1)に合わせるためにscale (=1.0 / uResolution)で調整して取得しています。
明日からはvertex shaderを変更してサイズ調整、位置変更、回転などの処理を実装して行きます。
以上です！
本家デアゴGTR-NISMO箱積状況：3箱 (33,34,35号)
先週出来なかった作業を小分けにして再挑戦です。
85日目：テクスチャからテクスチャへのコピー
86日目：テクスチャからテクスチャへサイズ変更してコピー
87日目：テクスチャからテクスチャへ位置変更してコピー
88日目：テクスチャからテクスチャへ回転してコピーその1
89日目：テクスチャからテクスチャへ回転してコピーその2
90日目：画面サイズ変更時のライフパターン最終仕上げ
91日目：予備日(次の週の予定を立てる)
テクスチャテクスチャ言いすぎ。以上です。
ああ、明日はデアゴ35号取りに行くの止めようかな・・・
本家デアゴGTR-NISMO箱積状況：2箱(33,34号)
今日で「画面サイズ変更時にライフの表示パターンを保持」の作業が完了する予定でした。
甘かったです。大甘です。
すぐ出来るだろうと思った作業が、実はとてつもなく難しい作業だと判明することは稀にあります。腐ってもそこそこ長い期間ソフトウェア開発をしている私ですが、工数の予想なんて簡単には行きません。
ずれまくります。
ソフトウェアは日々進歩しています。
生物です。
腐っているんです。
iOSやWindowsとかだってバグらだけでしょ？
はい、というわけで画面サイズ変更時のライフ調整表示作業は来週も続きます・・・
以上です・・・
本家デアゴGTR-NISMO箱積状況：2箱(33,34号)