Довідник

Довідник розширень WebGL

Усі широко вживані розширення WebGL 1 і WebGL 2 — що вони вмикають, як їх запитувати та нотатки щодо підтримки в браузерах.

Запитування розширень

Завжди перевіряйте доступність розширення перед використанням. Непідтримувані розширення повертають null.

API Опис
gl.getSupportedExtensions() Повертає масив усіх доступних рядків розширень для цього контексту
gl.getExtension('NAME') Повертає обʼєкт розширення або null. Має викликатися один раз; наступні виклики повертають той самий обʼєкт

Розширення текстур

Розширення Контекст Вмикає
OES_texture_float WebGL 1 32-бітні float-текстури (gl.FLOAT як тип у texImage2D)
OES_texture_half_float WebGL 1 16-бітні half-float текстури. Використовуйте ext.HALF_FLOAT_OES як тип
OES_texture_float_linear WebGL 1 Білінійна фільтрація float-текстур (без цього звичайні float-текстури підтримують лише NEAREST)
OES_texture_half_float_linear WebGL 1 Білінійна фільтрація half-float текстур
EXT_color_buffer_float WebGL 2 Рендеринг у float / half-float текстури (потрібне для HDR-рендер-цілей)
EXT_texture_filter_anisotropic WebGL 1 Анізотропна фільтрація. Запитайте максимум через gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT)
WEBGL_compressed_texture_s3tc WebGL 1 Стиснені текстури DXT1/3/5 (десктопні GPU)
WEBGL_compressed_texture_etc WebGL 1 Стиснені текстури ETC1/2 (мобільні GPU)
WEBGL_compressed_texture_astc WebGL 1 Стиснені текстури ASTC (ARM Mali, Apple GPU)
У Three.js встановіть renderer.anisotropy = renderer.capabilities.getMaxAnisotropy() на текстурах для різкіших площин поверхні під гострими кутами.

Розширення рендерингу

Розширення Контекст Вмикає
ANGLE_instanced_arrays WebGL 1 Інстансоване відмалювання. Увійшло до ядра WebGL 2 як gl.drawArraysInstanced
OES_vertex_array_object WebGL 1 VAO для інкапсуляції стану атрибутів. У ядрі WebGL 2
WEBGL_draw_buffers WebGL 1 Кілька рендер-цілей (MRT). У ядрі WebGL 2
EXT_blend_minmax WebGL 1 Рівняння змішування MIN/MAX. У ядрі WebGL 2
EXT_frag_depth WebGL 1 Запис gl_FragDepthEXT з фрагментного шейдера. У ядрі WebGL 2
OES_standard_derivatives WebGL 1 dFdx(), dFdy(), fwidth() у фрагментному шейдері. У ядрі WebGL 2 #version 300 es
WEBGL_depth_texture WebGL 1 Текстури глибини для тіньового мапінгу. У ядрі WebGL 2
EXT_shader_texture_lod WebGL 1 texture2DLodEXT() / texture2DGradEXT(). У ядрі WebGL 2

Розширення таймінгу та налагодження

Розширення Контекст Вмикає
EXT_disjoint_timer_query WebGL 1 Асинхронні запити таймінгу GPU. Повертає витрачені наносекунди для викликів відмалювання
EXT_disjoint_timer_query_webgl2 WebGL 2 Те саме для WebGL 2. Використовуйте ціль запиту gl.TIME_ELAPSED_EXT
WEBGL_debug_renderer_info WebGL 1 Надає GPU-рядки UNMASKED_VENDOR_WEBGL і UNMASKED_RENDERER_WEBGL
WEBGL_debug_shaders WebGL 1 ext.getTranslatedShaderSource(shader) — перегляд GLSL шейдера, перетвореного драйвером
KHR_parallel_shader_compile WebGL 1 Неблокуюча перевірка компіляції шейдера. Опитуйте COMPLETION_STATUS_KHR замість блокування

Увійшли до ядра WebGL 2

Це були розширення у WebGL 1, а тепер вони є частиною ядра WebGL 2 — запит розширення не потрібен.

Можливість Розширення WebGL 1 Еквівалент у WebGL 2
Кілька рендер-цілей WEBGL_draw_buffers gl.drawBuffers()
Інстансоване відмалювання ANGLE_instanced_arrays gl.drawArraysInstanced(), gl.vertexAttribDivisor()
Обʼєкти вершинних масивів OES_vertex_array_object gl.createVertexArray()
Текстури глибини WEBGL_depth_texture Внутрішній формат gl.DEPTH_COMPONENT24
Запис глибини фрагмента EXT_frag_depth gl_FragDepth у шейдерах #version 300 es
Стандартні похідні OES_standard_derivatives dFdx(), dFdy(), fwidth() у #version 300 es