Three.jsソースコード読解メモ(ライティング編)_基礎知識

天気はますます寒くなり、人々はますます怠け者になってきました。暖かい寝室で小説を読んだり、ゲームをしたりするのがますます好きになってきました。Three.js のソース コードを見るのは久しぶりです。 。今日は天気も良いので、引き続き注目してください！

今回は、照明の部分を見てみましょう。照明モデルは、照明自体の観点からは環境光、平行光、点光源が含まれ、オブジェクトの表面マテリアルの観点からは、拡散反射と鏡面反射も含まれ​​ます。

ライト:ライト

コードをコピー コードは次のとおりです:

THREE.Light = function (hex) {
THREE.Object3D.call(this);
this.color = new THREE.Color(hex);

このオブジェクトは他の照明オブジェクトのプロトタイプ/基本クラスであり、それ自体は Object3D オブジェクト/タイプを継承します。これには、タイプ THREE.Color の色プロパティが 1 つだけあり、これは理解しやすいものです。

Three.js では、照明は Object3D オブジェクトとして、Scene.add() メソッドを通じてシーンに追加され、レンダラーは追加された照明効果を自動的にレンダリングします。

Light::AmbientLight

コードをコピー コードは次のとおりです:

THREE.AmbientLight = function ( hex ) {
THREE.Light.call( this, hex )
};

Light タイプ以下セマンティック継承を目的として Light から継承するプロパティまたはメソッド。Object3D オブジェクトである必要さえありません。


Light::DirectionalLight

コードをコピー コードは次のとおりです:

THREE.DirectionalLight = function ( hex, 強度 ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 1, 0 ) ;
this.target = new THREE.Object3D();
this.intensity = (強度 !== 未定義) : 1;
this.castShadow = false; false;
// 影に関する詳細設定 ......
};


平行光 (指向性光)、新しいパラメータを使用する場合は、色の 16 進数を渡す必要があります。この関数と光の「密度」強度を構築する演算子。このクラスには次の属性があります:

position: 位置。開始点としての位置と終了点としての原点が光の方向です。
強度: 光の密度、デフォルトは 1 です。 RGB の 3 つの値はすべて 0 ～ 255 の間であるため、光の強度の変化を反映できません。光が強いほど、オブジェクトの表面は明るくなります。
距離: 減衰距離。デフォルト値は 0 で、ライトには減衰がありません。0 以外の値の場合、ライトは位置 (実際にはその位置が存在する平面) から減衰し始めます。距離まで減衰すると、光の強度は 0 になります。
castShadow: ブール値。シャドウを生成するかどうかを制御します。デフォルトは false です。 true に設定すると、照明方向にオクルージョンされるかどうかがすべてのサーフェスに対してピクセルごとに計算されるため、多くの計算が消費されます。
onlyShadow: ブール値。オブジェクトを「照らす」ことなく影のみを生成するかどうかを制御します。デフォルトは false です。このモデルにはいくつかの特殊な用途がある可能性があります。
shadowCameraLeft、shadowCameraRight... シリーズ、位置点を中心とした影の範囲を制御しますか?
shadowBias: シャドウ バイアス、デフォルトは 0。
shadowDarkness: オブジェクトの明るさに対する影の効果。0 から 1 の間で、デフォルトは 0.5 です。
現時点では意味を推測できない属性がまだたくさんあります (コンピュータ グラフィックスを本当に勉強する必要があるので、気を付けて読み続けてください)。


Light::PointLight

コードをコピー コードは次のとおりです:

THREE.PointLight = function ( hex, 強度, 距離 ) {

THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 0, 0 );
this.intensity = ( 強度 !== 未定義 ) ? 強度 : 1;
この距離 = ( 距離 !== 未定義 ) : 0; 🎜>
点光源、位置は光源点である必要があります。点光源の位置と平行光の位置の違いに注意してください。前者は原点、後者は点 (0, 1, 1) となり、平行光の方向がデフォルトになります。ライトはカメラのデフォルトの向きと一致します。
他の 2 つのプロパティは指向性ライトの場合と同じです。 PointLight ポイント ライトには、影の生成方法に関する設定はありません。

Light::SpotLight



コードをコピー

コードは次のとおりです:

THREE.SpotLight = function (hex, 強度, 距離, 角度, 指数) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0) , 1, 0 );
this.target = new THREE.Object3D();
this.intensity = ( 強度 !== 未定義 ) : 1; = 未定義) ? 距離 : 0;
this.angle = (角度 !== 未定義) ? 角度 : Math.PI / 2;
this.exponent = (指数 !== 未定義) ? // 影に関するその他の設定...
};

特定の方向に影を生成できる点光源で、MeshLambermaterial および MeshPhongmaterial タイプのマテリアルの表面に影響を与えます。影の処理方法の設定は DirectionLight と一致しています。
要するに、照明オブジェクトは照明をレンダリングするタスクを負わず、照明をレンダリングする方法を定義するだけです。

Object::Partical

コードをコピー コードは次のとおりです:

THREE.Particle = function (material) {
THREE.Object3D.call(this);
this.material =
};はマテリアル Object3D です、これは理解するのが簡単です。 Object3D オブジェクトは、パーティクルの動きを担う座標 (パーティクルの座標) を提供します。パーティクルは、それを表すマテリアルを指定するだけで済みます。

Object::ParticalSystem



コードをコピー

コードは次のとおりです: THREE.ParticleSystem = function (ジオメトリ, マテリアル) { THREE.Object3D.call( this );

this.geometry = ジオメトリ;

this.material = ( マテリアル != = 未定義 ) ? マテリアル : new THREE.ParticleBasicMaterial( { color: Math.random() * 0xffffff } );
this.sortParticles = false;
if ( this.geometry ) {
if( this. geometry.boundingSphere === null ) {
this.geometry.computeBoundingSphere();
}
this.boundRadius = geometry.boundingSphere.radius;
this.frustumCulled = false;
};


パーティクル システム自体は、Object3D オブジェクトから継承します。いくつかの属性があります:
ジオメトリ属性、各ノードはパーティクルであり、これらはマテリアルを共有します。
マテリアル属性。これらのノードのマテリアルです。

frustumCulled 属性、ブール値、true に設定すると、カメラの視野外のパーティクルが追い出されますが、中心座標が指定されたときにパーティクル システム全体が追い出されるかどうかはまだ明らかではありません。パーティクル系の粒子が視野の外に出るか、単一パーティクルが外に出るとすぐに消去されるか、おそらく後者です。

実際、これらの記事にはすべてシーンの定義方法が含まれており、シーンのレンダリング方法について詳しく説明するのは困難です。次にデモ コードを見てから、WebGLRenderer クラスのソース コード (OMG の数千行) を見てみる予定です。