Пользователь
0,0
рейтинг
21 сентября 2013 в 23:11

Разработка → Рендер ландшафта в WebGL — 2 перевод

Часть вторая


Приветствую в серии статей о WebGL рендринге ландшафта, используемом в игре Trigger Rally!

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

В этой статье я расскажу об структуре данных вершин, а так же о морфинге.
image

От переводчика: в статье много косноязычия и технических неточностей. Помогите их исправить!

Кольца

Geoclipmap рендринг оперирует с квадратными «кольцами» вокруг точки обзора, причем каждое кольцо в два раза больше предыдущего, но имеет в два раза меньшее разрешение. Благодаря этому мы видим плавное уменьшение количества вершин на единицу плоскости, по принципу: дальше — меньше. Внутренне кольцо полностью заполнено и имеет наивысшее разрешение, становясь простой квадратной сеткой треугольников:
image

Повторяющуюся геометрию можно транслировать без особо заметных изменений, но будет казаться, что края немного переместились:



Мы можем использовать это свойство, для того что бы сдвигать геометрию относительно камеры.

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

В общем, нам нужно знать такие параметры вершин:
  • Положение по оси X
  • Положение по оси Y
  • Номер слоя

В Trigger Rally мы используем [X,Y,Z] вектор, а так же получаем номер слоя, в котором находится вершина, согласно ее положению по оси Z.

Зашивание дыр

Каждое кольцо имеет собственный масштаб, кроме того, каждое кольцо сдвигается на величину зависящую от масштаба. Таким образом может возникнуть проблема — одно кольцо транслировано, а ему соседнее нет и между ними образуется зазор:
image

Один из способов решения этой проблемы состоит в том, что бы дополнительно наращивать на край кольца «юбку». Согласно этой статье, юбка собирается из множества маленьких кусочков, для этого используется несколько буферов вершин и сложная процессорная логика. А нам ведь этого совсем не хочется!

При реализации ландшафта в Trigger Rally, я провела часы, пытаясь найти производительный и качественный способ собирать юбку, но увы, безрезультатно.

Но на последнем WebGL Camp Europe я встретила Florian Bösch, и он предложил сделать кольца немного больше, тем самым позволяя им пересекаться.

Сейчас любой более-менее опытный программист графики начнет вопить: «Нет! Нельзя допускать пересечения геометрии! Это расточительно и могут появиться жуткие артефакты!». Но на самом деле все не так плохо — нам действительно придется рисовать немного больше, но если геометрия хорошо подогнана, то это действительно отличное решение!

Морфинг

На границе колец мы имеем геометрию одного разрешения, которая соприкасается с геометрией имеющей размер в два раза меньший. Нам нужно сделать переходные области на краю каждого кольца, в которых геометрия будет плавно «перетекать» из высокого разрешения в низкое, так что бы край одного кольца строго совпадал с краем другого.
image

Вот так каждая вершина должна быть перемещена для соответствия следующему кольцу:
image

Мы должны делать это в вершинном шейдере. Самый просто способ заключается в том, что бы включить вектор морфинга в структуру данных вершины, но, снова таки, Florian предложил кое что получше — использовать модульную арифметику!

Чтобы показать, как это работает, давайте представим данные в виде таблицы:



Таким образом мы можем вычислить вектор морфинга, имея только координаты вершин, воспользовавшись таким GLSL кодом:

vec2 morphVector = mod(position.xy, 2.0) * (mod(position.xy, 4.0) - 2.0);

И это все без дополнительных свойств в структуре вершин! (прим. пер.: снимаю шляпу перед этим Florian)

Дальше будет...

В следующем посте, я расскажу о том, как в Trigger Rally хранится карта высот и как она обрабатывается в вершинном шейдере. Потом мы рассмотрим surface shading в шейдере фрагментов, ну и наконец как эффективнее рендрить окружение.

Спасибо за чтение!
Перевод: Jasmine Kent
@agentx001
карма
4,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (18)

  • –1
    Извените что не в тему, у меня появилась идея создать свою первую веб игру, макимально простую, 2D. Решил создавать на canvas + js, стоит ли мне погружатся в мануалы WebGL, подскажите пожалуйста чем он может быть мне полезен?
    Еще вопрос, я бы хотел что бы моя игра была интерактивна, тоесть если я двигаю елемент в дом моделе, другой пользовательый который открыл эту же страницу видит как я его двигаю, но какими средствами можно это реализовать?
    • 0
      Вам сюда.
      • +2
        Спасибо. Но у меня recovery mode =)
    • +1
      Вы совсем запутались.
      В canvas вы не работаете с DOM. Конечно вы можете комбинировать…
      Работая с canvas, вы можете работать как с 2D, так и с 3D контекстом (WebGL).

      Для создания простой игры вы можете обойтись HTML(5) + CSS(3) + JS и не работать с canvas вообще.
      • 0
        Дом модель с элементом я привел как простой пример интерактивного взаимодейтсвия с другим пользователем =)
        Можно обойтись и без но хочется именно поработать с canvas =)
        Хотя даже начинать без интерактивности нельзя, так как идея игры уже придумана, вот ищу библиотеки который позволяют создать такую возможность.
        Нашел пока только www.meteor.com/ и togetherjs.com/. Но все не то, хотя и похоже.
        • +1
          Я бы порекомендовал Pixi.JS
          • 0
            Я к сожалению пока не нашел ни одной PVP игры создайной на pixi, вы уверены что она позволяет создать интерактивность?
            • 0
              Pixi это просто рендерер 2d/webgl, его можно в любой другой движок вставить.
        • +2
          Посмотрите библиотеку LibCanvas от хабраюзера TheShock.
          libcanvas.github.io/ и поищите статьи по теме на хабре.
          • 0
            У libCanvas порог вхождения выше среднего. Кроме того, эта библиотека буквально навязывает использование другой библиотеки того же автора — Atom.
            • +2
              Не совсем так. Изначально функциональность нынешнего Atom-а была внутри библиотеки LibCanvas. Уже после автор вынес её в отдельную библиотеку, чтобы было удобнее развивать и то, и другое. И, имхо, для большого js-проекта в любом случае нужна какая-нибудь util-библиотека. Prototype, underscore, отчасти jQuery. Или вот Atom.
              А насчёт высокого порога — вам нужна хорошая игра или простота? Но, с другой стороны, я сам ничего серьёзного на ней не делал, но библиотека показалась очень мощной. Поэтому и указал её вам для полноты, вдруг вы не сталкивались. Но, похоже, вы уже смотрели её. Вам виднее, конечно.
              Есть ещё FabricJs, но не знаю, она скорее всего не подойдёт для большинства игр.
              • 0
                Вы меня перепутали с JekFdrv :)
                нужна какая-нибудь util-библиотека. Prototype, underscore, отчасти jQuery. Или вот Atom.

                Если уж на то пошло underscore вообще из другой песни, а без библиотеки для эмуляции классов (ИМХО) можно прекрасно обойтись.
                но библиотека показалась очень мощной.

                Ну, что есть, то есть. Отличная архитектура, плагины.
                FabricJs

                Мне она показалась не очень удобной, да и смахивает она чем то на Flash API.
                • +2
                  ой, точно, прошу прощения… Ну, надеюсь, JekFdrv тоже прочитал моё сообщение.
                  Насчёт FabricJs — он больше подходит для рисования на канвасе, для создания интерактива на странице. В общем-то, флэш, вы правы. Тоже нужная вещь, просто инструмент для другой задачи.
                  Следили за интересной чередой реализации солнечной системы на canvas-е?
                  habrahabr.ru/post/163703/ — «История одного хабраспора»
                  habrahabr.ru/post/163893/ — то же самое на LibCanvas
                  habrahabr.ru/post/163893/#comment_5852425 реализация на FabricJs
                  • 0
                    Прочел, спасибо! =)
                    test.elhsmart.net.ru/index.html
                    Аж руки зачесались самому что-то создать, очень интересно.
                    Предвкушаю свои без сонные ночи над будущим проектом =)
        • 0
          см. ниже
    • 0
      Смотри playir.com, многообещающий проект. Мультиплэйер и рилтаймовое редактирование карты.
  • 0
    Название не соответствует содержанию.
    Всё что пока описано — именно к WebGL отношения не имеет, относится к 3D-графике в целом и немного к OpenGL.
  • +1
    Почему выбрали горизонтальный морфинг вершин на границе LOD'ов? На мой взгляд, вертикальный смотрелся бы значительно лучше.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.