资讯专栏INFORMATION COLUMN

WebAssembly介绍

appetizerio / 332人阅读

摘要:工作原理分点介绍官方解读它可以从各类现有的其他高级语言写的业务库编译而来,比如下文提到的库,就是一种语言编写的刚体动力学与碰撞检测计算的库。

1、WebAssembly工作原理 分点介绍
官方解读

它可以从各类现有的其他高级语言写的业务库编译而来,比如下文提到的bullet库,就是一种C++语言编写的刚体动力学与
碰撞检测计算的库。根据调研,还有Haskell、Go、C#的语言的一些WebAssembly编译工具或者已经编译成的WebAssembly代码库,
OK,既然是经过编译而得来,可以将WebAssembly理解为是该库的低级语言代码版本,是一种类汇编语言。

另类理解

可以把它理解成一个ES6语法写的js模块,既可以有导入又有导出,也可以没有导入只有导出。

两类文件

WebAssembly文件格式与源码阅读->.wasm文件和.wast文件

WebAssembly代码存储在.wasm文件内,这类文件是要浏览器直接执行的。
因为.wasm文件内是二进制文件,难以阅读,为了方便开发者查看,官方给出了对.wasm文件的阅读方法,
通过把.wasm文件通过工具转为.wast的文本格式,开发者可以在一定程度上理解这个.wast文件。
.wast文件是通过S-表达式(一种类似lisp语言的代码书写风格)来写成的,
至于怎么读懂S-表达式,请去看官方介绍。
.wast文件和.wasm文件的关系,他们之间的相互转化,可以通过工具wabt(https://github.com/WebAssembl...)
实现。

工作流程

某高级语言写的某功能库-->emscripten编译-->.wasm文件-->结合WebAssembly JS API-->浏览器中运行
完成一部分 用js写,而后依靠浏览器解释执行,会比较消耗性能 的工作,比如视频解码,OpenGL,OpenCV等。
简单来说,加载运行wasm代码的过程如下图所示。



得到wasm文件后,就可以使用js加载该模块,实例化该模块,运行该模块中的函数。

如上,通过js调用这两个c语言方法,浏览器运行,控制台打印出正确结果。

5、基于WebAssembly模块库ammo.js的Demo Demo介绍

基于three.js构建了三维场景,场景中有一个图片纹理拼成的ground地面,和两个THREE.Mesh()方法创建的
球体,这两个球体在地面上一左一右有固定的位置。

然后使用ammo构建了一个刚体动力学环境,这是一个有重力、考虑物体惯性等的物理环境,在这个环境中创建了
一个球体(界面中不可见),给该球体设置了一些刚体动力学的参数,如平移、旋转等,设置完这些参数再使用相反的
API获取这些参数,然后把这些参数赋给three.js创建的第二个球体(图1中右边那个),一秒后重新渲染threejs场景,该球体
则获得了一个平移的参数,移动到相应的(本例中是更靠右)的位置。

图1 使用ammo库前

图2 调用ammo相关代码后

Demo源代码地址

https://github.com/cunzaizhuy...

如需测试使用,请注意替换掉以下两行


本Demo参考链接

(1)Bullet类库API http://bulletphysics.org/Bull...

(2)Ammo库地址 https://github.com/kripken/am...

6、WebAssembly资源推荐

(1)英文官网 http://webassembly.org/

(2)中文官网 http://webassembly.org.cn/

(3)MDN网址 https://developer.mozilla.org...

(4)资料齐全 https://github.com/mbasso/awe...

(5)一篇讲解详细的博客 https://segmentfault.com/a/11...

(6)一篇讲解详细的博客 https://segmentfault.com/a/11...

(7)有编译工具链简单介绍 http://geek.csdn.net/news/det...

(0)本篇博客中的一些资源 https://github.com/cunzaizhuy...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91843.html

相关文章

  • 前端每周清单半年盘点之 WebAssembly

    摘要:前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。利用降低三倍加载速度自推出之后,很多开发者都开始尝试在小型项目中实践,不过尚缺大型真实案例比较。 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目...

    Alan 评论0 收藏0
  • WebAssembly 系列(一)生动形象地介绍 WebAssembly

    摘要:但是为什么执行的更快呢在这个系列文章中,我会为你解释这一点。所以当人们说更快的时候,一般来讲是与相比而言的。被人们广为传播的性能大战在年打响。性能的提升使得的应用范围得到很大的扩展。现在通过,我们很有可能正处于第二个拐点。 作者:Lin Clark 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58ce8036...

    wangbjun 评论0 收藏0
  • WebAssembly 系列(四)WebAssembly 工作原理

    摘要:但是它们其实并不是二选一的关系并不是只能用或者。正因为如此,指令有时也被称为虚拟指令。这是因为是采用基于栈的虚拟机的机制。声明模块的全局变量。。下文预告现在你已经了解了模块的工作原理,下面将会介绍为什么运行的更快。 作者:Lin Clark 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58c77641a6d8...

    stormzhang 评论0 收藏0
  • WebAssembly 为什么比 asm.js 快?

    摘要:并且于年月日,四个主要的浏览器一致同意宣布的版本已经完成,即将推出一个浏览器可以搭载的稳定版本。因此本文着重介绍为什么比更快。本文主要表达的是为什么应该是更快的。则不同,它是由几大主要的浏览器厂商共同设计的。 作者:Alon Zakai 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58ce80d2a6d8a0...

    Binguner 评论0 收藏0
  • WebAssembly 系列(五)为什么 WebAssembly 更快?

    摘要:图表中的比例并不代表真实情况下的确切比例情况。解析当到达浏览器时,源代码就被解析成了抽象语法树。解析过后抽象语法树就变成了中间代码叫做字节码,提供给引擎编译。目前为止,不支持垃圾回收。这就是为什么在大多数情况下,同一个任务比表现更好的原因。 作者:Lin Clark 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId...

    刘德刚 评论0 收藏0

发表评论

0条评论

appetizerio

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<