Если вы помните запуск Windows 95, то вы можете вспомнить Hover . Если бы у вас было какое-то свободное время, возможно, вы даже были хороши в этом, как этот парень ! Все началось с бесплатной игры на оригинальном установочном компакт-диске Windows 95, чтобы показать, что возможно на ПК с пакетом Windows Games SDK, то есть передовой мультимедиа и 3D-графикой.
Так что есть лучший способ продемонстрировать новые возможности 3D-графики в современных браузерах, таких как Internet Explorer 11 — с использованием WebGL и HTML5 — чем вернуть небольшую ностальгию!
И вы можете скачать наш шаблонный проект WebGL и создать свой собственный 3D шейдер. Игра началась!
Ввод Hover в браузер с HTML5 и WebGL
Ховер был одним из первых 3D игр, которые работали на Windows. Несмотря на то, что его мультимедийные возможности были сложными в то время, по современным меркам это довольно простая игра. Это делает его отличным примером, чтобы помочь вам изучить основы WebGL и даже найти практическое применение для вашего проекта. Мышление в 3D также может сильно отличаться от написания 2D-игры. Если вы интересуетесь графикой и передовыми сценариями, которые обеспечивает 3D, то такое мышление может быть очень увлекательным.
Хотя WebGL является графической библиотекой общего назначения, она наиболее известна своими 3D-возможностями, и до ее появления не было никакого способа рендеринга реальных 3D-сцен в браузере без использования плагина. Помимо игр, 3D можно использовать различными способами для улучшения обучения и понимания веб-страниц и приложений.
WebGL предоставляет разработчикам доступ к сложным 2D и 3D возможностям современного графического оборудования (графического процессора вашего компьютера) непосредственно из JavaScript. Это позволяет создавать всевозможные впечатления в Интернете без использования плагинов, включая такие игры, как Hover! Что еще более важно, WebGL становится мейнстримом и с его введением в Internet Explorer 11 , он имеет некоторый уровень поддержки во всех основных браузерах . Тем не менее, важно использовать функцию обнаружения, чтобы убедиться, что у ваших пользователей есть браузер, который поддерживает WebGL — сканирование на modern.IE поможет вам убедиться, что вы не используете обнаружение браузера на своих сайтах.
Давайте начнем
Создавая Мир
В оригинальной игре Hover большая часть 3D была в форме стен и полов — плоских объектов с перспективой, примененной к ним. Объекты, сами поделки, флаги и другие «пикапы», такие как пружины или стоп-сигналы, были визуализированы как обычные двухмерные изображения поверх трехмерного мира. Эти 2D-графики были масштабированы и расположены в соответствии с 3D-игрой, но к ним не было применено никакой реальной 3D-обработки.
Современные 3D-сцены, в том числе новый Hover, состоят из моделей, текстур и освещения — они отображаются, когда на них указывает виртуальная «камера». Вот разбивка каждого из них:
Модели — это определения физических объектов в сцене. Например, в Ховере мы создали модели для каждого ремесла и всех пикапов. Вот как выглядели эти модели до того, как мы применили текстуру или освещение:
Если основной единицей обычной 2D-графики является пиксель, основной единицей 3D-модели является многоугольник, обычно треугольник в трехмерном пространстве. Когда вы размещаете достаточное количество этих многоугольников рядом друг с другом, появляется трехмерный объект (так же, как многие пиксели объединяются для создания 2D-изображения). Швы между треугольниками называются вершинами (или «вершина» в единственном числе), и мы еще немного упомянем их.
Текстуры — это изображения или цвета, которые «обертывают» модели. Они рисуют жизнь на модели, чтобы она выглядела более реалистичной. Вот пример текстуры, которую мы используем при рендеринге одного из ремесел в игре:
Если вы посмотрите внимательно, вы увидите, как это изображение текстуры будет соответствовать геометрии корабля «Чикаго» из игры. Вы также можете заметить, что текстура содержит цвет для ремесла, но также некоторые детали, такие как тени и, в некоторых случаях, цветовые вариации, чтобы придать ремеслу более мягкое «песчаное» ощущение.
Наконец, после того, как вы поместите модели в сцену и примените их соответствующие текстуры, вы доработаете 3D-эффект, поместив свет в сцену. Некоторое освещение довольно простое. Например, рассеянный свет освещает всю сцену примерно равномерно. Вы также можете создавать прожекторы, направленные источники света и точечные источники света, которые могут по-разному освещать объекты на сцене.
Рендеринг и шейдеры
Теперь, когда вы определили сцену, вам нужно ее визуализировать, преобразовав определение 3D-сцены в пиксели, которые составляют 2D-изображение, которое вы видите на экране. Это математически сложная операция, но она очень хороша в современных графических процессорах! Фактически, анимация с высокой частотой кадров в игре, такой как Hover, означает, что сцена визуализируется и воспроизводится до 60 раз в секунду.
Поскольку этот код должен быть очень быстрым, некоторые из них выполняются непосредственно на GPU. Этот код называется шейдером. Все объекты, добавленные в 3D-сцену, в конечном итоге обрабатываются двумя специальными шейдерами: вершинным шейдером и фрагментным шейдером.
Вершинный шейдер работает с каждой вершиной в сцене и преобразует вершину из трехмерного пространства в двухмерное пространство для рендеринга на экран. Помните, что вершина определяет границу между двумя треугольниками в модели. Пользовательские вершинные шейдеры могут трансформировать то, как выглядит граница, возможно, деформируя ее, чтобы сгладить поверхность или создать реалистичные эффекты, такие как водная рябь или волны.
Затем фрагментный шейдер (иногда называемый пиксельным шейдером ) работает с каждым пикселем в сцене и может выполнять окончательные преобразования цвета для усиления эффектов освещения или создания других эффектов. Фрагментный шейдер в конечном итоге определяет, какой цвет будет иметь этот отдельный фрагмент или пиксель!
Шейдеры уникальны в браузере, потому что они выполняются непосредственно в графическом процессоре, а не в движке JavaScript браузера. Это доставляет им массу удовольствия и дает вам много сил. В Hover вы можете увидеть эффект продвинутого шейдера при включении Hypercolor в раскрывающемся списке параметров.
Параметры раскрывающегося списка:
Hypercolor вкл / выкл:
Создайте свой собственный шейдер!
Начинать с WebGL может быть немного пугающе, и, как и многие другие вещи, некоторые реальные забавы начинаются, как только вы попадаете в процесс. Чтобы помочь вам присоединиться к вечеринке, мы создали шаблонный проект Hover 3D с уже настроенной сценой и включили пример пользовательского шейдера, чтобы вы могли сразу перейти к самой интересной части! Так что скачайте его и поразите своих друзей, когда вы скажете им, что потратили день на написание пользовательского кода шейдера!
Одно замечание: поскольку некоторые части приложения WebGL выполняются непосредственно в графическом процессоре, у него есть некоторые уязвимости, и в результате вы можете загружать ресурсы WebGL только из того же домена, что и остальная часть сайта (т. Е. Оно защищено CORS ). Вы можете запустить этот код локально, но вам нужно будет настроить локальный веб-сервер. Сожалею! Оказывается, что для написания шейдеров нужно быть немного хардкорным.
Узнайте больше о WebGL
В Интернете есть много ресурсов для изучения WebGL. Вот несколько наших любимых:
- BabylonJS — новая структура, которая помогает упростить WebGL + коллекция экспериментов, написанных для демонстрации поддержки кросс-браузер
- ThreeJS — популярная 3D библиотека и коллекция
- LearningWebGL — отличный набор из 101 проектов, из которых можно поучиться
- WebGL на MSDN — новинка для Internet Explorer 11
- Спецификация WebGL
- Рабочая группа WebGL