【愚公系列】2024年02月 WEBGL专题-纹理

愚公搬代码

发布于 2025-05-28 16:55:18

4620

🚀前言

在WebGL中，纹理是一种可以应用到三角形网格的图像。纹理可以用于创建具有更高细节和更复杂外观的表面效果，而不会增加几何多边形的数量。

WebGL中的纹理是由图像数据组成的，可以由图片、视频或其他类型的数据生成。这些数据会被上传到WebGL的图形处理单元中，然后被映射到三角形网格上的每个顶点。当绘制时，WebGL会使用纹理数据插值计算每个像素点的颜色值，从而使表面看起来更加真实。

WebGL支持多种纹理类型，包括2D纹理、立方体纹理、3D纹理等。可以在WebGL的顶点着色器和片元着色器中使用纹理坐标来控制纹理的位置、旋转、缩放等变换操作。应用纹理时，还可以使用不同的纹理过滤器和材质参数来调整表面的外观。

WebGL中的纹理是一种强大的工具，可以为三维场景增加更多的细节和真实感，提高用户体验。

🚀一、纹理

🔎1.纹理坐标

WebGL中纹理坐标是指用于在三维场景中放置纹理贴图的2D坐标系。纹理坐标通常在0到1之间的范围内，其中0表示纹理的左侧或顶部，1表示纹理的右侧或底部。在WebGL中，纹理坐标通常是作为顶点属性传递给图形着色器的，以便将纹理映射到几何形状上。在图形着色器中，可以使用纹理坐标来查找纹理贴图中相应像素的颜色值。

🔎2.纹理坐标贴图流程

在WebGL中，我们可以使用纹理贴图来给3D模型上色或添加图案等效果。下面是一些通过纹理坐标贴图的步骤：

创建一个纹理对象：在WebGL中，我们可以使用gl.createTexture()函数来创建一个纹理对象。
加载纹理贴图：首先需要加载一张图片，这里我们可以使用Image对象来加载图像。将图像作为纹理对象的一部分传递给WebGL的gl.texImage2D()函数。
设置纹理参数：我们需要为纹理对象设置一些参数，如纹理滤波方式、纹理环绕方式等。可以使用gl.texParameteri()函数来设置纹理参数。
使用纹理：最后我们需要将纹理对象与着色器一起使用。在顶点着色器中添加纹理坐标的顶点属性，并在片元着色器中使用gl.TEXTURE_2D来获取纹理颜色值。

🔎3.创建纹理对象

使用 gl.createTexture() 函数创建一个纹理对象：

const texture = gl.createTexture();

可以通过 gl.deleteTexture(textrue) 来删除纹理对象。

🔎4.图像翻转

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)

🔎5.开启(激活)纹理单元

gl.activeTexture(gl.TEXTURE0);

Webgl 是通过纹理单元来管理纹理对象，每个纹理单元管理⼀张纹理图像。

🔎6.绑定纹理对象

gl.bindTexture(type, texture)

type 参数有以下两种：
- gl.TEXTURE_2D: 二维纹理
- gl.TEXTURE_CUBE_MAP: 立方体纹理
texture: 纹理对象

🔎7.处理放大缩小的逻辑

gl.texParamteri(type, pname, param)

pname纹理参数有四个选项：

gl.TEXTURE_MAG_FILTER 放⼤
gl.TEXTURE_MIN_FILTER 缩⼩
gl.TEXTURE_WRAP_S 横向（⽔平填充）
gl.TEXTURE_WRAP_T 纵向（垂直填充）

param赋值给 gl.TEXTURE_MAG_FILTER和 gl.TEXTURE_MIN_FILTER ：

gl.NEAREST 使用像素颜色值
gl.LINEAR 使用四周的加权平均值

param赋值给 gl.TEXTURE_WRAP_S和 gl.TEXTURE_WRAP_T：

gl.REPEAT 平铺重复
gl.MIRRORED_REPEAT 镜像对称
gl.CLAMP_TO_EDGE 边缘延伸

🔎8.配置纹理单元

gl.texImage2D(type, level, internalformat, format,dataType, image）

level：为0即可
internalformat：

format：纹理的内部格式，必须和 internalformat 相同
dataType：

image 图片对象

🔎9.绘制纹理

vec4 texture2D(sampler2D sampler, vec2 coord）

sampler：纹理单元编号
coord：纹理坐标

🔎10.纹理绘制流程

🔎11.案例

1、单个纹理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas{
      margin: 50px auto 0;
      display: block;
      background: yellow;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
  此浏览器不支持canvas
</canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    // 只传递顶点数据
    attribute vec4 aPosition;

    attribute vec4 aTex;

    varying vec2 vTex;

    void main() {
      gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
      vTex = vec2(aTex.x, aTex.y);
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    uniform sampler2D uSampler;
    varying vec2 vTex;

    void main() {
      gl_FragColor = texture2D(uSampler, vTex);
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  const aPosition = gl.getAttribLocation(program, 'aPosition');
  const aTex = gl.getAttribLocation(program, 'aTex');
  const uSampler = gl.getUniformLocation(program, 'uSampler');

  const points = new Float32Array([
    -0.5,  0.5, 0.0, 1.0,
    -0.5, -0.5, 0.0, 0.0,
     0.5,  0.5, 1.0, 1.0,
     0.5, -0.5, 1.0, 0.0,
  ])

  const buffer = gl.createBuffer();
  const BYTES = points.BYTES_PER_ELEMENT;

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 4, 0);

  gl.enableVertexAttribArray(aPosition)

  gl.vertexAttribPointer(aTex, 2, gl.FLOAT, false, BYTES * 4, BYTES * 2);

  gl.enableVertexAttribArray(aTex)

  const img = new Image();
  img.onload = function() {
    // 创建纹理对象
    const texture = gl.createTexture();

    // 翻转 图片 Y轴
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)

    // 开启一个纹理单元
    gl.activeTexture(gl.TEXTURE0);

    // 绑定纹理对象
    gl.bindTexture(gl.TEXTURE_2D, texture);

    // 处理放大缩小的逻辑
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)

    // 横向 纵向 平铺的方式
    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.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);

    gl.uniform1i(uSampler, 0);

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  }

  img.src = '../assets/content.png'

</script>

2、多重纹理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas{
      margin: 50px auto 0;
      display: block;
      background: yellow;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
  此浏览器不支持canvas
</canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    // 只传递顶点数据
    attribute vec4 aPosition;

    attribute vec4 aTex;

    varying vec2 vTex;

    void main() {
      gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
      vTex = vec2(aTex.x, aTex.y);
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    uniform sampler2D uSampler;
    uniform sampler2D uSampler1;
    varying vec2 vTex;

    void main() {
      vec4 c1 = texture2D(uSampler, vTex);
      vec4 c2 = texture2D(uSampler1, vTex);

      gl_FragColor = c1 * c2;
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  const aPosition = gl.getAttribLocation(program, 'aPosition');
  const aTex = gl.getAttribLocation(program, 'aTex');
  const uSampler = gl.getUniformLocation(program, 'uSampler');
  const uSampler1 = gl.getUniformLocation(program, 'uSampler1');

  const points = new Float32Array([
    -0.5,  0.5, 0.0, 1.0,
    -0.5, -0.5, 0.0, 0.0,
     0.5,  0.5, 1.0, 1.0,
     0.5, -0.5, 1.0, 0.0,
  ])

  const buffer = gl.createBuffer();
  const BYTES = points.BYTES_PER_ELEMENT;

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 4, 0);

  gl.enableVertexAttribArray(aPosition)

  gl.vertexAttribPointer(aTex, 2, gl.FLOAT, false, BYTES * 4, BYTES * 2);

  gl.enableVertexAttribArray(aTex)

  function getImage(url, location, index) {
    return new Promise(resolve => {
      const img = new Image();
      img.onload = function() {
        // 创建纹理对象
        const texture = gl.createTexture();

        // 翻转 图片 Y轴
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)

        // 开启一个纹理单元
        gl.activeTexture(gl[`TEXTURE${index}`]);

        // 绑定纹理对象
        gl.bindTexture(gl.TEXTURE_2D, texture);

        // 处理放大缩小的逻辑
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)

        // 横向 纵向 平铺的方式
        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.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);

        gl.uniform1i(location, index);

        resolve();
      }

      img.src = url;
    })
  }
  // function getImage1() {
  //   return new Promise(resolve => {
  //     const img = new Image();
  //     img.onload = function() {
  //       // 创建纹理对象
  //       const texture = gl.createTexture();
  //
  //       // 翻转 图片 Y轴
  //       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
  //
  //       // 开启一个纹理单元
  //       gl.activeTexture(gl.TEXTURE1);
  //
  //       // 绑定纹理对象
  //       gl.bindTexture(gl.TEXTURE_2D, texture);
  //
  //       // 处理放大缩小的逻辑
  //       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
  //       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
  //
  //       // 横向 纵向 平铺的方式
  //       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.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
  //
  //       gl.uniform1i(uSampler1, 1);
  //
  //       resolve();
  //     }
  //
  //     img.src = '../assets/content.png'
  //   })
  // }

  Promise.all([getImage('../assets/border.png', uSampler, 0), getImage('../assets/content.png', uSampler1, 1)]).then(() => {
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  })
</script>

以上代码中，我们创建了一个纹理对象，并通过Image对象来加载了一张名为content.png的图片。接下来，我们为纹理对象设置了一些参数，如纹理滤波方式和纹理环绕方式等。在顶点着色器中，我们添加了一个纹理坐标的顶点属性，并将其传递给片元着色器。在片元着色器中，我们使用纹理坐标和gl.TEXTURE_2D来获取纹理颜色值。最后，我们激活纹理单元，并将纹理对象与着色器一起使用。

注意：存在跨域问题必须已服务器启动才能加载图片

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-02-29，如有侵权请联系 cloudcommunity@tencent.com 删除

对象