Egret社区
是我观测有什么问题么,还是确实就是这样

那么webgl多出来的内存,是消耗在哪里了?
分享到 :
0 人收藏

9 个回复

倒序浏览
山猫  官方团队 | 2018-10-12 13:55:47
本帖最后由 山猫 于 2018-10-12 13:57 编辑

你好,你看一下它两的区别就知道了https://blog.csdn.net/u010513603/article/details/80351569
常歌行  官方团队 | 2018-10-12 14:07:07
Canvas 是HTML5提供的一个特性,你可以把它当做一个载体,简单的说就是一张白纸。而Canvas 2D 相当于获取了内置的二维图形接口,也就是二维画笔。Canvas 3D 是获取基于 WebGL的图形接口,相当于三维画笔。你可以选择不同的画笔在上面作画。

WebGL 是以 OpenGL ES 2.0 为基础的一套 浏览器 3D图形API (HTML5),在编程概念上与OpenGL ES 2.0 几乎是完全通用的,同样采用可编程渲染管线,也就是每个顶点的处理受到一小段Vertex Shader代码的控制,每个像素的绘制过程也受到一小段Fragment Shader代码的控制。WebGL主要是3D为主, 不过2D的绘图要求也可以变通来实现。WebGL 无论如何都需要一个显示对象来呈现,这个对象就是 Canvas,仅此而已,WebGL不对Canvas有任何附加的操作API, 那部分属于浏览器js支持的范畴。 可看作能在浏览器上运行的OpenGL,WebGL的HTML节点名称用的也是canvas,但是他的渲染则和canvas不同,他可以支持硬件加速,支持3D,可用于3D游戏的开发,目前很少有3D的HTML5游戏,现在你能看到很多酷炫的图形交互的3D图表,大多用WebGL来渲染的。WebGL 也继承 OpenGL ES 2.0 的兼容性支持能力, 在不同的设备上做有限的支持,需要运行时查询。 

Canvas 适用于位图,高数据量高绘制频率(帧率)的场景,如动画、游戏;
由于canvas绘图不会给每个点生成对象,所以绘制速度快,消耗内存少。(这点主要是相对于SVG,VML技术而言)
WebGL 主要用来做 3D 展示、动画、游戏。
daixingyao2  登堂入室 | 2018-10-12 14:39:53
山猫 发表于 2018-10-12 13:55
你好,你看一下它两的区别就知道了https://blog.csdn.net/u010513603/article/details/80351569 ...

这个文章只是介绍了几种技术,并没有说到使用webgl模式比canvas模式内存会高出一大截的原因
我想了解的是,同样的加载图片资源到游戏中,webgl模式内存占用比canvas高出一大截,这高出来的一大截是消耗在哪里了,这个是不是牵涉到两种渲染模式的原理了
山猫  官方团队 | 2018-10-12 15:01:42
是的两种渲染模式的原理了不同,所有消耗性内存不一样
daixingyao2  登堂入室 | 2018-10-12 15:13:43
常歌行 发表于 2018-10-12 14:07
Canvas 是HTML5提供的一个特性,你可以把它当做一个载体,简单的说就是一张白纸。而Canvas 2D 相当于获取了 ...

谢谢回复
那么我是不是理解为,webgl多出来的内存是在渲染过程中需要消耗的?
常歌行  官方团队 | 2018-10-12 16:26:35
webgl是基于opengl的一套浏览器的成像,而opengl的渲染管线大致分为四个大的步骤,分别是顶点处理,面处理,光栅化,像素处理,而每个步骤都可以分为好多小步骤,这是我个人的一些关于opengl渲染管线理解的笔记,可能会对你有帮助
渲染管线.png
常歌行  官方团队 | 2018-10-12 16:30:55
而 canvas  成像则要简单
daixingyao2  登堂入室 | 2018-10-12 18:28:05
常歌行 发表于 2018-10-12 16:30
而 canvas  成像则要简单

谢谢你的解答,我这块可能还需要再深入研究下,非常感谢

我个人的一点理解是,这个复杂的渲染过程,其实是由显卡完成的
引擎这边只是负责把代码跟纹理提交到显卡,应该不至于会占用大量的内存

我在想,会不会webgl渲染模式下,需要将图片资源多存一份纹理数据作为提交到显卡的数据
又或者纹理数据需要的是长宽是2的n次幂的,导致所需要的内存会大很多呢

这个只是个人的猜想,没有仔细阅读过引擎
windstore  登堂入室 | 5 天前
本帖最后由 windstore 于 2018-10-17 14:04 编辑
daixingyao2 发表于 2018-10-12 18:28
谢谢你的解答,我这块可能还需要再深入研究下,非常感谢

我个人的一点理解是,这个复杂的渲染过程,其实 ...

你看下egret的源码对比下就知道啦,webgl多了一次内存复制,js引擎释放不及时的话,内存是会高一些。至于webgl渲染管线消耗的内存,我觉得并不会实际上回增长多少。
[JavaScript] 纯文本查看 复制代码
if (Capabilities.renderMode == "webgl") {
            let renderTexture: RenderTexture;
            //webgl下非RenderTexture纹理先画到RenderTexture
            if (!(<RenderTexture>texture).$renderBuffer) {
                renderTexture = new egret.RenderTexture();
                renderTexture.drawToTexture(new egret.Bitmap(texture));
            }
            else {
                renderTexture = <RenderTexture>texture;
            }
            //从RenderTexture中读取像素数据,填入canvas
	    let pixels = renderTexture.$renderBuffer.getPixels(rect.x, rect.y, iWidth, iHeight);
            let imageData = new ImageData(iWidth, iHeight);
            for (let i = 0; i < pixels.length; i++) {
                imageData.data[i] = pixels[i];
            }
            sharedContext.putImageData(imageData, 0, 0);

            if (!(<RenderTexture>texture).$renderBuffer) {
                renderTexture.dispose();
            }

            return surface;
        }
        else {
            let bitmapData = texture;
            let offsetX: number = Math.round(bitmapData.$offsetX);
            let offsetY: number = Math.round(bitmapData.$offsetY);
            let bitmapWidth: number = bitmapData.$bitmapWidth;
            let bitmapHeight: number = bitmapData.$bitmapHeight;
            sharedContext.drawImage(bitmapData.$bitmapData.source, bitmapData.$bitmapX + rect.x / $TextureScaleFactor, bitmapData.$bitmapY + rect.y / $TextureScaleFactor,
                bitmapWidth * rect.width / w, bitmapHeight * rect.height / h, offsetX, offsetY, rect.width, rect.height);
            return surface;
        }

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部