WebGL:用于网络的 2D 和 3D 图形WebGL (Web 图形库) 是一个 JavaScript API,用于在任何兼容的 Web 浏览器中渲染高性能交互式 3D 和 2D 图形,无需使用插件。WebGL 通过引入与 OpenGL ES 2.0 非常接近的 API 来实现这一点,该 API 可用于 HTML 元素。这种一致性使 API 能够利用用户设备提供的硬件图形加速功能。

所有现代浏览器都支持 WebGL(请参见下面的 兼容性表格);但是,用户的设备也必须具有支持这些功能的硬件。

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

元素也由 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_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 扩展的兼容性信息

Copyright © 2088 VR世界杯_世界杯举办 - weiqer.com All Rights Reserved.
友情链接