Webgl2纹理映射

一、纹理映射

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

        纹理坐标: 浮点数,范围为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);

五、多重纹理与过程纹理

       多重纹理:对同一个图元采用多幅纹理图。

       过程纹理: 在多重纹理变化的边界根据某种规则进行平滑过渡。

六、压缩纹理的使用

  压缩纹理: 是指在将各种格式的纹理图采用特定的工具转化为特殊的压缩纹理格式,然后在应用将压缩格式的纹理数据送入纹理缓冲以供纹理采样使用。

压缩格式: 

            ETC:   通常用在Android设备上。

        PVRTC: 通常用在苹果设备上

        DXT:      通常用在Windows设备上

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值