WebGL:用于网络的 2D 和 3D 图形WebGL (Web 图形库) 是一个 JavaScript API,用于在任何兼容的 Web 浏览器中渲染高性能交互式 3D 和 2D 图形,无需使用插件。WebGL 通过引入与 OpenGL ES 2.0 非常接近的 API 来实现这一点,该 API 可用于 HTML
所有现代浏览器都支持 WebGL(请参见下面的 兼容性表格);但是,用户的设备也必须具有支持这些功能的硬件。
The WebGL 2 API 引入了对大部分 OpenGL ES 3.0 功能集的支持;它通过 WebGL2RenderingContext 接口提供。
参考标准接口
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_shader_texture_lod
EXT_sRGB
EXT_texture_compression_bptc
EXT_texture_compression_rgtc
EXT_texture_filter_anisotropic
EXT_texture_norm16
KHR_parallel_shader_compile
OES_draw_buffers_indexed
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_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
WEBGL_multi_draw
事件
webglcontextlost
webglcontextrestored
webglcontextcreationerror
常量和类型
WebGL 常量
WebGL 类型
WebGL 2WebGL 2 是 WebGL 的重大更新,通过 WebGL2RenderingContext 接口提供。它基于 OpenGL ES 3.0,新功能包括
3D 纹理,
采样器对象,
统一缓冲区对象,
同步对象,
查询对象,
变换反馈对象,
现已成为 WebGL 2 核心功能的已推广扩展:顶点数组对象、实例化、多个渲染目标、片段深度。
另请参阅博客文章 "WebGL 2 在 Firefox 中发布" 和 webglsamples.org/WebGL2Samples,了解一些演示。
指南和教程下面,您将找到一些指南,帮助您学习 WebGL 概念,以及提供分步教程和示例的教程。
指南
WebGL 中的数据
编写 WebGL 代码时使用的数据变量、缓冲区和其他类型的指南。
WebGL 最佳实践
帮助您提高 WebGL 内容质量、性能和可靠性的提示和建议。
使用扩展
使用 WebGL 扩展的指南。
教程
WebGL 教程
WebGL 核心概念的入门指南。如果您没有以前的 WebGL 经验,这是一个很好的起点。
示例
一个基本的 2D WebGL 动画示例
此示例演示了单色形状的简单动画。探讨的主题包括适应 纵横比 差异、用于从多个着色器集构建着色器程序的函数以及 WebGL 绘制的入门知识。
WebGL 示例
一系列带有简短说明的实时示例,展示了 WebGL 概念和功能。这些示例按主题和难度级别排序,涵盖了 WebGL 渲染上下文、着色器编程、纹理、几何体、用户交互等内容。
高级教程
WebGL 模型视图投影
对通常用于表示 3D 对象视图的三个核心矩阵的详细解释:模型、视图和投影矩阵。
网络的矩阵数学
一个有用的指南,介绍 3D 变换矩阵的工作原理,以及如何在网络上使用它们 - 既适用于 WebGL 计算,也适用于 CSS 变换。
资源
Khronos WebGL 网站 WebGL 在 Khronos Group 的主要网站。
WebGL 基础 一个包含 WebGL 基础知识的入门教程。
原始 WebGL:WebGL 入门 Nick Desaulniers 的一次演讲,介绍了 WebGL 的基础知识。
WebGL Academy 一个 HTML/JavaScript 编辑器,包含学习 webgl 编程基础知识的教程。
WebGL 统计信息 一个网站,提供有关不同平台上浏览器中 WebGL 功能的统计信息。
库
three.js 是一个开源、功能齐全的 3D WebGL 库。
Babylon.js 是一个强大、简单且开放的游戏和 3D 渲染引擎,它被封装在一个友好的 JavaScript 框架中。
Pixi.js 是一个快速、开源的 2D WebGL 渲染器。
Phaser 是一个快速、免费且有趣的游戏框架,用于 Canvas 和 WebGL 支持的浏览器游戏。
PlayCanvas 是一个开源游戏引擎。
glMatrix 是一个用于高性能 WebGL 应用程序的 JavaScript 矩阵和向量库。
twgl 是一个用于减少 WebGL 代码冗余的库。
RedGL 是一个开源的 3D WebGL 库。
vtk.js 是一个用于在浏览器中进行科学可视化的 JavaScript 库。
webgl-lint 将帮助您在 WebGL 代码中找到错误并提供有用的信息
规范规范WebGL 规范 # 5.14WebGL 2.0 规范 # 3.7浏览器兼容性api.WebGLRenderingContextBCD 表格仅在浏览器中加载
api.WebGL2RenderingContextBCD 表格仅在浏览器中加载
兼容性说明除了浏览器之外,GPU 本身也需要支持该功能。因此,例如,S3 纹理压缩 (S3TC) 仅在基于 Tegra 的平板电脑上可用。大多数浏览器通过 webgl 上下文名称提供 WebGL 上下文,但较旧的浏览器也需要 experimental-webgl。此外,即将推出的 WebGL 2 完全向后兼容,将具有上下文名称 webgl2。
Gecko 说明WebGL 调试和测试
Firefox 提供两个可用首选项,可让您控制 WebGL 的功能以进行测试目的
webgl.min_capability_mode
一个布尔属性,当为 true 时,启用最小功能模式。处于此模式时,WebGL 被配置为仅支持 WebGL 规范所需的最低功能集和功能。这使您可以确保您的 WebGL 代码将在任何设备或浏览器上运行,无论其功能如何。默认情况下为 false。
webgl.disable_extensions
一个布尔属性,当为 true 时,禁用所有 WebGL 扩展。默认情况下为 false。
另请参阅
Canvas API
有关 WebGL 扩展的兼容性信息