WebGL与Canvas的显存与内存使用分析

Posted 2023-05-09

参考技术A

分析一下两者的内存使用。

按2048为基准，进行相关测试，现在移动设备基本都达到这个分辨率。

Canvas模式

如果是纯使用Canvas渲染，不涉及到WebGL,内存占用还是比较好计算的。

假设图片也是512大小，图片占用512 512 4= 1M。

Canvas宽高是2048，占用2048 * 2048 * 4 = 8MB 。

JavaScript堆栈占用看创建对象的情况而定，这里忽略不计。

最终整体的内存占用为9MB+。

WebGL模式

由于WebGL有中间层，本身的处理程序大小就占用4-10MB。

WebGL内存占用很大一部分是有浏览器决定，一般计算方式：

WebGL有抗锯齿（antialiased）设置，一般是2-16的范围，可以指定但最终还是有浏览器根据环境指定。下方以10为例：

渲染区（8MB * 10） + 副本缓存区（8MB * 10） + 图片（1MB）

Canvas(8MB) + （ GPU渲染区8MB）+ GPU缓存区（8MB * 10） + GPU处理堆栈(4-10MB) + JS堆栈 = 100MB以上。

常规情况下WebGL内存使用率是Canvas是10倍。 能力越大，消耗越大。 其实不需要太关注WebGL对内存的使用，在一般的低端模式下，会根据内存调节缓存区大小

具体的数据就不贴了 自己记录一下

显存与纹理内存详解

            根据桌面＞右键属性＞设置＞高级＞适配器，可知当前电脑的显卡名，显卡内存（也叫显存）。显存 为什么重要？ 

                           1， 系统 内存只是暂时存放数据的地方，不能处理数据；要想显示数据，还得把数据传输到显卡内存里！

                          2， 每个3D 显卡实际只有有限的内存（常见的有2、16、32、64、128MB），而这些内存要存储前端和后端缓冲区，Z 缓冲区，还有所有的令人惊奇的纹理。 好吧，让我们看一些数字…
                 比如你想让你的游戏看起来最好，所以你想要让它以32位屏幕， 1280x1024分辨率和32位 Z- 缓冲跑起来。 好，屏幕上每个像素4个字节，外加每个像素4字节的Z-缓冲，因为都是每像素32位。我们有1280x1024 个像素 – 也就是 1，310，720个像素。基于前端缓冲区和Z-缓冲区的字节数，这个数字乘以8，是 10，485，760字节。包括一个后端缓冲区，这样是 1280x1024x12， 也就是 15，728，640 字节， 或 15MB。 在一个 16MB 显存的显卡上，就只给我们剩下1MB 来存储所有的纹理。 现在如果最初的纹理是真32 位或 4字节宽，那么我们每幀能在显卡上存储 1MB/4字节每像素 = 262，144个像素。这大约是4 个 256x256 的纹理页面。这就是显存重要的原因，其实由此也可以由此推算有限的纹理内存到底是多少（也只是大概）。

                      

                确切的说，如何使用显存是显卡的事情，对于VC程序设计来说，我们不必去关心。但是程序里需要使用纹理的话，显卡内存就需要我们关心了。

              什么是纹理内存？我觉得应该是指用于存放纹理的显存。在渲染过程中，显存可能被分配为很多不同的用途，比如作为顶点缓存、索引缓存、纹理缓存、模板缓存..那么纹理内存，应该就是指纹理缓存。 而将显存中的那一部分作为哪个用途，那是显存自动分配的.   

               好消息是 if you‘re loading a lot of different textures, especially if they‘re large， as long as you don‘t have all of your textures onscreen at once: both OpenGL and DirectX are supposed to automatically evict textures from graphics memory as needed. 就是说，当有许多个纹理对象的时候，会自动的把当前需要显示的纹理对象放到显卡内存里，作为纹理内存的。其他的会被驱逐出显卡内存。

          但是，坏消息是if you‘re loading a lot of different textures, especially if they‘re large， you  have all of your textures onscreen at once，some graphics drivers have major bugs that manifest as you start to approach the limit of your graphics memory, causing strange rendering artifacts or even crashes.。很明显，一次性需要显示的纹理所需要的纹理内存又不能从显存里获取到（因为现在显存已经用完了），所以会说显存不足。

           总之，显存是有限的，那么其中的纹理内存也是有限的，特别是供你编写的应用程序使用的纹理内存是有限的，For these reasons, it may be useful to limit the amount of graphics memory your application uses。具体方法有：

               1） 选择显存大一点的显卡；

              2）降低屏幕的分辨率和颜色质量，不使用Z缓冲。——这一条最不现实和可行，因为这样的话，图像质量可能就差得多了。

              3）在使用纹理的程序代码里，可以使用纹理调色板、纹理压缩等技术（也需要显卡同步支持才行）可以大大减少所需的纹理内存（to 1/4 or 1/8 of the original）！

       参考文章：

    1.http://www.panda3d.org/manual/index.php/Texture_Management

    2. http://dev.gameres.com/Program/Abstract/GEanatomy3.htm

 

           PS：     “ In some integrated graphics cards, the "graphics memory" is actually your system memory”。 对于这句话的理解，我认为不能认为集成显卡的显存就可以无限扩展，因为本质上，是集显显卡自己提供一部分，然后占用系统内存一部分，合二为所谓的显存。占用系统内存一部分的这部分显存的大小必须是有限的！

   关于独立显卡与集显的区别参见：http://wenda.tianya.cn/wenda/thread?tid=698452acc00cd93c

 

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow