カリングと深度テスト
カリングとはポリゴンの裏表を判断基準にそのポリゴンをレンダリングするかどうか判断する機構のことです。 WebGL の場合は既定ではカリングが無効
どのような順序で頂点を定義しても全てのポリゴンが描画されます。
ただし、カリングを有効にした場合には、
特定の条件を満たしたポリゴンしか画面上には描画されなくなります。
WebGL でカリングを有効にするには enable メソッドに適切な引数を与えて呼び出します。
この enable メソッドは、カリングだけでなく様々なパラメータを有効にする際に利用するメソッドで、
与えられた引数に応じて指定された機能を有効化します。
カリングを有効にする場合には、 enable メソッドに組み込み定数 gl.CULL_FACE を与えます。
カリングを有効にするコードの例
gl.enable(gl.CULL_FACE);
逆に、特定の機能を無効化したい場合には disable メソッドを使います。
カリングの裏表を切り替える方法
頂点を結ぶ順序でポリゴンの裏表を判断するカリングですが、
ときには、その判断基準を逆転したいケースが出てくることもあります。
既定値では、ポリゴンを形成する頂点を結ぶ順序が、
時計回りの場合に裏、
反時計回りの場合に表
というふうに判断されます。
これを逆に、時計回りを表として判断するようにしたいということですね。
時計回りのことを通称して CW と呼んだりします。
これは 時計回り の英語訳が ClockWise
また反時計回りのことは CCW
CounterClockWise の略
WebGL にはカリングの裏表の判断基準を変更するためのメソッド
frontFace メソッドです。
引数に与える組み込み定数は、先ほど説明した CW と CCW に由来するものです。
時計回りを 表 にする:gl.frontFace(gl.CW);
時計回りを 裏 にする(既定値):gl.frontFace(gl.CCW);