Рендер ландшафта в WebGL

http://www.gamasutra.com/blogs/JasmineKent/20130904/199521/WebGL_Terrain_Rendering_in_Trigger_Rally__Part_1.php

Часть первая — Введение


В этой серии постов, я буду рассказывать о технологии рендринга ландшафта в игре «Rally Trigger», базируемой на WebGL.
image

От переводчика: случайно натолкнулся на эту серию статей, которая на данный момент еще только пишется. Нужно сказать — статьи отменные, все отлично разжёвано!

Интересная проблемка

Примечание: производительность JavaScript — тема номер один для разработчиков HTML5 игр. В данной статье рассматриваются последние события в мире asm.js.

WebGL делает процесс кодинга еще более занятным, чем он есть. WebGL — это OpenGL для браузера, обеспечивающий доступ к мощностям GPU, но с некоторыми ограничениями. Важно заметить, что CPU-side во главе с JavaScript, обрабатывает данные куда медленнее, чем нативное приложение на OpenGL. Это связано с тем, что при пересылке данных с процессора на GPU происходит множество проверок, цель которых — сделать веб приложения безопасными. Но как только данные попадают на видеокарту, рендринг протекает быстро.

image

Отличный способ разгрузить процессор (а следовательно загрузить видеокарту), заключается в том, что бы при запуске закешировать статические данные (вершены и текстуры) на GPU и во время рендера как можно меньше вызывать функции отрисовки.

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

Кроме того, существует ограничение количества треугольников, которых GPU сможет отрендрить real time. Запас (прим. пер.: автор использовал хорошее слово — бюджет) треугольников (для рендера ландшафта) будет крайне ограниченным, поэтому мы не можем себе позволить большое количество деталей на всей поверхности земли.

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

Итак, если готовы немного пригрузить CPU — можно использовать один из множества алгоритмов для адаптации детализации местности (LOD) к текущему положению камеры. Алгоритм, по сути, равномерно распределяет работу между процессором и видеокартой.

Решение: Geoclipmapping

(прим. пер.: даже не представляю как правильнее перевести термин)

Как же достичь адаптивной детализации ландшафта имея только статические данные о вершинах? Geoclipmapping и вершинное текстурирование спешат на помощь!

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

Во время рендера мы смещаем эту сетку к текущему положению камеры и грузим нужный сегмент текстуры с картой высот в вершинный шейдер.

Звучит просто, но все немного сложнее, так что в следующей статье я расскажу поподробнее о том как это работает и как на WebGL сделать производительный geoclipmapping с морфингом. Ну а после этого подискусирую о картах высот с разным разрешением и surface shading.

Часть вторая
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 25
  • +3
    Не хватает ссылки на оригинал.
    тераин -> ландшафт
  • +9
    Автор, ты издеваешься? «Тераин», «гомняно», «даже не представляю как правильнее перевести термин».
    Тебе не стыдно такое выкладывать?
    • +8
      «как достичь адаптивный LOD», господи. Не надо таких «переводов».
      • +3
        Учел, исправил, извиняюсь…
        • 0
          «вертексы» туда же.
          • 0
            Извините, но чем «вертексы» не угодили? Множество раз видел как употребляется это слово в русскоязычном обществе, даже не знаю собственно как его перевести, «точка в пространстве»?..
            • +1
              Вы же сами дальше по тексту несколько раз слова «вершины»/«вершинный» употребили.

              (кстати, «вершины», опечатка у вас)
      • –2
        А зачем переводить «surface shading»? Оставьте его как есть, это устоявшийся термин, как мне кажется. В целом гуд, ибо любая статья по WebGL это позитив, ждем продолжения.
        • +1
          В первой половине статьи автор рассказывает о разнице между CPU и GPU. Говоря по-русски, имеется в виду базовая проблема выбора любого, кто хоть раз писал на WebGL — быстро считать мощностями GPU вершинные шейдеры модифицируя этим геометрию, или медленно — но один раз считать на JS матрицу трансформации и передавать ее в компилятор как готовое Uniform-окружение.
          Во второй половине я ничего не понял, что имелось ввиду? Depth-буфер? Суперсемплинг? или что?
          • +1
            Есть такая штука, называется mipmap — атлас с одной и той же текстурой в разном разрешении. Требует в полтора раза больше памяти для хранения, зато разгружает отрисовку далёких объектов. Clipmapping это когда мы эту полутораразмерную текстуру режем на меньше кусочки, чтобы не держать лишнее в памяти. Ну а Geoclipmapping это когда мы проделываем все эти операции не с текстурой а геометрией, нечто вроде LOD, только для больших объектов, которые целиком не умещаются в камеру. Вот пара статей по Geoclipmapping: раз и два.
          • 0
            помимо clipmap'ов еще можно на патчи ландшафт разбить, и патчи, которые не попадают в камеру не рисовать.
            • 0
              Вопрос, а на скрине ландшафт автора или из гугла ???

              В место того чтобы разжевывать нам идею, что CPU плохо GPU хорошо, автору стоило бы напомнить, что такое вершинный шейдер.

              Сетка плохая, на стыках квадов будут дырки.
            • –2
              Разве в DX11 нет аппаратной тесселяции, которая как раз позволяет один раз загрузить все треугольники, а затем отображать с нужным уровнем LOD?
              • 0
                В DX11 есть. В WebGL, который по сути OpenGL ES 2.0, нет. К слову, в ES 3.0 её тоже нет. Возможно, в 4.0 появится.
              • 0
                Это ж презентация Jasmine Kent с onGameStart, она только вчера это рассказывала :) Надеюсь, скоро выложат и видео. Кстати, организовано всё было очень хорошо, и презентации хорошие — как только будут фото и видео, сделаю отчет :)
                • 0
                  Как я понял, вам удалось там побывать? Поздравляю!
                  • 0
                    Спасибо. Мне удалось там отпрезентоваться и со всеми познакомиться :) Конференция прошла на 10 из 10.
                • 0
                  Перевел вторую часть
                  habrahabr.ru/post/194632/
                  Извиняюсь за кривости, пожалуйста помогите исправить косяки перевода!

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