js怎样操作WebGL纹理 5种纹理贴图技巧增强3D效果

const gl = canvas.getContext('webgl'); // 获取WebGL上下文
const texture = gl.createTexture(); // 创建纹理对象

const image = new Image();
image.onload = function() {
  gl.bindTexture(gl.TEXTURE_2D, texture); // 绑定纹理对象到TEXTURE_2D目标

  // 设置纹理参数，控制纹理如何被采样
  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);

  // 将图像数据上传到纹理
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

  // 纹理加载完毕，可以开始渲染了
  // ...
};
image.src = 'your_image.png';

// 顶点着色器
attribute vec3 a_position;
attribute vec2 a_texCoord;
attribute vec3 a_normal; // 顶点法线
attribute vec3 a_tangent; // 顶点切线

varying vec2 v_texCoord;
varying mat3 v_TBN; // 切线空间矩阵

uniform mat4 u_modelMatrix;
uniform mat4 u_viewMatrix;
uniform mat4 u_projectionMatrix;

void main() {
  v_texCoord = a_texCoord;

  // 计算副切线
  vec3 bitangent = cross(a_normal, a_tangent);

  // 构建切线空间矩阵
  v_TBN = mat3(a_tangent, bitangent, a_normal);

  gl_Position = u_projectionMatrix * u_viewMatrix * u_modelMatrix * vec4(a_position, 1.0);
}

// 片元着色器
varying vec2 v_texCoord;
varying mat3 v_TBN;

uniform sampler2D u_normalMap; // 法线贴图

void main() {
  // 从法线贴图中读取法线信息
  vec3 normal = texture2D(u_normalMap, v_texCoord).rgb;

  // 将法线信息从[0, 1]范围映射到[-1, 1]范围
  normal = normalize(normal * 2.0 - 1.0);

  // 将法线信息转换到世界空间
  normal = normalize(v_TBN * normal);

  // ... 使用法线信息计算光照 ...
}

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);

const faces = [
  { target: gl.TEXTURE_CUBE_MAP_POSITIVE_X, url: 'right.png' },
  { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, url: 'left.png' },
  { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, url: 'top.png' },
  { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, url: 'bottom.png' },
  { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, url: 'front.png' },
  { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, url: 'back.png' }
];

let loadedCount = 0;
for (let i = 0; i < faces.length; i++) {
  const face = faces[i];
  const image = new Image();
  image.onload = function() {
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
    gl.texImage2D(face.target, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
    loadedCount++;
    if (loadedCount === 6) {
      // 所有面都加载完毕
      gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE); // 注意WRAP_R
    }
  };
  image.src = face.url;
}

const canvas2d = document.createElement('canvas');
canvas2d.width = 256;
canvas2d.height = 256;
const ctx = canvas2d.getContext('2d');

// 生成一个简单的棋盘格纹理
for (let i = 0; i < 256; i++) {
  for (let j = 0; j < 256; j++) {
    if ((i + j) % 32 < 16) {
      ctx.fillStyle = 'white';
    } else {
      ctx.fillStyle = 'black';
    }
    ctx.fillRect(i, j, 1, 1);
  }
}

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2d);