初めてのWebGL 2 第2版 ―JavaScriptで開発するリアルタイム3Dアプリケーション

6章色、奥行き、半透明

先ほどの章では、グローバル変換とローカル変換、行列スタック、アニメーションタイマー、さまざま補間テクニックなどについて説明しました。本章では、まず初めに色の構造および、WebGLやESSLでの色の扱い方を説明します。続いて、オブジェクト、光源、シーンで色を扱う方法について説明します。その次に、あるオブジェクトの手前に別のオブジェクトがあり視界から隠れているときに、WebGLが深度バッファを利用してどのようにオブジェクトを遮蔽しているのかを見ていきます。最後に、あるオブジェクトが他のオブジェクトを視界から遮っているときに、それらの色を混ぜ合わせて半透明オブジェクトを作成する、アルファブレンディングというテクニックについて説明します。

本章では以下の内容について説明します。

• オブジェクトの色
• 光源の色
• ESSLプログラムでの複数光源の利用
• 深度テストとZバッファ
• ブレンド関数とブレンド式
• カリングを利用した半透明オブジェクトの作成

6.1　WebGLでの色の利用

WebGLでは、RGBモデルにもうひとつアルファチャネルと呼ばれる4番目の属性が追加されています。この拡張されたモデルをRGBAモデルと呼びます。もちろん最後のAはalphaの頭文字です。他の3つのチャネル（赤、緑、青）と同じようにアルファチャネルにも0.0から1.0の範囲の値を使用します。図6-1＊1はRGBA色空間を1枚の画像に収めたものです。水平軸に沿って、R、G、Bチャネルの組み合わせで実現できるさまざまな色があり、垂直軸がアルファチャネルに対応します。

[＊1] 訳注：灰色の市松模様はアルファ値を読み取りやすくするための地の模様です。RGBAのいずれの値とも関係ありません。

図6-1 ...