专注于高性能H5内核研发,用C/C++挖掘设备硬件的潜能,让JS提升开发效率,打造一种所见即所得的开发方式。
前端技术越来越精彩了,新版WebVRSDK可以支持WebGL2.0,谷歌最近也发布了JS版本的机器学习框架:搜索:教程 | 如何用30行JavaScript代码编写神经网络异或运算器
#紧接上文 消费升级的必然是体验升级,AR/VR技术是提升用户体验的方式之一。智能手机让用户可以AnyTime、AnyWhere的体验移动生活服务,再结合扁平化UI设计,在小小的手机屏幕上,实现了可以媲美PC的体验,用户已经从开始的惊艳,慢慢变成了适应,认为智能手机就应该是这样子,即我们所说的《审
#紧接上文 WebGL及其WebVR技术的发展,让开发者无需编译打包,即可快速开发AR/VR业务。比如,开发一个VR播放器。 那么问题来了,各大公司在追求的AR/VR技术,本质的驱动力是什么呢?2016中国文化产业峰会,[《李彦宏谈文化消费新机遇》](https://view.inews.qq.
#紧接上文 AR技术,全称增强现实技术,对已有的现实世界,增加一些虚拟元素,提升用户体验。传统的内容展示无非于:图片、文字、视频等组合,随着经济、技术的发展,越来越多的用户已经不满足于现状,目前需要的是消费升级、体验升级,那么AR、VR技术运用而生。 #本次Demo所需二维码 本次demo已经集成到APK中,用户可以点击《全景》来体验。 ![1481388940.png](http:/
#紧接上文 使用WebAR技术,开发者只需40行代码,即可搭建一个ARDemo。同时我们也抛出了一个问题,如果把地球模型,换成一个可以动的小猫小狗,是不是就更加接近虚拟现实了? #本次Demo所需二维码 本次demo已经集成到APK中,用户可以点击《天马星空》来体验。 ![1480694061.png](http://ata2-img.cn-hangzhou.img-pub.aliyu
#紧接上文 WebVR+Three.js可以快速高效的搭建VR场景,降低了初学者的准入门槛,节省多平台重复开发,开始了H5在VR的新时代。 #本次Demo所需二维码 用户可以本地启动HTTP服务,将URL填写到播放路径 本次demo已经集成到APK中,用户可以点击《AR地球》来体验 ![1480510893.png](http://ata2-img.cn-hangzhou.img-p
#紧接上文 WebVR扩展了WebGL的标准,增加了HMD、PS等组件,让开发者可以在H5上开发VR程序。高级VR设备往往拥有了比手机更高精度的传感器、显示器、GPU等,让用户可以更加真实的感受虚拟世界。本节是《Html5的局》最后一节,我们手把手的写一段VR代码,感受WebVR的便捷。 #本次Demo所需二维码 用户可以本地启动HTTP服务,将URL填写到播放路径 ![1478017
#紧接上文 WebVR使用跨平台H5技术,降低了开发者的技术门槛,提升了开发效率,我们来做个VR的Demo如何?本周小米发布了VR头盔,头盔还自带芯片,那又是什么呢? #本次Demo二维码 依旧800k,这次可以支持URL在线播放WebVR的程序了。 ![1477811232](http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/b6c
# 紧接上文 在阅读WebKit源码中,讨论了Canvas在iOS平台使用的CoreGraphics框架作为渲染的工具,它运行在CPU上。WebGL是直接运行在GPU上的API,因此优化空间更大,对程序员要求更高。这次我们看看,WebGL如何对格式转换的,为我们后续three.js导入数据模型做铺设。 #常见的纹理格式 ## OpenGL ES2.0在多终端的差异 在WebKit中,默
#紧接上文 WebGL是一套跨平台的渲染技术,向上提供统一的标准API,向下屏蔽了硬件厂商的差异,最大化的降低OpenGL的移植成本,同时也失去了一些特色的高级GL功能。 先看看常用的纹理数据的变化。 #WebGL的标准的落地与否 ## 标准不代表WebKit支持 就像JavaScript的E6标准不是所有浏览器都支持一样,WebGL的很多标准在不同的平台不一定支持,比如Textur
#紧接上文 WebGL作为通用的标准,屏蔽了一些硬件厂商的高级特性,有舍就会有取,那么在一些比较常用的功能上,如果硬件无法满足通用,那么就会通过CPU来弥补硬件的不足。 图片的纹理格式,就是其中的一个点。 #常见的纹理格式 我们引用12章:[WebGL跨平台的取与舍](http://www.atatech.org/articles/45792)的图片: ![screenshot](h
#紧接上文 WebKit为了统一WebGL的书写规范,对OpenGL的标准进行四书五入,推出了平台无关的API标准,同时为了简化底层硬件的差异,又新增了一些纹理格式的支持,由内核提供高性能的图像转换,扩展了OpenGL得标准。 那么,WebGL在底层做了些什么呢?复杂吗?可以自己实现吗? #纹理格式转换计算量大 这是WebGL为前端同学提供的福利,上层开发可以更加专注业务书写,充分挖掘
#紧接上文 WebGL+WebVR可以轻松打造出一款VR游戏,而且整个游戏代码竟然可以精简到100k以内,加上JS及时编译和调试的特性,打造一款简单的3D场景,要比U3D这种Native方式廉价、高效很多。 U3D作为传统的Native引擎,包体动辄几十M,使用C/C++、C#等编译语言,效率明显不如JS+Chrome,不过好处十分明显,运行性能良好。 #本次Demo二维码: 依旧80
(一)WebApp时代,追求App开发效率的同时,我们也要求终端的体验和性能,2/8原则可以很好的阐述当前的hybird开发方式:20%的Native代码+80%的H5代码。 ![5a96ccb3abc157b98a67b7bcfa8c2e9d](http://img2.tbcdn.cn/L1/461/1/f0fe01c8c83bbc680afd4e785eb21e53d3367bc5) (二
紧接上文,cocos2d-JS为我们提供了图形引擎、物理引擎、JS引擎等基础库,在多终端时代提供了非常nice的游戏引擎,在浏览器普及在各个终端的今天,为什么还要单独搞一套JS引擎呢? 1. 我们先看看使用SpiderMonkey的技术产品有哪些? ![screenshot](http://img1.tbcdn.cn/L1/461/1/aec02fdece92d563ae07a7dc0c0
紧接上文,JS在单线程下,性能不会比Java差,注意场景是单线程。Java的优势不仅是高级语言的特性,还具备了丰富的系统内核资源,如多线程、网络等支持,要比JS灵活的多很多,这里暂时不在讨论这些问题。 回到主题,如果我们把一个完整的C++图形引擎注入到SpiderMonkey中,把复杂的预算放到C/C++内核中,而JS只作为业务处理和内存管理,是否可以获得C/C++的运行能力,有获得了良好的
紧接上回,Cocos2d-JS通过JSBinding从C++API到JSAPI,完成了H5的跨平台加速,这一回,我们一起来见证一下JSPatch的跨平台实现,为JS语言增加消息转发机制,无需修改js脚本,让下面这段代码可以正确地运行起来: var controller = UIViewController.alloc().init(); 而不是让app翻译成: U
####1. 移动互联网的兴起,我认为2009年是个分水岭。 开始的时候,我也是做Java开发,习惯了Webx架构,可以熟练的使用Spring、iBatis、veloctiy、HSF、Notify、Tair、Session这些阿里具有代表性的Java框架,也会使用IC、UIC、SC、DC等等服务集群做电商核心业务。 概括起来,基本也是三层服务端架构: ![screenshot](http:/
紧接上文,我们提到移动互联网时代,前端的成本重复而臃肿,后端开发基本稳定,作为商业公司:利润和成本使我们不断追求的目标。这里我们从跨平台的角度,来看待如何降低成本。 ####1. 首先我们看一段视频: 3个平台:浏览器、Android、iOS,一套JS代码,运行在不同设备上【注意,终端展示没有用WebView相关容器】 ![screenshot](http://img4.tbcd
紧接上文,终端开发使用的WindVane、wax、ReactNative等已经是一种跨平台的技术,我们称之为上层跨平台,Cocos2d-x这种直接使用C/C++,我们成为底层跨平台。上层跨平台,提升开发效率;下层跨平台,提升程序性能。 ####1. 为什么Cocos2d-x性能比Native开发要好? 因为Cocos2d-X是游戏引擎呗,人家是专业做游戏特效的好不好,直接调用GPU的Ope
紧接上文,在终端设备中,不管是游戏引擎还是UIKit,图形图像都是基于跨平台的OpenGL ES技术,区分不同的场景,图形图像分为两个分支,一个以高性能的图形显示为目标的cocos2d-x引擎,一个是以省电节能适合App的UIKit框架。 ####一)今天我们继续逆向思维 Game VS App,既然都是基于OpenGL ES,那我们找出共同点,是否可以让二者的界限,变得更模糊?既
紧接上文,在终端硬件资源有限的大背景下,业务脚本+图形内核,将是未来主流的开发方式。AEPixi使用C/C++、JS、JNI、OC等混合语言开发,将pixi.js变成高性能的Native内核,提供上层pixi.js标准的API,无缝的兼容浏览器开发好的代码,实现浏览器开发,无需编译,到处运行的开发方式。 今天我们做一个H5的Demo,使用FireFox开发,开发完成之后,直接使用上一
### (一)Html5新功能 最重要的功能之一当属WebGL了,和3D图形规范OpenGL、通用计算规范OpenCL一样,来自Khronos Group,2011年对外公布,到现在已经开始有WebGL2.0规范的雏形了。 这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,为Html5的Canvas提供硬件3D加速渲染,如下图所示: ![screenshot]
# 紧接上文 WebGL为不同的平台/硬件提供了统一的封装,屏蔽了OpenGL ES2.0在各平台差异。后续我们会继续谈谈OpenGL ES2.0在Android/iOS平台的更多差异。 这回我们分析WebKit的源码,谈谈WebGL与Cavans不同,WebGL又多做了哪些呢,性能提升在哪里呢。 # 在H5中渲染机制 我们可以使用多种方式来绘制图形【本文以iOS版本的WebKit为例