8bitコンピュータ風コンソール画面をthree.jsに移植する。

公開:2016-11-26 21:05
更新:2017-09-18 05:24
カテゴリ:PCグラフィックス,glsl,シェーダーコードを書く

以前WebGLで作って放置していた8bitコンピュータ風コンソール画面をthree.jsに移植してみた。

https://github.com/sfpgmr/3d_codes/tree/master/snapshot/00005/20161126

この画面は8bit時代のPC風の、8色カラーグラフィックのVRAMおよびパレット、キャラクター画面をエミュレートしている。

画面バッファの内容を描画する部分はGLSLで書いた。

これを使うと8Bit時代でよく見られたグラフィック・アルゴリズムをJSで以下のように書ける。ただそれだけのための仕組みである。

  pset(x, y, color) {
    let offset = (y * this.bufferXSize + x / 8) | 0;
    let bitpos = x % 8;


    let b = (color & 1) << bitpos;
    let m = ~(1 << bitpos) & 0xff;
    let g = ((color >>> 1) & 1) << bitpos;
    let r = ((color >>> 2) & 1) << bitpos;

    this.bufferB[offset] = (this.bufferB[offset] & m) | b;
    this.bufferG[offset] = (this.bufferG[offset] & m) | g;
    this.bufferR[offset] = (this.bufferR[offset] & m) | r;
  }

WebGLだけで書くよりもコード量は少なくて済む。特にシェーダーで使うユニフォーム変数あたりのところ。

これを使ってグラフィックス・アルゴリズムの復習をしようかなと思ったけど、Rise of Tomb Raiderで遊んだせいか、またゲームを作りたくなってきたんだよね。。