使用 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() 返回的擴充套件物件上找到。