OpenGlES:纹理映射讲解

133 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第16天,点击查看活动详情

OpenGl中的纹理映射

首先纹理是什么,纹理可以理解为就是一张图片的像素信息
按照我们之前的操作我们在片段着色器中处理的就是为片段进行上色,纹理怎么用,就是在这个阶段将纹理的像素信息贴到片段上面,也可以叫做“贴图”,即将图片直接贴到片段上

那么怎么贴上去呢?图片那么大我只想截取一部分进行贴图该怎么做?我的图片太小/大了,片段太大直接贴上去会是什么效果?图片太小太大贴上去之后如果不是想要的结果该怎么处理?

怎么贴上去

首先屏幕手机的坐标系是-1 1.而纹理图片的坐标系是0 1。因此需要进行转换下对应的纹理坐标才能正确的贴到屏幕上(也就是片段上),简而言之就是纹理图片的坐标系如何映射到屏幕的坐标系

只想截取一部分图片贴

和上面一样,可以指定要贴的坐标

图片太小(相对可以贴上去的片段),贴上去什么效果怎么处理(可以理解为10X10的图片需要放到100X100的瓷砖上面)

直接放答案 :很明显太小的话,贴上去需要放大会有锯齿也就是能看到一个个小方块

为什么

默认情况一个纹理像素对应一个屏幕像素,纹理被放大后一个纹理像素对应多个屏幕像素。

因为贴上去一个纹理像素对应的颜色信息会被多个片段像素共享,因此多个屏幕会共享一个像素信息

处理方法

使用双线压缩处理,该方法一个像素最后取的颜色信息是周边像素的加权值(选取点的颜色信息根据周边四个像素的中心点的距离进行对应颜色的加权)

虽然没有锯齿了,但是会发现变的模糊了。模糊还是因为本质原因:需要的一个颜色信息被多个屏幕像素共享
本质问题:一个颜色信息需要被多个屏幕像素共享,多个屏幕像素显示的颜色相近

图片太大,贴上去什么效果怎么处理

问题:一个屏幕像素需要显示多个颜色信息,一个像素里面颜色显示被分割为多个纹理像素

图片太大也会伸缩,此时就是反过来的:一个屏幕像素对应多个纹理像素

处理方法:使用另外一种压缩方式也是默认的屏幕像素和纹理像素不对等的压缩方式:距离最近的颜色信息,因为一个屏幕像素显示的颜色信息太多了,所以选取最近的点

参考链接:
1.juejin.cn/post/714638…
2.juejin.cn/post/715086…