专注 AR+VR+Unity+Unreal+CV+AI方向
WebGL是HTML5 canvas元素的扩展，现已广泛用于开发需要3D可视化的Web应用程序。它是一种3D图形API，基于OpenGL ES 2.0。为了简化开发，市面上有一些流行的基于WebGL的框架：
Three.js：Three.js是一个基于JavaScript的库，它以低复杂度在Web浏览器上创建3D内容，是轻量级的，可以在HTML5 canvas，SVG和WebGL的帮助下执行渲染。
Scene.js：派铅举Scene.js是基于WebGL的库，它使用JavaScript在Web浏览器上进行3D可视化。它与Three.js不同，因为它旨在快速呈现大量可单独拾取的对象。此功能使该库可用于工程和数据可视化应用程序。
谁开发了WebGL？一位名叫Vladimir Vukicevic的美裔塞尔维亚软件工程师完成了基础工作，并领导了WebGL的创建。在2007年，Vladimir开始为HTML文档的Canvas元素开发OpenGL原型。2011年3月，Kronos Group创建了WebGL。
主流浏览器（例如Google Chrome，Mozilla Firefox，Safari和Opera）都支持它，有些浏览器（例如Internet Explorer 11）并不完全支持WebGL。此外，WebGL是一种低级API，因为它被设计为直接与图形卡进行交互。因此，具有低图形卡内存尘碧的设备可能会带来严重的性能问题。
1、WebGL与OpenGL之间的主要区别
WebGL基于OpenGL ES，它缺少常规OpenGL具有的许多功能，例如仅支持顶点和片段着色器。OpenGL具有WebGL所不具备的功能，例如几何体着色器，曲面细分着色器和计算着色器。
WebGL主要用于浏览器。OpenGL确实需要本机驱动程序，并且主要用于安装软件。
WebGL用于Web应用程序，而OpenGL用于许多视频游戏。
WebGL更易于学习和开发应用程序。如果你熟悉WebGL，则可以轻松学习OpenGL。
在WebGL中，它可以使用2D纹理来伪造3D纹理。在OpenGL中，不需要这样做，因为它具有很多功能，例如几何体和着色器。
在WebGL中，从一开始就被迫学习使用着色器和缓冲区。在OpenGL中，并非如此。
WebGL具有较少的功能，因此学习曲线较少。OpenGL具有更大的学习曲线，因为它具有包括WebGL在内的许多功能。
WebGL基于OpenGL ES 2，而不是纯OpenGL。OpenGL ES是OpenGL的子集。OpenGL ES具有较少的功能，并且对用户来说非常简单。OpenGL具有很多功能并且难以使用。
2、桌面浏览器支持情况
Google Chrome浏览器 ：自2011年2月发布第9版以来，所有具有图形卡且驱动程序已更新的平台均已启用WebGL 1.0。在Windows上，默认情况下，Chrome使用ANGLE（几乎本机图形层引擎）渲染器来翻译OpenGL ES Direct X 9.0c或11.0，具有更好的驱动程序激宏支持。在Linux和Mac OS X上，默认渲染器为OpenGL，但是也可以将OpenGL强制为Windows上的渲染器。自2013年9月以来，Chrome还拥有更新的Direct3D 11渲染器，但需要更新的图形卡。
Mozilla Firefox浏览器 ：从4.0版开始，所有具有图形卡且驱动程序已更新的平台均已启用WebGL 1.0。自2013年以来，Firefox还通过ANGLE在Windows平台上使用DirectX。
Safari：在OS X Mountain Lion，Mac OS X Lion和Mac OS X Snow Leopard上的Safari 5.1上安装的Safari 6.0和更高版本实现了对WebGL 1.0的支持，在Safari 8.0之前默认情况下已禁用。Safari 12版（在macOS Mojave中可用）具有对WebGL 2.0的支持，目前作为“实验”功能。
Opera ：WebGL 1.0已在Opera 11和Opera 12中实现，但在2014年默认情况下已禁用。Opera43+支持WebGL 2.0。
Internet Explorer — Internet Explorer部分支持WebGL 1.0。最初，它没有通过大多数正式的WebGL一致性测试，但后来Microsoft发布了一些更新。最新的0.94 WebGL引擎目前已通过Khronos测试的约97％。也可以使用第三方插件（例如IE WebGL）将WebGL支持手动添加到Internet Explorer的早期版本中。
Microsoft Edge：最初的稳定版本支持WebGL 0.95版（上下文名称：“ experimental-WebGL”），以及从GLSL到HLSL转译器的开源GLSL。版本10240+支持WebGL 1.0作为前缀。在将来的版本中，WebGL 2.0被计划为中等优先级。
3、手机浏览器支持情况
BlackBerry 10:从OS 10.00版开始，WebGL 1.0可用于BlackBerry设备。
BlackBerry PlayBook:WebGL 1.0可通过WebWorks和PlayBook OS 2.00中的浏览器获得
Android浏览器 :基本上不受支持，但是在固件升级后，索尼爱立信Xperia系列的Android智能手机具有WebGL功能。三星智能手机还启用了WebGL（已在Galaxy SII（4.1.2）和Galaxy Note 8.0（4.2）上进行了验证）。Google Chrome支持此功能，该功能已取代了许多手机中的Android浏览器（但不是新的标准Android浏览器）。
Internet Explorer : Windows Phone 8.x（11+）上提供了WebGL 1.0
移动版Firefox:从Firefox 4开始，WebGL 1.0就可用于Android和MeeGo设备。
Google Chrome浏览器:WebGL 1.0自Google Chrome 25起可用于Android设备，自30版本起默认启用。
Maemo :在诺基亚N900中，从PR1.2固件更新开始，可在库存的microB浏览器中使用WebGL 1.0。
MeeGo:“ Web”不支持WebGL 1.0。但是，可以通过Firefox使用它。
Microsoft Edge:Windows 10 Mobile上提供了Prefixed WebGL 1.0。
Opera Mobile :Opera Mobile 12支持WebGL 1.0（仅适用于Android）。
Sailfish *** 作系统:默认的Sailfish浏览器支持WebGL 1.0。
Tizen:支持WebGL 1.0。
iOS:WebGL 1.0在iOS 8中可用于移动Safari。
参考链接：
https://arvrjourney.com/webgl-the-new-standard-for-3d-graphics-on-the-web-2d8e206e7ef0
webGL和郑拿openGL的区别为：性质不同、插件支持不同、用途不同。WebGL 2.0基于OpenGL ES 3.0，确保了提供许多选择性的WebGL 1.0扩展，并引入新的API。
一、性质不同
1、webGL：webGL的为。是一种用于展示各种3D模型和场景的绘图协议，并提供了3D图形的API。
2、openGL：openGL是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。
二、插件支持不同
1、webGL：webGL利用底层的图形硬件加速功能进行的图形渲染作，无需任何浏览器插件支持。
2、openGL：openGL通过HTML脚本本身实现Web交互式三维弯丛缺动画的制作，需要浏览器插件支持。
三、用途不同
1、埋辩webGL：webGL可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
2、openGL：openGL用于CAD、虚拟现实、科学可视化程序和电子游戏开发。
分析一下两者的内存使用。
按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对内存的使用，在一般友举的低端模式下，会根据内存调节缓存区大小
具体的数据就不贴了 自己记录一下
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）