WebGL2系列之不可变纹理

简介: WebGL2系列之不可变纹理

纹理背景知识


在WebGL1中,纹理包括2D纹理和立方体纹理,在实际的使用中,如果纹理的图片是宽和高是2的幂,可以自动生成纹理的mipmap。


除此之外,还可以通过gl.texImage2D函数独立指定纹理的每个mipmap的级别。


因此,这会导致一个一般的编程人员不易觉察的问题,这涉及到显卡底层驱动。


简单来说,就是会导致驱动程序无法在绘图之前确定纹理是否完全指定,因此它必须检查每一个mip贴图级别或者子图像的格式是否相符、每一个级别的大小是否正确以及是否有足够的内存。这种绘图时检查可能代价很高,而使用不可变纹理可以避免这种情形。


不可变纹理


使用不可变纹理,可以减少上文中提到的因检查而导致的性能开销。 不可变纹理指的是纹理的一种分配方式,而不是值纹理的内容。


不可变纹理的思路是:在给纹理加载纹理数据之前,先指定纹理的格式和大小,显卡驱动程序可以提前进行一致性、内存的检查,一旦指定了纹理的格式和大小之后,纹理的格式和尺寸就不能更改,但是可以通过gl.texSubImage2D、texSubImage3D(注意不能用gl.txtImage2D)等方法来加载纹理的数据,同时还可以使用such as render-to-texture, mipmap generation等方式加载纹理数据。


texSubImage3D(以及后面提到的texStorage3D)方法与3D纹理有关,后续相关文章会介绍。


创建不可变纹理


创建不可变纹理很简单,首先通过gl.bindTexture方法绑定纹理对象,然后通过调用gl. texStorage2D、texStorage3D指定纹理的大小和格式,来创建不可变的存储空间。代码如下:


// -- Allocate storage for the texture
 gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGB8, 512, 512);
 gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGB, gl.UNSIGNED_BYTE, image);
 gl.generateMipmap(gl.TEXTURE_2D);


不可变纹理可以优化性能


在很多情况下,我们的纹理的尺寸和数据格式都是不需要改变的。使用不可变纹理,可以避免驱动程序对这些不需要改变的尺寸和数据格式的纹理对象进行一致性和内存大小的检查,因此可以获得更佳的性能。


案例:使用不可变纹理


暂无

后记


本节只讲述了2D的不可变纹理,3D的不可变纹理类似,在将3D纹理的时候会进一步讲述。

相关文章
|
存储 前端开发 JavaScript
three.js 纹理
纹理是添加到材料中的图像或颜色,以提供更多细节或美感。纹理是Three.js中必不可少的主题。在本节中,我们将了解如何将基本纹理应用于我们的材质。
105 0
|
存储 编解码 缓存
webgl系列之抗锯齿和深度缓存
前言 大家好我是Fly 哥, 这是今年webgl 系列的第三篇文章, 如果你之前的两篇文章没看的话,建议先看一下,然后再来看这一篇文章 Webgl 系列之buffer的使用 webgl系列之对光栅化的理解 上一篇文章,任何虚拟3维世界的转换到二维屏幕中通过「采样」 也就判断屏幕上的每个像素中心点是不是在三角形内部的得到了 下面这幅图: 图片 走样之前 这时候有同学问, 这不像三角形哇, 这个其实用个专业的词—— 「锯齿」 , 我的理解 一个三角形经过光栅化后, 得到屏幕上每一个像素点 组成的像素点的集合。那到底是经过什么样的处理得到下面这张图: 图片 final 反走样 其实出现上面
webgl系列之抗锯齿和深度缓存
|
3月前
|
缓存 图形学
Unity3D学习笔记12——渲染纹理
Unity3D学习笔记12——渲染纹理
39 2
|
存储 异构计算
threejs实战_3d纹理
threejs加载3d纹理
207 0
threejs实战_3d纹理
|
前端开发 JavaScript
threejs实战_canvans纹理
threejs加载canvas纹理
159 0
threejs实战_canvans纹理
|
算法 定位技术
WebGL开发:加载图片配准
WebGL开发:加载图片配准
177 0
|
编解码 数据可视化 图形学
webgl系列之对光栅化的理解
前言 周末没事的学习了光栅化进一步理解, 从底层去学习,遇到问题才会从容不迫, 并同时把这些知识分享给大家, 如果大家没时间看视频的话,废话不多说, 直接开始吧, 这里先做一个概念的铺垫在3D即将渲染到我们屏幕当中来的时候。而接下来我们要做的是把这个标准立方体绘制到屏幕上,这样才能最终被我们所看见。 不清楚的同学看下这篇文章吧 可视化入门跳转到坐标系转换那里 我们简单看下这张图: 图片 变换过程 而光栅化的过程发生在哪里 ,其实 就是物体通过MVP变换,把摄像机观测的空间压缩成了一个标准立方体。然后将标准的立方体【-,1,】绘制到屏幕上的这些过程 图片 转换 在做这步操作之前,我们首
webgl系列之对光栅化的理解
|
开发工具 索引
WebGL 单通道wireframe渲染
WebGL 单通道wireframe渲染
|
前端开发 数据可视化
threejs 贴图动画总结
threejs 贴图动画总结
threejs 贴图动画总结