webgl纹理，变换，光照介绍

WebGL 是一项强大的技术，它允许开发者在网页上利用 OpenGL ES 2.0 的 API 来渲染 2D 和 3D 图形。在 WebGL 中，实现纹理、变换和光照是创建逼真 3D 场景的关键步骤。下面，我将简要解释这些概念的实现原理，并提供一个简单的代码案例。

纹理

实现原理：
纹理是将图像数据映射到 3D 模型的表面上的过程。在 WebGL 中，这通常涉及以下步骤：

创建纹理对象。
加载图像数据到纹理中。
在着色器中使用纹理坐标采样纹理数据，并将它应用到模型的表面上。

代码案例（部分代码，省略了上下文设置和着色器编译等步骤）：

javascript
// 创建纹理对象
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

// 加载图像到纹理中
const image = new Image();
image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.generateMipmap(gl.TEXTURE_2D);
};
image.src = ‘path/to/your/texture.png’;
变换

实现原理：
变换是将 3D 模型的位置、旋转和缩放等属性应用到模型上的过程。在 WebGL 中，这通常通过矩阵运算来实现。常见的变换矩阵包括模型矩阵、视图矩阵和投影矩阵。

模型矩阵：用于将模型的顶点坐标转换到世界坐标系中。
视图矩阵：用于将世界坐标系中的坐标转换到摄像机坐标系中。
投影矩阵：用于将摄像机坐标系中的坐标转换到裁剪空间中，以便进行后续的渲染。

代码案例（部分代码，着重于变换矩阵的设置）：

javascript
// 创建和设置模型矩阵
const modelMatrix = mat4.create();
mat4.translate(modelMatrix, modelMatrix, [0.0, 0.0, -5.0]); // 平移
mat4.rotate(modelMatrix, modelMatrix, Math.PI / 4, [0, 1, 0]); // 旋转

// 创建和设置视图矩阵
const viewMatrix = mat4.create();
mat4.lookAt(viewMatrix, [0, 0, 0], [0, 0, -1], [0, 1, 0]); // 设置摄像机位置、目标和上方向

// 创建和设置投影矩阵
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, Math.PI / 4, canvas.width / canvas.height, 0.1, 100.0);

// 将变换矩阵传递给着色器
gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, ‘modelMatrix’), false, modelMatrix);
gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, ‘viewMatrix’), false, viewMatrix);
gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, ‘projectionMatrix’), false, projectionMatrix);
光照

实现原理：
光照是模拟光线与物体相互作用的过程，以产生逼真的渲染效果。在 WebGL 中，光照通常通过着色器中的光照模型来计算。常见的光照模型包括 Phong 光照模型和 Blinn-Phong 光照模型。

代码案例（部分代码，着重于光照的计算）：

在顶点着色器中计算光照的顶点数据（如法线和光照方向）：

glsl
// 顶点着色器
attribute vec3 aPosition;
attribute vec3 aNormal;

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
uniform vec3 lightPosition;

varying vec3 vNormal;
varying vec3 vLightDir;

void main(void) {
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(aPosition, 1.0);

// 计算法线和光照方向（在世界坐标系中）
vNormal = mat3(modelMatrix) * aNormal;
vLightDir = lightPosition - (modelMatrix * vec4(aPosition, 1.0)).xyz;

}

在片段着色器中计算光照效果：

glsl
// 片段着色器
precision mediump float;

varying vec3 vNormal;
varying vec3 vLightDir;

uniform vec3 lightColor;
uniform vec3 ambientColor;

void main(void) {
// 归一化光照方向和法线
vec3 normal = normalize(vNormal);
vec3 lightDir = normalize(vLightDir);

// 计算漫反射光照强度
float diffuse = max(dot(normal, lightDir), 0.0);

// 计算最终颜色
vec3 color = ambientColor + lightColor * diffuse;

gl_FragColor = vec4(color, 1.0);

}

注意：上述代码案例是简化的示例，它们省略了 WebGL 上下文的设置、着色器的编译和链接、顶点数据的加载和渲染等步骤。在实际应用中，你需要将这些代码片段与其他 WebGL 代码结合使用，以创建完整的 3D 渲染流程。

此外，对于光照的实现，你还可以添加更多的光照类型（如点光源、聚光灯等）、光照属性（如强度、颜色等）以及光照效果（如镜面反射、阴影等），以实现更复杂和逼真的光照效果。