使用 WebGL 扩展
WebGL 及其姊妹 API(OpenGL 和 OpenGL ES)一样,都支持扩展。完整的扩展列表可在 khronos webgl 扩展注册表中找到。
注意: 在 WebGL 中,与其他 GL API 不同,扩展只有在显式请求后才可用。
规范的扩展名称、供应商前缀和偏好
在扩展被正式批准之前,浏览器供应商可能就已经支持它们(但仅在它们处于草稿阶段时)。在这种情况下,它们的名称可能带有供应商前缀(MOZ_、WEBKIT_ 等),或者只有在浏览器偏好设置被切换后,扩展才能使用。
如果您希望使用最新的扩展,并希望在批准后继续使用(当然,前提是扩展没有发生不兼容的更改),您应该同时查询规范的扩展名称和供应商的扩展名称。例如:
js
const ext =
gl.getExtension("OES_vertex_array_object") ||
gl.getExtension("MOZ_OES_vertex_array_object") ||
gl.getExtension("WEBKIT_OES_vertex_array_object");
请注意,供应商前缀已被弃用,因此大多数浏览器都通过功能标志而不是供应商前缀来实现实验性扩展。
功能标志是:
- Firefox 中的
webgl.enable-draft-extensions - 基于 Chromium 的浏览器(Chrome、Opera)中的
chrome://flags/#enable-webgl-draft-extensions。
命名约定
WebGL 扩展的前缀是“ANGLE”、“OES”、“EXT”或“WEBGL”。这些前缀反映了其来源和意图。
ANGLE_:由 ANGLE 库的作者编写的扩展。OES_和KHR_:镜像 OpenGL ES(OES)或由各自架构审查委员会(Khronos)批准的 OpenGL API 扩展功能的扩展。OVR_:用于优化虚拟现实的扩展。EXT_:镜像其他 OpenGL ES 或 OpenGL API 扩展的扩展。WEBGL_:WebGL 特定的扩展,旨在与多个 Web 浏览器兼容。它也应用于源自 OpenGL ES 或 OpenGL API 但行为已显著更改的扩展。
查询可用扩展
WebGL 上下文支持查询哪些扩展可用。
js
const available_extensions = gl.getSupportedExtensions();
WebGLRenderingContext.getSupportedExtensions() 方法返回一个字符串数组,每个字符串代表一个受支持的扩展。
扩展列表
当前扩展是:
ANGLE_instanced_arraysEXT_blend_minmaxEXT_color_buffer_floatEXT_color_buffer_half_floatEXT_disjoint_timer_queryEXT_float_blendEXT_frag_depthEXT_shader_texture_lodEXT_sRGBEXT_texture_compression_bptcEXT_texture_compression_rgtcEXT_texture_filter_anisotropicEXT_texture_norm16KHR_parallel_shader_compileOES_draw_buffers_indexedOES_element_index_uintOES_fbo_render_mipmapOES_standard_derivativesOES_texture_floatOES_texture_float_linearOES_texture_half_floatOES_texture_half_float_linearOES_vertex_array_objectOVR_multiview2WEBGL_color_buffer_floatWEBGL_compressed_texture_astcWEBGL_compressed_texture_etcWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_s3tcWEBGL_compressed_texture_s3tc_srgbWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureWEBGL_draw_buffersWEBGL_lose_contextWEBGL_multi_draw
启用扩展
在使用扩展之前,必须使用 WebGLRenderingContext.getExtension() 来启用它。例如:
js
const float_texture_ext = gl.getExtension("OES_texture_float");
如果扩展不受支持,返回值将是 null,否则将返回一个扩展对象。
扩展对象
如果一个扩展定义了 WebGL 核心规范中不可用的特定符号或函数,它们将可以在调用 gl.getExtension() 返回的扩展对象上找到。