WebGL - Web API 接口参考 编辑

WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 <canvas>元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。

目前支持 WebGL 的浏览器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+和Microsoft Edge build 10240+；然而, WebGL一些特性也需要用户的硬件设备支持。

WebGL 2 API引入了对大部分的OpenGL ES 3.0功能集的支持; 它是通过WebGL2RenderingContext界面提供的。

 <canvas> 元素也被 Canvas API 用于在网页上进行2D图形处理。

参考

标准接口

• WebGLRenderingContext
• WebGL2RenderingContext
• WebGLActiveInfo
• WebGLBuffer
• WebGLContextEvent
• WebGLFramebuffer
• WebGLProgram
• WebGLQuery
• WebGLRenderbuffer
• WebGLSampler
• WebGLShader
• WebGLShaderPrecisionFormat
• WebGLSync
• WebGLTexture
• WebGLTransformFeedback
• WebGLUniformLocation
• WebGLVertexArrayObject

扩展

• ANGLE_instanced_arrays
• EXT_blend_minmax
• EXT_color_buffer_float
• EXT_color_buffer_half_float
• EXT_disjoint_timer_query
• EXT_float_blend
• EXT_frag_depth
• EXT_sRGB
• EXT_shader_texture_lod
• EXT_texture_compression_bptc
• EXT_texture_compression_rgtc
• EXT_texture_filter_anisotropic
• OES_element_index_uint
• OES_fbo_render_mipmap
• OES_standard_derivatives
• OES_texture_float
• OES_texture_float_linear
• OES_texture_half_float
• OES_texture_half_float_linear
• OES_vertex_array_object
• OVR_multiview2
• WEBGL_color_buffer_float
• WEBGL_compressed_texture_astc
• WEBGL_compressed_texture_atc
• WEBGL_compressed_texture_etc
• WEBGL_compressed_texture_etc1
• WEBGL_compressed_texture_pvrtc
• WEBGL_compressed_texture_s3tc
• WEBGL_compressed_texture_s3tc_srgb
• WEBGL_debug_renderer_info
• WEBGL_debug_shaders
• WEBGL_depth_texture
• WEBGL_draw_buffers
• WEBGL_lose_context

事件

• webglcontextlost
• webglcontextrestored
• webglcontextcreationerror
  

常量和类型

• WebGL常量
• WebGL类型

WebGL 2

WebGL 2 是WebGL的一个主要更新，它通过WebGL2RenderingContext 接口提供。它基于OpenGL ES 3.0，新功能包括：

• 3D textures,
• Sampler objects,
• Uniform Buffer objects,
• Sync objects,
• Query objects,
• Tranform Feedback objects,
• 部分扩展被纳入了 WebGL 2 核心 ： Vertex Array objects, instancing, multiple render targets, fragment depth.

另请参见博客文章 "WebGL 2 lands in Firefox" 和 webglsamples.org/WebGL2Samples 几个演示。

指南和教程

下面，您将找到各种指南，以帮助您学习WebGL概念和教程，提供分步课程和示例。

指南 

WebGL 中的数据

编写WebGL代码时使用的变量，缓冲区和其他类型数据的指南。

WebGL 最佳实践

提示和建议，以帮助您提高WebGL内容的质量，性能和可靠性。

使用扩展

WebGL 扩展的使用指南。

教程

WebGL 教程

WebGL 核心概念的初学者指南。如果您以前没有 WebGL 的经验，那么这是一个很好的起点。

示例

一个基础的 WebGL 的 2D 动画示例

此示例演示了单色形状的简单动画。检查的主题是适应宽高比差异，从多个着色器集合构建着色器程序的功能，以及 WebGL 绘图的基础知识。

WebGL示例

一系列带有简短说明的实时示例展示了WebGL的概念和功能。根据主题和难易程度对示例进行了排序，涵盖了WebGL渲染上下文，着色器编程，纹理，几何图形，用户交互等。

高级教程

WebGL 模型视图投影

详述了常用于显示3D物体视图的三种核心矩阵：模型，视图和投影矩阵。

Web 中的矩阵运算

讲述 3D 变换矩阵工作原理的指南 —— 这也能在WebGL计算和CSS3变换中派上用场。

资源

• Raw WebGL: WebGL入门 Nick Desaulniers 主讲的WebGL 基础知识。如果你从未接触过底层的图形编程，这是一个开始学习初级图形编程的好地方。
• WebGL官网 Khronos Group 的WebGL官方站点。
• 学习WebGL 一个关于如何使用WebGL的教程站点。
• WebGL基础 一个关于WebGL的基础教程。
• WebGL试炼 一个在线创建和分享WebGL的工具站点，非常适合快速创建一个原型或者体验一个成品。
• WebGL Academy 通过一个 HTML/JavaScript 编辑器来学习一个基础的WebGl基础知识。
• WebGL Stats 一个统计WebGL在不同平台上能力表现的网站。

库

• glMatrix 创建高性能WebGL应用的JavaScript矩阵矢量库。
• PhiloGL 一个用于数据可视化、创意编程和游戏开发的WebGL库。
• Pixi.js是一种快速的开源2D WebGL渲染器。
• PlayCanvas是一个开源游戏引擎。
• Sylvester是一个用于处理向量和矩阵的开源库。尚未针对WebGL进行优化，但功能极其强大。
• three.js是一个开源的，功能齐全的3D WebGL库。
• Phaser是一个适用于Canvas和WebGL的浏览器游戏的快速，免费和有趣的开源框架。
• RedGL  是一个开源3D WebGL库。
• vtk.js  是一个JavaScript库，用于在浏览器中进行科学可视化。

规范

浏览器兼容性

WebGL 1

此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看https://github.com/mdn/browser-compat-data并向我们发送拉取请求。

WebGL 2

此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看https://github.com/mdn/browser-compat-data并向我们发送拉取请求。

兼容性说明

不仅是浏览器，GPU本身也需要支持该特性。比如 S3 纹理压缩 (S3TC) 只在基于图睿的GPU的设备上可用。大多数浏览器可以通过 webgl 这一上下文名称来使用 WebGL，但是旧的浏览器需要使用 experimental-webgl。另外，将来的 WebGL 2 只会向后兼容，其使用的上下文名称为 webgl2 。

Gecko备忘

WebGL调试与检测

开始使用Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), 在测试中，这里有两个参数可以让你来控制WebGL性能:

webgl.min_capability_mode

一个以布尔值存储的属性。当它的值为True时，将会启用最小性能模式。当这个模式启用时，WebGL将会仅提供由其标准指定的最基本的功能集和性能支持。这样可以确保您的WebGL代码能够在性能的设备和浏览器上正确运行。它的默认值是False。

webgl.disable_extensions

一个以布尔值存储的属性。当它的值为True时，会禁用所有的WebGL拓展。它的默认值是False。

参见

• Canvas(画布)
• 兼容性信息关于WebGL的扩展