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

8章ピッキング

先ほどの章では、テクスチャについて学び、3Dアプリケーションでより細かな表現が可能になりました。本章ではピッキングと呼ばれるテクニックを利用してWebGLアプリケーションを操作する方法を学びます。ピッキングとは3Dシーン内のオブジェクトを選択する機能のことです。ピッキングに使用するデバイスでもっとも一般的なものはマウスですが、タッチスクリーンやハプティックデバイスなど、他のユーザーインタフェースも使用できます。

本章では以下のことを学びます。

• マウスを使用したWebGLシーン内のオブジェクトの選択
• オフスクリーンフレームバッファの作成と利用
• レンダーバッファとフレームバッファ
• フレームバッファからピクセルの読み取り
• カラーラベルを使用したオブジェクト選択

8.1　ピッキング

現実問題として、あらゆる3Dコンピューターグラフィックスアプリケーションには、ユーザーがシーンを操作するためのメカニズムが必要です。例えば、ゲームではターゲットを指定してそれに対してアクションを実行する必要があるでしょう。他にも、CADシステムではシーン内のオブジェクトを選択してそのプロパティを変更する必要があるでしょう。本章ではWebGLでそのようなインタラクションを実装する基礎を学びます。

まず初めに、シーン内のカメラ位置（目の位置とも言えます）からレイ（ベクトル）を飛ばしてその経路上にあるオブジェクトを計算すると、オブジェクトを選択できるということを覚えておきましょう。この処理はレイキャスティングと呼ばれ、実現するにはレイとシーン内のオブジェクト表面との交わりを検知する必要があります。

レイキャスティング レイキャスティングとはレイと表面の交差を求めることで、コンピューターグラフィックスや計算幾何学におけるさまざまな問題を解決する手段です。この用語は、コンピューターグラフィックスの世界では、1982年にConstructive ...