WebGL + GLSLによる8色パレットカラーエミュレート画面がようやく完成 - WebGLでレトロPCグラフィックスを楽しむ(7)

公開:2016-04-06 06:06
更新:2020-02-15 04:37
カテゴリ:PCグラフィックス,javascript,html5,webgl,glsl,WebGLでレトロPCグラフィックスを楽しむ

いろいろなサイトを参考にしながらようやく完成した。runをクリックすると、8色の縞模様がスクロールしているように見えるはずだ。

このようなデモを昔よく見かけたものだ。というか私が店頭でPCをいじっているときにBASICでよくこんな縞模様を書いて、パレットを変えてアニメーションさせたものである。

これを作るにあたっては以下のサイトを参考にさせていただいた。

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

https://wgld.org/d/webgl/w026.html

WebGLの初期化コードはほとんどそのまま上記のものを使わせていただいた。おかげでWebGLの初期化方法を学ぶことができた。

この画面は以下の仕様になっている。

仕組みとしては、

である。シェーダー部分のコードは以下のとおりである。

// パレットエミュレートシェーダー
// バーテックスシェーダー
var vshaderPSrc = 
`precision mediump float;
attribute vec2 position;
attribute vec2 texture_coord;
varying vec2 vtexture_coord;

void main(void) {
    gl_Position = vec4(position,0.0,1.0);
    vtexture_coord = texture_coord;
}
`;

// フラグメントシェーダー
var fshaderPSrc = 
`precision mediump float;

uniform sampler2D tex;
uniform sampler2D pallet_color;

varying vec2 vtexture_coord;

void main(void){
 vec4 sampcolor = texture2D(tex, vtexture_coord);
 vec4 color = texture2D(pallet_color,vec2(sampcolor.x * 32.0,0.5));
 gl_FragColor = color;
}
`;

私のコードはほとんどコピペレベルであるけれども、それでもシェーダーコードを書くのは楽しいなと思う。

動作サンプル

新しいウィンドウで開く

ソースコード・リソース

/dev/graphics/devver/20160406/css/sfstyle.css

/dev/graphics/devver/20160406/index.html

/dev/graphics/devver/20160406/js/bundle.js

/dev/graphics/devver/20160406/test.html