WebGL2 - это довольно значительное обновление по сравнению с WebGL1. Если вы переходите с WebGL1 и хотите знать, как адаптировать ваш код, чтобы воспользоваться возможностями WebGL2, см. эту статью.
Вот краткий список в произвольном порядке.
Я думаю, это довольно важно, даже несмотря на то, что они были опционально доступны в WebGL1. Теперь, когда они всегда доступны в WebGL2, я думаю, вам, вероятно, следует всегда их использовать.
В WebGL1, если ваш шейдер нуждался в знании размера текстуры, вам приходилось передавать размер в uniform вручную. В WebGL2 вы можете вызвать
vec2 size = textureSize(sampler, lod)
чтобы получить размер любого уровня детализации текстуры.
Часто удобно хранить большие массивы данных в текстуре. В WebGL1 вы могли это делать, но могли адресовать текстуры только координатами текстуры (0.0 до 1.0). В WebGL2 вы можете получать значения из текстуры по координатам пикселей/текселей напрямую, что делает доступ к массивам немного проще:
vec4 values = texelFetch(sampler, ivec2Position, lod);
WebGL1 имел всего несколько форматов текстур. WebGL2 имеет МНОЖЕСТВО!
RGBA32IRGBA32UIRGBA16IRGBA16UIRGBA8RGBA8IRGBA8UISRGB8_ALPHA8RGB10_A2RGB10_A2UIRGBA4RGB5_A1RGB8RGB565RG32IRG32UIRG16IRG16UIRG8RG8IRG8UIR32IR32UIR16IR16UIR8R8IR8UIRGBA32FRGBA16FRGBA8_SNORMRGB32FRGB32IRGB32UIRGB16FRGB16IRGB16UIRGB8_SNORMRGB8IRGB8UISRGB8R11F_G11F_B10FRGB9_E5RG32FRG16FRG8_SNORMR32FR16FR8_SNORMDEPTH_COMPONENT32FDEPTH_COMPONENT24DEPTH_COMPONENT163D текстуры - это именно то, что звучит, текстуры, которые имеют 3 измерения.
Массив текстур очень похож на 3D текстуру, за исключением того, что каждый слой считается отдельной текстурой. Все слои должны быть одинакового размера, но это отличный способ дать шейдеру доступ к сотням текстур, даже если у него относительно небольшое количество текстурных блоков. Вы можете выбрать слой в вашем шейдере:
vec4 color = texture(someSampler2DArray, vec3(u, v, slice));
В WebGL1 текстуры, которые не были кратны степени 2, не могли иметь мипмапы. В WebGL2 это ограничение снято. Текстуры не кратные степени 2 работают точно так же, как текстуры кратные степени 2.
В WebGL1 цикл в шейдере должен был использовать константное целочисленное выражение. WebGL2 снимает это ограничение (в GLSL 300 es).
В WebGL1, если вам нужно было получить обратную матрицу, вам приходилось
передавать её как uniform. В WebGL2 GLSL 300 es есть встроенная
функция inverse, а также transpose.
В WebGL1 есть различные форматы сжатых текстур, которые зависят от оборудования. S3TC был в основном только для десктопа. PVRTC был только для iOS и т.д.
В WebGL2 поддерживается по крайней мере один набор форматов сжатых текстур.
WEBGL_compressed_texture_etc И/ИЛИ
(
)
Объекты uniform буферов позволяют вам указывать множество uniforms из буфера. Преимущества:
Вы можете манипулировать всеми uniforms в буфере вне WebGL.
В WebGL1, если у вас было 16 uniforms, это потребовало бы
16 вызовов gl.uniformXXX, что относительно медленно.
В WebGL2, если вы используете
объект uniform буфера, вы можете установить значения в
типизированном массиве полностью внутри JavaScript, что означает, что это
намного быстрее. Когда все значения установлены,
вы загружаете их все одним вызовом gl.bufferData
или gl.bufferSubData, а затем говорите программе
использовать этот буфер с gl.bindBufferRange, так что всего
2 вызова.
Вы можете иметь разные наборы объектов uniform буферов.
Сначала некоторые термины. Uniform блок - это коллекция uniforms, определенных в шейдере. Объект uniform буфера
Например, у вас может быть 4 uniform блока, определенных в шейдере:
Глобальный матричный uniform блок, который содержит матрицы, которые одинаковы для всех вызовов рисования, такие как матрица проекции, матрица вида и т.д.
Uniform блок для каждой модели, который содержит матрицы, которые различны для каждой модели. Например, мировая матрица и матрица нормалей.
Uniform блок материала, который содержит настройки материала, такие как диффузный, фоновый, зеркальный и т.д.
Uniform блок освещения, который содержит данные освещения, такие как цвет света, позиция света и т.д.
Затем во время выполнения вы могли бы создать один глобальный uniform буфер объект, один uniform буфер объект модели для каждой модели, один uniform буфер объект света для каждого света и один uniform буфер объект для каждого материала.
Чтобы нарисовать любой конкретный элемент, предполагая, что все значения уже обновлены, все, что вам нужно сделать, это привязать ваши желаемые 4 uniform буфер объекта:
gl.bindBufferRange(..., globalBlockIndx, globalMatrixUBO, ...);
gl.bindBufferRange(..., modelBlockIndx, someModelMatrixUBO, ...);
gl.bindBufferRange(..., materialBlockIndx, someMaterialSettingsUBO, ...);
gl.bindBufferRange(..., lightBlockIndx, someLightSettingsUBO, ...);
В WebGL2 вы можете иметь текстуры на основе целых чисел, тогда как в WebGL1 все текстуры представляли значения с плавающей точкой, даже если они не представлялись значениями с плавающей точкой.
Вы также можете иметь целочисленные атрибуты.
Кроме того, GLSL 300 es позволяет вам выполнять битовые манипуляции с целыми числами в шейдерах.
WebGL2 позволяет вашему вершинному шейдеру записывать свои результаты обратно в буфер.
В WebGL1 все параметры текстуры были для каждой текстуры. В WebGL2 вы можете опционально использовать объекты сэмплеров. С сэмплерами все параметры фильтрации и повторения/зажима, которые были частью текстуры, перемещаются в сэмплер. Это означает, что одна текстура может быть сэмплирована разными способами. Повторяющаяся или зажатая. Фильтрованная или не фильтрованная.
Текстуры глубины были опциональными в WebGL1 и сложными для работы. Теперь они стандартные. Они обычно используются для вычисления карт теней.
Теперь они стандартные. Обычное использование включает вычисление нормалей в шейдерах вместо их передачи.
Теперь это стандарт. Обычное использование включает быстрое рисование множества деревьев, кустов или травы.
Возможность использовать 32-битные целые числа для индексов снимает ограничение размера индексированной геометрии.
gl_FragDepthВы можете записывать свои собственные пользовательские значения в буфер глубины / z-буфер.
Теперь вы можете брать минимум или максимум из 2 цветов при смешивании.
Теперь вы можете рисовать в несколько буферов одновременно из шейдера. Это обычно используется для различных техник отложенного рендеринга.
В WebGL1 это была опциональная функция. Был счетчик того, сколько текстур вы могли получить доступ в вершинном шейдере, и этот счетчик мог быть 0. Большинство устройств поддерживали их. В WebGL2 этот счетчик должен быть по крайней мере 16.
В WebGL1 сам canvas мог быть сглажен с помощью встроенной в GPU мультисэмплинг системы, но не было поддержки пользовательского контролируемого мультисэмплинга. В WebGL2 теперь вы можете создавать мультисэмплированные renderbuffer’ы.
Запросы окклюзии позволяют вам спросить GPU, будут ли пиксели фактически нарисованы, если он будет что-то рендерить.
Текстуры с плавающей точкой используются для многих специальных эффектов и вычислений. В WebGL1 они были опциональными. В WebGL2 они просто существуют.
Примечание: К сожалению, они все еще ограничены в том, что фильтрация
и рендеринг в текстуры с плавающей точкой все еще опциональны. См.
OES_texture_float_linear
и EXT_color_buffer_float.