そういうことで、WebGLをセットアップし、三角形1枚を描いてみた。
コードは「https://wgld.org/」のコードをほぼそのまま使用している。が、行列は1つも使っていないのでさらにシンプルになっている。２Ｄグラフィックスなのでビューやプロジェクションなどの座標変換が必須ではないからである。なのでシェーダーのコードも非常に簡素である。今のところではあるが。
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ではサポートされるようだが。まあビット演算ができたからといって私のやりたいことができるとは限らないが。
動作サンプル
ソースコード・リソース
/dev/graphics/devver/20160330/css/sfstyle.css
/dev/graphics/devver/20160330/index.html