HiWebGLHiWebGL

WebGL 在 3D 之外的新领域 —— GPU 云计算

admin — Mon, 06 May 2013 03:36:14 +0000

从 WebGL 诞生以来绝大多数开发者都致力于用该项技术实现网页中可实时交互的 3D 图形，例如 3D 游戏、数据可视化等。但作为第一个可以直接与 GPU 交互的网络前端技术，很多人都忽视了它在纯图形处理方面的能力，例如类似 Photoshop 的图片处理和类似 TMPGEnc 的视频编解码。

早在 2010 年，这一类 Demo 曾经昙花一现，有人用 WebGL 制作了一个在浏览器中渲染视频的 Demo。这的确是很惊人的一件事情，要知道以往这种高负载的工作往往都是由专业的视频编解码软件完成的。但人们当时普遍认为这类 Demo 过于极客，不具备大规模应用和产业化的可能，此后便杳无音讯。

5 月 1 日，OTOY 公司发布新闻稿宣布，该公司和 Mozilla 合作研发了一个基于 JavaScript 和 WebGL 的浏览器前端视频编解码器 ORBX.js。

Brendan Eich，Mozilla 现任 CTO、同时也是 JavaScript 语言的创造者，在博客中更是发表了一篇名为《今天我看到了未来》的文章表示对 ORBX.js 的赞许。

据文章介绍， ORBX.js 在视频编解码方面性能极为优越：

在相同的视频质量下，压缩率比 H.264 提高 25%
更好的流视频码率控制
整形和浮点编码
更好的色深
更好的帧内计算
更好的并行计算结构设计

借助于高性能的前端视频解码能力，让拥有更好用户体验的 GPU 云计算成为可能。OTOY 同时公布了 3 段视频。

第一部视频演示了 ORBX.js 在视频解码方面的优秀能力，可以保证 1080p @ 120fps 的视频播放。

第二部视频随后演示了 Autodesk 公司的 3ds Max 通过云计算技术，在浏览器中实时运行的场景。

第三部视频演示了利用 ORBX.js 在浏览器中通过 Valve Steam 玩 Left for dead 的场景。

同时，由于出色的帧内计算，该项技术还可以用于在视频中插入水印，摆脱一直被人诟病的 DRM 技术。

由于出色的前端视频编解码能力，ORBX.js 让无插件的云计算成为可能，在云端 GPU 集群的支持下，用户可以在任意设备的浏览器中运行本地程序，包括 3D 建模软件、视频编辑、大型 3D 游戏等巨型软件。

如何在 Internet Explorer 11中开启 WebGL 暨微软和 WebGL 的恩怨情仇录

admin — Mon, 01 Apr 2013 03:04:55 +0000

正如我们上周报道的，国外开发者Francois Remy在泄露版Windows Blue附带的Internet Explorer 11中发现，WebGL接口已经封装完成，但功能上还未能开放支持。在这之后，另一名开发者Rafael Rivera继续深入挖掘，竟然发现了在此版本的Internet Explorer 11中开启WebGL支持的方法。

实际上方法简单地称奇。首先你必须已经安装了Windows 8 Blue build 9364和最新的显卡驱动（系统自带的显卡驱动在OpenGL方面支持不足），然后只需要简单地导入以下的注册表脚本即可。

Windows Registry Editor Version 5.00
 
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl]
 
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_WEBGL]
 
"iexplore.exe"=dword:00000001
 
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_WEBGL_HLSL_SHADERS]
 
"iexplore.exe"=dword:00000000

需要特别值得注意的是其中最后一个FEATURE_WEBGL_HLSL_SHADERS的键值，如果设置为1，那么会让Internet Explorer 11使用IESL代替GLSL作为着色器语言。如果设置为0，则符合先在大多数WebGL应用的习惯。

目前IE 11对WebGL的支持度仍然非常有限，你可以把一下代码另存为HTML文件，然后在IE 11中打开，你会发现网页中出现一片蓝色的区域，而这正代表着网页成功获得了名为“experimental-webgl”的3D绘制上下文——Internet Explorer 11终于支持WebGL了！

<body onload="demo()">
<canvas style="height: 100%; width: 100%" id='webgl' />
body>
 
<script>
var gl = {};
function demo()
{
  var canvas = document.getElementById("webgl");
  try
  {
    gl = canvas.getContext("experimental-webgl");
  } catch(e) { }
 
  if (gl) {
    gl.clearColor(0, 0.678, 0.937, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
  }
}
script>

下面附上IE 11运行LearningWebGL教程第15课实例的视频：

回顾过去，自从WebGL这项新的网页图形规范提出伊始，微软就从未表露出喜色。在2011年6月，微软更是雇佣一家欧洲安全机构对WebGL提出最强烈的质疑，认为让网页直接暴露给GPU是非常危险的行为。如果真要认真地从技术上讲，微软当时主要发难于跨域资源、DoS攻击以及直接操控GPU。

虽然作为一个刚刚诞生的技术标准，WebGL的确有很多路要走，但是如此兴师动众的指责让很多对这项新技术充满希望的开发者感到微软有些过分。当时开发者普遍认为微软对于WebGL的指责不是从技术角度出发的，而是完全出于商业目的。著名的WebGL开发者和布道师Gregg Tavares更是祭出一篇题目直接带着脏字的战斗檄文直斥微软。参见：《WebGL Security and Microsoft Bullshit》

在震惊业界的斥责之后，WebGL工作组把工作重心转移到了致力于解决安全问题上，一直到今天Khronos Group在GDC 2013上最新公布的WebGL 1.0.2标准中还是把安全放在了首位。

随后在2012年，微软指责WebGL的多项安全软肋都已经取得了极为有效的解决进展：现在CORS已经可以有效的解决跨域资源的问题；而许多厂商也已经部署了GL_ARB_robustness扩展来解决DoS攻击问题，并且WebGL工作组还在继续寻找其他的解决办法。至于直接操控GPU的问题，则是无法避免的，只要一种技术可以直接与GPU对话都会造成一定程度的安全威胁，在2011年于墨尔本召开的一次技术大会上，有人用相同的原理在Microsoft Silverlight 5、Adobe Flash 11和WebGL上实现了同样的漏洞攻击。

尽管微软仍然对WebGL持抗拒态度，但是在2011年8月举办的Siggraph 2011上，却爆出IE 10即将支持Typed Array（类型化数组）的消息。微软拒绝了WebGL，但却抵不住诱惑，引进了因为WebGL才诞生的Typed Array，这项技术允许开发者直接在Web上操控二进制数据。2011年12月1日，微软IE官方博客发表了一片名为《 Working with Binary Data using Typed Arrays》的文章，正式为 IE10 引进了Type Array。

时光荏苒，微软此后在多个场合多次被问到关于WebGL的问题，但微软发言人永远都是微笑的避而不答，当然有时候也会重复一下安全问题这个老梗。

2012年3月6日，在香港举办的World Internet Developers’ Summit活动中，微软高级布道师Giorgio Sardo做了《切绳子游戏的幕后故事》的演讲，在提问环节中有人提出IE将会在什么时候支持WebGL的问题，他的回答是“Not now”。令人感动的是他没直接说“never”实在是太给面子了。

随着WebGL的日渐成熟，越来越多的WebGL实例和应用脱引而出，微软逐渐意识到了不管他们是否要支持WebGL，他们现在缺乏一种网页图形技术来让自己的浏览器在网页视觉领域和Mozilla、Google、Opera来抗衡。

2012年11月，CNET 的记者 Shankland 采访了微软网络标准工作组的领导人、同时也是 W3C HTML 工作组的联合主席 Paul Cotton。他依然用安全问题作为挡箭牌，但是却破天荒指出IE团队对开发者关于IE缺乏图形API的诟病深表理解，他说：“我们依然坚持对 WebGL 的安全问题表示担忧。如果要我们支持 WebGL，那么就必须毫无余地的解决这些安全问题。从 IE8、IE9 到 IE10，每次我们宣布添加新的特性的时候，都会有人反馈要求支持其他功能，而在这些人们呼吁的功能中 WebGL 绝对是位居前五位的。我们对 IE 博客上的留言非常清楚，也很明白现在的状况。在 Web 上开发可交互的 3D 图形的确很棒。如果我们可以解决安全问题，那我想我们会认真地寻找一种为 Web 引入 3D 图形的方法。”

此后，Windows Blue泄露，开发者意外发现IE 11已经封装好WebGL接口，并且可以通过注册表开启支持，这样才有了本文开头的一幕。

这正是四年盘踞龙虎斗，微软终将入大流！欢迎IE 11加入WebGL大家庭！

HiWebGL综合报道，如需转载请注明出处！

IE 11或将支持 WebGL？泄露版 Windows Blue 现端倪

admin — Thu, 28 Mar 2013 03:17:14 +0000

想必大家都已经知道微软下一代操作系统 Windows 8 Blue build 9364 在上周遭到泄露，其中也当然包含新版的 Internet Explorer 11。国外开发者在研究泄露版的 IE 11 时发现，尽管仍然无法运行 WebGL 实例，但这个版本的 IE 却意外的内置了一个叫做“WebGLRenderingContext ”的对象，其接口包括如下：

canvas, drawingBufferHeight, drawingBufferWidth, activeTexture, attachShader, bindAttribLocation, bindBuffer, bindFramebuffer, bindRenderbuffer, bindTexture, blendColor, blendEquation, blendEquationSeparate, blendFunc, blendFuncSeparate, bufferData, bufferSubData, checkFramebufferStatus, clear, clearColor, clearDepth, clearStencil, colorMask, compileShader, compressedTexImage2D, compressedTexSubImage2D, copyTexImage2D, copyTexSubImage2D, createBuffer, createFramebuffer, createProgram, createRenderbuffer, createShader, createTexture, cullFace, deleteBuffer, deleteFramebuffer, deleteProgram, deleteRenderbuffer, deleteShader, deleteTexture, depthFunc, depthMask, depthRange, detachShader, disable, disableVertexAttribArray, drawArrays, drawElements, enable, enableVertexAttribArray, finish, flush, framebufferRenderbuffer, framebufferTexture2D, frontFace, generateMipmap, getActiveAttrib, getActiveUniform, getAttachedShaders, getAttribLocation, getBufferParameter, getContextAttributes, getError, getExtension, getFramebufferAttachmentParameter, getParameter, getProgramInfoLog, getProgramParameter, getRenderbufferParameter, getShaderInfoLog, getShaderParameter, getShaderPrecisionFormat, getShaderSource, getSupportedExtensions, getTexParameter, getUniform, getUniformLocation, getVertexAttrib, getVertexAttribOffset, hint, isBuffer, isContextLost, isEnabled, isFramebuffer, isProgram, isRenderbuffer, isShader, isTexture, lineWidth, linkProgram, pixelStorei, polygonOffset, readPixels, renderbufferStorage, sampleCoverage, scissor, shaderSource, stencilFunc, stencilFuncSeparate, stencilMask, stencilMaskSeparate, stencilOp, stencilOpSeparate, texImage2D, texParameterf, texParameteri, texSubImage2D, uniform1f, uniform1fv, uniform1i, uniform1iv, uniform2f, uniform2fv, uniform2i, uniform2iv, uniform3f, uniform3fv, uniform3i, uniform3iv, uniform4f, uniform4fv, uniform4i, uniform4iv, uniformMatrix2fv, uniformMatrix3fv, uniformMatrix4fv, useProgram, validateProgram, vertexAttrib1f, vertexAttrib1fv, vertexAttrib2f, vertexAttrib2fv, vertexAttrib3f, vertexAttrib3fv, vertexAttrib4f, vertexAttrib4fv, vertexAttribPointer, viewport, …

也就是说，在 IE 11 中 WebGL 接口已经被定义完成，但是功能上还无法使用。那么这是否以为着未来的 IE 也会支持 WebGL 呢？无论如何，面对已是明日黄花并且相对孱弱的 Silverlight，微软的确需要一个网页图形解决方案，并且是时候做出抉择了。

HiWebGL 整理编译自： http://fremycompany.com/BG/2013/Internet-Explorer-11-rsquo-s-leaked-build-395/?utm_source=html5weekly&utm_medium=email

Khronos Group 公布 WebGL 1.0.2 标准细节

admin — Wed, 27 Mar 2013 02:44:54 +0000

在昨天的 GDC 2013 上，Khronos Group 披露了 WebGL 1.0.2 标准的细节信息。总的来说这次更新还是旨在解决各种各样的安全问题，包括一些由于显卡驱动造成的问题。具体信息见下图。

目前只有 Chrome 25 内置了这些更新，Firefox也会随后跟上，而 nVidia 和 AMD 也会随后在显卡驱动问题上跟进。

此外，WebGL 1.0.2 还正式纳入了一些被测试许久的扩展，这些扩展将在今年 4 月正式发布。

Android Chrome Beta 开始支持 WebGL

admin — Tue, 22 Jan 2013 06:32:09 +0000

早前我们提到过 Google 肯定会把 WebGL 带到 Android Chrome 上的，这一天终于来了。在本月 10 日，Google Play 上出现了新的 Chrome Beta 应用，这一版本的 Beta 是基于 Chrome 25 的代码的，相对于目前的稳定版的 Chrome 18，可谓是有了巨大的提升，除此之外最吸引人的则是从该版本开始，Android Chrome 将开始支持 WebGL！

但是测试版毕竟还是测试版，想要开启 WebGL 支持还真是有些麻烦。著名的 WebGL 开发者 Brandon Jones 给出了一种方法：

首先，你需要：

一个 root 过的 Jellybean 或者 Ice Cream Sandwich 版本的安卓设备。
一台台式电脑，随便什么操作系统。
在台式电脑上安装好 Android SDK，并确保安装 Platform Tools。

全部就位之后你就可以开始了。把安卓设备用USB连接到电脑上，然后打开命令行输入：

adb shell ‘echo “chrome –enable-webgl” > /data/local/chrome-command-line’

现在当你运行 Chrome Beta 的时候，就会自动开启WebGL支持了！余下的话不多说，快试试你最喜欢的几个Demo，或者开始测试你的应用吧！

PS：另外也有人提出了一种无需root即可开启支持的方法，具体可以参考这里。

微软松口承认或将引入Web3D解决方案

admin — Thu, 01 Nov 2012 03:07:14 +0000

日前，CNET 的记者 Shankland 采访了微软网络标准工作组的领导人、同时也是 W3C HTML 工作组的联合主席 Paul Cotton。在采访中，CNET 主要就几个微软目前仍未支持的新标准提出了问题，包括 WebGL、WebRTC、DO NOT TRACK 等等。原文地址在此。以下是关于 WebGL 部分的节选：

Shankland: 即使 Mozilla 和 Google 已经支持了 WebGL，但微软还是一直顾虑 WebGL 的安全问题。微软是否可能改变想法，让开发者可以在 Web 上开发支持硬件加速的 3D 图形？

Cotton: 我们依然坚持对 WebGL 的安全问题表示担忧。如果要我们支持 WebGL，那么就必须毫无余地的解决这些安全问题。从 IE8、IE9 到 IE10，每次我们宣布添加新的特性的时候，都会有人反馈要求支持其他功能，而在这些人们呼吁的功能中 WebGL 绝对是位居前五位的。

我们对 IE 博客上的留言非常清楚，也很明白现在的状况。在 Web 上开发可交互的 3D 图形的确很棒。如果我们可以解决安全问题，那我想我们会认真地寻找一种为 Web 引入 3D 图形的方法。

总之，大意就是：别再喷我们了……

如何在没有图形基础的情况下搭建WebGL数据可视化应用

admin — Mon, 24 Sep 2012 06:30:55 +0000

Asterank.com 的开发者 Ian Webster 回顾了他建设这个用于展示太阳系小行星价值的视觉展示网站的历程，他是如何从一个对 3D 图形和 WebGL 完全不懂的门外汉到开发完成的。

1. 选一个 WebGL 库

因为要处理大量的模型，因此选一个 WebGL 库应该是第一步。目前市面上有很多不同的库，很那说哪个是最好的。最后 Ian 选了 Three.js 因为它能够回滚到 HTML5 Canvas 2D 模式。

2. 开始学习 Three.js

可以从基础教程开始看起，理解编程中要遇到的基本概念，比如场景、网格、材质、光照，以及如何通过循环渲染来制作动画效果。

Three.js 的官方示例对一些基础知识的学习有一定的帮助，但总的来说帮助不大。

3. 填充知识库

Three.js 的文档非常稀缺，并且对于刚刚开始 3D 编程的人来说并不实用。它的官网文档实际上的主要作用是可以链接到关键类的源代码页面。这就进入了一个死循环 —— 实际上还是要去阅读和理解 Three.js 的源代码才可以。

目前 Three.js 的官网支持站点是 StackOverFlow 网站。在 mr.doob 决定把问答支持放到 StackOverFlow 之前，github 上也有不少问题和答案。

4. 挑战和教训

① 轨道：这个问题是因为我要做的项目比较特殊，我阅读了大量的天文学书籍来理解如何正确的绘制行星轨道。

② 修改 TrackballControls 支持滚轮操作：这并不太难，只不过需要修改 Three.js 其中的源代码。另外记得要留意不同浏览器的兼容性。

③ 优化性能：还有很多浏览器和硬件配置交叉的机器不能很好的处理 WebGL 和 Canvas，因此要不断的优化性能。

④ 永远使用弧度制：这个不用多说，尤其是天文学方面的应用使用角度制时偶尔会发生错误。

结论

终于可以不用 Java applet 写 3D 网页程序了！我会继续下去创作更多的科普教育类的应用。

最后，要说的是：其实在浏览器中写图形非常容易，你也应该试试！

Emscripten已经可以导出完整的C++/OpenGL游戏为Javascript/WebGL

admin — Wed, 12 Sep 2012 10:55:50 +0000

之前我们报道过Mozilla内部正在进行的一个围绕Emscripten的项目，其目的是可以将C++/OpenGL游戏编译成Javascript/WebGL的形式并运行在支持HTML5的现代浏览器中，现在看来，这一项目显然取得了巨大的进展。现在Emscripten已经完全有能力导出完整的C++/OpenGL游戏为Javascript/WebGL。

最近Mozilla在公布新版Firefox时也顺便公布了一款名叫《BananaBread》的HTML5游戏，这是一款使用了WebGL技术的全3D第一人称视角射击游戏。与众不同的是，这款游戏原本是用C++/OpenGL写成的，使用的引擎名为Cube 2: Sauerbraten；Mozilla使用Emscripten将这个游戏从C++/OpenGL翻译成Javascript/WebGL。

为了达到这一目的，开发者扩充了Emscripten的功能，以使OpenGL调用可以转换为WebGL调用，另外还可以将部分的OpenGL 1.0调用转换为OpenGL ES 2.0。

在情理之中但又令人意外的是这款游戏的性能相当的好，Youtube上出现了多个此游戏的测试视频，其中一个视频中录制的游戏分辨率达到了惊人的6048×1080，考虑到屏幕录制软件会降低一定的帧率，因此视频中的流畅程度还是相当不错的。

最后，这个游戏以及Emscripten编译器都是免费开源的，因此你对此感兴趣，可以在GitHub上找到他们的源码。

Chrome for Android 确定将支持 WebGL

admin — Fri, 29 Jun 2012 07:30:10 +0000

在 Google I/O 2012 中，技术人员最喜欢的环节也许不只是炫目的发布会，还有非正式的技术讨论会（Fireside Chat），它只对开发者开放，并且不谈论任何商业话题，只讨论技术。在今年的这一环节中，大家纷纷聚焦于 Chrome for Android 这一王者浏览器的移动版本。其中，嘉宾透露了 Chrome for Android 将确定支持 WebGL 这一信息。

问：对于开发者来说，WebGL 是一项伟大的技术。Chrome 目前在 Android 上还不支持 WebGL 。那什么时候会支持呢？
答：我们内部正在致力于此项工作。问题在于 DoS 攻击和 GPU 的可用性。在 Chrome OS 里我们做了一些工作让 WebGL 变得更加安全，现在我们正在考虑是否能安全地发布这一功能。另外，有些 GPU 不如其他的 GPU 稳定。

虽然回答并不直接，不过结论应当毫无疑问，Chrome 将会把 WebGL 在合适的时候带入到移动平台！

新闻来源：http://www.zdnet.com/blog/burnette/google-io-2012-android-fireside-chat/2637?tag=content;siu-container
HiWebGL编译报道
转载请注明出处！

【傻瓜教程】如何在 iOS 上开启 WebGL

admin — Thu, 21 Jun 2012 08:16:14 +0000

苹果从 iOS 4.2 开始在自己的广告网络 iAd 中支持 WebGL，去年11月有人发现可以通过使用私有 API 将 WebGL 支持扩展到 UIWebView 的其他使用场合。自从 iOS 5.1.1 可以被成功越狱只会，在 iOS 上开启 WebGL 就变得更加简单了。

WebGL Enabler 是由 Demoseen.com 的作者开发的一款可以在 iOS 设备上开启 WebGL 支持的软件，安装之后可以让所有的 UIWebView 控件支持 WebGL，也就是说不但是原装自带Safari浏览器，也包括了其他的使用了 UIWebView 控件的第三方浏览器（例如腾讯浏览器HD）。

安装环境确认：

理论上该软件支持所有运行iOS 4.2以上版本的设备。以下硬件环境经过测试确认，可以顺利安装。另外强烈推荐安装在iOS 5.x版本中。

iPad 2 — iOS 5.0.1
iPad 3 WiFi-only — iOS 5.1.1
iPhone 4S — iOS 5.1.1

另外：你的设备必须已经成功越狱！

安装步骤：

下载 WebGL Enabler（deb格式）。
确保你的设备已经成功越狱，并且安装了 Cydia。
安装 MobileSubstrate（可以在 Cydia 中找到）。
安装 OpenSSH 并确认你的设备的 IP（Cydia 内置有详细的介绍和引导）。
使用 scp （推荐 WinSCP）将你在电脑上下载好的 WebGL Enabler 安装包（deb格式）发送到设备的 “/var/root/media/Cydia/AutoInstall” 目录。
重新启动你的设备，Cydia将自动安装 WebGL Enabler。

当然，你也可以像安装其他 deb 包一样来安装 WebGL Enabler。