WebGL、Asm.js和WebAssembly概念简介

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

标签: webassembly, webgl, html5, asm.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上运行,并通过浏览器的支持,得到性能优化。

什么是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)。

possitive(3) negative(0) views7038 comments1
私信 收藏 分享
分享到

发送私信

最新评论

iefreer 2017-02-27 13:03:37

Read more on: https://brendaneich.com/2015/06/from-asm-js-to-webassembly/


请先 登录 再评论.
相关文章
  • 哟嚯音乐网

    哟嚯音乐网
    https://www.wvwvwvvv.com/

  • 3D场景中多相机拍摄的原理和意义

    一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
    3D相机渲染的基本原理是依靠颜色...

  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • 函数式JavaScript编程基础概念:Curry和Partial Application

    本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...

  • 常见面试题JavaScript闭包(ES5语法)

    JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()

  • 前端开发框架技术选型:Angular2 VS React VS jQuery

    Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...

  • 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了

  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...

  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...

  • 如何实现SVG clipPath自适应被裁剪对象

    CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
    clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...

  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

    3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...

  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...

  • 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...

  • 更多...