投稿者 tel | 2014年6月7日

WebGLでドット絵を表示する

インデックスカラー画像をシェーダで描画してみる。

やっていることはとても単純でインデックスとパレット用のテクスチャを用意してフラグメントシェーダでインデックスからパレットを参照しているだけ。

precision mediump float;

varying vec2 uv;

uniform sampler2D index;
uniform sampler2D palette;

void main() {
    vec4 i = texture2D(index, uv);
    vec4 p = texture2D(palette, vec2(i.x, 0.0));
    gl_FragColor = p;
}

インデックスデータはgl.LUMINANCEとしてテクスチャを作っている。
今回はパレットのサイズを256色として256×1のサイズのテクスチャをつくった。8色で8×1のサイズのテクスチャとかにして表示したい場合はパレット数もフラグメントシェーダに教えないといけない。(インデックスデータが256段階で0~1の値になるため)

webgl_pixelart

http://jsdo.it/sapphire_al2o3/1vJc

WebGLでレンダリングすることで画像を拡大しても補間がされない。
Canvasで拡大する場合、ブラウザによっては簡単な設定で補間なしで拡大もできるがChromeとかだと使えなかった。
そのためちゃんと拡大するコードを書かないといけなかった。Canvasで速度がでなかったらWebGLでやるのもありかも。

dot_cdot_d

http://jsdo.it/sapphire_al2o3/ypvG

フラグメントシェーダ使えるのでドットの形を変えるのも簡単。と思ったけどCanvasでもそんな難しくないな。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。