webgl纹理贴图机制

已于 2023-01-30 20:12:02 修改
阅读量2.2k 收藏 18
点赞数 5
分类专栏： WebGL 文章标签： webgl 贴图
于 2023-01-23 22:49:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37987033/article/details/128745577
版权

文章目录

前言

在计算机图形学中，为了模拟更加真实的效果，需要给每个像素赋予不同的颜色值，这种情况下如果手动指定每个像素点的rgb值，将会是一件难以完成的任务。这就需要有一种机制，能够让我们把图片素材渲染到模型的一个或者多个表面上，这种机制叫做纹理贴图，本文将详细介绍在webgl中如何把一张真实图像贴到计算器图形上的。

纹理图片大小规范

WebGL 对纹理图片大小是有要求的，图片的宽度和高度必须是2的N次幂，比如 16 x 16，32 x 32，32 x 64 等。实际上，不是这个尺寸的图片也能进行贴图，但是这样不仅会增加更多的处理，还会影响性能。

纹理坐标系统

纹理也有一套自己的坐标系统，纹理坐标一般被称为 uv 坐标系（或者st），u 代表横轴坐标，v 代表纵轴坐标，他们的范围都是0到1。不管纹理图像本身的长宽是多少，都处于这个坐标系下。
在这里插入图片描述

贴图流程

JavaScript部分

在javascript中将纹理信息传递给着色器的步骤是固定的，类似缓冲区，流程虽然比较繁琐，但是熟能生巧，下面来一步步解析：

齐次坐标—uv坐标数据准备

    const aPosition = gl.getAttribLocation(program, 'aPosition');
    const aTextCoord = gl.getAttribLocation(program, 'aTextCoord');
    const uSample = gl.getUniformLocation(program, 'uSample');
    // 创建缓冲区对象
    const buffer = gl.createBuffer();
    // 绑定缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 传入的数据
    const vertices = new Float32Array([
      -0.5, 0.5,    0.0, 1.0,  // 齐次坐标x, 齐次坐标y, uv坐标u, uv坐标v
      -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 BYTES = vertices.BYTES_PER_ELEMENT;
 
    // 开辟空间并写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

    // 缓冲区对象分配给attribute变量
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 4, 0)
    // 开启attribue缓冲区变量
    gl.enableVertexAttribArray(aPosition)

    gl.vertexAttribPointer(aTextCoord, 2, gl.FLOAT, false, BYTES * 4, BYTES * 2)
    gl.enableVertexAttribArray(aTextCoord)

这里主要关注向缓冲区传递的数据vertices ，第一个顶点齐次坐标为（-0.5，0.5），其对应的纹理图像的uv坐标是（0.0，1.0）；第二个顶点齐次坐标为（-0.5，-0.5），其对应的纹理图像的uv坐标是（0.0，0.0），依次类推。对应关系如下图：
在这里插入图片描述
然后通过 gl.vertexAttribPointer()方法从缓冲区向着色器中传递attribute变量aPosition和aTextCoord，分别表示齐次坐标和对应的uv映射，uSample 的用处将在稍后介绍。

加载外部纹理图像

    const img = new Image()
    img.onload = function(){
      // ...
    }
    img.src = "./img/sky.jpg"

我们使用 new Image 新建对象，由于图像的加载是异步的，因此需要对图像进行监听，当图像加载完成（onload事件触发）时，进入后续的步骤。

纹理配置加载

  • 创建纹理对象

使用gl.createTexture() 方法创建纹理对象，该方法不需要参数，返回新创建的纹理对象，webgl中的纹理由纹理对象统一管理

    img.onload = function(){
      const texture = gl.createTexture() // 创建纹理对象
    }
  • 图像Y轴反转

webgl中图像纹理坐标系的v和图片的坐标Y是相反的，因此，要先把图像Y轴进行反转，才能正确的映射纹理坐标：
在这里插入图片描述

    img.onload = function(){
      const texture = gl.createTexture() // 创建纹理对象
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 图像反转Y轴
    }

gl.pixelStorei规范如下：

gl.pixelStorei (pname，param): 使用pname和param的指定方式得到处理后的图像

  • pname的枚举如下
    – gl.UNPACK_FLIP_Y_WEBGL：对图像进行Y轴反转
    – gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL：将图像RGB的每个分量乘以A
  • param: 非0值（true）或 0（false）
  • 激活纹理单元并绑定至纹理对象

webgl通过名为纹理单元的机制来使用一个或多个纹理，即使使用的纹理图像只有一张，也必须为其指定一个纹理单元。在激活纹理单元后，类似于缓冲区机制，还需要将其绑定纹理对象。

    img.onload = function(){
      const texture = gl.createTexture() // 创建纹理对象
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 图像反转Y轴
      gl.activeTexture(gl.TEXTURE0) // 激活纹理单元
      gl.bindTexture(gl.TEXTURE_2D, texture) // 绑定纹理对象
    }

纹理单元的激活通过gl.activeTexture()函数

gl.activeTexture(textureUnit): 激活纹理单元，被激活的单元编号是textureUnit

  • textureUnit ：gl.TEXTURE0、gl.TEXTURE1、gl.TEXTURE2····

gl.bindTexture(target, texture) 将纹理单元开启并绑定至纹理对象

gl.bindTexture (target，texture): 开启texture指定的纹理对象，将其绑定至target上

  • target的枚举如下
    – gl.TEXTURE_2D：二维纹理
    – gl.TEXTURE_CUBE_MAP：立方体纹理
  • texture: 要绑定的纹理对象

完成这两步后，纹理单元的状态将会发生改变：
在这里插入图片描述

  • 配置纹理对象参数

接下来，需要配置纹理对象的参数，设置纹理映射到图形的具体方式：如何根据纹理坐标获取纹素颜色，使用哪种方式填充纹理。纹理对象参数配置靠gl.texParameterf（）函数实现。

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

      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 反转Y轴
      gl.activeTexture(gl.TEXTURE0) // 激活纹理单元
      gl.bindTexture(gl.TEXTURE_2D, texture) // 绑定纹理对象

      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR) // 放大处理方式
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) // 缩小处理方式
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) // 水平平铺方式
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE) // 竖直平铺方式

    }

gl.texParameterf() 规范如下：

gl.texParameterf(target，pname，param): 将参数param的值，将其绑定至目标纹理对象的panme属性上

  • target的枚举如下，与绑定纹理对象函数gl.bindTexture的第一个参数相同。
    – gl.TEXTURE_2D：二维纹理
    – gl.TEXTURE_CUBE_MAP：立方体纹理
  • pname: 纹理属性
  • param: 纹理属性对应的参数

纹理属性pname可以指定以下几种

纹理参数描述默认值
gl.TEXTURE_MAG_FILTER放大方法，当纹理的绘制范围比纹理本身更大时，如何获取纹素颜色。如将16 * 16的纹理图像映射到32 * 32的图形上，需要填充不足的纹理图像的像素gl.LINEAR
gl.TEXTURE_MIN_FILTER缩小方法，当纹理的绘制范围比纹理本身更小时，如何获取纹素颜色。如将32 * 32的纹理图像映射到16 * 16的图形上，需要剔除多余的纹理图像的像素gl.LINEAR
gl.TEXTURE_WRAP_S水平填充方法，如何在水平方向上对纹理图像左右侧进行填充gl.REPEAT
gl.TEXTURE_WRAP_T竖直填充方法，如何在水平方向上对纹理图像上下侧进行填充gl.REPEAT

在这里插入图片描述

当pname为gl.TEXTURE_MAG_FILTER或者gl.TEXTURE_MIN_FILTER时，param可选如下：

值描述
gl.NEAREST使用原纹理上距离映射后的像素（新像素）中心最近的那个像素的颜色值作为新像素的值
gl.LINEAR使用距离新像素最近的四个像素的颜色值的加权平均作为新像素的值

当pname为gl.TEXTURE_WRAP_S或者gl.TEXTURE_WRAP_T时，param可选如下：

值描述
gl.REPEAT平铺重复
gl.MIRRORED_REPEAT镜像对称重复
gl.CLAMP_TO_EDGE使用纹理边缘拉伸值
  • 纹理图像分配给纹理对象
    img.onload = function(){
      const texture = gl.createTexture() // 创建纹理对象

      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 反转Y轴
      gl.activeTexture(gl.TEXTURE0) // 激活纹理单元
      gl.bindTexture(gl.TEXTURE_2D, texture) // 绑定纹理对象

      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR) // 放大处理方式
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) // 缩小处理方式
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) // 水平平铺方式
      gl.texParameterf(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.texImage2D(target，level，internalformat，format，type，image): 将imgae图像分配给绑定至target的纹理对象

  • target的枚举如下
    – gl.TEXTURE_2D：二维纹理
    – gl.TEXTURE_CUBE_MAP：立方体纹理
  • level: 0
  • internalformat: 图像内部格式
  • format: 纹理内部格式，与internalformat相同
  • type: 纹理数据类型，一般使用UNSIGNED_BYTE
  • image: 纹理图像存储的对象

internalformat和format的枚举如下表所示，其中流明表示物体表面的亮度。JPG、BMP通常使用RGB,PNG一般使用RGBA,gl.LUMINANCE和LUMINANCE_ALPHA多用于灰度图。

值描述
gl.RGB红、绿、蓝
gl.RGBA红、绿、蓝、透明度
gl.ALPHA（0，0，0，透明度）
gl.LUMINANCEL、L、L、1L：流明
gl.LUMINANCE_ALPHAL、L、L、透明度

分配完成后，图像就从javascript程序中存储到了webgl系统中的纹理对象中：
在这里插入图片描述

  • 纹理单元传递给着色器

在第一步里，gl.getUniformLocation(program, ‘uSample’) 向着色器声明了一个名为uSample的uniform变量，现在，我们要把纹理单元传递给它。这一步使用 gl.uniform1i()函数，他接受两个参数：变量地址以及序号，因为之前调用绑定函数绑定的是编号 0 的gl.TEXTURE0，因此这里的参数是0：

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

      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 反转Y轴
      gl.activeTexture(gl.TEXTURE0) // 激活纹理单元
      gl.bindTexture(gl.TEXTURE_2D, texture) // 绑定纹理对象

      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR) // 放大处理方式
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) // 缩小处理方式
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) // 水平平铺方式
      gl.texParameterf(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(uSample, 0) // 纹理单元传递给着色器

    }

完成传递之后webgl内部状态如下：
在这里插入图片描述

着色器部分

顶点着色器

在顶点着色器中接受缓冲区中传递的attribute变量 aPosition 和 aTextCoord;并且使用varying变量把uv坐标传递给片元着色器。

 const vertex = `
	  attribute vec4 aPosition;
      attribute vec2 aTextCoord;
      varying  vec2 vTextCoord;
	  void main() {
		gl_Position =  aPosition;
        vTextCoord = aTextCoord;
 	}

片元着色器

由顶点着色器传递来的片元纹理坐标会在光栅化过程中被内插，片元着色器接受到的是内插后的纹理坐标。sampler2D 是一种专门用于接受纹理对象的类型。接下来，需要根据纹理坐标，将纹理图像上每个纹素/像素的颜色，赋值到对应片元上，如下所示：

    const fragment = `
	  precision highp float;
      uniform sampler2D uSample;
      varying  vec2 vTextCoord;
		void main(){
			gl_FragColor =texture2D(uSample, vTextCoord);
	  }
		`

这里用到的函数是texture2D（），它是glsl的内置函数：

gl.texture2D(sampler2D sampler，vec2 coord): 将sampler的纹理上，获取坐标为coord的纹理像素颜色

  • sampler: 指定的纹理单元编号
  • coord: 指定的纹理坐标

完整示例

至此，以及完成了纹理贴图的所有步骤，效果的完整代码如下。由于canvas读取本地图片数据会受到浏览器跨域限制，鉴于我使用的是vscode编辑器，可以从左侧扩展搜索并下载一个Liver Server插件，将所有资源发布在本地服务下，避免了跨域问题。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>webgl</title>
  <script src="./lib.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    canvas {
      margin: 50px 30px;
      width: 500px;
      height: 500px;
      background-color: antiquewhite;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    /** @type {HTMLCanvasElement} */
    //------------------------------------------------------创建画布
    // 获取canvas元素对象
    let canvas = document.getElementById('canvas');
    // 获取webgl绘图上下文
    const gl = canvas.getContext('webgl');
    if (!gl) {
      throw new Error('WebGL not supported');
    }
    canvas.width = 500;
    canvas.height = 500;
    gl.viewport(0, 0, canvas.width, canvas.height)

    const vertex = `
			attribute vec4 aPosition;
      attribute vec2 aTextCoord;
      varying  vec2 vTextCoord;
			void main() {
				gl_Position =  aPosition;
        vTextCoord = aTextCoord;
			}
		`
    const fragment = `
			precision highp float;

      uniform sampler2D uSample;
      varying  vec2 vTextCoord;
			void main(){
				gl_FragColor =texture2D(uSample, vTextCoord);
			}
		`
    // 创建program
    const program = initShader(gl, vertex, fragment)
    // 获取attribute变量的数据存储位置
    const aPosition = gl.getAttribLocation(program, 'aPosition');
    const aTextCoord = gl.getAttribLocation(program, 'aTextCoord');
    const uSample = gl.getUniformLocation(program, 'uSample');
    // 创建缓冲区对象
    const buffer = gl.createBuffer();
    // 绑定缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 传入的数据
    const vertices = new Float32Array([
      -0.5, 0.5,    0.0, 1.0,  // 齐次坐标x, 齐次坐标y, uv坐标u, uv坐标v
      -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 BYTES = vertices.BYTES_PER_ELEMENT;
    // 开辟空间并写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

    // 缓冲区对象分配给attribute变量
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 4, 0)
    // 开启attribue缓冲区变量
    gl.enableVertexAttribArray(aPosition)

    gl.vertexAttribPointer(aTextCoord, 2, gl.FLOAT, false, BYTES * 4, BYTES * 2)
    gl.enableVertexAttribArray(aTextCoord)

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

      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 反转Y轴
      gl.activeTexture(gl.TEXTURE0) // 激活纹理单元
      gl.bindTexture(gl.TEXTURE_2D, texture) // 绑定纹理对象

      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR) // 放大处理方式
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) // 缩小处理方式
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) // 水平平铺方式
      gl.texParameterf(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(uSample, 0) // 纹理单元传递给着色器

      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
    }
    img.src = "./img/sky.jpg"
  </script>
</body>
</html>

使用多张纹理

着色器接受两个纹理单元

在着色器中接受两张纹理，将它们相乘后赋给片元即可。矢量的加减乘除运算就是对应位置上的运算

    const fragment = `
	  precision highp float;
      uniform sampler2D uSample1;
      uniform sampler2D uSample2;
      varying  vec2 vTextCoord;
	  void main(){
        vec4 imgColor1 = texture2D(uSample1, vTextCoord);
        vec4 imgColor2 = texture2D(uSample2, vTextCoord);
				gl_FragColor = imgColor1 * imgColor2;
			}
		`

封装纹理配置赋值函数

由于创建两个纹理单元的流程都是一样的，只有一些参数不同，因此可以把他们封装为公共的方法：

function addImage(url, textureIndex, location) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.onload = () => {     //onload()页面加载（文本和图片）完毕的时候
          const texture = gl.createTexture() // 创建纹理对象

          gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 反转Y轴
          gl.activeTexture(gl[`TEXTURE${textureIndex}`]) // 激活纹理单元
          gl.bindTexture(gl.TEXTURE_2D, texture) // 绑定纹理对象

          gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR) // 放大处理方式
          gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) // 缩小处理方式
          gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) // 水平平铺方式
          gl.texParameterf(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, textureIndex) // 纹理单元传递给着色器

          resolve(img)
        }
        img.onerror = () => {
          const err = new Error(`图片加载失败${url}`)
          reject(err)
        }
        img.src = url
      })
    }

完整示例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>webgl</title>
  <script src="./lib.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    canvas {
      margin: 50px 30px;
      width: 500px;
      height: 500px;
      background-color: antiquewhite;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>

    /** @type {HTMLCanvasElement} */
    //------------------------------------------------------创建画布
    // 获取canvas元素对象
    let canvas = document.getElementById('canvas');

    // 获取webgl绘图上下文
    const gl = canvas.getContext('webgl');
    if (!gl) {
      throw new Error('WebGL not supported');
    }

    canvas.width = 500;
    canvas.height = 500;
    gl.viewport(0, 0, canvas.width, canvas.height)

    const vertex = `
			attribute vec4 aPosition;
      attribute vec2 aTextCoord;
      varying  vec2 vTextCoord;
			void main() {
				gl_Position =  aPosition;
        vTextCoord = aTextCoord;
			}
		`
    const fragment = `
			precision highp float;

      uniform sampler2D uSample1;
      uniform sampler2D uSample2;
      varying  vec2 vTextCoord;
			void main(){
        vec4 imgColor1 = texture2D(uSample1, vTextCoord);
        vec4 imgColor2 = texture2D(uSample2, vTextCoord);
				gl_FragColor = imgColor1 * imgColor2;
			}
		`

    // 创建program
    const program = initShader(gl, vertex, fragment)
    // 获取attribute变量的数据存储位置
    const aPosition = gl.getAttribLocation(program, 'aPosition');
    const aTextCoord = gl.getAttribLocation(program, 'aTextCoord');
    const uSample1 = gl.getUniformLocation(program, 'uSample1');
    const uSample2 = gl.getUniformLocation(program, 'uSample2');
    // 创建缓冲区对象
    const buffer = gl.createBuffer();
    // 绑定缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 传入的数据
    const vertices = new Float32Array([
      -0.5, 0.5, 0.0, 1.0,  // 齐次坐标x, 齐次坐标y, uv坐标u, uv坐标v
      -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 BYTES = vertices.BYTES_PER_ELEMENT;

    // 开辟空间并写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

    // 缓冲区对象分配给attribute变量
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 4, 0)
    // 开启attribue缓冲区变量
    gl.enableVertexAttribArray(aPosition)

    gl.vertexAttribPointer(aTextCoord, 2, gl.FLOAT, false, BYTES * 4, BYTES * 2)
    gl.enableVertexAttribArray(aTextCoord)

    function addImage(url, textureIndex, location) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.onload = () => {     //onload()页面加载（文本和图片）完毕的时候
          const texture = gl.createTexture() // 创建纹理对象

          gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 反转Y轴
          gl.activeTexture(gl[`TEXTURE${textureIndex}`]) // 激活纹理单元
          gl.bindTexture(gl.TEXTURE_2D, texture) // 绑定纹理对象

          gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR) // 放大处理方式
          gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) // 缩小处理方式
          gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) // 水平平铺方式
          gl.texParameterf(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, textureIndex) // 纹理单元传递给着色器

          resolve(img)
        }
        img.onerror = () => {
          const err = new Error(`图片加载失败${url}`)
          reject(err)
        }
        img.src = url
      })
    }

    Promise.all([addImage('./img/sky.jpg', 0, uSample1), addImage('./img/orange.jpg', 1, uSample2)])
    .then(() => {
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
    })

  </script>
</body>
</html>

总结

以上为webgl中贴图机制详细介绍，为了加深对贴图机制的理解，应该在多实验相关方法的不同参数，本文就不一一列举。

  • 纹理图片大小规范
  • 纹理坐标系统
  • 贴图流程
  • 使用多张纹理
迦南giser
关注
  • 5
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
webgl-原生纹理贴图
以爱护甲,爱满枫林。
04-12 868
false, //normalized: 正交化 true或false , [1, 2] => [1/根号5， 2/根号5]image.src = "http://localhost:8080/upload/dog.webp"//需要更改资源地址。//对贴图的参数进行设置texParameteri(贴图的种类,参数的名称，具体值)//对贴图的参数进行设置texParameteri(贴图的种类,参数的名称，具体值)。//设置纹理贴图填充方式(纹理贴图像素尺寸小于顶点绘制区域像素尺寸)
Layabox WebGL Shader编程教程
04-07
在Html5 3D游戏开发中WebGL Shader的作用非常重要，然而学习WebGL Shader的路却不是那么容易，第一它涉及到方方面面的知识和基础， 比如：3D数学，计算机图形学甚至硬件。第二各个Html5游戏引擎关于WebGL Shader的资源都比较少,不方便初学者入门学习。与其在互联网上四处搜索零散的资料，不如从头开始，系统全面的去学习WebGL Shader的“代码的艺术”。本教程“授人以渔”,为大家带来零起点的WebGL Shader教学，从图形硬件的发展史开始，讲GPU可编程管线，讲3D模型数据结构、贴图、光照、渲染，让大家能从一个纵深的过程中宏观的了解这种技术的前因后果。教程以LayaBox引擎为环境 ，重点放在GLSL语言的学习，经典光照的计算，各种纹理贴图的原理与使用，PBR、NPR、SSS等渲染类型的实现。 手把手在Layabox环境下进行逐行代码的教学，期望帮助大家进入WebGL Shader编程的大门，最终能在实际的工程实践中有些创造和创新。1. 课程为99课时，总时长约为2000分钟到2500分钟。2. 课程 源代码 在对应课时的课件资源中，可下载。
WebGL编程指南13-纹理贴图原理
weixin_46773434的博客
09-19 1497
为了更好的理解纹理坐标系与顶点坐标系映射关系，调整一下纹理坐标，更方便我们理解纹理是如何映射到几何体上的。
webGL图片纹理
落枫秋歌
09-04 1085
基础概念 坐标定义： 纹理坐标系范围是（0，1），左下角为（0，0），右上角为（1，1）； webGL几何坐标系：x(-1, 1) y(-1, 1) gl.createTexture() —— 创建并初始化一个WebGLTexture对象，即创建一个纹理； gl.bindTexture(target, texture) 将给定的texture绑定到目标，其中texture参数为创建的纹理对象，target为绑定点，类型为GLenum，支持的值包括gl.TEXTURE_2D（二维纹理）、gl.T
【WebGL学习日报】22/09/11 : 颜色与纹理
luyu3283的博客
09-11 138
了解到了着色器逐片元操作的过程，对着色器的工作有了比之前更深入的理解。贴纹理的过程比想象中的复杂，还需要多多消化了解纹理贴图的详细过程，了解openGL ES语言的基本类型。
效果超棒的Webgl模型-12缸发动机
04-11
3D建模是创建三维模型的过程，通常涉及到几何造型、纹理贴图、动画制作等多个环节。在这个12缸发动机模型中，设计师可能使用了专业软件，如Blender或3ds Max，来构建每个部件的几何形状，然后添加细节，如金属光泽的...
webgl-engine
03-19
1. **渲染管线**：WebGL引擎会模拟图形处理器（GPU）的渲染过程，包括顶点处理、几何变换、光照计算、纹理贴图等步骤，将3D模型转化为2D图像显示在屏幕上。 2. **着色器语言（GLSL）**：WebGL引擎会使用GLSL...
webgl编程指南源码.zip
最新发布
06-19
5. **纹理贴图**：WebGL支持纹理映射，允许将图像数据应用到几何形状表面，用于创建复杂的图形效果。 6. **深度测试与混合**：WebGL内置了深度测试，以确保正确处理重叠的对象。同时，混合模式用于控制不同对象间的...
（高清原版）Learning Three.js The JavaScript 3D Library for WebGL(2nd).pdf
07-02
4. **纹理与映射**：学习如何加载和应用纹理到3D模型上，包括颜色纹理、环境贴图、法线贴图和镜面反射贴图等，以增加模型的视觉细节。 5. **动画与运动**：书中会深入讲解如何通过改变几何体的位置、旋转和缩放来...
用WebGL构建程序行星生成器
08-12
3. **纹理映射**：为了让行星看起来更真实，我们需要将纹理贴图到生成的几何体上。这包括云层、地形、海洋等不同元素的纹理。理解纹理坐标系统和纹理坐标映射是至关重要的。 4. **光照模型**：为了让行星看起来立体...
WebGL入门——多层纹理（附源码）
警警的博客
07-28 287
本文通过学习”冰哥的webgl中级课程”个人总结得到的
webgl基础之纹理使用
lizhan804311239的博客
08-14 90
【代码】webgl基础之纹理绑定。
在WebGL中使用纹理
qq_20535249的博客
07-17 412
//创建纹理 cubeTexture = gl.createTexture(); //加载图片 cubeImage = new Image(); cubeImage.src = "./1.jpg"; cubeImage.onload = function () { handleTextureLoaded(cubeImage, cubeTexture); } function handleTextureLoaded(image, texture) { //将创建的纹理绑定到 TE.
webgl图片在CPU和GPU中的内存管理
HzjCsdn的博客
09-01 1917
第一步加载到一张图片到内存 var img = new Image(); img.onload = function(img){ //加载完成回调 //此处的img就是你加载到内存的图像数据HTMLImageElement //使用这个img可以发到GPU, }.bind(this,img) //设置你的图片路径 img.src = arr[j]; 第二步从内存中将图像数据发往GPU,这个时候会在显存中重新生成一份GPU可以识别的纹理信息，注意我这里说的是重新生成，考
Webgl 练习记录 log 贴图 滤镜
lemossrkilakila
07-19 1750
Webgl 练习记录 log 贴图 滤镜
WebGL之旅（八）纹理映射
寒风的技术博客
07-23 3615
当传入几个顶点及其颜色后，虽然会对剩余的顶点进行插值，绘制出渐变的图像，但同要绘制的图像更加复杂时，就需要用到另一种方式——纹理映射，来确定每个点的颜色。当需要绘制一个点的颜色时，不在是通过计算得到，而是去一张事先保存好的图像中，对应的坐标取纹理的颜色。纹理的坐标st(或者叫uv)范围是0-1。示例：/** * 纹理映射 * xu.lidong@qq.com * */var vertexSha
webgl学习日志（七）——贴图的各种问题收集
niuge8905的博客
05-05 773
贴图倒是比较简单，实践过程中碰到这么几个问题：1.凹凸贴图怎么做？a.带颜色的 图片 你在PS里面 ctrl+shift+u 快捷键去色 取它的灰阶。b.用PhotoShop制作凹凸贴图。2.法线贴图怎么做？怎样用 PS 制作法线贴图_百度经验3.怎么制作六面贴图不一样的六面体var materials = []; for (var i = 0; i &lt; 6; ++i) { mate...
webgl 加载ktx 纹理
02-22
加载ktx纹理是使用WebGL加载3D纹理的一种方式。 KTX纹理是一种特殊的3D纹理格式，它被广泛用于游戏开发和3D渲染。这种格式的纹理文件通常使用.ktx后缀，并且可以在大多数现代图形处理器（GPU）上以高效的方式渲染。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值