Capítulo 82 de 859

Chapter 82: MeshStandardMaterial

Core Idea

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.

This approach differs from older approaches in that instead of using approximations for the way in which light interacts with a surface, a physically correct model is used. The idea is that, instead of tweaking materials to look good under specific lighting, a material can be created that will react 'correctly' under all lighting scenarios.

In practice this gives a more accurate and realistic looking result than the MeshLambertMaterial or MeshPhongMaterial, at the cost of being somewhat more computationally expensive. MeshStandardMaterial uses per-fragment shading.

Note that for best results you should always specify an environment map when using this material.

For a non-technical introduction to the concept of PBR and how to set up a PBR material, check out these articles by the people at marmoset:

Technical details of the approach used in three.js (and most other PBR systems) can be found is this paper from Disney (pdf), by Brent Burley.

Key Concepts

  • alphaMap : Texture: The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
  • aoMap : Texture: The red channel of this texture is used as the ambient occlusion map. Requires a second set of UVs.
  • aoMapIntensity : number: Intensity of the ambient occlusion effect. Range is [0,1], where 0 disables ambient occlusion. Where intensity is 1 and the AO map's …
  • bumpMap : Texture: The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights. Bump doesn't actually af…
  • bumpScale : number: How much the bump map affects the material. Typical range is [0,1].
  • color : Color: Color of the material.
  • displacementBias : number: The offset of the displacement map's values on the mesh's vertices. The bias is added to the scaled sample of the displacement map. Without…
  • displacementMap : Texture: The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material t…
  • displacementScale : number: How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement …
  • emissive : Color: Emissive (light) color of the material, essentially a solid color unaffected by other lighting.

Reference Tables

Constructor

Signature
new MeshStandardMaterial( parameters : Object )

Properties

PropertyDescription
.alphaMap : TextureThe alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
.aoMap : TextureThe red channel of this texture is used as the ambient occlusion map. Requires a second set of UVs.
.aoMapIntensity : numberIntensity of the ambient occlusion effect. Range is [0,1], where 0 disables ambient occlusion. Where intensity is 1 and the AO map's red channel is also 1, ambient light is fully occluded on …
.bumpMap : TextureThe texture to create a bump map. The black and white values map to the perceived depth in relation to the lights. Bump doesn't actually affect the geometry of the object, only the lighting. If a nor…
.bumpScale : numberHow much the bump map affects the material. Typical range is [0,1].
.color : ColorColor of the material.
.displacementBias : numberThe offset of the displacement map's values on the mesh's vertices. The bias is added to the scaled sample of the displacement map. Without a displacement map set, this value is not applied.
.displacementMap : TextureThe displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects,…
.displacementScale : numberHow much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied.
.emissive : ColorEmissive (light) color of the material, essentially a solid color unaffected by other lighting.
.emissiveIntensity : numberIntensity of the emissive light. Modulates the emissive color.
.emissiveMap : TextureSet emissive (glow) map. The emissive map color is modulated by the emissive color and the emissive intensity. If you have an emissive map, be sure to set the emissive color to something other than b…
.envMap : TextureThe environment map. To ensure a physically correct rendering, environment maps are internally pre-processed with PMREMGenerator.
.envMapIntensity : numberScales the effect of the environment map by multiplying its color.
.envMapRotation : EulerThe rotation of the environment map in radians.
.flatShading : booleanWhether the material is rendered with flat shading or not.
.fog : booleanWhether the material is affected by fog or not.
.isMeshStandardMaterial : boolean (readonly)This flag can be used for type testing.
.lightMap : TextureThe light map. Requires a second set of UVs.
.lightMapIntensity : numberIntensity of the baked light.
.map : TextureThe color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest. The texture map col…
.metalness : numberHow much the material is like a metal. Non-metallic materials such as wood or stone use 0.0, metallic use 1.0, with nothing (usually) in between. A value between 0.0 and 1.0 could be used for…
.metalnessMap : TextureThe blue channel of this texture is used to alter the metalness of the material.
.normalMap : TextureThe texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change the way the color is lit. Normal maps do not change the actual shape of the surface, on…
`.normalMapType : TangentSpaceNormalMapObjectSpaceNormalMap`
.normalScale : Vector2How much the normal map affects the material. Typical value range is [0,1].
.roughness : numberHow rough the material appears. 0.0 means a smooth mirror reflection, 1.0 means fully diffuse. If roughnessMap is also provided, both values are multiplied.
.roughnessMap : TextureThe green channel of this texture is used to alter the roughness of the material.
.wireframe : booleanRenders the geometry as a wireframe.
`.wireframeLinecap : 'round''bevel'
`.wireframeLinejoin : 'round''bevel'
.wireframeLinewidth : numberControls the thickness of the wireframe.

Key Takeaways

  1. MeshStandardMaterial extends: EventDispatcher → Material
  2. Most relevant properties: alphaMap, aoMap, aoMapIntensity, bumpMap.

Connects To