Ray Tracer в JavaScript


Как только вы подумали, что видели все, что может впечатлить в JavaScript, появляется еще одно безумное приложение … Теперь у нас есть трассировщик лучей, который создает очень реалистичные 3D-сцены прямо в вашем браузере.

Трассировка лучей — один из самых фундаментальных методов 3D-рендеринга в том смысле, что он пытается имитировать способ создания реальной сцены световыми лучами, попадающими в ваш глаз. Единственная разница в том, что трассировщик лучей обычно работает в обратном направлении по отношению к реальным световым лучам — то есть от камеры к сцене. Программа должна проследить путь светового луча от камеры до 3D-модели и посмотреть, во что он попадет. По цвету того, что он попадает, вы можете определить, какого цвета должен быть пиксель, который он пересекает в камере. Это просто в теории, но может быть сложно реализовать, и это настоящий тест для оборудования, на котором он работает.

Кристофер Шедо и Готье Лемуан реализовали, по общему признанию, простой трассировщик лучей в JavaScript. Использование WebGL и нескольких полезных инструментов, таких как glMatrix, Code Mirror и CoffeeScript. Он отображает только четыре типа объектов — плоскость, сферу, цилиндр и код, но принципы, которые он использует, являются общими. Он обрабатывает точечное освещение и текстурированные объекты. Одним из приятных моментов является то, что он использует прогрессивный рендеринг, что делает наблюдение за построением сцены гораздо менее скучным.

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

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

Нет ничего недоступного для браузера?

Быстрый тест показывает, что он работает в Chrome и Firefox, но не в IE9 — по неясным причинам.


Добавить комментарий