Webgl что это

WebGL

WebGL (Web Graphics Library) — программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трёхмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трёхмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах canvas HTML5 .

Поддержка WebGL присутствует в Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ и Internet Explorer 11+. Однако помимо поддержки WebGL браузером, необходима также его поддержка графическим процессором клиента.

Ресурсы

Совместимость с браузерами

WebGL 1

BCD tables only load in the browser

WebGL 2

BCD tables only load in the browser

Замечания по Gecko

Отладка и тестирование WebGL

Начиная с Gecko 10.0, имеются две настройки, позволяющие вам управлять возможностями WebGL для тестирования своего кода:

Свойство типа Boolean которое, при значении true позволяет запускать режим минимальных функциональных возможностей. В этом режиме WebGL сконфигурирован осуществлять поддержку минимального набора функциональных возможностей, поддержка которых обязательна по спецификации WebGL. Это позволяет вам убедиться в том, что ваш код на WebGL будет работать на любом устройстве или браузере, независимо от их возможностей. Значением по умолчанию для это свойства является значение false .

Свойство типа Boolean которое, при значении true отключает все расширения WebGL. Значением по умолчанию для это свойства является значение false .

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 19 июл. 2023 г. by MDN contributors.

Что такое WebGL и как его отключить.

WebGL (Web-based Graphics Library) — программная библиотека для JavaScript, позволяющая без сторонних плагинов обращаться к видеокарте, чтобы создавать и отображать интерактивную 3D-графику через HTML5-элемент Canvas.

WebGL может представлять угрозу для безопасности и анонимности вашего устройства.

Как защититься?

Можно вручную отключить WebGL в настройках браузера, либо использовать специальные расширения (например, «Disable WebGL» для Chrome).

Как отключить WebGL в Firefox :

1. Откройте страницу настроек браузера. Для этого введите в адресной строке: about:config
2. В строке поиска введите: webgl
3. Найдите строку webgl.disabled. Она имеет значение “false”. Необходимо перевести ее в значение “true”. Для этого просто кликаем два раза по данной строке.

Как отключить WebGL в Google Chrome :

1. Найдите ярлык браузера Chrome, щелкните по нему правой кнопкой мыши и выберите “Properties”.
2. В строке “Target” расположен путь к файлу, запускающему браузер. Он должен заканчиваться на chrome.exe. После этого .exe поставьте пробел и добавьте запись: -disable-webgl
3. Теперь по этому ярлыку браузер Chrome будет запускаться с отключенным WebGL.

Начало работы с WebGL

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

Эта статья знакомит вас с основами использования WebGL. Предполагается, что вы уже знакомы с математическими основами трёхмерной графики. Данная статья не обучит вас OpenGL.

Подготовка к визуализации в 3D

Первое, что вам понадобится для использования WebGL для визуализации в 3D — это элемент canvas. Фрагмент на HTML ниже содержит элемент canvas и определяет обработчик события onload , которое инициализирует наш контекст WebGL.

body onload="start()"> canvas id="glcanvas" width="640" height="480"> Your browser doesn't appear to support the HTML5 code><canvas>code> element. canvas> body> 

Подготовка контекста WebGL

Функция start() , в нашем JavaScript-коде вызывается после загрузки документа. Её назначение — настройка контекста WebGL и начать отрисовку содержимого.

var gl; // глобальная переменная для контекста WebGL function start()  var canvas = document.getElementById("glcanvas"); gl = initWebGL(canvas); // инициализация контекста GL // продолжать только если WebGL доступен и работает if (gl)  gl.clearColor(0.0, 0.0, 0.0, 1.0); // установить в качестве цвета очистки буфера цвета чёрный, полная непрозрачность gl.enable(gl.DEPTH_TEST); // включает использование буфера глубины gl.depthFunc(gl.LEQUAL); // определяет работу буфера глубины: более ближние объекты перекрывают дальние gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // очистить буфер цвета и буфер глубины. > > 

Первое, что мы здесь делаем — получаем ссылку на элемент canvas, помещаем её в переменную canvas . Очевидно, что если вам не требуется многократно получать ссылку на canvas, вы должны избежать сохранения этого значения глобально, а только сохранить её в локальной переменной или в поле объекта.

Как только мы получили ссылку на canvas, мы вызываем функцию initWebGL() ; Эту функцию мы определяем незамедлительно, её работа — инициализировать контекст WebGL.

Если контекст успешно инициализирован, в gl будет содержаться ссылка на него. В этом случае, мы устанавливаем цвет очистки буфера цвета (цвет фона) на чёрный, затем очищаем контекст этим цветом. После этого, контекст конфигурируется параметрами настройки. В данном случае, мы включаем буфер глубины и определяем, что более близкие объекты будут перекрывать более дальние.

Всё вышеперечисленное необходимо сделать только для первоначальной инициализации. Чуть позже мы увидим работу по визуализации трёхмерных объектов.

Создание контекста WebGL

Функция initWebGL() выглядит следующим образом:

function initWebGL(canvas)  gl = null; try  // Попытаться получить стандартный контекст. Если не получится, попробовать получить экспериментальный. gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); > catch (e) > // Если мы не получили контекст GL, завершить работу if (!gl)  alert("Unable to initialize WebGL. Your browser may not support it."); gl = null; > return gl; > 

Чтобы получить контекст WebGL для canvas, мы запрашиваем у элемента canvas контекст именуемый как «webgl». Если данная попытка завершается неудачно, мы пытаемся получить контекст, именуемый как «experimental-webgl». Если данная попытка также завершается неудачно, мы отображаем окно с предупреждением, позволяющим пользователю понять, что его браузер не поддерживает WebGL. Это всё, что необходимо сделать. На данном этапе мы будем иметь в переменной gl либо значение null (означающее, что контекст WebGL не доступен), либо ссылку на контекст WebGL в котором, мы будем производить отрисовку.

Примечание: Контекст, именуемый как «experimental-webgl» — это временное имя для контекста, используемое на время процесса разработки спецификации. После того, как спецификация будет полностью разработана будет использоваться только имя контекста «webgl».

На данном этапе этого кода достаточно, чтобы успешно инициализировать контекст WebGL, и вы увидите пустой чёрный блок, готовый к заполнению контентом.

Если ваш браузер поддерживает WebGL, то вы можете посмотреть результат выполнения приведённого выше кода, щёлкнув по этой ссылке.

Изменение размера контекста WebGL

Новый контекст WebGL будет иметь возможность задания размеров области отображения в момент получения контекста путём задания высоты и ширины элемента canvas, без использования CSS. Редактирование стиля элемента canvas будет изменять его отображаемый размер, без изменения размеров области отрисовки. Редактирование атрибутов ширины и высоты элемента canvas после создания контекста не будет также изменять число пикселей для отрисовки. Чтобы изменить размер области отрисовки, с которой WebGL производит работу, например, когда пользователь изменяет размер окна на весь экран или когда вам необходимо менять настройки графики в самом приложении, вам необходимо вызвать контекстную функцию WebGL viewport() , чтобы подтвердить изменения.

Чтобы изменить размер области отрисовки контекста WebGL с переменными gl и canvas , использующимися в примере выше:

.viewport(0, 0, canvas.width, canvas.height); 

Элемент canvas будет изменять размер, в случае, если его отрисовать с другими размерами области отрисовки, чем те, что указаны в его стилях CSS, согласно которым он занимает место на экране. Изменение размера с помощью CSS наиболее полезно для сохранения ресурсов, отрисовывая с низким разрешением и позволяя браузеру растягивать полученный результат; сжимать возможно при использовании эффекта избыточной выборки сглаживания ( super sample antialiasing — SSAA) (приводит к менее приемлемым результатам и серьёзным потерям производительности). В большинстве случаев лучше полагаться на множественную выборку сглаживания (MSAA) и на реализацию алгоритмов фильтрации текстур, которые поддерживаются браузером пользователя, чем делать то же самое посредством грубой силы и надеяться, что алгоритм масштабирования изображений, используемый браузером, выдаст красивый результат.

Смотрите также

• Введение в WebGL — Автор: Luz Caballero Ресурс: DEV.OPERA. Эта статья адресована тем, кто хочет узнать что такое WebGL, как работает WebGL и как устроена концепция конвейера визуализации и знакомит с некоторыми библиотеками WebGL.
• Введение в современный OpenGL — Серия хороших статей о OpenGL, написанная Joe Groff. В них дана вводная информация о OpenGL, начиная с истории возникновения и заканчивая важной концепцией графического конвейера. Весь материал сопровождается примерами с демонстрацией работы OpenGL. Если вы не знакомы с OpenGL, этот материал будет вам полезен.

• Следующая статья »

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Что такое WebGL и как его включить. Подробная инструкция для чайников

Все когда — нибудь замечали на посещаемых сайтах 3D-графику, а может , даже вы играли в браузерные игры? Так знайте, что в большинстве своем это стало доступно прямо «в браузере» благодаря технологии WebGL. Примеры использования WebGL можно увидеть повсюду.

Хочется сразу отметить, что данная технология — это не какое-то приложение, которое можно самостоятельно установить и активировать. WebGL — это крос с платформенный программный интерфейс, которы й позволяет браузерам выводить 3D-графику на экран пользователя. Для данной технологии была создана специальная рабочая группа «Khronos», где собраны разработчики со всех популярных браузеров. Именно эт а группа занимается развитием и внедрением WebGL в свои продукты.

Что такое WebGL

• Java Script;
• Java;
• Kotlin и др.

Как включить WebGL

• В Google Chrome — з апустите браузер. Введите в браузерной строке «chrome://flags». В поиске введите «WebGL». Если нужно, то включите.
• Opera. Чтобы включить WebGL , нужно в браузерной строке ввести «OPERA:CONFIG#ENABLE%20WEBGL».
• Мозилла. Введите в строке «force-enabled» и определите значение «true».
• Safari. Нужно пройти в меню разработчика и по ставить там галочку рядом с «Allow WebGL».
• Яндекс.Браузер. В браузерной строке введите «browser://flags». Потом в поиске введите «WebGL». Далее подключите библиотеку, если нужно.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.