2016-01-22 起源天泽-谭凯 HTML5梦工场

这篇文章的主要目的是科普一下关于HTML5的渲染技术WebGL的知识,也解答一下她目前所遇到的问题,为了简单方便我会把所有的问题单独列举出来,有兴趣的可以直接跳着看，最后打一下广告,起源天泽,精于源,修于行,泽于众!

一. WebGL是什么?

WebGL是一种 GPU 绘图标准，是OpenGL ES的子集,能够在页面上也提供强大的 GPU 渲染能力, 而现在移动设备上的原生游戏95%都是OpenGL ES渲染,也就是说,WebGL提供了在页面和原生一样的渲染接口，通过WebGL可以实现高效的2D及3D画面渲染,可以实现大量的粒子效果，光影光效等等，并且可以编程 GPU 指令实现更加高效快速的图形技术！

二.Canvas和WebGL

Canvas有两个意思,第一个意思是指画布的意思,HTML5提供了画布功能也就是Canvas,而在这块画布上有两种渲染技术,一个是Canvas一个是WebGL,虽然有点绕口,但这是两个意思,一般来说,我们在HTML5中说Canvas是指第二意思,也就是和WebGL相等的渲染技术,所以我们下面所说的Canvas都是一种绘图标准,那么,Canvas绘图标准从严格的意义上来并不是游戏渲染技术而是网页图像渲染技术，内核算法主要由 CPU 计算，为了防止和 GPU 混淆我特意用颜色标注， CPU 是最早的计算芯片,全称叫中央处理器，我们的电子设备一些操作都会经过 CPU 计算,比如打开一个浏览器，看个电影，听首歌曲等等,所以 CPU 的业务非常的繁杂所以计算效率低下,加上Canvas不是针对游戏渲染API总共也才30多种,可扩展性很低，属于黑盒渲染技术,可优化的空间不大,所以导致用Canvas制作的游戏都非常的简单,而WebGL正是为了解决Canvas的渲染效率问题而生, 她是直接和 GPU 进行沟通，GPU 全称是图形处理器，任务单一，主要处理图形图像的渲染计算,计算速度极快,并且几百个API主要是针对游戏渲染,所以这两者之间的效率最大差距在100倍左右！

三.关于内存问题

内存决定了你的游戏占用了多少系统资源，而系统资源占用过大一般会导致的问题就是游戏闪退及异常的卡顿，所以，不管你的游戏做得多么酷炫只要是内存占用过大都会闪退，不管是HTML5还是APP，而一般来说，我们的HTML5属于嵌入式开发，渠道入口APP首先会占用一部分的系统内存，而剩下的才是给HTML5游戏的，所以如果某个渠道内存管理做得很垃圾，那很抱歉，可能一些好的游戏就跑不起来，所以对于HTML5渠道来说，技术优化也是一个竞争手段，可能有人会想是不是装一个运行时就可以解决，依然很抱歉，内存和渲染没有关系，而运行时和WebGL解决的都是渲染问题而不是内存问题，内存不是问题，只是需要渠道和研发商共同的努力，还有一点需要强调的是，如果你使用的Canvas技术，那么只要你的内存超过了100兆以上那么游戏就会非常的卡顿，即使你的场景没有画任何东西，所以为什么有的人会有疑问，游戏渲染数量没有多少，但是却非常的卡，就是这个问题，因为Canvas本身的内存机制只是渲染网页图片而已不具备良好的内存管理机制，那么100兆内存是一个什么概念呢，告诉大家一个内存算法，图片的宽度乘以图片的高度乘以4，那么一张2048*2048的未压缩图片占用内存就是16兆，10张就是160兆，只要游戏上了高清版，素材一多超过100兆是分分钟的事情，举个例子，现在我们手机上玩的APP游戏，全民飞机大战200兆以上，梦幻西游300兆以上，大型3D游戏400兆以上，大型电脑游戏1G以上，所以，100兆来说，是非常非常的少，所以如何利用好内存又不卡顿也不闪退是一门学问。

四.关于即点即玩的说法

业内流传的HTML5游戏说法，即点即玩是不正确的，正确的说法是即点即加载，因为从外部下载数据到你手机上，不管是HTML5还是原生应用，都是需要下载的，和技术没有关系，而HTML5只是简化了这一步可以直接通过一个链接地址下载一些游戏内容，我相信这一定是未来，当网速带宽不是问题的时候，所以当下做HTML5游戏加载素材也是一门学问，不能加载太长不然用户就流失了，下载的素材体积大小和是不是HTML5游戏没有直接关系，如果你想做一个HTML5版的梦幻西游，那么也一定需要几百兆的素材资源，HTML5只是提供了一种在页面中渲染的可能。！

五.关于HTML5游戏的粗制滥造

因为目前市面上的HTML5游戏95%都是Canvas技术开发的，而Canvas技术存在一个内存瓶颈和渲染瓶颈，再加上不能加载太大的资源，所以常用的优化手段就是，降低画布自身的分辨率来提高效率，缩小和压缩图像来减少资源体积和内存占用，那么，首先降低分辨率画面分已经减少一半了，再加上素材资源的压缩，那再减少一半，清晰度也就只剩下了原版游戏的四分之一左右，所以导致了市面上大部分的游戏都看起来很LOW,这是一个死循环，因为质量低下所以用户不买单，用户不买单研发不会投入更大的成本做好游戏，没有人做好游戏渠道也没法生存，渠道没法生存，做了好游戏也赚不钱，赚不钱就不会做好游戏，无限循环。

六.为什么WebGL关注度不高

首先一点，WebGL的普及率要比Canvas低，目前她还没有达到100%的适配，下面有内容我会重点讲解关于WebGL普及率问题，第二点就是WebGL的学习门槛非常高，如果不借助引擎那么几乎无法开发出完整的游戏，而目前市面上的HTML5游戏支持WebGL也不是特良好，目前国内研究WebGL技术的公司不超过20家，不借助第三方引擎自主研发的公司不超过5家，第三点，就算引擎研究到位招聘WebGL相关的开发技术员也少之又少，成本也相对来说比Canvas高出2~3倍，所以，因为研究得人并不多，所以关注度不高，其实很多人其实并不了解真实的WebGL，大部分了解都是因为一些DEMO案例，如果发现跑不了就会认定为WebGL问题而不是引擎兼容问题。

七.关于WebGL跨平台的普及率

那么，其实WebGL的普及率要比你想象中的要高很多,可以说只要是支持Opengl ES的手机设备都可以支持WebGL，现在我们主要探讨两大手机系统，一个是苹果一个是安卓,苹果不用强调了，因为她几乎是全支持，只要系统是8.0及以上，而苹果的系统升级非常的规范且迭代速度非常快现在系统已经是9.0以上，下面重点来讨论一下安卓的支持度，以下有4个视频，分别从低端到高端。

视频地址: ==.html

产品名称:小米NOTE

发布时间:2015年1月16号

参考价位:1600上下