WebGL 相关资源收集

一、官网介绍

WebGL - OpenGL ES 2.0 for the Web

http://www.khronos.org/webgl/

WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API using GLSL, with constructs that are semantically similar to those of the underlying OpenGL ES 2.0 API. It stays very close to the OpenGL ES 2.0 specification, with some concessions made for what developers expect out of memory-managed languages such as JavaScript.

WebGL brings plugin-free 3D to the web, implemented right into the browser.  Major browser vendors Apple (Safari), Google (Chrome), Mozilla (Firefox), and Opera (Opera) are members of the WebGL Working Group.

• WebGL 1.0 Specification
• WebGL Public Wiki
• WebGL Public Mailing List and Public Mailing List Archives
• WebGL Reference Card
• WebGL Forums
• WebGL Security white paper

 

二、百度百科介绍

http://baike.baidu.com/view/2833220.htm

WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

 

开发状况

WebGL和3D图形规范OpenGL、通用计算规范OpenCL一样来自Khronos Group，而且免费开放，预计2010年上半年完成并公开发布。Adobe Flash 10、微软Silverlight 3.0也都已经支持GPU加速，但它们都是私有的、不透明的。WebGL标准工作组的成员包括AMD，爱立信，谷歌，Mozilla，Nvidia以及Opera等，这些成员会与Khronos公司通力合作，创建一种多平台环境可用的WebGL标准，预计WebGL标准会在2011年上半年首度公开发布，该标准将完全免费对外提供。

 

作用

WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

 

最新情况

WebGL标准已出现在Mozilla Firefox、Apple Safari及开发者预览版Google Chrome等浏览器中，这项技术支持Web开发人员借助系统显示芯片在浏览器中展示各种3D模型和场景，未来有望推出3D网页游戏及复杂3D结构的网站页面。

　　据国外媒体报道，近日一段诺基亚N900手机使用移动版Firefox软件演示WebGL标准的视频在网上流传，引起了许多手机用户的关注。

　　从视频中可以看到在展示网页中的3D模型及使用触控屏操作的过程非常流畅，这表示WebGL标准已经支持手机浏览器应用。目前手机 用户上网浏览多媒体网页仍受手机硬件、浏览器以及网速等方面限制导致体验不佳，如果WebGL标准能在手机上普及应用，将使手机网络服务得到快速的发展。

　　2011年3月，多媒体技术标准化组织Khronos在美国洛杉矶举办的游戏开发大会上发布WebGL标准规范 R 1.0，支持WebGL的浏览器不借助任何插件便可提供硬件图形加速从而提供高质量的3D体验。 目前WebGL标准已经获得了业界大佬们的支持: Apple (Mac OS Safari nightly builds), Google （Chrome9.0), Mozilla (Firefox4.0 beta)和Opera (preview build)^[1]。

 

参考资料

3D网页：10大WebGL应用演示网站案例 

http://www.fadianzhan.com/index.php/archives/208

 

三、Chrome Experiments

http://www.chromeexperiments.com/webgl

WebGL Experiments

WebGL is a new web technology that brings hardware-accelerated 3D graphics to the browser without installing additional software.To try these WebGL experiments with Google Chrome, please download and install it below.

 

Google Chrome

http://www.google.com/chrome/

 

 

四、Wikipedia

http://en.wikipedia.org/wiki/WebGL

WebGL

From Wikipedia, the free encyclopedia

WebGL (Web-based Graphics Library) is a software library that extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser. WebGL code executes on a computer display card's Graphics Processing Unit (GPU), which must support shader rendering.

WebGL is a context of the canvas HTML element that provides a 3D computer graphics API without the use of plug-ins.^[2] The specification was released as version 1.0 on March 3, 2011.^[1] WebGL is managed by the non-profit Khronos Group.

 

Design

WebGL is based on OpenGL ES 2.0 and provides an API for 3D graphics.^[3] It uses the HTML5 canvas element and is accessed using Document Object Model interfaces. Automatic memory management is provided as part of the JavaScript language.^[2]

 Implementation

 Desktop Browsers

• Mozilla Firefox - WebGL has been enabled on all platforms that have a capable graphics card with updated drivers since version 4.0.^[4]
• Google Chrome - WebGL has been enabled on all platforms that have a capable graphics card with updated drivers since version 9.^[5]
• Safari - Safari 5.1 installed on Mac OS X Lion has support for WebGL, but is disabled by default.^[6]
• Opera - WebGL has been implemented by Opera in the latest Opera 12 pre-release snapshots. ^[7]
• Internet Explorer - Microsoft has not announced any plans to officially support WebGL. The Chrome Frame and IEWebGL plugins provide options to add support for WebGL to Internet Explorer.

 Mobile Browsers

• Nokia N900 - WebGL is available in the PR1.2 firmware update.^[8]

 Development

WebGL is managed by the non-profit technology consortium Khronos Group. The WebGL working group includes Apple, Google, Mozilla, and Opera.^[2] The chair of the working group is Ken Russell.

 History

WebGL grew out of the Canvas 3D experiments started by Vladimir Vukićević at Mozilla. Vukićević first demonstrated a Canvas 3D prototype in 2006. By the end of 2007, both Mozilla^[9] and Opera^[10] had made their own separate implementations.

In early 2009 Mozilla and Khronos started the WebGL Working Group.^[11] Version 1.0 of the WebGL specification was released March 2011.^[1] WebGL was postulated to have critical security vulnerabilities in May 2011, which would allow denial of service and cross scripting attacks.^[12]

Notable early applications include Google Body.^[13][14]

 Tutorials

There are tutorials for WebGL at the Mozilla Developer Network and Learning WebGL.

 Security

In May 2011, security firm Context Information Security published a report that elaborated on a number of security issues present in current Google Chrome and Mozilla Firefox WebGL implementations and inherent to the WebGL specification. According to the report, WebGL fundamentally allows Turing-complete programs originating from the Internet to reach kernel-mode graphics drivers and graphics hardware. The report also provided references to example exploits of the security issues capable of causing denial of service and cross-domain image theft. The report concluded that "browsers that enable WebGL by default put their users at risk to these issues."^[12]

Later, based on this report, the United States Computer Emergency Readiness Team (US-CERT) issued a warning that "WebGL contains multiple significant security issues. The impact of these issues includes arbitrary code execution, denial of service, and cross-domain attacks." US-CERT also encouraged "users and administrators to review the Context report and disable WebGL to help mitigate the risks."^[15]

The Khronos Group which includes Mozilla and Google responded to the concerns, suggesting possible solutions and future development approach.^[16] After reviewing the Context report, Mozilla decided to disable support for cross-domain images in Firefox; while the Khronos Group has been updating the WebGL specification to enhance protection against denial-of-service and cross-origin resource sharing attacks.^[17] At this time, the proposed solutions are still in development, and not ubiquitously deployed by GPU vendors.^[18]

Context was not satisfied with the Khronos Group's approach of incrementally fixing WebGL and described the method as not addressing the design flaw.^[19] In a follow-up report, Context provided more demonstrations of security vulnerabilities in the latest WebGL implementations on multiple platforms. Symptoms ranged from system crashing to screenshot leaking. They continued to question whether WebGL "was specified, designed and implemented with security in mind".^[17]

In June 2011, Microsoft announced that they could not endorse WebGL in its current form from a security perspective. Analysis performed by its MSRC Engineering team concluded that WebGL support in Microsoft products would have difficulty in meeting the requirements of the Security Development Lifecycle, the software security standards internally enforced in Microsoft. Specifically, Microsoft cited overly permissive exposure of hardware functionality, heavy reliance on third parties to secure web experience, and unproven denial-of-service protection capabilities as their key concerns.^[20]

Apple has indicated that they will not open WebGL to general Internet pages in iOS 5. WebGL will only be available through iAds which needs to go through approval for each implementation by Apple.^[21]

Notable independent graphic and security experts have weighed in reinforcing that WebGL is a severe security risk and will be hard to secure, including John Carmack^[22] and Dan Kaminsky.^[23]

Mozilla's vice president of technical strategy Mark Shaver rejected Microsoft's criticism. In a blog post, he wrote that Mozilla was working to address issues in the WebGL specification and Firefox's implementation. He emphasized that the web needs 3D capabilities and claimed that security issues are a natural part of a new technology. He commended Microsoft's work on the Direct3D API used in Silverlight 5, which he considered robust, but added that the same technology could be carried over to a Microsoft implementation of WebGL.^[24]

 Developer libraries

There are several libraries for WebGL development. The WebGLU library was the first to be made publicly available.^[25] Other libraries incorporating WebGL include GLGE, C3DL, Copperlicht, SpiderGL, PhiloGL, gwt-g3d – G3D (WebGL wrapper) for GWT (Google Web Toolkit), SceneJS, X3DOM, Processing.js, Three.js, Turbulenz, OSGJS, XB PointStream and CubicVR.js.

ANGLE (Almost Native Graphics Layer Engine) is an ongoing open source project released under the BSD license that allows translating WebGL content OpenGL ES 2.0 API calls to DirectX 9 API calls on Microsoft Windows platforms without the need for separate OpenGL drivers.

 Content creation

A way for artists to create WebGL scenes without programming is to use a content creation tool such as Blender or Autodesk Maya. The scenes are then exported to WebGL. This was first possible with Inka3D, a WebGL export plugin for Maya.

 Sample renderings

• Screenshot from a WebGL-based game running in a web browser

 See also

• O3D
• GLSL
• VRML
• X3D
• Java OpenGL

 References

1. ^ ^{a b c} "Khronos Releases Final WebGL 1.0 Specification". http://www.khronos.org/news/press/releases/khronos-releases-final-webgl-1.0-specification. Retrieved 3 March 2011.
2. ^ ^{a b c} "WebGL - OpenGL ES 2.0 for the Web". Khronos.org. http://www.khronos.org/webgl/. Retrieved 2011-05-14.
3. ^ "WebGL Specification". Khronos.org. http://www.khronos.org/registry/webgl/specs/latest/. Retrieved 2011-05-14.
4. ^ http://www.mozilla.com/en-US/firefox/4.0/releasenotes/
5. ^ http://www.fiercecio.com/techwatch/story/google-releases-chrome-9-comes-google-instant-webgl/2011-02-08
6. ^ http://fairerplatform.com/2011/05/new-in-os-x-lion-safari-5-1-brings-webgl-do-not-track-and-more/
7. ^ http://my.opera.com/desktopteam/blog/2011/10/13/introducing-opera-12-alpha
8. ^ suihkulokki (2010-06-07). "WebGL on N900". Suihkulokki.blogspot.com. http://suihkulokki.blogspot.com/2010/06/webgl-on-n900.html. Retrieved 2011-05-14.
9. ^ "Canvas 3D: GL power, web-style". Blog.vlad1.com. http://blog.vlad1.com/2007/11/26/canvas-3d-gl-power-web-style/. Retrieved 2011-05-14.
10. ^ "Taking the canvas to another dimension". My.opera.com. 2007-11-26. http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension. Retrieved 2011-05-14.
11. ^ "Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet". Khronos.org. 2009-08-04. http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet. Retrieved 2011-05-14.
12. ^ ^{a b} Forshaw, James (2011-05-08). "WebGL - A New Dimension for Browser Exploitation". Context Information Security. http://www.contextis.com/resources/blog/webgl/. Retrieved 2011-05-11.
13. ^ "Google Body - Google Labs". Bodybrowser.googlelabs.com. http://bodybrowser.googlelabs.com. Retrieved 2011-05-14.
14. ^ Bhanoo, Sindya N. (2010-12-23). "New From Google: The Body Browser". Well.blogs.nytimes.com. http://well.blogs.nytimes.com/2010/12/23/new-from-google-the-body-browser/. Retrieved 2011-05-14.
15. ^ "WebGL Security Risks". US-CERT. 2011-05-10. http://www.us-cert.gov/current/archive/2011/05/10/archive.html#web_users_warned_to_turn. Retrieved 2011-05-11.
16. ^ "WebGL - Security". Khronos Group. 2011-06-17. http://www.khronos.org/webgl/security/. Retrieved 2011-06-19.
17. ^ ^{a b} "WebGL – More WebGL Security Flaws". Context Information Security. 2011-06-16. http://www.contextis.com/resources/blog/webgl2/. Retrieved 2011-06-16.
18. ^ "WebGL Security". Khronos Group. 2011-05-09. http://www.khronos.org/news/permalink/webgl-security. Retrieved 2011-05-11.
19. ^ "Context WEbGL security FAQ". Context Information Security. http://www.contextis.com/resources/blog/webgl/faq/. Retrieved 2011-05-16.
20. ^ "WebGL Considered Harmful". Microsoft. 2011-06-16. http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-considered-harmful.aspx. Retrieved 2011-06-16.
21. ^ "Microsoft, Apple Dis WebGL". InformationWeek. 2011-06-16. http://www.informationweek.com/news/security/vulnerabilities/230800086. Retrieved 2011-06-20.
22. ^ Carmack, John (2011-06-17). "Tweet". http://twitter.com/#!/ID_AA_Carmack/status/81732190949486592. Retrieved 2011-06-20.
23. ^ Kaminsky, Dan (2011-06-16). "Tweet". http://twitter.com/#!/dakami/status/81512002912141314. Retrieved 2011-06-20.
24. ^ "Mozilla rejects Microsoft criticism of WebGL". The Inquirer. 2011-06-20. http://www.theinquirer.net/inquirer/news/2080571/mozilla-rejects-microsoft-criticism-webgl. Retrieved 2011-06-29.
25. ^ Benjamin DeLillo (2009-10-02). "First WebGLU release". Bjartr.blogspot.com. http://bjartr.blogspot.com/2009/10/more-webgl-progress-now-with-video.html. Retrieved 2011-05-14.

 External links

• Official website
• WebGL Preview
• www.DoesMyBrowserSupportWebGL.com
• WebGL Demo from Google Chromium
• WebGL Demo from Google Chromium (old site)
• EndlessForms.com See the power of WebGL by comparing this site (where you can evolve objects) in Chrome and Safari.
• Sand Toy: Particle Physics An example of doing particle physics on the GPU using a shader.

 

五、LEANING WEBGL

http://learningwebgl.com/blog/

WebGL around the net, 20 October 2011

October 20th, 2011 1 Comment

• Opera with WebGL is now in alpha! They’ve written a nice introduction here.  (h/t Nicolas Garcia Belmonte)
• Good news for those in the San Francisco Bay Area: the next WebGL Camp will take place on Friday, 9 December, 2011 at Mozilla.  Previous ones have sounded fantastic, it’s free, and there’s a 100-person limit — so keep an eye on the website for when registration goes live.  For those of us that can’t make it, hopefully there will be a live video stream of the talks.
• Some nice new demos from Mr. doob: liquid WebGL voxels, part 1 and part 2, (click them to see the effect), and a strangely disturbing video in voxels.
• “Unfortunately the GPU is a shared resource and as such there are times when it might be taken away from your [WebGL] program.”  The ContextLost event is fired by the canvas when that happens, and not many WebGL demos handle it gracefully.  Gregg Tavares has written a useful Wiki page explaining what you need to do and why, and has also updated the Khronos WebGL demos to deal with it.
• Also via Gregg, some nice demos from the WebGL samples repo on Google Code: adjustable toon shading, persistence of vision, and live colour adjustment of a video.  Also, separately, a WebGL bookbase of books from Google books.
• From Stefan, a cool car demo using ammo.js and three.js.
• Over at Spacegoo, Xavier’s produced a tool that can package up your HTML5 app as Flash so that (for example) you can enter it into Flash competitions.
• Trying to get WebGL to work in Internet Explorer?  Patrick Cozzi has blogged a summary of the options.
• From Jonas Wagner — over 3 million Swiss addresses plotted as a point cloud.  Your graphics card will not thank you ;-)

 

The Lessons

http://learningwebgl.com/blog/?page_id=1217

I’ve been creating a series of lessons as a way of teaching myself WebGL.  The first ten are based on the well-known NeHe OpenGL tutorials, but I’ve diverged since then.  Here are the ones so far.

(If you find Japanese easier than English, check out 日本語でのレッスン!)

 

	Lesson 0: Getting Started shows you how to download, install and configure a web browser that can show WebGL content, and gives links to a set of pages that show what it can do.
	Lesson 1: A Triangle and a Square gives you an overview of how WebGL works, with enough code to simply draw a static triangle and a square on the screen.
	Lesson 2: Adding Colour builds on lesson 1, and adds colour to the triangle and the square.
	Lesson 3: A Bit of Movement builds on lesson 2, making the triangle and the square spin around.
	Lesson 4: Some Real 3D Objects builds on lesson 3, bringing us into the third dimension fully by replacing the triangle with a pyramid and the square with a cube.
	Lesson 5: Introducing Textures shows how you can use an image file to “skin” your 3D objects, giving you a quick and easy way to make them look more interesting.
	Lesson 6: Keyboard Input and Texture Filters builds on lesson 6, showing you some more advanced ways to use textures, and also gives some pointers on how to read the keyboard in a way appropriate for 3D scenes and for games.
	Lesson 7: Basic Directional and Ambient Lighting introduces the two simplest forms of lighting.
	Lesson 8: The Depth Buffer, Transparency and Blending shows one way in which you can simulate transparent materials in WebGL, teaching you a little more theory along the way.
	Lesson 9: Improving the Code Structure With Lots of Moving Objects uses simple object-oriented techniques to give us number of independently-animated objects moving around the screen at the same time.
	Lesson 10: Loading a World, and the Most Basic Kind of Camera uses techniques from the previous lesson, along with a new trick to simulate a camera that moves around the scene, and demonstrates a kind of nano-Doom :-)
	Lesson 11: Spheres, Rotation Matrices, and Mouse Events shows how to draw spheres, and how to write code so that the user can spin them using the mouse.
	Lesson 12: point lighting shows how implement lighting that seems to come from points within your 3D scene.
	WebGL Lesson 13: per-fragment lighting and multiple programs describes a way of doing more realistic lighting at the cost of more processing time for the graphics card.
	WebGL Lesson 14: specular highlights and loading a JSON model makes the lighting even better by adding specular highlights, and also shows how to use load up models of 3D objects from JSON files.
	WebGL Lesson 15: specular maps shows how to use specular maps, which give your scenes greater realism by making it easy to specify how reflective an object is at every point on its surface, just as normal textures allow you to specify its detailed colour.
	WebGL Lesson 16: render-to-texture shows how to render a WebGL scene into a texture that can then be used in another scene — a neat trick in itself, and a useful foundation for other techiques.

 

六、Mozilla WebGL

https://developer.mozilla.org/en/WebGL

WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 canvas elements. Support for WebGL is present in Firefox 4 and Google Chrome 9.

 

Mozilla Firefox

http://www.mozilla.com/en-US/firefox/new/

 

Development topics Getting started with WebGL How to set up a WebGL context. Adding 2D content to a WebGL context How to render simple flat shapes using WebGL. Using shaders to apply color in WebGL Demonstrates how to add color to shapes using shaders. Animating objects with WebGL Shows how to rotate and translate objects to create simple animations. Creating 3D objects using WebGL Shows how to create and animate a 3D object (in this case, a cube). Using textures in WebGL Demonstrates how to map textures onto the faces of an object. Lighting in WebGL How to simulate lighting effects in your WebGL context. Animating textures in WebGL Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube. Cross-domain textures Information about loading textures from domains other than the one from which your content was loaded.

Resources WebGL Specification The WebGL specification. Khronos WebGL site The main web site for WebGL at the Khronos Group. Learning WebGL A site with tutorials on how to use WebGL. The WebGL Cookbook A web site with handy recipes for writing WebGL code. Sylvester An open source library for manipulating vectors and matrices. Planet WebGL A feed aggregator for people involved in the WebGL community.

 

Browser compatibility

• Desktop

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	4.0 (2.0)	9	--	--	Nightly build
Context name	experimental-webgl	experimental-webgl	n/a	n/a	experimental-webgl

 

• Mobile

  Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
  Basic support	4.0 (2.0)	9	--	--	Nightly build
  Context name	experimental-webgl	experimental-webgl	n/a	n/a	experimental-webgl

  Feature	Firefox Mobile (Gecko)	Android	IE Mobile	Opera Mobile	Safari Mobile
  Basic support	?	?	?	?	?
  Context name	?	?	?	?	?

   

  七、CloudMatch （HTML5/WebGL Platform for 3D Apps）

  http://cloudmach.com/

  Cloudmach is a 3D gaming cloud platform.
  No downloads, plugins or installations required.
  Our service helps you to bring your games to new markets, achieve the broadest distribution and earn more money.