THREE.JS Material 2

次に、THREE.JS Material 1材料中の金属材料について説明する.
GIS DEVELOPERのYouTube動画を見て作った本当に説明上手ですよありがとう!

MeshBasicMaterial

はmeshの最も基本的な材質です.公式文書は以下の通りです.
simple shaded (flat or wireframe) way. This material is not affected by lights.
最後の文章は光の影響を受けないことを示している.この属性値については、後述します.
コードを表示し、マテリアルのプロパティを表示します.

	_setupModel() {
		const material = new THREE.MeshBasicMaterial({
			color: 0xfff000, //mesh의 색상
			wireframe: false, //mesh를 선 형태로 렌더링할 것인지 여부
			visible: true, //렌더링시에 mesh 가 보일지 안보일지
			transparent: false, //불투명도를 지정하는 값인 opacity 사용 여부
			opacity: 1, // 0 ~ 1 사이로 0은 완전히 투명
			depthTest: true, 
          //렌더링되고 있는 mesh의 픽셀 위치의 z값을 깊이 버퍼 값을 이용해 검사할지에 대한 여부
			depthWrite: true, 
          //렌더링되고 있는 mesh의 픽셀에 대한 z값을 깊이 버퍼에 기록할지에 대한 여부
			side: THREE.Frontside, 
          //mesh를 구성하는 삼각형 면에 대해 앞 면만 렌더링할것인지 뒷면만 렌더링 할 것인지 아니면 모두 렌더링할 것인지
		});

		const box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
		box.position.set(-1, 0, 0);
		
		this._scene.add(box);//객체를 scene에 추가

		const sphere = new THREE.Mesh(
			new THREE.SphereGeometry(0.7, 32, 32),
			material
		);
		sphere.position.set(1, 0, 0);

		this._scene.add(sphere);//객체를 scene에 추가
	}

結果:

depthTestとdepthwriteのプロパティを理解するには、Depth Bufferを理解する必要があります.
zバッファと呼ばれるDepth Bufferは深さバッファである.zバッファは、3 Dオブジェクトをカメラで座標変換し、画面でレンダリングする際に、その3 Dオブジェクトを構成する各画素のz値座標値を0から1に正規化します.この正規化z値を格納するバッファはzバッファである.この値が小さいほど、カメラに近い3 Dオブジェクトのピクセルになります.

さらにside属性を説明するには、上述したように、光源の影響を受けないMeshBasicMaterialではside属性の変化の違いは感じられない.また、三角形面が正面視であるか否かは、三角形を構成する座標が反時計回り方向であるか否かを決定する.

MeshLambertMaterial

公式文書は以下の通りです.
A material for non-shiny surfaces, without specular highlights.
The material uses a non-physically based Lambertian model for calculating reflectance. This can simulate some surfaces (such as untreated wood or stone) well, but cannot simulate shiny surfaces with specular highlights (such as varnished wood).
Shading is calculated using a Gouraud shading model. This calculates shading per vertex (i.e. in the vertex shader) and interpolates the results over the polygon's faces.
長いですが、meshを構成する頂点で光源の影響を計算するマテリアルでは、反射やハイライトはありません.頂点シャドウを計算し、2つの点をフェースに接続します.
上のコードでは材料部分のみ変更します.

const material = new THREE.MeshLambertMaterial({
			color: 0xfff000, //mesh의 색상
			wireframe: false, //mesh를 선 형태로 렌더링할 것인지 여부
			emissive: 0x00000, 
  //다른 광원에 영향을 받지 않는 재질 자체에서 바울하는 색상 값 기본은 검정
			transparent: true,
			opacity: 0.5,
			side: THREE.BackSide,
		});

sideは後ろに指定されているので、前はレンダリングされません.
結果:

MeshPhongMaterial

公式文書は以下の通りです.
A material for shiny surfaces with specular highlights.
The material uses a non-physically based Blinn-Phong model for calculating reflectance. Unlike the Lambertian model used in the MeshLambertMaterial this can simulate shiny surfaces with specular highlights (such as varnished wood).
メッシュは、レンダリングされたピクセル単位で光源の影響を計算するマテリアルです.MeshLambertMaterialとは異なり、反射光があり、光沢のある表面マテリアルです.マテリアルは非物理的Blinn‐Phongモデルを用いて反射率を計算した.

const material = new THREE.MeshPhongMaterial({
			color: 0xfff000, //mesh의 색상
			wireframe: false, //mesh를 선 형태로 렌더링할 것인지 여부
			emissive: 0x00000, //다른 광원에 영향을 받지 않는 재질 자체에서 바울하는 색상 값 기본은 검정

			side: THREE.BackSide,
			specular: 0x00000, //광원에 의해 반사되는 색상 default 연한 회색
			shininess: 0, //specular에 의해 반사 되는 빛 강도
			flatShading: true, //mesh를 평평하게 렌더링 할 것인지 여부
		});

結果:

MeshStandardMaterial

正式書類は以下の通りです.
A standard physically based material, using Metallic-Roughness workflow.
Physically based rendering (PBR) has recently become the standard in many 3D applications, such as Unity, Unreal and 3D Studio Max.
物理ベースのレンダリング-物理ベースのレンダリング(PBR)の1つで、シャドウはPhongシェーディングモデルを使用します.(各ピクセルの網掛けを計算)
PBRマテリアルは、上記のマテリアルよりも速度が比較的遅いが、より高品質なレンダリング結果が得られるため、現在最も多く使用されている.

	const material = new THREE.MeshStandardMaterial({
			color: 0xfff000, //mesh의 색상
			wireframe: false, //mesh를 선 형태로 렌더링할 것인지 여부
			emissive: 0x00000, //다른 광원에 영향을 받지 않는 재질 자체에서 발광하는 색상 값 기본은 검정

			roughness: 0.25, //거친 정도 0~1, 1이 되면 빛이 반사되지않는다
			metalness: 0.5, //금속성. 0~1, 1은 완전한 금속성
			flatShading: true, //mesh를 평평하게 렌더링 할 것인지 여부
		});

結果:

MeshPhysicalMaterial

公式文書は以下の通りです.
An extension of the MeshStandardMaterial, providing more advanced physically-based rendering properties(clearcoat, physically-based transparency, advanced reflectivity)
「MeshStandardMaterial」の拡張版では、反射光をさらに調整できます.

const material = new THREE.MeshPhysicalMaterial({
			color: 0xfff000, //mesh의 색상
			wireframe: false, //mesh를 선 형태로 렌더링할 것인지 여부
			emissive: 0x00000, //다른 광원에 영향을 받지 않는 재질 자체에서 발광하는 색상 값 기본은 검정
			roughness: 0.25, //거친 정도 0~1, 1이 되면 빛이 반사되지않는다
			metalness: 0, //금속성. 0~1, 1은 완전한 금속성
			flatShading: false, //mesh를 평평하게 렌더링 할 것인지 여부

			clearcoat: 0.5, //mesh의 표면의 코팅 정도 0 ~ 1
			clearcoatRoughness: 0, //코팅에 대한 거친 정도 0 ~ 1
		});

結果:

metalnessプロパティは0ですが、clearcoatプロパティの表面のコーティング効果のため、光源反射効果を表示できます.