hree.js 是一个基于 WebGL 的 JavaScript 3D 库，用于创建和渲染 3D 图形场景。

一、 图像渲染过程

1、webGL

webGL: WebGL 是一种基于 JavaScript API 的图形库，它允许在浏览器中进行高性能的 3D 图形渲染。webGL的渲染依赖于底层GPU的渲染能力。
通过获取<canvas>元素获取WebGL的上下文，从而获得WebGL API和GPU。
GPU 图形处理器：处理图形计算的硬件。GPU运行着一个着色器小程序。包含两种类型的着色器程序，顶点着色器和片元着色器。

2、着色器

着色器：

import vertexShaderText from '../shader/basic/vertex.glsl' import fragmentShaderText from '../shader/basic/fragment.glsl'

const material = new THREE.ShaderMaterial({     // 顶点着色器     vertexShader:vertexShaderText,     // 片元着色器     fragmentShader:fragmentShaderText,     // 设置两面可见，默认只能看见一面     side:THREE.DoubleSide, })

3、编写着色器代码

顶点着色器 使用的是着色器语言（GLSL)，不会也没事，知道怎么接收参数，在哪写逻辑就够了。首先要有一个入口点，也就是下面的void main函数，对数据的处理就写在这里面。
shader中有三种类型的变量: uniforms, attributes, 和 varyings
uniforms：从应用程序（CPU）传到着色器的变量（GPU），顶点着色器和片元着色器都能访问，比如我们可以在ShaderMaterial传递uniforms,在着色器程序中接收。用法：接收：uniform float uTime;
attributes：与每个顶点关联的变量。例如，顶点位置，法线和顶点颜色都是存储在attributes中的数据。attributes 只 可以在顶点着色器中访问。用法：attribute vec3 position。
Varyings：在顶点着色器和片元着色器中传递数据。可以将顶点着色器处理过的数据通过varyings传给片元着色器。用法：varying vec2 vUv;

// 高精度浮点数 precision highp float; void main(){     // vec4 四维向量     vec4 modelPosition = modelMatrix * vec4(position, 1.0);     // projectionMatrix 投影矩阵；viewMatrix 视图矩阵；modelMatrix 模型矩阵；跟上面提到的坐标系对应。这些都是内置的uniform，使用ShaderMaterial会自动到GLSL shader代码中。使用RawShaderMaterial不会自动添加，需要手动接收。     //gl_Position是一个内置变量，它表示经过投影、视图和模型变换后的顶点位置。     gl_Position = projectionMatrix * viewMatrix * modelPosition; }

// 中等精度浮点数 precision mediump float; void main(){     // gl_FragColor内置对象，片元的颜色值 vec4是个思维变量这里代表了红色分量、绿色分量、蓝色分量和透明度分量。     gl_FragColor = vec4(1.0,1.0,0.0,1.0);     }

效果：注意这个平面的颜色是片元着色器里gl_FragColor对象决定的，现在是写死的（当然也可以写活）。

接下来给这个平面添加wave的效果：这个平面在X、y轴，通过改变Z轴的坐标来使平面有上下波动的效果，这个波动的效果像不像正弦余弦曲线，可以通过sin,cos实现这个效果。可以通过Uniforms变量将数据传给顶点着色器和片元着色器。

const clock = new THREE.Clock() //渲染函数 function render() {     let time = clock.getElapsedTime()     material.uniforms.uTime.value = time; }  const material = new THREE.ShaderMaterial({     uniforms:{         uTime:{             value:0         },         // 贴图         uTexture:{             value: texture         }     } })

precision mediump float; uniform float uTime; //varying：从顶点着色器传递到片元着色器的变量。 将uv传递到片元着色器。uv是二维坐标，是物体顶点在纹理上的映射位置（相当于将一个3维物体展开后的对应的二维位置）。传递给片元着色器可以读取该坐标处的颜色，赋值给gl_FragColor，实现贴图效果。 varying vec2 vUv; void main(){     vUv = uv;     vec4 modelPosition = modelMatrix * vec4(position, 1.0);     modelPosition.z = sin((modelPosition.x + uTime) * 10.0) * 0.05;     modelPosition.z += sin((modelPosition.y + uTime) * 10.0) * 0.05;     gl_Position = projectionMatrix * viewMatrix * modelPosition; }

precision mediump float; // sampler2D类型的纹理变量 uniform sampler2D uTexture; // 接收顶点着色器传来的uv varying vec2 vUv; void main(){      // texture2D是用于读取纹理颜色值的函数     vec4 textureColor = texture2D(uTexture,vUv);     gl_FragColor = textureColor;      }

precision mediump float; // 定义顶点 attribute vec3 position; //定义位置参数 attribute vec2 uv; // 传入投影矩阵 uniform mat4 projectionMatrix; // 传入视图矩阵 uniform mat4 viewMatrix; // 传入模型矩阵 uniform mat4 modelMatrix; //接收着色器材质传递的时间参数 uniform float uTime; // uv传递到片元着色器 varying是从顶点着色器传递到片元着色器的变量 varying vec2 vUv; void main(){     vUv = uv;     vec4 modelPosition = modelMatrix * vec4(position,1.0);     modelPosition.z = sin((modelPosition.x + uTime) * 10.0) * 0.05;     modelPosition.z += sin((modelPosition.y + uTime) * 10.0) * 0.05;     gl_Position = projectionMatrix * viewMatrix * modelPosition; }

三、着色器实现一个水波纹

水波纹相对于上面旗帜飘动的效果，多了些随机性。如水波的高度是变化的，波浪的起伏是随机的，高处和低处的颜色不一样，水波波动的大小、频率等。这里用到了一些随机函数。将这些随机性添加给波浪的高度来达到更真实的效果。下面定义了很多参数，这些参数可以自己去调节看看它们是什么作用。

const material = new THREE.ShaderMaterial({     vertexShader:vertexShaderText,     fragmentShader:fragmentShaderText,     side:THREE.DoubleSide,     uniforms:{         uTime:{             value:0         },         uWaresFrequency:{             value:params.uWaresFrequency         },         uScale:{             value:params.uScale         },         uNoiseFrequency:{             value:params.uNoiseFrequency         },         uNoiseScale:{             value: params.uNoiseScale         },         uXzScale:{             value: params.uXzScale         },         uLowColor:{             value:new THREE.Color(params.uLowColor)         },         uHighColor: {             value:new THREE.Color(params.uHighColor)         },         uOpacity:{             value:params.uOpacity         }     },     transparent: true })  const plane = new THREE.Mesh(planeGeometry,material) plane.rotation.x = -Math.PI / 2 scene.add(plane)  // 将这些uniforms变量添加到gui在，方便看效果，找到最合适的值。 gui.add(params,'uWaresFrequency').min(1).max(50).step(0.1).onChange(val => {     material.uniforms.uWaresFrequency.value = val; }); gui.add(params,'uScale').min(0).max(0.2).step(0.01).onChange(val => {     material.uniforms.uScale.value = val; }); gui.add(params,'uNoiseFrequency').min(0).max(100).step(0.1).onChange(val => {     material.uniforms.uNoiseFrequency.value = val; }); gui.add(params,'uNoiseScale').min(0).max(5).step(0.01).onChange(val => {     material.uniforms.uNoiseScale.value = val; }); gui.add(params,'uXzScale').min(1).max(5).step(0.01).onChange(val => {     material.uniforms.uXzScale.value = val; }); gui.addColor(params,'uLowColor').onFinishChange(val => {     material.uniforms.uLowColor.value = new THREE.Color(val) }) gui.addColor(params,'uHighColor').onFinishChange(val => {     material.uniforms.uHighColor.value = new THREE.Color(val) }) gui.add(params,'uOpacity').min(0).max(1).onChange(val => {     material.uniforms.uOpacity.value = val; })

uniform float uTime; uniform float uWaresFrequency; uniform float uScale; uniform float uNoiseFrequency; uniform float uNoiseScale; uniform float uXzScale; varying float vElevation;  float random (vec2 st) {     return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123); } // 旋转函数 vec2 rotate(vec2 uv, float rotation, vec2 mid) {     return vec2(     cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x,     cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y     ); }  // 2d噪声函数  float noise (in vec2 st) {     vec2 i = floor(st);     vec2 f = fract(st);     float a = random(i);     float b = random(i + vec2(1.0, 0.0));     float c = random(i + vec2(0.0, 1.0));     float d = random(i + vec2(1.0, 1.0));     vec2 u = f*f*(3.0-2.0*f);     return mix(a, b, u.x) +     (c - a)* u.y * (1.0 - u.x) +     (d - b) * u.x * u.y; } // 随机函数 vec4 permute(vec4 x) {     return mod(((x*34.0)+1.0)*x, 289.0); } vec2 fade(vec2 t) {     return t*t*t*(t*(t*6.0-15.0)+10.0); } float cnoise(vec2 P) {     vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);     vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);     Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation     vec4 ix = Pi.xzxz;     vec4 iy = Pi.yyww;     vec4 fx = Pf.xzxz;     vec4 fy = Pf.yyww;     vec4 i = permute(permute(ix) + iy);     vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...     vec4 gy = abs(gx) - 0.5;     vec4 tx = floor(gx + 0.5);     gx = gx - tx;     vec2 g00 = vec2(gx.x,gy.x);     vec2 g10 = vec2(gx.y,gy.y);     vec2 g01 = vec2(gx.z,gy.z);     vec2 g11 = vec2(gx.w,gy.w);     vec4 norm = 1.79284291400159 - 0.85373472095314 * vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));     g00 *= norm.x;     g01 *= norm.y;     g10 *= norm.z;     g11 *= norm.w;     float n00 = dot(g00, vec2(fx.x, fy.x));     float n10 = dot(g10, vec2(fx.y, fy.y));     float n01 = dot(g01, vec2(fx.z, fy.z));     float n11 = dot(g11, vec2(fx.w, fy.w));     vec2 fade_xy = fade(Pf.xy);     vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);     float n_xy = mix(n_x.x, n_x.y, fade_xy.y);     return 2.3 * n_xy; }  void main() {     vec4 modelPosition = modelMatrix * vec4(position,1.0);     // 波浪高度     float elevation = sin(modelPosition.x * uWaresFrequency) * sin(modelPosition.z * uWaresFrequency * uXzScale);     elevation += cnoise(vec2(modelPosition.xz*uNoiseFrequency+uTime))     *uNoiseScale;     elevation *= uScale;     // 传到片元着色器     vElevation = elevation;     modelPosition.y += elevation;     gl_Position = projectionMatrix * viewMatrix * modelPosition; }

varying float vElevation; uniform vec3 uLowColor; uniform vec3 uHighColor; uniform float uOpacity; void main(){     float a = (vElevation + 1.0) / 2.0;     // 混合颜色     vec3 color = mix(uLowColor,uHighColor,a);     gl_FragColor = vec4(color,uOpacity); }