WebGL、Asm.js和WebAssembly概念简介

techbrood 发表于 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(18) views21923 comments1

发送私信

最新评论

iefreer 2017-02-27 13:03:37

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


请先 登录 再评论.
相关文章
  • OpenGL/WebGL顶点坐标变换过程简介

    世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...

  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • Blender2.7给平面模型添加纹理贴图

    在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

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

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

  • 使用CSS3 box-decoration-break特性实现多行文本样式

    当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
    按照规范...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

    本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...

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

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

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...

  • jQuery Ribbles - 基于WebGL的水面涟漪动效插件

    使用jQuery

  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Proce...

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 更多...