zoukankan      html  css  js  c++  java
  • WebGL与Canvas的显存与内存使用分析

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

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

    <canvas id="canvas" height="2048" width="2048"></canvas>

    Canvas模式

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

    假设图片也是512大小,图片占用5125124= 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对内存的使用,在一般的低端模式下,会根据内存调节缓存区大小~

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

  • 相关阅读:
    C语言运算符
    C语言的scanf函数
    C语言的数据、常量和变量
    js 操作样式属性
    点击图片显示或隐藏密码案例
    js 操作元素
    DOM 获取元素
    js 字符串对象
    js 数组
    js 倒计时 案例
  • 原文地址:https://www.cnblogs.com/yangxiao/p/14704485.html
Copyright © 2011-2022 走看看