読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

三角形のタイリング・フィルを実装してみた。

PCグラフィックス GLSL

三角形のタイリング・フィルを実装してみた。4階調だけだと、ちょっとたりない気がするなあ。。

3d_codes/snapshot/00005/20161130 at gh-pages · sfpgmr/3d_codes · GitHub

三角形フィルを作ってみた。

PCグラフィックス GLSL

昨日の8色ビットマップ画面上に三角形フィルを行うコードを追加してみた。 canvasやWebGLだといとも簡単に書けるものだけど、これを自前で書いてみるという。 アルゴリズムは「多角形の塗りつぶし (3)その他の手法」を参考にした。というかほぼそのまま。

これでタイリングできるようにすれば、シルフィードやらプラズマライン風のポリゴングラフィックが再現できるはずだ。そこまでまず頑張ってみよう。

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

PCグラフィックス GLSL

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

3d_codes/snapshot/00005/20161126 at master · sfpgmr/3d_codes · GitHub

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

  • 画面サイズは320X200ピクセル
  • 画面バッファはR/G/Bの各プレーンに分かれており、1bit=1ピクセルとなっている。よって1Byte=8ピクセル。
  • 画面バッファのビットをセットするとそのピクセルが描画される。
  • 文字表示用のプレーンと文字装飾をするためのアトリビュート画面を用意。文字および、アトリビュート画面の仕様はMZ-700に倣っている

画面バッファの内容を描画する部分は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で遊んだせいか、またゲームを作りたくなってきたんだよね。。