Raycasting, Как максимально оптимально проводить эти 2 миллиона пространственных проверок?

Question

[agur_e]

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

Сделал я на js так как это просто проще и делается для того что бы поиграться и понять как это всё робит.
Поле того как я сравнил своё поделие с разными ознакомительными демками каких-то гениев кодинга а просто невероятно удивился насколько время отрисовки моей даже более простой сцены отличается от времени отрисовки кадра программ гениев кодинга и задался вопросом. Как ёптыть так?

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

В каком моменте я допустил ошибку при проектировании сваей программы? помогите пожалуйста, я очень хочу понять 3д и научится делать свои 3д проекты.

вот моя программа - https://github.com/aguree/js-3d-engine

Comments

[Александр Скуснов]

Лучше уж на GPU и на C++ (плюс HLSL для шейдеров). Тогда 60 fps это норма.

[NNn131]

Если ты хочешь именно трассировку лучей, гугли octree, bvh-tree (quad-tree для 2d случая).
Можно заворачивать объекты в сцене в AABB - коробки, сначала с ними поводить проверку на столкновение, и только потом с полигонами.
Для быстрого рендера, но низкого качества лучше использовать другой путь - растеризацию (в играх используется чаще всего).
Если gpu, то используй webgl

[agur_e]

NNn131, вопрос немного в другом.

понятно что на gpu скорость рендеринга вырастет в огромное количество раз.

Я не понимаю почему вот эта демка - https://www.gabrielgambetta.com/computer-graphics-...
рендерится так быстро если способ рендеринга моей программы и этой схож и точно так-же выполняется на cpu?

что такого гениального знает автор этой демки чего не знаю я?

[NNn131]

agur_e, эта демка использует растеризацию. raycasing - совершенно другой метод, который работает медленнее

[agur_e]

NNn131, чем то что сделал я не растеризация? разве растеризация это не переведения например векторного изображения в растровое, или не преобразование 3д объект состоящего из вершин в опять же растровое изображение?
я думал что это просто умное название процесса этих преобразований.

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

[agur_e]

NNn131, вот есть ещё гениальная штука и она тож как то подозрительно быстро робит https://github.com/chetca/raycasting_js

[NNn131]

agur_e,

Я особо не вникал ни в твой код, ни в код скинутых тобой примеров, так что пишу от балды.

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

Это медленно, потому что ты в КАЖДОМ из миллиона(ов) пикселей проверяешь столкновение со всей сценой.

А растеризация работает не так. Здесь ты просто проецируешь вершины полигона на плоскость экрана

Всё что остается сделать - залить цветом треугольник на 2д холсте.
Всё, никаких столкновений, никаких лучей, никаких проверок.

А как проецировать? Ну для этого каждую вершину нужно тупо умножить на такую волшебную штуковину как проекционная матрица. Вот что она делает...


Кста, картинки взяты с отсюда