[babylonjs] babylonjs practice (VI) -- color of material

background

Material is a very important lesson , The posts on the Internet are poorly written . I write once in my own way .

explain

Material is the texture and touch of an object , Such as stainless steel and cloth , The texture and touch are different . stay 3D in , The material is assigned to the model .

The experience of materials has much to do with lighting , A smooth surface , Especially bright and dazzling in the light , Such as glass surface . Rough surfaces will appear dull , Like the ground . These are affected by light .

babylonjs Classification of materials

According to the reflection of the material to the light , Materials can be divided into the following categories ：

• Diffuse material （Diffuse）—— The basic color or texture of a material observed in light ;
• Mirror material , It's also called Gaoguang （Specular）—— Light gives the highlight of the material ;
• Luminous material （Emissive）—— The color or texture of a luminescent material , Such as self luminous ;
• Environment material （Ambient）—— The color or texture of a material illuminated by ambient background light .

Diffuse and specular materials require light sources , If there is no light source , There will be no reflection , No reflection , No light enters the human eye , So for people , There's no difference .

Environment color you need to set the environment color of the scene , Provide ambient background lighting . The scene has an ambient color attribute （ambientColor）, The following code assigns white to the ambient light .

Text

Self luminous material （Emissive）

Define four materials ,

                var redMat = new BABYLON.StandardMaterial("redMat", scene);
                redMat.emissiveColor = new BABYLON.Color3(1, 0, 0);

                var greenMat = new BABYLON.StandardMaterial("greenMat", scene);
                greenMat.emissiveColor = new BABYLON.Color3(0, 1, 0);

                var blueMat = new BABYLON.StandardMaterial("blueMat", scene);
                blueMat.emissiveColor = new BABYLON.Color3(0, 0, 1);

                var whiteMat = new BABYLON.StandardMaterial("whiteMat", scene);
                whiteMat.emissiveColor = new BABYLON.Color3(1, 1, 1);

                var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.25}, scene);
	            sphere.material = greenMat;

 Copy code 

Just assign a value directly ,material = Some kind of material .

Diffuse material

Diffuse material of a color , It can only have color under diffuse light .

                redMat.diffuseColor = new BABYLON.Color3(1, 0, 0);

                var light = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 10, 0), scene);
                light.diffuse = new BABYLON.Color3(1, 0, 0);

                var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 0.25 }, scene);
                sphere.material = redMat;
 Copy code 

Mirror material

A specular material of a certain color , It can only have color under specular scattered light

                // 3333333
                // var redMat = new BABYLON.StandardMaterial("redMat", scene);
                // redMat.specularColor = new BABYLON.Color3(1, 0, 0);

                // var light = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 10, 0), scene);
                // light.specular = new BABYLON.Color3(1, 0, 0);

                // var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 0.25 }, scene);
                // sphere.material = redMat;
 Copy code 

Environment material

This is easier to understand , Depending on the ambient light .

                var redMat = new BABYLON.StandardMaterial("redMat", scene);
                redMat.ambientColor = new BABYLON.Color3(1, 0, 0);

                scene.ambientColor = new BABYLON.Color3(1, 0, 0);

                var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 0.25 }, scene);
                sphere.material = redMat;
 Copy code 

Text 2- texture

Let's talk about it in the next section