WebGL、Asm.js和WebAssembly概念简介

转:http://www.techbrood.com/zh/news/webgl/webgl%E3%80%81asm_js%E5%92%8Cwebassembly%E6%A6%82%E5%BF%B5%E7%AE%80%E4%BB%8B.html

iefreer 发表于 2017-02-27 13:00:56

标签: webassemblywebglhtml5asm.js

随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。

这正是要引入WebGL、Asm.js和WebAssembly这些技术的原因。

什么是WebGL

WebGL是为了给Web添加类似桌面(或移动)系统上的OpenGL的特性支持,从而实现强大的3D图形渲染效果。

什么是Asm.js

Asm.js是一个JavaScript的一个严格的子集,可以被用来作为一个底层的、高效的编译器目标语言。asm.js提供了一个类似于C/C++虚拟机的抽象实现,包括大型二进制堆、整型和浮点运算、高阶函数定义、函数指针等语法特性。具体来说,就是通过VM(如Emscripten)把一些本地代码(如C语言)生成的VM字节码(bytecode)翻译成前述严格子集的JS代码得以在Web上运行,并通过浏览器的支持,得到性能优化。

c/c++---->Emscripten(VM)---->asm.js(一种js语言)。

什么是WebAssembly

那么WebAssembly(简称wasm)又是什么鬼?顾名思义,看起来是在Web中引入的低级语言,其目的和Asm.js类似,也是要支持本地代码的运行从而获得媲美原生应用的高性能,我们可以先观摩一个使用WebAssembly技术的在线网页游戏实例,该游戏性能可媲美原生应用。那么既然有了Asm.js,为什么还需要WebAssembly?因为Asm.js只有Mozzila支持,而WebAssembly是Mozzila、Google、Microsoft以及一些其他组织拟联手制定的游戏规则,另外WebAssembly最终将从JS中分离出来,成为一个相对独立的编译器目标语言,这样可以不必为了本地代码的运行,而在JS中引入太多内容,将来Wasm和JS会是分工合作的关系。

WebGL和WebAssembly的区别

第一眼看到WebAssembly的时候,我们或许会自然的想到其对WebGL的影响。因为通过WebAssembly可以直接把原生代码(如c/c++语言)应用在浏览器中运行,那么理论上(理想情况下),我们可以在网页上运行PhotoShop或者魔兽争霸这样的大型软件(只要通过WebAssembly给移植过来)而无需重新编写JS代码。但实际上我们需要厘清这2个概念是两个层面的东西,WebAssembly是网页低级语言,WebGL是浏览器实现的接口标准,允许客户端脚本语言(即ECMAScript,JavaScript,Webassembly)使用原生3D图形库。WebAssembly对应于汇编语言,而WebGL对应于OpenGL或DirectX。所以WebAssembly依赖于WebGL来实现3D渲染。其影响在于,有了WebAssembly,WebGL在后续标准制定中需要多提供一个低级语言接口,工程师在实现网页3D应用的时候除了JS之外多了一种选择(可以使用原生语言和wasm)。

转:WebGL、Asm.js和WebAssembly概念简介的更多相关文章

  1. 【转】asm.js 和 Emscripten 入门教程

      Web 技术突飞猛进,但是有一个领域一直无法突破 ---- 游戏. 游戏的性能要求非常高,一些大型游戏连 PC 跑起来都很吃力,更不要提在浏览器的沙盒模型里跑了!但是,尽管很困难,许多开发者始终没 ...

  2. 转:asm.js 和 Emscripten 入门教程

    转:http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html asm.js 和 Emscripten 入门教程 作者: 阮一峰 日期:  ...

  3. Asm.js: Javascript的编译目标

    正如许多开发者一样,我也为Asm.js的前景而感到兴奋不已.最近的新闻——Asm.js正 在被Firefox支持——引起了我的兴趣.同样感兴趣的还有Mozilla和Epic声明(mirror)他们已经 ...

  4. 物联网3D,物业基础设施3D运维,使用webgl(three.js)与物联网设备结合案例。搭建智慧楼宇,智慧园区,3D园区、3D物业设施,3D楼宇管理系统——第八课

    写在前面的废话: 很久没有更新文章了,这段时间一直忙于项目落地,虽然很忙,但是感觉没有总结,没有提炼的日子,总是让人感觉飘飘忽忽的. 所幸放下一些事,抽出一些时间,把近期的项目做一些整理与记录.也算是 ...

  5. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  6. js引出函数概念的案例

    js引出函数概念的案例   1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...

  7. 转:HTML5标准与性能之四:asm.js

    HTML5标准与性能之四:asm.js Cong Liu (Intel) 于 星期五, 24/05/2013 - 01:13 提交 之前的几篇文章分别介绍了WebWorkers.Typed Array ...

  8. js的基本概念详解

    来自<javascript高级程序设计 第三版:作者Nicholas C. Zakas>的学习笔记(三) 如果你刚学js,想快速了解到js的基本概念,以下将会是一篇不错的引导文章: 语法 ...

  9. Raphael Js矢量库API简介:

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

随机推荐

  1. 全表 or 索引

    这一篇文章证实了以前对MySQL优化程序的工作原理. MySQL就像一个人一样,总是聪明的去选择当前最快的方式去查询,而不是像Oracle数据那样死板地根据规格去查询. 查询的要求在于快.而对于数据库 ...

  2. 关于C#微信公众号开发的前言说明

    本人是昨天开始接触微信公众号开发的,昨天看一天官方文档,基本上晕乎乎的,刚开始接触这个真的有点困难,特别是C#在这方面的资料不多,不如php java方面的资料全. 所以我准备每天写一点关于C#微信开 ...

  3. [吴恩达机器学习笔记]14降维5-7重建压缩表示/主成分数量选取/PCA应用误区

    14.降维 觉得有用的话,欢迎一起讨论相互学习~Follow Me 14.5重建压缩表示 Reconstruction from Compressed Representation 使用PCA,可以把 ...

  4. OpenCV---圆检测

    推文:Opencv2.4.9源码分析——HoughCircles 霍夫圆检测 加载一幅图像并对其模糊化以降噪 对模糊化后的图像执行霍夫圆变换 . 在窗体中显示检测到的圆. def detect_cir ...

  5. python标准数据类型 Bytes

    预备知识: bin(): """ Return the binary representation of an integer. >>> bin(279 ...

  6. 垂直居中vertical-align

    vertical-align对一些特定显示样式(例如单元格显示方式:table-cell)的元素才会起作用. div{display:table-cell; vertical-align:middle ...

  7. Array和String测试与java.String.split

    java.string.split() 存在于java.lang包中,返回值是一个数组. 作用是按指定字符或者正则去切割某个字符串,结果以字符串数组形式返回. 例 String [] toSort = ...

  8. laravel判断是否post传输

    可以用post传输判断form表单是否有值post传过来: if($request->isMethod('post')){ // 要执行的代码 }通过 Request 对象的 isMethod ...

  9. XML-RPC笔记

    1.什么是XML-RPC RPC(Remote Procedure Call)就是相当于提供了一种"远程接口"来供外部系统调用,常用于不同平台.不同架构的系统之间互相调用. XML ...

  10. C++ Boost库 uBLAS 笔记

    构造 Vector #include <boost/numeric/ublas/vector.hpp> #include <boost/numeric/ublas/io.hpp> ...