見出し画像

🎡Three.jsのマテリアル

LineBasicMaterial: 線オブジェクトに色や透明度を設定する基本的なマテリアル。


https://threejs.org/examples/#webgl_buffergeometry_drawrange


LineDashedMaterial: 点線効果を持つ線オブジェクト用のマテリアル。


https://threejs.org/examples/#webgl_lines_dashed

Material: すべてのマテリアルのベースとなる抽象クラス。
MeshBasicMaterial: 光源の影響を受けない基本的なマテリアルで、色やテクスチャを表示します。
MeshDepthMaterial: オブジェクトの深度(カメラからの距離)に基づいて色をレンダリングします。


https://threejs.org/docs/#api/en/materials/MeshDepthMaterial


MeshDistanceMaterial: オブジェクトとカメラの距離に基づいてシェーディングを行います(シャドウマップ生成用)。



https://threejs.org/examples/#webgl_shadowmap_pointlight


MeshLambertMaterial: 光の拡散反射をシミュレートするマテリアル。リアルタイムアプリケーションに適しています。


https://threejs.org/docs/#api/en/materials/MeshLambertMaterial


MeshMatcapMaterial: 表面の詳細を強調するためのマットキャップ(テクスチャ)を使用するマテリアル。


https://threejs.org/docs/#api/en/materials/MeshMatcapMaterial


MeshNormalMaterial: オブジェクトの法線を色として直接レンダリングするマテリアル。


https://threejs.org/docs/#api/en/materials/MeshNormalMaterial


MeshPhongMaterial: 光の反射(光沢感)をシミュレートするためのマテリアル。


https://threejs.org/docs/#api/en/materials/MeshPhongMaterial


MeshPhysicalMaterial: MeshStandardMaterialの物理的な特性を拡張したマテリアルで、よりリアルな光の反射を可能にします。



https://threejs.org/docs/#api/en/materials/MeshPhysicalMaterial


MeshStandardMaterial: 物理ベースのレンダリング(PBR)をサポートするマテリアル。


https://threejs.org/docs/#api/en/materials/MeshStandardMaterial


MeshToonMaterial: トゥーンシェーディング(セルシェーディング)効果を実現するマテリアル。


https://threejs.org/docs/#api/en/materials/MeshToonMaterial


PointsMaterial: ポイント(粒子)オブジェクトに使用するマテリアル。


https://threejs.org/docs/#api/en/materials/PointsMaterial


RawShaderMaterial: ユーザーが提供したGLSLシェーダーコードを使用するマテリアル。完全なカスタマイズが可能です。


https://threejs.org/examples/#webgl_buffergeometry_rawshader


ShaderMaterial: ユーザーがカスタムシェーダーを使用できるように設計されたマテリアル。


https://threejs.org/docs/#api/en/materials/ShaderMaterial


ShadowMaterial: シャドウオンリーのマテリアルで、光が当たる部分は透明に、影を受ける部分だけが見えます。


SpriteMaterial: スプライト(2Dオブジェクト)用のマテリアル。



GLSLとの関係

Three.jsでは、これらのマテリアルは内部的にGLSLシェーダープログラムに変換されます。Three.jsは、開発者が簡単にマテリアルを設定できるように高レベルのAPIを提供しつつ、背後ではGLSLコードを生成してWebGLを通じてGPUで実行します。この抽象化により、Three.jsは直感的でアクセスしやすくなっていますが、高度なカスタマイズが必要な場合にはGLSLシェーダーを直接書くことも可能です。

Three.jsでの開発では、通常はこれらのビルトインマテリアルを利用することで、複雑なGLSLの知識なしに3Dグラフィックスを容易に作成できます。しかし、特定のエフェクトや詳細な制御が必要な場合は、カスタムシェーダーをGLSLで書いてThree.jsに統合することもできます。


お願い致します