7. threejs study notes-PBR materials and texture maps

The so-called PBR is physically based rendering. Three.js provides two PBR material-related APIs, MeshStandardMaterial 和and MeshPhysicalMaterial . MeshPhysicalMaterial is an extended subclass of MeshStandardMaterial, providing more functional attributes.

lighting model

If you have the most basic knowledge of physical optics in middle and high school, you should have basic optical concepts such as refraction , specular reflection , and diffuse reflection . For optical problems in real life, Three.js will provide some lighting models to simulate the lighting on the surface of objects. The lighting model is a calculation method for simulating lighting. MeshPhysicalMaterial and MeshLambertMaterial are both materials for rendering mesh models, but the lighting models they use are different. To be more specific, the code algorithms used by materials to simulate Mesh reflected lighting are different. The algorithms are different, and the degree of realism of natural simulated lighting is also different.

Overall review of mesh model materials

MeshLambertMaterial: Lambert lighting model (diffuse reflection)
MeshPhongMaterial: Phong lighting model (diffuse reflection, specular reflection)
MeshStandardMaterial and MeshPhysicalMaterial: Physically based lighting models (microplane theory, energy conservation, Fresnel reflection...)

Compared with MeshLambertMaterial and MeshPhongMaterial, PBR material can provide more realistic and life-like material effects, and of course it will also take up more computer hardware resources.

2. Metallicity and roughness of PBR material

Metalness

Metallicity attribute.metalness represents the degree to which the material resembles metal. For non-metallic materials, such as wood or stone, use 0.0 and for metal, use 1.0. Threejs's PBR material, .metalness defaults to 0.5, values between 0.0 and 1.0 can be used for rusty metal appearance

new THREE.MeshStandardMaterial({
    metalness: 1.0,//金属度属性
})

Roughness

Roughness represents the smoothness or roughness of the model surface. The smoother the surface, the stronger the specular reflection ability. The rougher the surface, the weaker the specular reflection ability, and the more diffuse reflection appears.

Roughness roughness, 0.0 represents smooth specular reflection, 1.0 represents complete diffuse reflection, the default is 0.5.

new THREE.MeshStandardMaterial({
    roughness: 0.5,//表面粗糙度
})

3. Environment map.enMap

As you all know from the previous study, loading a picture through the .load() method of the texture map loader TextureLoader can return a texture object Texture.

The .load() method of the cube texture loader CubeTextureLoader is to load 6 pictures and return a cube texture object TextureLoader. The parent class of the cube texture object CubeTextureLoader is the texture object Texture.

// 加载环境贴图
const textureCube = new THREE.CubeTextureLoader()
    .setPath('./环境贴图/环境贴图0/')
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
new THREE.MeshStandardMaterial({
    metalness: 1.0,
    roughness: 0.5,
    envMap: textureCube, //设置pbr材质环境贴图
})

Environment map reflectance.envMapIntensity

The .envMapIntensity attribute of MeshStandardMaterial is mainly used to set the ability of the model surface to reflect the surrounding environment map, or the ability of the environment map to affect the model surface.

obj.material.envMapIntensity = 1.0;

Scene environment properties.environment

The mesh model can set the environment map through the .envMap attribute of the material. If all Mesh in a gltf model needs to set the environment map, it is necessary to recursively traverse the gltf model and set the .envMap for the material of each Mesh.

// 环境贴图纹理对象textureCube作为.environment属性值,影响所有模型
scene.environment = textureCube;

4. MeshPhysicalMaterial varnish layer

MeshPhysicalMaterial and MeshStandardMaterial are both PBR materials with metalness and roughness attributes. MeshPhysicalMaterial is a subclass extended based on MeshStandardMaterial. In addition to inheriting the metalness, roughness and other attributes of MeshStandardMaterial, it also adds varnish.clearcoat. , transmittance.transmission, reflectivity.reflectivity, gloss.sheen, refractive index.ior, etc. are used to simulate the properties of different materials in life.

Clearcoat layer properties.clearcoat

The varnish layer attribute.clearcoat can be used to simulate a transparent layer on the surface of an object, just like you painted a layer of transparent varnish on the surface of the object and sprayed some water. The range of .clearcoat is 0 to 1, and the default is 0.

const material = new THREE.MeshPhysicalMaterial( {
	clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
} );

Clearcoat layer roughness.clearcoatRoughness

The roughness of the clearcoat layer.clearcoatRoughness attribute represents the roughness corresponding to the clearcoat on the surface of the object. The range of .clearcoatRoughness is 0.0 to 1.0. The default value is 0.0.

const material = new THREE.MeshPhysicalMaterial( {
	clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
	clearcoatRoughness: 0.1,//透明涂层表面的粗糙度
} );

5. Physical material transmittance

Transmittance (transmittance).transmission

In order to better simulate visual effects such as glass and translucent plastic, you can use the physical transparency .transmission property instead of the Mesh normal transparency property .opacity.

Use the .transmission property to set the Mesh transparency to maintain high reflectivity even when fully transmitted.

Physical optical transparency.transmission has values ranging from 0.0 to 1.0. The default value is 0.0.

const mesh = gltf.scene.getObjectByName('玻璃01')
mesh.material = new THREE.MeshPhysicalMaterial({
    transmission: 1.0, //玻璃材质透光率，transmission替代opacity 
})

refractive index.ior

The refractive index of non-metallic materials ranges from 1.0 to 2.333. The default value is 1.5.

new THREE.MeshPhysicalMaterial({
    ior:1.5,//折射率
})

Some of the materials in the article are selected from Threejs Chinese website: Three.js Chinese website