Как избавиться от эффекта рыбьего глаза?

Question

[Afafks123132132165]

Как избавиться от эффекта рыбьего глаза уже все попробывал.Код внизу ссылка на код.
https://jsfiddle.net/Afafks/cfjwxbL2/

Comments

[RAX7]

https://www.youtube.com/watch?v=vYgIKn7iDH8&t=1364s

Answer 1

[Роман]

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

Чтобы это исправить вместо данного расстояния вам надо использовать расстояние от точки пересечения до перпендикуляра к направлению взгляда.
Смотрите сноску в верхнем правом углу на рисунке.
Где:
A - камера
B - точка пересечения луча с преградой
Ось Y - направление взгляда
Ось X - перпендикуляр к направлению взгляда
α - угол между текущим лучем и осью x
R - расстояние от камеры до точки пересечения луча с преградой
l - расстояние от точки пересечения луча с преградой до перпендикуляра к направлению взгляда

Вот пример https://jsfiddle.net/lastuniverse/0t1jo8cr/4/ , в нем есть некоторые искажения, возникающие из-за неправильного расчета length. Дело в том, что ваш алгоритм не находит точные координаты пересечения луча с гранью блока, а находит некую точку внутри блока, что так же добавляет искажения.

Вот еще вариант https://jsfiddle.net/lastuniverse/6nrsL28g/8/ (переделал из ответа на вопрос Почему данный код работает неправильно? от товарища twobomb ). В нем эффект рыбьего глаза полностью нивелирован (смотрите функцию drawGame(...) ). Как бонус - данный пример работает в несколько десятков раз быстрее, и позволяет ставить блоки нестандартного размера)))

Comments

[Afafks123132132165]

Тоесть Х это угол на который я смотрю плюс 90 градусов да?

[Роман]

Afafks123132132165, Да, но только учтите что не +90 а иногда и -90.

[Роман]

Afafks123132132165, вот, сделал за вас https://jsfiddle.net/lastuniverse/0t1jo8cr/4/

[Afafks123132132165]

Роман, Думал будет лучше но стало как то странно блин

[Afafks123132132165]

Роман, Или мой движок неправильный наверно это

[Роман]

Bavashi, Afafks123132132165, правда, накосячил я, исправляю))))

[Роман]

Bavashi, Afafks123132132165, ну вот как то так))))

https://jsfiddle.net/lastuniverse/6nrsL28g/3/

[Роман]

Bavashi, Afafks123132132165, вот немого исправил
https://jsfiddle.net/lastuniverse/6nrsL28g/6/

скорость кстати увеличена в разы

[Роман]

Bavashi, Afafks123132132165, добавил убогонькое текстурирование)))
https://jsfiddle.net/lastuniverse/6nrsL28g/8/

[Afafks123132132165]

Роман, Да ты профи.Кстати как ты добился того что даже на маленьких расстояних цвет начинает темнеть?

[Роман]

Afafks123132132165, работа с цветами полностью скопирована у вас, разве что максимальная яркость поставлена не 256 а 160. В начале (почти сразу после вставленной как base64 текстурой) есть функция, которая превращает карту в набор блоков. Установка цвета блоков (в зависимости от того, каким символом еа карте обозначена стена) в ней.

[Afafks123132132165]

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

[Роман]

Afafks123132132165, для определения яркости участка стены и у вас и у меня используется расстояние до этого участка. В вашем случае расстояние length вы считаете как 300 минус количество итераций, понадобившихся лучу чтобы добраться до стены.
В моем варианте расчитывается расстояние как квадратный корень из суммы квадратов dx и dy
А далее от расстояния расчитывается цвет. Строчки 69, 175, 176, 177 и 187

[Роман]

Bavashi, из-за того, что нельзя получить цвета с точек у картинок, загруженных с посторонних ресурсов, отличных от jsfiddle (ограничения браузеров связанные с безопасностью) то все текстуры для примеров на jsfiddle придется добавлять прямо в код как base64, что негативно сказывается как на размере текстур так и на их количестве.

[Роман]

Bavashi, не знаю как у вас, а у меня первыми играми были:

дюна 2

принц персии 1

варкрафт 1

Ну и фольфенштейн )))


Так что я точно знаю что мое поделие до игры не дотягивает)))