21 WebGL进一步理解纹理映射
来源:互联网 发布:股票配资子账户软件 编辑:程序博客网 时间:2024/06/11 12:38
为了更好的对纹理相关的内容的理解,我们修改上一节的案例进行更加深入的了解。
接下来,我们将76行的纹理坐标进行了修改:
var verticesSizes = new Float32Array([ //四个顶点的位置和纹理数据 -0.5,0.5,-0.3,1.7, -0.5,-0.5,-0.3,-0.2, 0.5,0.5,1.7,1.7, 0.5,-0.5,1.7,-0.2 ]);我们修改完坐标以后,纹理的图像不足以覆盖整个矩形,但是空白的那些地方,纹理却重复出现了。这是因为纹理参数的gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T的默认值都是gl.REPEAT,就是默认repeat循环。
那么接下来,我们在案例里面将这两个的值修改一下:
在上一节的案例找到152行代码:
//配置纹理参数 gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);在其代码下面配置纹理参数下,将gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T两个属性的默认值修改掉
//配置纹理参数 gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.MIRRORED_REPEAT);//修改x轴为镜像对称式的重复纹理 gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);//修改了y轴使用纹理图像的边缘值然后会得到下面的效果:
阅读全文
0 0
- 21 WebGL进一步理解纹理映射
- WebGL之旅(八)纹理映射
- WebGL 写入纹理
- 进一步理解 javascript对象、数组、映射和哈希表
- 纹理映射
- 纹理映射
- 纹理映射
- 纹理映射
- 纹理映射
- 纹理映射
- 纹理映射
- 纹理映射
- 纹理映射
- 纹理映射
- 纹理映射
- 八、WebGL入门,纹理贴图
- WebGL入门 颜色与纹理
- 20 WebGL使用纹理贴图
- apache solr 5.0 安装部署+JAVA 调用
- 详解设计模式——策略模式
- 50. Pow(x, n)
- 使用BeanUtils复制Bean属性
- Android Studio工程运行后显示乱码
- 21 WebGL进一步理解纹理映射
- eclipse hibernate导出数据库实体类
- appcan开发经验分享,超实用
- 今天开始用swift写服务器(三)
- Android Studio build工程的时候出现 Error:null value in entry: aaptFriendlyManifestOutputFile=null
- js 创建Date对象5种方式
- Qt配置pro文件以及第三方库
- measurechildren的工作原理
- html5<canvas操作像素之添加杂色,动态倒影逐行显示>