MeshStandardMaterial.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. [page:Material] &rarr;
  11. <h1>[name]</h1>
  12. <p class="desc">
  13. Un matériau physique standard, utilisant le flux de travail Metallic-Roughness.<br /><br />
  14. Le rendu basé sur la physique (PBR) est récemment devenu la norme dans de nombreuses applications 3D, telles que
  15. [link:https://blogs.unity3d.com/2014/10/29/physically-based-shading-in-unity-5-a-primer/ Unity],
  16. [link:https://docs.unrealengine.com/latest/INT/Engine/Rendering/Materials/PhysicallyBased/ Unreal] et
  17. [link:http://area.autodesk.com/blogs/the-3ds-max-blog/what039s-new-for-rendering-in-3ds-max-2017 3D Studio Max].<br /><br />
  18. Cette approche diffère des approches plus anciennes, au lieu d'utiliser des approximations pour la manière dont
  19. la lumière interagit avec une surface, un modèle physiquement correct est utilisé. L'idée est de choisir
  20. un matériau qui réagira « correctement » dans tous les scénarios d'éclairage, au lieu d'essayer de manipuler les matériaux
  21. pour qu'ils aient un bon rendu avec une lumière spécifique.<br /><br />
  22. En pratique, cela donne un résultat plus précis et réaliste que le [page:MeshLambertMaterial]
  23. ou [page:MeshPhongMaterial],au prix d'être un peu plus coûteux en calcul. [name] utilise un ombrage par fragment.<br /><br />
  24. Notez que pour de meilleurs résultats, vous devez toujours spécifier une [page:.envMap environment map] lors de l'utilisation
  25. ce materiel.<br /><br />
  26. Pour une introduction non technique au concept de PBR et comment mettre en place un matériel PBR,
  27. consultez ces articles rédigés par des personnes de [link:https://www.marmoset.co marmoset]:
  28. <ul>
  29. <li>
  30. [link:https://www.marmoset.co/posts/basic-theory-of-physically-based-rendering/ Basic Theory of Physically Based Rendering]
  31. </li>
  32. <li>
  33. [link:https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/ Physically Based Rendering and You Can Too]
  34. </li>
  35. </ul>
  36. </p>
  37. <p>
  38. Les détails techniques de l'approche utilisée dans three.js (et la plupart des autres systèmes PBR) peuvent être trouvés sur ce pdf :
  39. [link:https://media.disneyanimation.com/uploads/production/publication_asset/48/asset/s2012_pbs_disney_brdf_notes_v3.pdf paper from Disney],
  40. de Brent Burley.
  41. </p>
  42. <iframe id="scene" src="scenes/material-browser.html#MeshStandardMaterial"></iframe>
  43. <script>
  44. // iOS iframe auto-resize workaround
  45. if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
  46. const scene = document.getElementById( 'scene' );
  47. scene.style.width = getComputedStyle( scene ).width;
  48. scene.style.height = getComputedStyle( scene ).height;
  49. scene.setAttribute( 'scrolling', 'no' );
  50. }
  51. </script>
  52. <h2>Constructeur</h2>
  53. <h3>[name]( [param:Object parameters] )</h3>
  54. <p>
  55. [page:Object parameters] - (optionnel) un objet avec une ou plusieurs propriétés définissant l'apparence du matériau.
  56. Toute propriété du matériau (y compris toute proprioété héritée de [page:Material]) peut être passée dans l'objet.<br /><br />
  57. L'exception est la propriété [page:Hexadecimal color], qui peut être passée comme une chaine de caractères hexadécimale,
  58. ayant la valeur `0xffffff` (blanc) par défaut. [page:Color.set]( color ) est appelée en interne.
  59. </p>
  60. <h2>Propriétés</h2>
  61. <p>Voir la classe [page:Material] pour les propriétés communes.</p>
  62. <h3>[property:Texture alphaMap]</h3>
  63. <p>La carte alpha est une texture en niveaux de gris qui contrôle l'opacité sur la surface
  64. (noir : entièrement transparent ; blanc : entièrement opaque). La valeur par défaut est nulle.<br /><br />
  65. Seule la couleur de la texture est utilisée, en ignorant le canal alpha s'il en existe un.
  66. Pour les textures RGB et RGBA, le moteur de rendu [page:WebGLRenderer WebGL] utilisera le
  67. canal vert lors de l'échantillonnage de cette texture en raison du peu de précision supplémentaire fourni
  68. pour le vert dans les formats RVB 565 compressés DXT et non compressés.
  69. Les textures avec uniquement de la luminance ou les textures luminance/alpha fonctionneront également comme prévu.
  70. </p>
  71. <h3>[property:Texture aoMap]</h3>
  72. <p>Le canal rouge de cette texture est utilisé comme carte d'occlusion ambiante. La valeur par défaut est nulle.
  73. L'aoMap nécessite un deuxième ensemble d'UV.</p>
  74. <h3>[property:Float aoMapIntensity]</h3>
  75. <p>Intensité de l'effet d'occlusion ambiante. La valeur par défaut est 1. Zéro signifie qu'il n'y a pas d'effet d'occlusion.</p>
  76. <h3>[property:Texture bumpMap]</h3>
  77. <p>
  78. La texture pour créer une carte en relief. Les valeurs de noir et blanc correspondent à la profondeur perçue par rapport aux lumières.
  79. Bump n'affecte pas réellement la géométrie de l'objet, seulement l'éclairage. Si une carte normale est définie, cela sera ignoré.
  80. </p>
  81. <h3>[property:Float bumpScale]</h3>
  82. <p>A quel point la texture en relief affecte le matériau. Les plages typiques sont 0-1. La valeur par défaut est 1.</p>
  83. <h3>[property:Color color]</h3>
  84. <p>[page:Color], couleur du matériau, par défaut en blanc (0xffffff).</p>
  85. <h3>[property:Object defines]</h3>
  86. <p>Un objet de la forme :
  87. <code>
  88. { 'STANDARD': '' };
  89. </code>
  90. Est utilisé par [page:WebGLRenderer] pour choisir les shaders.
  91. </p>
  92. <h3>[property:Texture displacementMap]</h3>
  93. <p>
  94. La carte de déplacement affecte la position des sommets du maillage. Contrairement aux autres cartes
  95. qui n'affectent que la lumière et l'ombre du matériau, les sommets déplacés peuvent projeter des ombres,
  96. bloquer d'autres objets et agir autrement comme une géométrie réelle. La texture de déplacement est
  97. une image sur laquelle la valeur de chaque pixel (le blanc étant le plus élevé) est mappée,
  98. et repositionne, les sommets du maillage.
  99. </p>
  100. <h3>[property:Float displacementScale]</h3>
  101. <p>
  102. Dans quelle mesure la carte de déplacement affecte le maillage (où le noir n'est pas un déplacement,
  103. et le blanc est le déplacement maximal). Sans ensemble de cartes de déplacement, cette valeur n'est pas appliquée.
  104. La valeur par défaut est 1.
  105. </p>
  106. <h3>[property:Float displacementBias]</h3>
  107. <p>
  108. Le décalage des valeurs de la carte de déplacement sur les sommets du maillage.
  109. Sans ensemble de cartes de déplacement, cette valeur n'est pas appliquée. La valeur par défaut est 0.
  110. </p>
  111. <h3>[property:Color emissive]</h3>
  112. <p>
  113. Couleur émissive (claire) du matériau, essentiellement une couleur unie non affectée par un autre éclairage.
  114. La valeur par défaut est noire.
  115. </p>
  116. <h3>[property:Texture emissiveMap]</h3>
  117. <p>
  118. Définit la carte émissive (lueur). La valeur par défaut est nulle. La couleur de la carte émissive est modulée par
  119. la couleur émissive et l'intensité émissive. Si vous avez une carte émissive, assurez-vous de
  120. régler la couleur émissive sur autre chose que le noir.
  121. </p>
  122. <h3>[property:Float emissiveIntensity]</h3>
  123. <p>Intensité de la lumière émissive. Module la couleur émissive. La valeur par défaut est 1.</p>
  124. <h3>[property:Texture envMap]</h3>
  125. <p>La carte de l'environnement. Pour garantir un rendu physiquement correct, vous ne devez ajouter que des
  126. cartes d'environnement qui ont été prétraitées par [page: PMREMGenerator]. La valeur par défaut est null.
  127. </p>
  128. <h3>[property:Float envMapIntensity]</h3>
  129. <p>Met à l'échelle l'effet de la carte d'environnement en multipliant sa couleur.</p>
  130. <h3>[property:Boolean flatShading]</h3>
  131. <p>
  132. Définit si le matériau est rendu avec un ombrage plat. La valeur par défaut est false.
  133. </p>
  134. <h3>[property:Boolean fog]</h3>
  135. <p>Si le matériau est affecté par le brouillard (fog) La valeur par défaut est `true`.</p>
  136. <h3>[property:Boolean isMeshStandardMaterial]</h3>
  137. <p>
  138. Booléen en lecture seule pour vérifier si un objet donné est de type [name].
  139. </p>
  140. <h3>[property:Texture lightMap]</h3>
  141. <p>La carte des lumières (light map). La valeur par défaut est null. La lightMap nécessite un deuxième ensemble d'UVs.</p>
  142. <h3>[property:Float lightMapIntensity]</h3>
  143. <p>Intensité de la lumière préparée. La valeur par défaut est 1.</p>
  144. <h3>[property:Texture map]</h3>
  145. <p>
  146. La carte des couleurs. Peut éventuellement inclure un canal alpha, généralement combiné avec
  147. [page:Material.transparent .transparent] ou [page:Material.alphaTest .alphaTest]. La valeur par défaut est null.
  148. La couleur de la carte de texture est modulée par la couleur ([page:.color]) diffuse..
  149. </p>
  150. <h3>[property:Float metalness]</h3>
  151. <p>
  152. Combien le matériau est comme un métal. Les matériaux non métalliques tels que le bois ou la pierre utilisent 0,0, les métaux utilisent 1,0, sans rien
  153. (généralement) entre les deux. La valeur par défaut est 0.0. Une valeur comprise entre 0,0 et 1,0 peut être utilisée pour un aspect de métal rouillé. Si metalnessMap est
  154. également fourni, les deux valeurs sont multipliées.
  155. </p>
  156. <h3>[property:Texture metalnessMap]</h3>
  157. <p>Le canal bleu de cette texture est utilisé pour modifier la métallité du matériau.</p>
  158. <h3>[property:Texture normalMap]</h3>
  159. <p>
  160. La texture pour créer une carte normale. Les valeurs RVB affectent la surface normale pour chaque fragment de pixel et changent
  161. la façon dont la couleur est illuminée. Les cartes normales ne changent pas la forme réelle de la surface, seulement l'éclairage.
  162. Dans le cas où le matériau a une carte normale créée en utilisant la convention "left handed", le composant y de normalScale
  163. devrait être négatif pour compenser les différences de latéralité.
  164. </p>
  165. <h3>[property:Integer normalMapType]</h3>
  166. <p>
  167. Le type de carte d'ombrage.<br /><br />
  168. Les options sont [page:constant THREE.TangentSpaceNormalMap] (par défaut), et [page:constant THREE.ObjectSpaceNormalMap].
  169. </p>
  170. <h3>[property:Vector2 normalScale]</h3>
  171. <p>
  172. A quel point la carte normale affecte le matériau. Les plages typiques sont 0-1.
  173. La valeur par défaut est un [page:Vector2] défini sur (1,1).
  174. </p>
  175. <h3>[property:Float roughness]</h3>
  176. <p>
  177. La rugosité du matériau apparaît. 0,0 signifie une réflexion miroir lisse, 1,0 signifie entièrement diffus. La valeur par défaut est 1.0.
  178. Si roughnessMap est également fourni, les deux valeurs sont multipliées.
  179. </p>
  180. <h3>[property:Texture roughnessMap]</h3>
  181. <p>Le canal vert de cette texture est utilisé pour modifier la rugosité du matériau.</p>
  182. <h3>[property:Boolean wireframe]</h3>
  183. <p>Rendre la géométrie en fil de fer. La valeur par défaut est "false" (c'est-à-dire rendre sous forme de polygones plats).</p>
  184. <h3>[property:String wireframeLinecap]</h3>
  185. <p>
  186. Définit l'apparence de la fin de la ligne. les valeurs possibles sont 'butt', 'round' et 'square'.
  187. La valeur par défaut est 'round'.<br /><br />
  188. Cela correspond à la propriété [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap 2D Canvas lineCap]
  189. et est ignorée par le moteur de rendu [page:WebGLRenderer WebGL].
  190. </p>
  191. <h3>[property:String wireframeLinejoin]</h3>
  192. <p>
  193. Définit l'apparence des jointures de lignes. Les valeurs possibles sont 'round', 'bevel' et 'miter'. La valeur par défaut est 'round'. <br /><br />
  194. Cela correspond à la propriété [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineJoin 2D Canvas lineJoin]
  195. et est ignorée par le moteur de rendu [page:WebGLRenderer WebGL].
  196. </p>
  197. <h3>[property:Float wireframeLinewidth]</h3>
  198. <p>Contrôle l'épaisseur du filaire. La valeur par défaut est 1.<br /><br />
  199. A cause des limitations de [link:https://www.khronos.org/registry/OpenGL/specs/gl/glspec46.core.pdf OpenGL Core Profile]
  200. avec le moteur de rendu [page:WebGLRenderer WebGL] sur la plupârt des plateformes, l'épaisseur de ligne (linewidth) sera toujours
  201. à 1, indépendamment de la valeur définie.
  202. </p>
  203. <h2>Méthodes</h2>
  204. <p>Voir la classe [page:Material] pour les méthodes communes.</p>
  205. <h2>Source</h2>
  206. <p>
  207. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  208. </p>
  209. </body>
  210. </html>