- PVSM.RU - https://www.pvsm.ru -
Публикация содержит часть перевода статьи Джейкоба Сейделина (Jacob Seidelin) о создании трёхмерной игры с применением метода «бросания лучей» — Ray casting [1], на JavaScript и HTML, а также несколько примеров реализации этого метода. Цель публикации — продемонстрировать возможности Ray casting и познакомить читателя с проектом упомянутого автора.
С ускорением производительности браузеров в последнее время стало легче разрабатывать игры на JavaScript сложней, чем крестики-нолики. Мы теперь не сильно нуждаемся во Flash и вполне можем делать достаточно сложные и привлекательные игры, используя элемент сanvas (холст).
Прежде чем взяться за эту тему я тестировал игру Wolfenstien. Сначала была попытка создать самый обычный 3D-движок, используя сanvas, затем я переключился на рейкастинг с использованием DOM [2].
В этой статье я подробно разберу то, как можно создать полноценный псевдотрёхмерный движок, используя рейкастинг. Я добавляю слово «псевдо», поскольку в действительности мы будем просто создавать 2D-карту, похожую на лабиринт из игры Maze [3] (одна из первых 3D-игр в мире. Прим переводчика). Эта карта будет описывать то, как мир будет отрисовываться для игрока. В игре будет вращение только по одной оси, чтобы не усложнять проект. Вертикальные линии будут рендериться именно как вертикальные линии. Игрок не сможет приседать или прыгать. Хотя это можно реализовать достаточно просто. Я не стану сильно углубляться в теоретическую часть, тем более, что в Интернете уже существует прекрасное руководство, охватывающее весь цикл создания трёхмерной графики с использованием методики бросания лучей. Автор этого руководства F. Permadi.
Использование материалов из данной статьи предполагает уверенное владение языком JavaScript, знакомство с элементом HTML5 canvas, а также школьные знания тригонометрии. Некоторые части проекта достаточно полно разобраны в статье. Только учтите, мои разъяснения отдельных участков кода не могут покрыть всех аспектов. Чтобы составить полное представление о проекте и иметь возможность читать комментарии к каждому участку кода, я советую скачать архив [4] себе на компьютер…
Опробовать финальный результат трудов автора. [5].
Для тех, кто не знаком с рейкастингом: особенность этого метода заключается в том, что эффект трёхмерного пространства создаётся не специальными средствами, встроенными в браузер, как в случае с функциями 3d-трансформаций CSS, а средствами самого языка программирования и возможностей HTML5. Весь математический аппарат для представления двухмерных объектов языка разметки в виде псевдотрёхмерных реализуется непосредственно в коде. Простейший движок обычно содержит реализацию трёх базовых методов, необходимых для построения 3D: вращение (rotation), перемещение (translation), пересечение (intersection).
Практически любую базовую реализацию условно можно разделить на три блока: 1) управление камерой — вращение, перемещение. 2) бросание луча — определение расстояния от камеры до каждого пиксела (или более крупного сектора, зависит от реализации), попадающего в поле зрения камеры. 3) отрисовка пространства, находящегося в поле зрения камеры.
Фактически рейкастинг позволяет создать полноценный 3D-движок с чистого листа, не используя готовые библиотеки. В простом случае реализация может занимать 200-300 строчек кода, как например, в движке из этой статьи: «Движок игры от первого лица в 256 строк кода». [6] Кстати, эта статья также является кратким руководством по рейкастингу.
Если вас заинтересовал метод рейкастинга и появилось желание разобраться в нем на простом примере, то, как мне кажется, стоит начать знакомство с наиболее простого проекта. Из всех реализаций на JavaScript, а мне удалось найти около десяти, самый простой — без текстур, дополнительных объектов и даже без вывода 2D карты — можно посмотреть на гитхаб по этой ссылке. [7] Ниже скриншот из проекта:
О более серьезном проекте, в котором применялся Ray сasting, можно познакомиться в этой статье на Хабре. [8]
Статья [9], которая вывела меня на поиски материала об этом методе.
Автор: Ivan Gavryushin
Источник [10]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/3d/268989
Ссылки в тексте:
[1] Ray casting: https://ru.wikipedia.org/wiki/Ray_casting
[2] DOM: https://ru.wikipedia.org/wiki/Document_Object_Model
[3] из игры Maze: https://ru.wikipedia.org/wiki/Maze_War
[4] скачать архив : https://dev.opera.com/articles/3d-games-with-canvas-and-raycasting-part-1/code.zip
[5] Опробовать финальный результат трудов автора.: https://dev.opera.com/articles/3d-games-with-canvas-and-raycasting-part-2/step-4-enemies.htm
[6] этой статьи: «Движок игры от первого лица в 256 строк кода».: http://www.playfuljs.com/a-first-person-engine-in-265-lines/
[7] посмотреть на гитхаб по этой ссылке.: https://github.com/jclg/raycasting.js/tree/master
[8] в этой статье на Хабре.: https://habrahabr.ru/post/123632/
[9] Статья: http://zxpress.ru/article.php?id=8482
[10] Источник: https://habrahabr.ru/post/343016/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.