Webgl2纹理映射

最新推荐文章于 2025-07-25 09:23:27 发布

ch_s_t

最新推荐文章于 2025-07-25 09:23:27 发布

阅读量1k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： WebGL读书笔记文章标签：人工智能

本文链接：https://blog.youkuaiyun.com/ch_s_t/article/details/148102897

WebGL读书笔记专栏收录该内容

16 篇文章

订阅专栏

一、纹理映射

纹理映射：使几何图元应用相应的纹理，必须进行纹理映射，即为图元中顶点指定恰当的纹理坐标。

纹理坐标：浮点数，范围为0.0-1.0

纹理坐标系：原点在左上侧，向右为S轴，向下为T轴

示例：三解形图元纹理坐标（0.5，0.0），（0.0，1.0），（1.0，1.0）

工作过程：（1）在顶点着色器通过输出变量将纹理坐标传入片元着色器

（2）渲染管线进行插值计算，产生片元的记录纹理坐标

（3）在片元着色器中，根据记录纹理坐标从纹理图中提取对应颜色（纹理采样）。

代码示例：

顶点着色器相应代码：

//定义顶点纹理坐标
in  vec2 aTexCoor
//传递给片元着色器输出变量
out  vec2   vTextureCoord;
void main(){
    ...
    //将接收的纹理坐标传递给片元着色器
    VTextureCoord=aTexCoor
}

片元着色器相应代码：

//纹理内容数据
uniform sampler2D  sTexture
//接收从顶点着色器传过来的纹理坐标
in vec2 vTextureCoord
//片元颜色
out vec4 fragColor
void main(){
    fragColor=texture(sTexture,vTextureCoord);  //进行纹理采样
}

二、纹理拉伸

特定情况下，也可以设置大于1的纹理坐标，此时可设置拉伸效果，有两种拉伸方式分别是重复拉伸、截取拉伸。

重复拉伸：产生重复效果

代码示例

//设置S轴拉伸方式为重复方式
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.REPEAT)
//设置T轴拉伸方式为重复方式
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.REPEAT)

截取方式：大于1 的纹理坐标都视为1，产生边缘被拉伸的效果。

代码示例：

//设置S轴拉伸方式为截取方式
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE)
//设置T轴拉伸方式为截取方式
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE)

三、纹理采样

纹理采样就是根据片元的纹理坐标到纹理图中提取对应的位置颜色的过程，采样有两种方式分别是最近点采样与线性采样。

最近点采样：直接取纹理图中对应的像素的颜色值为采样值。优点采样计算简单，缺点是较小的纹理图映射到较大图元上，容易产生明显的锯齿。

代码示例：

//设置MAG时的最近点采样
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST)
//设置MIN时的最近点采样
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST)

线性纹理采样：对采样范围内的多个像素进行加权平均，优点将不再出现锯齿现象，而是平滑过渡。

代码示例：

//设置MAG时的线性采样
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR)
//设置MIN时的线性采样
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR)

MIN与MAG采样：当纹理图中的一个像素对应到映射图元上的多个片元时，应采用MAG采样，反之则采用MIN采样。通俗地讲，当纹理图比需要映射的图元尺寸大时，系统采用MIN对应的纹理采样算法，而当纹理图比需要映射的图元尺寸小时，系统采用MAG对应的纹理采样算法。

四、Mipmap纹理技术

对远处片元采用尺寸较小且分辨率低的纹理，近处的采用尺寸较大且分辨率高的纹理，适用于大场景，如纹理相同的地形，克服远处清楚，近处模糊的反真现象。

代码示例：

//设置MIN情况为Mipmap最近点采样
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR_MIPMAP_NEAREST);
//自动生成Mipmap系列纹理
gl.generateMipmap(gl.TEXTURE_2D);