この記事は前回の「WebGL開発に役立つベクトルの足し算・引き算 (Three.js編)」の続編です。前回まではベクトルの足し算、引き算を勉強しましたが、ベクトルはまだまだ便利な性質を持っています。今回はみなさんが高校で学んでいるはずの内積について紹介します。

内積と聞いて身構えてしまう方もいると思いますが、前回と同様にThree.jsが難しい計算は担ってくれるのでご安心を。一緒に内積についておさらいし、その内積をThree.jsでどう応用していくかを学んでいきましょう。

内積を使った3Dのデモの紹介

本題に入る前に内積を使ったデモを作成したので紹介します。今回は以下のようなライトで照らすような処理を内積を使って実装しています。サンプルコードもGitHubにアップしているので参考ください。

※このデモはThree.js(r84)で作成しています。

内積のおさらい

内積とは

内積とはベクトルの掛け算です。内積は「OA・OB」のようにドット繋ぎで表記します。式で表すと以下のようになります。

OA・OB = |OA||OB|cosθ

例えば、OAベクトルが長さが2、OBベクトルの長さが1、その2つのベクトルのなす角が60度の場合、

OA・OB = |OA||OB|cosθ = 2 x 1 x 0.5;

となり、内積は1となります。この結果からも分かるように内積は計算結果がベクトルではなく数値になります。足し算や引き算の場合は計算結果がベクトルになっていましたが内積は数値になるので覚えておきましょう。

Three.jsでの内積の計算

Three.jsで内積を計算する場合は、THREE.Vector2クラスもしくはTHREE.Vector3クラスに用意されているdot()メソッドを使用します。先程の式をJavaScriptで表現すると以下のようになります。

var vOA = new THREE.Vector2(1, Math.sqrt(3));
var vOB = new THREE.Vector2(1, 0);
var value = vOA.dot(vOB); // => 0.5

内積の性質

先程の数式を並び替えてみます。

cos0 = OA・OB / |OA||OB|

OAベクトルとOBベクトルが単位ベクトル(長さが1のベクトル)だった場合は

cos0 = OA・OB / 1 x 1 = OA・OB

となります。つまり単位ベクトル同士の内積はcosθを表しています。 この性質は3Dコンテンツを制作する上で非常に役に立ちます。

例えば、下図のように点CとODベクトルがあるとします。この時、先程の性質を使用することで、点CがODベクトルの前後どちら向きにあるかを内積を使って判定できます。

cosθがプラス値であれば前方、マイナス値であれば後方にあると判別できます。上図の場合はcosθが正の値なので前方にあると言えます。今回のデモ作成ではこの性質を活用します。

内積を使ってデモを作成してみよう

冒頭で紹介したデモを実装する為のポイントを解説します。

1. パーティクルをランダムに設置しよう

今回のデモでは球の表面にパーティクルをランダムに設置します。下のコードは一つのパーティクルを生成するための例です。

// スプライト
var particle = new THREE.Sprite(
  new THREE.SpriteMaterial({
    color: 0xffff00,
    opacity: 0.3
  })
);

// ランダムにラジアン角を生成
var phi = ((Math.random() * 180) - 90) * Math.PI / 180,
    theta = (Math.random() * 360) * Math.PI / 180;

// 半径を設定
var radius = 50;

// 球の表面にポジションを設定
particle.position.x = radius * Math.cos(phi) * Math.cos(theta) * -1;
particle.position.y = radius * Math.sin(phi);
particle.position.z = radius * Math.cos(phi) * Math.sin(theta);

同じ処理を必要な数分だけ行い、球の表面にまばらに散るように実装しましょう。球の表面へ設置するための数式に関しては記事「WebGL開発に役立つ重要な三角関数の数式・概念まとめ (Three.js編)」で解説していますので参考ください。

2. 懐中電灯を回転させよう

懐中電灯のメッシュをZ軸を中心に回転させます。下のコードは毎フレーム行う処理の例です。mesh変数には懐中電灯のメッシュが代入されているものとします。

// 角度をインクリメント
var angle += 2.5;
// ラジアン角に変換
var radian = angle * Math.PI / 180;
// ライトを回転
mesh.rotation.z = radian;

コードの通り簡単な処理で回転アニメーションを実現できました。この時、同時にメッシュの正面ベクトル情報も更新しておきますfrontVector変数は事前に宣言されているものとします。

// 正面ベクトルを更新
var x = Math.cos(radian);
var y = Math.sin(radian);
frontVector = new THREE.Vector3(x, y, 0);

先程算出したラジアン角をもとに、三角関数を使って懐中電灯の正面ベクトルを求める事ができました。

3. パーティクルの不透明度を設定しよう

懐中電灯の正面ベクトル、パーティクル位置ベクトルの単位ベクトル、2つのベクトルの内積を求め、その値をパーティクルの不透明度として使用します。

// パーティクルの位置ベクトルを複製
var particlePos = particle.position.clone();
// 内積を算出
var dot = particlePos.normalize().dot(frontVector);
// 不透明度に設定
particle.material.opacity = dot;

上記のコードを全てのパーティクルに実行すると、懐中電灯前方にあるパーティクルのみが表示されます。さらに正面ベクトルと位置ベクトルの方向が近ければ近いほどパーティクルの不透明度が1に近づいていきます。

しかし、表示される範囲が広すぎるため少し狭めます。内積が0.8~1.0の場合にのみ表示されるようにしてみましょう。

// パーティクルの位置ベクトルを複製
var particlePos = particle.position.clone();
// 内積を算出
var dot = particlePos.normalize().dot(frontVector);
// 絞り値を設定
var aperture = 0.2;
// 0〜0.2に値を変換
var numerator = dot - (1 - aperture);
// 割合を計算し不透明度に設定
var opacity = numerator / aperture;

これで表示範囲が絞られ、懐中電灯の自然な光になりました。

終わりに

このように内積を使うことで、物体の前後にあるかどうかを判別できることを分かっていただけたと思います。これは3Dキャラクターの視界に敵がいるかどうかの判定や、カメラの視界外の物体は描画しないようにする時などにも応用できます。

今回は2つのベクトルの角度を求める用途で内積を使用しましたが、内積の用途はこれだけではありません。もし興味のある人は内積についてさらに調べてみるとおもしろいと思います。次回は外積について解説しますのでそちらも是非参考ください。