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

公開:2016-04-06 06:06
更新:2017-07-29 13:18
カテゴリ:pcグラフィックス,javascript,html5,webgl,glsl,古典的グラフィック技術を懐かしむ

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

デモページ:

https://github.sfpgmr.net/graphics/devver/20160406/index.html

ソースコード: https://github.com/sfpgmr/graphics/tree/8aa1428e33e7386524328de0c4f0fc47eee3e006

このようなデモを昔よく見かけたものだ。というか私が店頭で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;
}
`;

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