Webgl что это и как установить
Как включить WebGL в Chrome
Для обеспечения комфортной работы браузеров используются десятки библиотек и небольших утилит. На этом держится то, что мы называем глобальной сетью. Однако не все они в равной степени безопасны для персональных данных, а кто-то заслужил доверие. Поэтому сегодня мы поговорим о том, как включить WebGL в Google Chrome. Также в процессе повествования рассмотрим наиболее простой способ достижения желаемого.
Вводная информация
WebGL – это библиотека для разнопланового ПО, расширяющая возможность языков программирования в сфере веб-программирования и администрирования. К примеру, JavaScript, для которого становится проще создавать интерактивную графику под патронажем любого адекватного браузера.
Сегодня за некоммерческое использование продукта отвечает Khronos Group. Несмотря на не самую высокую популярность, библиотека востребована среди разработчиков.
Поэтому давайте не будем терять время зря и преступим к непосредственной теме статьи.
Активация
Для включения WebGL достаточно выполнить несколько простых шагов инструкции, представленной ниже:
На этом активация ВебГЛ в Гугл Хроме завершена.
Подведем итоги
Перед вами пока единственный способ включить данную технологию. Она спрятана от рядовых пользователей и перемещена на страничку «Экспериментальные функции», которую просто так открыть не получится. Но если действовать по нашей инструкции, то в ходе выполнения процедуры никаких сложностей не возникнет.
«WebGL Beginner’s Guide» Глава 1: Начиная работать с WebGL
Хочу начать вольный перевод отличной книги «WebGL Beginner’s Guide», которая, на мой взгляд, будет интересна не только новичкам, но и более продвинутым разработчикам.
Системные требования
Что представляет собой WebGL
Структура WebGL приложения
Создание HTML5 canvas
Что только что произошло?
Мы только что создали простую веб-страницу с содержащимся в ней холстом. Этот холст будет содержать наши 3D-приложения. Давайте разберем некоторые важные элементы, представленные в этом примере.
Определение CSS-стиля для границы
Это кусок кода, который определяет стиль холста:
Доступ к контексту WebGL
Что же только что произошло?
Используя переменную JavaScript (gl), мы получили ссылку на контекст WebGL. Давайте вернемся и проверим код, который позволяет получить доступ к WebGL:
Метод холста getContext дает нам доступ к WebGL. Все, что нам нужно, это указать имя контекста, которое может быть разным у разных производителей. Поэтому мы сгруппировали все возможные имена контекста в массив names. Крайне важно проверить спецификацию WebGL (вы можете найти ее в интернете) на любые изменения, касающиеся соглашения об именовании.
getContext так же может обеспечить доступ к 2D-графике HTML5 при использовании 2D –библиотеки, в зависимости от имени контекста. В отличие от WebGL это соглашение об именах является стандартным. API 2D-графики HTML5 является полностью независимым от WebGL и выходит за рамки этой книги.
Машина состояний WebGL
Загружаем 3D-сцену
До сих пор мы видели как можно получить и настроить контекст WebGL; следующим шагом является обсуждение объектов, освещения и камеры. Однако, почему мы должны ждать, чтобы посмотреть на возможности WebGL? В этом разделе мы посмотрим как выглядит WebGL-сцена.
Виртуальный автосалон
Резюме
В этой главе мы рассмотрели четыре основных элемента, которые всегда присутствуют в любом WebGL-приложении: холст, объект, свет и камера.
Мы узнали, как добавить на веб-страницу HTML5 canvas, как установить его ID, ширину и высоту. После этого мы написали код, который создавал контекст WebGL. Мы увидели, что WebGL работает как машина состояний, как таковая, мы можем запросить любую из своих переменных, использую функцию getParameter.
В следующей главе мы узнаем, как определить, загрузить и отрисовать 3D-модель в WebGL-сцене.
Ресурсы к этой статье вы можете скачать по ссылке
Знакомство с WebGL
Введение
Статья создана с целью показать основные действия, необходимые для отображения 3d в современном браузере, используя технологию WebGL. Для достижения цели рассмотрим задачу построения нескольких линий в трехмерном пространстве.
1. WebGL-контекст
WebGL контекст возможно получить из DOM-элемента canvas, вызвав метод getContext(“experimental-webgl”). Следует заметить, что Khronos Group рекомендует (https://www.khronos.org/webgl/wiki/FAQ) для получения контекста WebGL использовать следующий способ:
При успешном получении контекста объект gl имеет методы, названия которых очень похожи на функции OpenGL ES. Например, функция clear(COLOR_BUFFER_BIT) для WebGL будет gl.clear(gl.COLOR_BUFFER_BIT), что очень удобно. Но следует помнить, что не все функции WebGL имеют такой же синтаксис, как и функции OpenGL ES 2.0.
2. Шейдеры
Шейдерная программа является неотъемлемой частью построения изображений с помощью WebGL. Именно через нее задается положение и цвет каждой вершины наших линий. В нашей задаче используется два шейдера: вершинный и фрагментный. При построении линий в трехмерном пространстве вершинный шейдер отвечает за положение вершин в пространстве, основываясь на значениях видовой матрицы и матрицы перспективной проекции. Фрагментный шейдер используется для вычисления цвета наших линий.
Вершинный шейдер
Фрагментный шейдер
То, что определено после «uniform» является общим для всех вершин. Здесь это матрицы преобразования: видовая и перспективная. То, что определено после «attribute» используется при вычислении каждой вершины. Здесь это положение вершины и ее цвет. После «varying» определяем переменную, которая будет передана из вершинного во фрагментный шейдер. Результат вычисления положения присваиваем переменной gl_Position, цвета — gl_FragColor.
3. Модельно-видовая матрица и матрица перспективной проекции
Обе матрицы имеют размер 4х4 и используются для расчета отображения трехмерных объектов на двумерную плоскость. Их различие в том, что видовая матрица определяет, как объекты будут выглядеть для наблюдателя, например, при изменении его положения, а матрица проекции изначально задает способ проецирования.
В нашей программе значения матрицы проекции задаются при вызове функции gluPerspective на этапе инициализации, в дальнейшем эта матрица не меняет своих значений. Функция gluPerspective не является стандартной, ее мы определили сами. Ее аргументы: fovy, aspect, zNear, zFar. fovy — область угла просмотра по вертикали в градусах; aspect — отношение ширины области просмотра к высоте; zNear — расстояние до ближней плоскости отсечения (всё что ближе — не рисуется); zFar — расстояние до дальней плоскости отсечения (всё что дальше — не рисуется).
Для задания значений модельно-видовой матрицы можно использовать несколько подходов. Например, создать и использовать функцию gluLookAt ( camX, camY, camZ, tarX, tarY, tarZ, upX, upY, upZ) – аналог функции для OpenGL, которая принимает в качестве аргументов координаты положение камеры, координаты цели камеры и up-вектор камеры. Другой способ, это создание и использование функций glTranslate, glRotate, glScale, которые производят сдвиг, вращение, масштабирование относительно наблюдателя (камеры). Для первичного определения положения камеры можно использовать gluLookAt, а для последующих преобразований использовать glTranslate, glRotate, glScale. Так или иначе, эти функции лишь изменяют значения одной и той же модельно-видовой матрицы. Для удобства вычисления матриц можно использовать библиотеку sylvester.js, что мы и будем делать.
Теперь, когда нашли способ изменять значения обеих матриц, рассмотрим их передачу программе шейдеров. В нашем вершинном шейдере для модельно-видовой матрицы мы используем переменную «mvMatrix». Чтобы передать этой переменной значения матрицы, нам нужно сначала получить ее индекс в программе. Для этого используем функцию loc=gl.getUniformLocation ( shaderProgram, name ), которая является стандартной. Как несложно догадаться, первый аргумент – переменная, указывающая на программу шейдеров, которая получена на втором этапе, а аргумент «name» — имя переменной, которой мы хотим передать значение, в нашем случае name= «mvMatrix». Теперь, получив индекс, используем функцию gl.uniformMatrix4fv ( loc, false, new Float32Array(mat.flatten())) для передачи значения матрицы mat. Аналогично, получаем индекс и устанавливаем значение для матрицы проекции. Следует помнить, что видовую матрицу в шейдерной программе нужно обновлять всякий раз при изменении ее значений, чтобы они вступили в силу.
4. Буферы данных
Использование буферов в WebGL обязательно. Положение каждой точки и ее цвет будем хранить в двух буферах. Рассмотрим фрагмент кода, выполняющий всю работу для буфера, хранящего координаты точек, между которыми будем рисовать прямые.
Здесь verticies – массив координат точек линий. Координаты идут по 6 штук, первые 3 из которых – x-, y-, z-координата начала линии, следующие, соответственно, конца. vPosLoc – это индекс атрибута «aVertexPosition» в шейдерной программе. Т.к. в нашей программе были явно заданы индексы с помощью gl.bindAttribLocation (shaderProgram, loc, shadersAttrib) на этапе сборки шейдерной программы, то получать их еще раз не нужно. Если бы такого не было, то следует получить индекс, используя команду «vPosLoc = getAttribLocation(shaderProgram, «aVertexPosition»)». Аналогичные действия проводятся и со вторым буфером, отличаться будет данными (вместо verticies массив цветов) и индексом в шейдерной программе (вместо vPosLoc).
5. Рисуем
Очистка буфера цвета или, проще говоря, задание фона произведем стандартными командами
Теперь выполним рисование
Первый аргумент этой функции говорит, что будем рисовать именно линии, второй – индекс в буфере, с которого начнем рисование, drawArrayLength – количество элементов для рисования. Т.к. мы в буфер передаем координаты вершин из массива verticies, то
Если у нас изменились прямые, то выполняем шаги 4, 5 для перерисовки. Если у нас изменилось положение камеры, то выполняем шаг 3 и шаг 5.
Заключение
Задача построения прямых линий взята не с потолка. Есть программа, которая решает систему дифференциальных уравнений и строит результат в 3d, используя OpenGL. Было решено перенести программу на php и отображать результат, используя WebGL. Для решения задачи об отображении в трехмерном пространстве прямых были изучены современные engine из списка (http://ru.wikipedia.org/wiki/WebGL): WebGLU, GLGE, C3DL, Copperlicht, SpiderGL и SceneJS. Для этого был создан интерфейс, позволяющий универсализировать общение основной программы со сторонними движками. Результатов удалось добиться с WebGLU, C3DL. В других либо отсутствует простой способ построения линии, либо он неоптимальный. В одном из них функция линии задокументирована, но на форуме проекта дали понять, что использовать ее не удастся, и предложили, рисовать ее многоугольниками.
К сожалению, при использовании C3DL еще не удалось оптимизировать процесс, что привело к низкому значению fps. При работе с WebGLU была допущена ошибка, которая так же повлияла на значение fps. Это заставило написать свой движок, который сейчас и используется. Я ни в коем случае не хочу упрекнуть сторонние движки, они созданы для более широкого круга задач, чем простое рисование линий.
Пару слов о браузерах. Тестировалось на Firefox 4 beta 8, Chrome 8 с –enable-webgl. На данной задаче Firefox показывал значение fps выше Chrome в 1,5-2 раза. При обновлении Chrome до beta 9 показатели не изменились. Показатели fps не изменились и при обновлении Firefox beta 8 до beta 9, разве что в консоли стало больше непонятных ошибок и стало некорректно отображаться сцена с использованием WebGLU.
Возможности технологии WebGL и как ее включить в браузерах
Современные интернет ресурсы требуют современных технологий, поэтому работа в этом направлении идет полным ходом и не останавливается. Любой крупный и не очень сайт использует сейчас целый набор средств по разработке и модернизации. Они могу включать:
По праву, JavaScript можно назвать одним из самых важных компонентов этого списка. Именно на его основе написаны такие инструменты, как AJAX, jQuery, WebGL.
Что такое WebGL
WebGL является кроссплатформенным программным интерфейсом приложения для браузеров, позволяющий им отображать 3D графику. Это один из немногих достойных конкурентов Canvas от HTML 5. Разработчики практически всех ведущих и популярных браузеров состоят в группе Khronos и вместе развивают WebGL и реализуют его в связи с особенностями своих приложений.
Основные функции
Сегодня WebGL применяется для:
Это средство не волшебная палочка, нельзя сказать ему что сделать или, пользуясь интерфейсом пользователя, собрать сцену «руками». WebGL отображает точки, линии и полигоны на основе написанного кода. Чтобы получить точки, линии и полигоны, траектории их движения, освещение, тени и так далее, используются математические формулы.
Любые данные, используемые для отображения элементов должны быть переданы в графический процессор. Существует 4 способа для получения шейдером этих данных:
Не углубляясь в детали стоит отметить, что для работы всех этих средств нужен API, который может не поддерживаться некоторыми старыми браузерами или попросту быть отключенным. В обоих случаях отобразить WebGL содержимое не получится.
Поддерживаемые версии браузеров
Технология поддерживается следующими версия браузеров:
В случае, если у обозревателя нет поддержки технологии или она выключена, пользователь получить подобное сообщение: «your browser does not support webgl», что в переводе означает – «Ваш браузер не поддерживает WebGL».
Как включить WebGL?
В большинстве приложений технология включена по умолчанию, однако может случиться так, что при удалении каких-либо настроек или их очистке, пункт с WebGL будет сброшен. Следующие подразделы содержат инструкции по его активации в наиболее популярных браузерах.
Google Chrome
Для включения WebGL в Google Chrome необходимо:
Яндекс.Браузер
Так как Яндекс.Браузер создан на основе Chromium, то для него будут работать все те же действия, что и для Google Chrome. Необходимо:
Опера
Для включения компонента в Опере необходимо:
Mozilla Firefox
Для включения необходимо:
Safari
Для активации необходимо:
Проблемы с драйверами
Если вышеописанные способы не помогают, то следует обновить драйвера видеокарт или заменить сами карты, если они устарели и уже не могут поддерживать аппаратное ускорение и отображение графики в современных браузерах.
WebGLFundamentals.org
Технически, вам не нужно ничего, кроме браузера, чтобы начать разработку на WebGL. Зайдите на jsfiddle.net, jsbin.com или codepen.io и просто начните выполнять уроки.
Предположим, что вы хотите запускать и редактировать примеры с этого сайта. Для начала нужно скачать сам сайт по этой ссылке.
Распакуйте архив в какую-нибудь директорию.
Используем небольшой и простой веб-сервер
Вот один из очень простых серверов с интерфейсом под названием Servez.
Если вы используете браузер Chrome, есть ещё более простое решение. Вот небольшое расширение для chrome, которое выполняет роль веб-сервера
Просто укажите ему директорию с распакованными файлами, кликните на «Start», затем откройте в браузере страницу http://localhost:8080/webgl/ и найдите необходимый пример.
Если вы предпочитаете командную строку, то можно использовать node.js. Скачайте и установите его, затем откройте командную строку / консоль / терминал. На Windows установщик добавит «Командную строку Node», которую и нужно использовать.
Затем установите servez командой
Для OSX используйте
А после установки запустите
На экране должно показаться что-то вроде
Без указания пути servez будет использовать текущую папку.
Использование инструментов разработки браузера
Большинство браузеров имеют встроенные инструменты разработки.
Посмотрите, как их можно использовать. В худшем случае всегда можно глянуть в консоль JavaScript. Если существует какая-то проблема, то скорей всего будет и сообщение об ошибке. Посмотрите внимательно на это сообщение, оно даст подсказку, где искать проблему.
Помощники WebGL
Также существуют разнообразные помощники / инспекторы для WebGL. Вот один из них для Chrome.
Они могут стать полезными, а могут и не стать. Большинство из них предназначены для анимированных сэмплов, они могут захватывать кадр и показывают все вызовы WebGL, которые формируют этот кадр. Они отлично подойдут, если уже что-то работает или если что-то работало и внезапно сломалось. Но от них мало проку, если у вас проблемы при инициализации, или если вы не используете анимацию, где нужно отрисовывать каждый кадр. Всё же они могут быть очень полезными. Я часто проверяю uniform-переменные при вызове отрисовки. Если я вижу кучу NaN (NaN = Not a Number, то есть Не число), я проверяю код, отвечающий за установку этих переменных, и нахожу ошибку.
Инспектор кода
Также помните про инспектор кода. Мы можете запросто просмотреть исходный код.
Даже когда вы не можете кликнуть правой кнопкой на странице, или если код находится в отдельном файле, можно всегда просмотреть код через инструменты разработчика.
Приступаем к работе
Надеюсь, это поможет вам начать работу. Теперь обратно к урокам.