WebGL (библиотека веб-графики) — это API JavaScript для рендеринга высокопроизводительной интерактивной 3D- и 2D-графики в любом совместимом веб-браузере без использования подключаемых модулей. WebGL делает это путем введения API, который полностью соответствует OpenGL ES 2.0 и который можно использовать в <canvas>элементах HTML. Это соответствие позволяет API использовать преимущества аппаратного ускорения графики, обеспечиваемого устройством пользователя.

Поддержка WebGL присутствует во всех современных браузерах (см. таблицы совместимости ниже); однако устройство пользователя также должно иметь оборудование, поддерживающее эти функции.

API WebGL 2 обеспечивает поддержку большей части набора функций OpenGL ES 3.0; это предоставляется через WebGL2RenderingContextинтерфейс.

Этот <canvas>элемент также используется API Canvas для создания 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 2 WebGL 2 — это крупное обновление WebGL, предоставляемое через WebGL2RenderingContextинтерфейс. Он основан на OpenGL ES 3.0 и включает в себя новые функции:

3D текстуры , Объекты сэмплера , Объекты Uniform Buffer , Синхронизировать объекты , Объекты запроса , Преобразовать объекты обратной связи , Продвинутые расширения, которые теперь являются ядром WebGL 2: объекты Vertex Array , создание экземпляров , несколько целей рендеринга , глубина фрагмента . См. также сообщение в блоге «WebGL 2 в Firefox» и на веб-сайте webglsamples.org/WebGL2Samples , где можно найти несколько демонстраций.

Руководства и учебные пособия Ниже вы найдете ряд руководств, которые помогут вам изучить концепции WebGL, а также учебные пособия, содержащие пошаговые уроки и примеры.

Путеводители Данные в WebGL Руководство по переменным, буферам и другим типам данных, используемым при написании кода WebGL.

Лучшие практики WebGL Советы и предложения, которые помогут вам улучшить качество, производительность и надежность вашего контента WebGL.

Использование расширений Руководство по использованию расширений WebGL.

Учебники Учебное пособие по WebGL Руководство для начинающих по основным понятиям WebGL. Хорошее место для начала, если у вас нет опыта работы с WebGL.

Примеры Базовый пример 2D-анимации WebGL Этот пример демонстрирует простую анимацию одноцветной фигуры. Рассмотренные темы включают адаптацию к различиям в пропорциях, функцию создания шейдерных программ из наборов нескольких шейдеров и основы рисования в WebGL.

WebGL на примере Серия живых примеров с краткими пояснениями, демонстрирующих концепции и возможности WebGL. Примеры отсортированы по темам и уровням сложности и охватывают контекст рендеринга WebGL, программирование шейдеров, текстуры, геометрию, взаимодействие с пользователем и многое другое.

Расширенные учебные пособия Проекция вида модели WebGL Подробное объяснение трех основных матриц, которые обычно используются для представления вида трехмерного объекта: матрицы модели, вида и проекции.

Матричная математика для Интернета Полезное руководство о том, как работают матрицы 3D-преобразований, которое можно использовать в Интернете — как для вычислений WebGL, так и в преобразованиях CSS.

Ресурсы Сайт Khronos WebGL Главный веб-сайт WebGL группы Khronos. Основы WebGL Базовое руководство по основам WebGL. Raw WebGL: введение в WebGL Выступление Ника Десолнье, знакомящее с основами WebGL. Игровая площадка WebGL Онлайн-инструмент для создания и совместного использования проектов WebGL. Подходит для быстрого прототипирования и экспериментов. WebGL Academy Редактор HTML/JavaScript с обучающими материалами для изучения основ программирования WebGL. WebGL Stats Сайт со статистикой возможностей WebGL в браузерах на разных платформах. Библиотеки Three.js — это полнофункциональная 3D-библиотека WebGL с открытым исходным кодом. Babylon.js — это мощный, простой и открытый движок игр и 3D-рендеринга, упакованный в дружественную среду JavaScript. Pixi.js — это быстрый 2D-рендерер WebGL с открытым исходным кодом. Phaser — это быстрая, бесплатная и увлекательная платформа с открытым исходным кодом для браузерных игр на основе Canvas и WebGL. PlayCanvas — игровой движок с открытым исходным кодом. glMatrix — это библиотека матриц и векторов JavaScript для высокопроизводительных приложений WebGL. twgl — это библиотека, позволяющая сделать webgl менее многословным. RedGL — это 3D-библиотека WebGL с открытым исходным кодом. vtk.js — это библиотека JavaScript для научной визуализации в вашем браузере. webgl-lint поможет найти ошибки в вашем коде WebGL и предоставит полезную информацию.