In mathematics, the Dot Product (English: Dot Product), also known as the Scalar Product or Scalar Product (English: Scalar Product), is an algebraic operation that takes two sequences of numbers of equal length (usually coordinate vectors) and returns a single number. In Euclidean geometry, the dot Product of two Cartesian coordinate vectors is often called Inner Product (English: Inner Product), see Inner Product space.

— wikipedia

Application 1: Shader halo

In order to create a sense of immersion in space, we added some extra glow effects for earth:

Here we use ShaderMaterial in three. js to write Shader code, using Fresnel + normal Light and Bloom post-processing to achieve the desired effect (Live Demo can be click here to experience, including source code) :

It is worth noting that there are two variables that need to be passed to Shader: The user view viewVector (also known as the camera view) and the light Angle LightDir, the former is used to build the Fresnel effect facing the user at any point of view, the latter is used to create the light effect, and finally the light range determines the Fresnel effect range to produce the desired effect:

// uniform vec3 viewVector; varying vec3 vNormal; varying float intensity; uniform float uAperture; uniform float uPower; void main() { vNormal = normalize( normalMatrix * normal ); vec3 viewNormal = normalize( normalMatrix * viewVector ); intensity = pow(uAperture - dot(vNormal, viewNormal), uPower ); Gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } // Uniform vec4 uColor; varying vec3 vNormal; varying float intensity; uniform vec3 uLightDir; Void main() {vec4 lDirection = viewMatrix * vec4(uLightDir, 0.0); vec3 dirVector = normalize( lDirection.xyz ); Float lightShine = Max (1.5 * dot(vNormal, dirVector), 0.0); float lightShine = Max (1.5 * dot(vNormal, dirVector), 0.0); Gl_FragColor = intensity * vec4(lightShine)* ucolor.xyz, 1.0); gl_FragColor = intensity * vec4(lightShine)* ucolor.xyz, 1.0); }Copy the code

When both vectors are unit vectors, the dot product is cosθ, 0 to 1, 0 for opposite directions, 1 for the same direction, and 0.5 for perpendicular:

The second application point is the calculation of lighting, the principle is the same as above, the only difference is the lighting Angle, through the lighting information can also be day and night two post pictures transition, to achieve the real lighting effect:

The following shows the final effect and the logic for calculating the vector dot product (P1 ray vector, P2 camera Angle vector) :

Application two: shielding the field of vision

When rotating the page to view planets, the current planet is easily obscured by other planets (especially when zooming out the current view) :

Similarly, the vector P1 from the camera’s perspective to the current planet and vector P2 from the camera’s perspective to other planets are calculated to determine whether there are other planets in front of the perspective (Live Demo can be seen here) :

Application three: restrict camera motion amplitude

Page there is a button to allow automatic explore other planets, this involves the selection of other planets and the rotation of the camera and displacement change, if random planet, easy because planet position in the opposite direction from the camera motion amplitude is very big, or very ghost livestock (from mercury to Neptune will find the camera jump range) :

The following GIF demonstrates the original scheme: randomly selecting the next planet, prone to the problem of moving too fast (especially the final change from P3->P5, and then from P7->P5), poor experience in the real scene.

After optimization, the vector A from the camera to the current planet will be calculated first, and the vector B/C/D/E/F/G/… , find a planet with the largest value after dot product, that is, the planet with the smallest Angle change (Live Demo can be experienced here) :

H5 experience QR code: