Three.js source code reading notes (lighting part)_Basic knowledge-JS Tutorial-php.cn

The weather is getting colder and colder, and people are getting lazier and lazier. It is more and more like staying in a warm bedroom to read novels or play games. It has been a long time since I looked at the Three.js source code. The weather is nice today, keep watching!

This time, let’s look at the lighting part: the lighting model, from the perspective of the light itself, includes ambient light, parallel light, and point light sources, and from the perspective of the object surface material, it also includes diffuse reflection and specular reflection.

Lights:Light

Copy code The code is as follows:

 
THREE.Light = function ( hex ) { 
THREE.Object3D.call( this ); 
this.color = new THREE.Color( hex ); 
}; 

This object is the prototype/base class of other lighting objects and itself inherits from the Object3D object/type. It has only one color property of type THREE.Color, which is color, which is easy to understand.

In Three.js, lighting, as an Object3D object, is added to the scene through the Scene.add() method, and the renderer will automatically render the added lighting effect.
Light::AmbientLight

Copy code The code is as follows:

 
THREE.AmbientLight = function ( hex ) { 
THREE.Light.call( this, hex ); 
}; 

Undirected ambient light, not more than Light type A property or method that inherits from Light simply for semantic inheritance purposes; it doesn't even need to be an Object3D object.

Light::DirectionalLight

Copy code The code is as follows:

 
THREE.DirectionalLight = function ( hex, intensity ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0, 1, 0 ); 
this.target = new THREE.Object3D(); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.castShadow = false; 
this.onlyShadow = false; 
// more settings about shadow ...... 
}; 

Parallel light (directional light), you need to pass in the color hex when using the new operator to construct this function and the "density" intensity of light. This class has the following attributes:
position: a position, with the position as the starting point and the origin as the end point is the direction of the light.
intensity: the density of light, default is 1. Because the three values of RGB are all between 0 and 255, they cannot reflect changes in the intensity of light. The stronger the light, the brighter the surface of the object.
distance: attenuation distance, the default value is 0, the light has no attenuation; if it is a non-0 value, the light will start to attenuate from the position position (actually the plane where the position is located). After attenuating to the distance distance, the light intensity intensity is 0.
castShadow: Boolean value, controls whether to generate shadows, the default is false. If set to true, whether it is occluded in the lighting direction will be calculated on a pixel-by-pixel basis for all surfaces, which will consume a lot of calculations.
onlyShadow: Boolean value, controls whether to only generate shadows without "illuminating" the object. The default is false. This model may have some special applications.
shadowCameraLeft, shadowCameraRight... series, control the range of shadows centered on the position point?
shadowBias: shadow bias, default is 0.
shadowDarkness: The effect of shadow on the brightness of the object, between 0 and 1, the default is 0.5.
There are still many attributes whose meanings cannot be guessed at the moment (I really should study computer graphics, so just bite the bullet and continue reading).

Light::PointLight

Copy code The code is as follows:

 
THREE.PointLight = function ( hex, intensity, distance ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0, 0, 0 ); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.distance = ( distance !== undefined ) ? distance : 0; 
}; 

Point light source, position must be the light source point. Pay attention to the difference between the position of the point light source and the position of the parallel light. The former defaults to the origin, while the latter defaults to the point (0, 1, 1), which makes the default direction of parallel light consistent with the default orientation of the camera.
The other two properties are the same as in directional light. PointLight point lights have no settings for how to generate shadows.

Light::SpotLight

Copy code The code is as follows:

 
THREE.SpotLight = function ( hex, intensity, distance, angle, exponent ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0 , 1, 0 ); 
this.target = new THREE.Object3D(); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.distance = ( distance != = undefined ) ? distance : 0; 
this.angle = ( angle !== undefined ) ? angle : Math.PI / 2; 
this.exponent = ( exponent !== undefined ) ? exponent : 10; // more settings about shadow... 
}; 

A point light source that can produce shadows in a certain direction, affecting the surface of MeshLamberMaterial and MeshPhongMaterial type materials. The settings for how to handle shadows are consistent with DirectionLight.
In short, the lighting object does not bear the task of rendering lighting, but only defines how to render lighting.
Object::Partical

Copy code The code is as follows:

 
THREE.Particle = function ( material ) { 
THREE.Object3D.call( this ); 
this.material = material; 
}; 

A particle is a material Object3D, this is easy to understand. The Object3D object provides a coordinate (the coordinate of the particle), which is responsible for the movement of the particle. The particle only needs to specify the material to represent it.

Object::ParticalSystem

Copy code The code is as follows:

 
THREE.ParticleSystem = function (geometry, material) { 
THREE.Object3D.call( this ); 
this.geometry = geometry; 
this.material = ( material !== undefined ) ? material : new THREE.ParticleBasicMaterial( { color: Math.random() * 0xffffff } ); 
this.sortParticles = false; 
if ( this.geometry ) { 
if( this.geometry.boundingSphere === null ) { 
this.geometry.computeBoundingSphere(); 
} 
this.boundRadius = geometry.boundingSphere.radius; 
} 
this.frustumCulled = false; 
 }; 

The particle system represents the movement of multiple particles. The particle system itself inherits from the Object3D object. There are several attributes:
geometry attribute, each node is a particle, and these share a material.
Material attribute, which is the material of these nodes.

frustumCulled attribute, Boolean value, if set to true, then the particles outside the camera's field of view will be kicked out, but it is not yet clear whether the entire particle system will be kicked out when the center coordinate of the particle system is outside the field of view, or Single particles are eliminated as soon as they go out. It is probably the latter.

In fact, these articles all involve how to define a scene. As for how to render a scene, it is difficult to go into depth. I plan to take a look at the Demo code next, and then take a look at the source code of the WebGLRenderer class (several thousand lines of OMG).