今日の作業は「テクスチャからテクスチャへのコピー」です。

早速ですが出来上がったシェーダーのコード(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号)

今日の作業は「画面サイズ変更時にパターン保持その3 – 画像調整」です。

今までは画面サイズ変更でライフはクリアされ、画面上のライフは全て消えました。それを今日の作業で画面サイズ変更前のライフを引き継ぐようにしました。

上の画像がウィンドウサイズ変更前、下の画像がウィンドウサイズの高さを増やした後です。

・・・どういうこと？何がどうなってるの？

画面サイズを引き延ばした下の画像では、本来は上下にスペースが増えて、ライフの形が保持される想定でした。

しかし実際は全体的に引き延ばされ、場所によってはライフの形が崩れてしまいました。

想定の動作とは違います。本来は今日中にこの部分を修正したかったのですが、思ったより時間がかかったため明日の作業にしたいと思います。

以上です。

本家デアゴGTR-NISMO箱積状況：2箱(33,34号)

今日の作業は「画面サイズ変更時にパターン保持その2 – 画像描画」です。

昨日保存したテクスチャを使って、任意のタイミングで画面に描画することに成功しました。画面サイズ変更という名目で作業中ですが、ライフのセーブやロード機能にも利用出来そうです。

コードは長いので省略します！

WebGLでコード書いてる人の役に立てるよう、今後はなるべくコードを載せたいです・・・以上です！

本家デアゴGTR-NISMO箱積状況：2箱(33,34号)

今日の作業は「画面サイズ変更時にパターン保持その1 – 画像保存」です。

現状、画面サイズ変更でライフはクリアされ、画面上のライフは全て消えます。それを今日から４日間(その1〜その4)の作業で画面サイズ変更前のライフを画面サイズ変更後も引き継ぐようにしたいと思います。

今日は1日目の作業として、フレームバッファにテクスチャを紐付けして、そのテクスチャにオフスクリーンで描画中のライフを保存しました。

具体的にはgl.framebufferTexture2Dを使いました。コードは超長い＆整理出来ていないので省略します・・・

以上です！

本家デアゴGTR-NISMO箱積状況：2箱(33,34号)

今日の作業は「jsキャッシュ防止」です。

いきなりですが、作成したコードは以下の通りです。

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const hour = now.getHours();
const min = now.getMinutes();
const sec = now.getSeconds();

var key = year + "_" + month + "_" + day + "_" + hour + "_" + min + "_" + sec;

$(document).ready(function(){

    let paramIndex = location.href.indexOf('?');
    if (-1 == paramIndex) {
        location.replace(location.href + "?date=" + key);
        return;
    } else if (location.href.slice(paramIndex + 1) !== "date=" + key) {
        location.replace(location.href.slice(0, paramIndex) + "?date=" + key);
        return;
    }
    // js load
    let scripts =['SF_utils.js?date=' + key
                    ,'SF_base.js?date=' + key
                    ,'SF_points.js?date=' + key
                    ,'SF_plates.js?date=' + key
                    ,'SF_cubes.js?date=' + key
                    ,'SF_cubesIns.js?date=' + key
                    ,'SF_Controls.js?date=' + key
                    ,'SF_UI.js?date=' + key
                    ,'SF_Life_CPU.js?date=' + key
                    ,'SF_Life.js?date=' + key
                    ,'SF_Land.js?date=' + key
                    ,'SF_Steve.js?date=' + key
                    ,'main.js?date=' + key];
    
    function onloaded(e){
        onload();
    }
    let len = scripts.length;
    let i = 0;
    (function appendScript() {
        let script = document.createElement('script');
        script.src = scripts[i];
        if(typeof scripts[i] == "undefined"){
            return false;
        }
        document.head.appendChild(script);
        if (i++ < len) {
            script.onload = function(e){
                if (i == len) {
                    onloaded(e);
                } else {
                    appendScript();
                }
            }
        }
    })();
});

昨日のCache BustingをJSに適用した形です。htmlの場合はhref.replaceで画面遷移しましたが、jsはタグを生成して動的に追加しています。

"onloaded"に処理が来た時点で、全てのjsが読み込まれた状態になっています。

イメージやcssなども同様の手法で行けると思います。

これでリロード地獄から解放されました！やった！

以上です！

本家デアゴGTR-NISMO箱積状況：2箱(33,34号)

今日の作業は「htmlキャッシュ防止」です。

開発時は頻繁にhtmlやjsを変更します。ブラウザに変更を反映するにはその度にキャッシュを削除したり”スーパーリロード”が必要なのですが、面倒になってきました。

そこで常に最新ソースをロードするような仕組みを作りました。しかもphpなどサーバサイドの言語を使わず、htmlとjavascriptのみで、です。

let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let day = now.getDate();
let hour = now.getHours();
let min = now.getMinutes();
let sec = now.getSeconds();

let key = year + "_" + month + "_" + day + "_" + hour + "_" + min + "_" + sec;

let paramIndex = location.href.indexOf('?');
if (-1 == paramIndex) {
    location.replace(location.href + "?date=" + key);
    return;
} else if (location.href.slice(paramIndex + 1) !== "date=" + key) {
    location.replace(location.href.slice(0, paramIndex) + "?date=" + key);
    return;
}
・・・以降処理内容

?とそれ以降の文字列を付加してロードする方法で、これをCache Bustingと言います。こうすることでブラウザに関係なく必ず最新のソースを取って来れます。上記コードは1秒毎に新しいコードをサーバに取りに行ってくれますが、本番リリース時は1日単位くらいに調整予定です。

明日はJSもキャッシュしないようにします。

以上です！

本家デアゴGTR-NISMO箱積状況：2箱(33,34号)

今日は一週間の予定を立てる日です。

78日目：htmlキャッシュ防止
79日目：jsキャッシュ防止
80日目：画面サイズ変更時にパターン保持その1 – 画像保存
81日目：画面サイズ変更時にパターン保持その2 – 画像描画
82日目：画面サイズ変更時にパターン保持その3 – 画像調整
83日目：画面サイズ変更時にパターン保持その4 – 仕上げ
84日目：予備日(次の週の予定を立てる)

以上です！

本家デアゴGTR-NISMO箱積状況：1箱(33号)

今日の作業は「画面に収まりきらないUIの切り替え処理その3」です。

昨日はマウスの移動量に応じてUIの表示範囲がずれるようにしましたが、移動量に制限がないためUIが完全に見えなくなるまでスクロールしてしまっていたので、適切にスクロールのリミットをかけました。

また、スクロールした場合は各種UI(ラジオやボタン)が反応しないように調整しました。スクロールしたと思ったのにボタン反応したらイライラしますからね。

これでUIのスクロール処理が完成しました！今後は画面の表示範囲を気にせずガンガンUIを追加できます！

以上です！

本家デアゴGTR-NISMO箱積状況：1箱(33号)