強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Firefox 10でWebGLの描画にアンチエイリアスが行われるようになった

Firefox 10でWebGLの描画にアンチエイリアスが行われるようになったそうなので試してみました。

こちらのページによると

Firefox 10 の主な新機能を紹介します « Mozilla Developer Street (modest)
https://dev.mozilla.jp/2011/12/firefox10/

この様に記述すればOKみたいです。

ctx = canvas.getContext('webgl', { antialias: true });

しかし、実際にはこれでは上手く行きませんでした。仕様書の方を確認すると antialias のパラメータはデフォルトで true みたいです。

WebGL Specification
http://www.khronos.org/registry/webgl/specs/latest/#5.2

つまり、デフォルトでアンチエイリアスがかかっているという事です。

そのため逆に { antialias: false } に設定してアンチエイリアスを切ってみた所、確かにシャギーが発生した画像となりました。

こちらが比較画像。
アンチエイリアス有り
アンチエイリアス無し
髪の毛の輪郭辺りを見るとアンチエイリアスの効果をはっきりと感じますね(眉毛などはテクスチャ画像なので変化無し)。

gl.enchant.js の場合は gl.enchant.js ファイルの以下の部分を

            gl = canvas.getContext('experimental-webgl');

以下の様に変更するとアンチエイリアスを切る事が出来ました。

		    if (navigator.product == 'Gecko') {
	            gl = canvas.getContext('experimental-webgl', { antialias: false });
		    } else {
	            gl = canvas.getContext('experimental-webgl');
		    }

因みにFirefoxのサイトに書かれていた canvas.getContext('webgl', { antialias: true }); のように 'webgl' という記述はまだFirefoxはサポートしていませんでした。必ず、 'experimental-webgl' という記述をするように注意して下さい。

実際に比較出来る様にアンチエイリアスかけているものとかけていないもののリンクを記述しておきます。

こちらがデフォルト(アンチエイリアスがかかる)

こちらがアンチエイリアスの設定を false に設定したもの