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

S.F. Page

Programming,Music,etc...

WebGL 1.0のGLSLでは整数ビット演算を自在に行うことはとても難しい。- PCグラフィックスを懐かしむ。楽しむ。(4)

PCグラフィックス JavaScript HTML5 WebGL GLSL 古典的グラフィック技術を懐かしむ

そういうことで、WebGLをセットアップし、三角形1枚を描いてみた。

ソースコード

github.com

コードは「WebGL 開発支援サイト wgld.org」のコードをほぼそのまま使用している。が、行列は1つも使っていないのでさらにシンプルになっている。2Dグラフィックスなのでビューやプロジェクションなどの座標変換が必須ではないからである。なのでシェーダーのコードも非常に簡素である。今のところではあるが。

var vshaderSrc = `
attribute vec2 position;

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

var fshaderSrc = `
void main(void){
 gl_FragColor = vec4(1.0, 1.0 ,1.0 ,1.0);
}
`;

ES2015のテンプレートリテラルのおかげで、シェーダーコードがJSのソース中に簡単に記述できるようになったのがうれしい。

それはさておき、WebGLの現在のバージョンではビット演算はできない。チートシートを見たが、演算子や関数を見たがそれらしきものがなかった。なのでシェーダーを使ってテクスチャをビット単位で読み取るというアイデアを実現するのは難しくなった。というか無理だ。JS側でビット演算処理を行わなくてはならなくなった。それを一番GPUにやらせたかったのだが。工夫の余地はまだあるかもしれないが。。

ちなみにOpenGL 4.XのGLSLやDirect3DのHLSLを見るとビット演算子はあった。OpenGL ESをベースにしているWebGLは若干機能が足りないのだね。WebGL 2.0ではサポートされるようだが。まあビット演算ができたからといって私のやりたいことができるとは限らないが。