What is a shader

• one of the main components of WebGL
• a program written in GLSL
• sent to GPU
• Position each vertex of a geometry
• Colorize each visible “pixel” (accurately should be using term “fragment”) of that geometry

Then we send a lot of data to the shader such as the vertices coordinates, the mesh transformation, information about the camera and its field of view, parameters like the color, the textures, the lights, the fog, etc. The GPU then processes all of this data following the shader instructions, and our geometry appears in the render.

课程链接：three.js journey

其他几篇：

• Notes 1 - Basics
• Notes 2 - Classic Techniques
• Notes 3 - Advanced Techniques Part1
• Notes 4 - Advanced Techniques Part2

Realistic Render

Tone Mapping

intends to convert High Dynamic Range (HDR) values to Low Dynamic Range (LDR) values. Tone mapping in Three.js will actually fake the process of converting LDR to HDR even if the colors aren’t HDR resulting in a very realistic render.

// Tone mapping
renderer.toneMapping = THREE.ACESFilmicToneMapping
// adjust exposure, influencing the amount of light allowed into the scene
// higher make the scene more bright
renderer.toneMappingExposure = 2

There are multiple possible values:

课程链接：three.js journey

其他几篇：

• Notes 1 - Basics
• Notes 2 - Classic Techniques
• Notes 3 - Advanced Techniques Part1
• Notes 5 - Advanced Techniques Part3

Raycaster and Mouse Events

Raycaster is used to detect if there is a wall in front of the player, or test if the laser gun hit something, test if something is currently under the mouse to simulate mouse events, etc.

/**
 * Raycaster
 */
const raycaster = new THREE.Raycaster()
const rayOrigin = new THREE.Vector3(- 3, 0, 0)
const rayDirection = new THREE.Vector3(10, 0, 0)
rayDirection.normalize() // make sure vector is 1 unit long

raycaster.set(rayOrigin, rayDirection)

// get objects intersect
const intersect = raycaster.intersectObject(object2)
console.log(intersect) // result is also array with only 1 object

const intersects = raycaster.intersectObjects([object1, object2, object3])
console.log(intersects)

If we need to test on each frame, we need to test in tick function like:

课程链接：three.js journey

其他几篇：

• Notes 1 - Basics
• Notes 2 - Classic Techniques
• Notes 4 - Advanced Techniques Part2
• Notes 5 - Advanced Techniques Part3

Physics

We need to add physics library. The idea is that we add a physics world which is purely theoretical. We cannot see it. So when we create a Three.js mesh, we also create a version of that mesh inside physics world, like projected one in physics world. So on each frame, physics world update itself, we take the coordinates of the projected physics object and then apply them to the corresponding Three.js mesh.

课程链接：three.js journey

其他几篇：

• Notes 1 - Basics
• Notes 3 - Advanced Techniques Part1
• Notes 4 - Advanced Techniques Part2
• Notes 5 - Advanced Techniques Part3

Lights

basically walk through all lights types to demonstrate them one by one and feel what they can do.

• AmbientLight
  • applies omnidirectional(全方向的) lighting on all geometries of the scene.
  • good to simulate light bouncing around the scene
  • cannot be used to cast shadows as it does not have a direction
• DirectionalLight
  • coming from same direction, parallel, like the Sun
  • can cast shadows
• HemisphereLight
  • similar to the AmbientLight but with a different color fading from the sky to the color coming from the ground.
  • Faces facing the sky will be lit by one color while another color will lit faces facing the ground.
  • cannot be used to cast shadows
• PointLight
  • almost like a lighter, light source is infinitely small, and the light spreads uniformly in every direction
  • can cast shadows
• RectAreaLight
  • like a big rectangle lights you can see on the photoshoot set, big plane lighting
  • can be used to simulate light sources such as bright windows or strip lighting
  • only works with MeshStandardMaterial and MeshPhysicalMaterial
  • cannot be used to cast shadows
• SpotLight
  • like flashlight, 手电筒🔦聚光灯效果
  • gets emitted from a single point in one direction, along a cone that increases in size the further from the light it gets
  • can cast shadows

Performance

Add as few lights as possible and try to use the lights that cost less

课程链接：three.js journey

前年买了一门课，去年断断续续学了一两个月，搁置了5个月，今年继续学。 先复习之前的课记个笔记。

没有追求写得很通顺，中英胡乱混合ing

其他几篇：

• Notes 2 - Classic Techniques
• Notes 3 - Advanced Techniques Part1
• Notes 4 - Advanced Techniques Part2
• Notes 5 - Advanced Techniques Part3

why use Three.js

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.

WebGL 是用的 GPU 来绘制的，GPU 有很多 parallel workers，所以很快。 怎么放置 points 每个 pixel 如何画都是在 shaders 里定义的。(shader 是个挺重要的概念，之后再好好了解)