![見出し画像](https://assets.st-note.com/production/uploads/images/139327333/rectangle_large_type_2_21912d83d51cf20ab3c37f55fff22c3c.png?width=1200)
🎡Three.jsのマテリアルとGLSLの関係
LineBasicMaterial: 線オブジェクトに色や透明度を設定する基本的なマテリアル。
https://threejs.org/examples/#webgl_buffergeometry_drawrange
![](https://assets.st-note.com/img/1714691531052-vLJmZJp5Pd.png?width=1200)
LineDashedMaterial: 点線効果を持つ線オブジェクト用のマテリアル。
![](https://assets.st-note.com/img/1714691570255-irwclf2YIx.png?width=1200)
Material: すべてのマテリアルのベースとなる抽象クラス。
MeshBasicMaterial: 光源の影響を受けない基本的なマテリアルで、色やテクスチャを表示します。
MeshDepthMaterial: オブジェクトの深度(カメラからの距離)に基づいて色をレンダリングします。
![](https://assets.st-note.com/img/1714691632900-W7D4EVL2LF.png?width=1200)
MeshDistanceMaterial: オブジェクトとカメラの距離に基づいてシェーディングを行います(シャドウマップ生成用)。
![](https://assets.st-note.com/img/1714691680320-DbLCYTgD5g.png?width=1200)
MeshLambertMaterial: 光の拡散反射をシミュレートするマテリアル。リアルタイムアプリケーションに適しています。
![](https://assets.st-note.com/img/1714691721219-ZVvy6E9WpA.png?width=1200)
MeshMatcapMaterial: 表面の詳細を強調するためのマットキャップ(テクスチャ)を使用するマテリアル。
![](https://assets.st-note.com/img/1714691779021-mrO47RIACz.png?width=1200)
MeshNormalMaterial: オブジェクトの法線を色として直接レンダリングするマテリアル。
![](https://assets.st-note.com/img/1714691867198-Ii6TllwiOm.png?width=1200)
MeshPhongMaterial: 光の反射(光沢感)をシミュレートするためのマテリアル。
![](https://assets.st-note.com/img/1714691999419-0ewIOSAz5K.png?width=1200)
MeshPhysicalMaterial: MeshStandardMaterialの物理的な特性を拡張したマテリアルで、よりリアルな光の反射を可能にします。
![](https://assets.st-note.com/img/1714692136311-duASeCJkwJ.png?width=1200)
MeshStandardMaterial: 物理ベースのレンダリング(PBR)をサポートするマテリアル。
![](https://assets.st-note.com/img/1714692212508-WnJg1VsGKI.png?width=1200)
MeshToonMaterial: トゥーンシェーディング(セルシェーディング)効果を実現するマテリアル。
![](https://assets.st-note.com/img/1714692293688-sAuXwYZNnf.png?width=1200)
PointsMaterial: ポイント(粒子)オブジェクトに使用するマテリアル。
![](https://assets.st-note.com/img/1714692400227-DiBsYOf9ZD.png?width=1200)
RawShaderMaterial: ユーザーが提供したGLSLシェーダーコードを使用するマテリアル。完全なカスタマイズが可能です。
![](https://assets.st-note.com/img/1714692444341-2CSlZ92kjo.png?width=1200)
ShaderMaterial: ユーザーがカスタムシェーダーを使用できるように設計されたマテリアル。
![](https://assets.st-note.com/img/1714692612418-Gqyjt8PMlf.png?width=1200)
ShadowMaterial: シャドウオンリーのマテリアルで、光が当たる部分は透明に、影を受ける部分だけが見えます。
![](https://assets.st-note.com/img/1714692709774-SAOS1mTFGT.png?width=1200)
SpriteMaterial: スプライト(2Dオブジェクト)用のマテリアル。
![](https://assets.st-note.com/img/1714692758245-2L65z9WYCs.png?width=1200)
GLSLとの関係
Three.jsでは、これらのマテリアルは内部的にGLSLシェーダープログラムに変換されます。Three.jsは、開発者が簡単にマテリアルを設定できるように高レベルのAPIを提供しつつ、背後ではGLSLコードを生成してWebGLを通じてGPUで実行します。この抽象化により、Three.jsは直感的でアクセスしやすくなっていますが、高度なカスタマイズが必要な場合にはGLSLシェーダーを直接書くことも可能です。
Three.jsでの開発では、通常はこれらのビルトインマテリアルを利用することで、複雑なGLSLの知識なしに3Dグラフィックスを容易に作成できます。しかし、特定のエフェクトや詳細な制御が必要な場合は、カスタムシェーダーをGLSLで書いてThree.jsに統合することもできます。
お願い致します