Как то так получилось, что рассматривая различные browser demo последних лет, не мог не заметить, что все повально стали использовать canvas.
Вот и недавно, просматривая хабр, наткнулся на wolf3d на джаваскрипте через canvas (от того же автора что и mario). (в ссылке буквы c и p русские, но это не я такой, а хабр)
А ведь на самом деле многие эффекты можно сделать без использования этого замечательного тэга.
А ещё, используя эти идеи, в некоторых случаях можно отказаться от флэша, тем более что, в отличии от канваса, это всё прекрасно работает в IE (доля рынка которого, пока ещё, очень велика).
Возьмём, к примеру, тот же Wolf3D.
Технология рендера основывается на RayCasting.
Вкратце: изображение формируется из можества столбцов, причём для каждого стобца из точки обзора «испускается» луч и «доходит» до стены. Высота столбца обратно пропорциональна длине луча.
Для нас особенно важно то, что изображение формируется из множества вертикальных линий.
Каждая эта линия — это какой-либо столбец из текстуры, ужатый (или наоборот, растянутый) до нужной высоты.
А браузер очень хорошо умеет эти самые картинки увеличивать и уменьшать.
Осталась одна проблема — выделить из картинки нужный столбец. А точнее, никакая это не проблема, так как это обычные css-sprites, по-этому делаем (например) так:
и получаем этот самый столбец.
А если применить raycasting + css-sprites, то может получится интересная штука, которая работает во всех браузерах
(ну почти :), тестироваось в IE6, IE7, FF2, FF3, Opera и Safari).
Замечание для пользователей IE: эксплорер как-то уж очень долго в первый раз отрисовывает элементы, поэтому при загрузке страницы наблюдаются интересные артефакты (кстати, пока артефакты артефактятся, уже вполне себе можно бегать по карте).
Пример можно развить, добавив туда спрайты (лампы, монстры и т.д), причём в отличие от отрисовки вручную (с использованием canvas-а),
не придётся отрисовывать их по столбцам, сравнивая каждый столбец с z-index-ом уже отрисованного. Вместо этого можно установить одноимённое css свойство,
и за нас это будет делать сам браузер.
Применение технологии, естественно, не ограничено созданием шутеров :).
Есть только одна вешь которую делать совершенно не нужно — эмулировать canvas посредством выстроеных в таблицу div-ов. Это будет жутко тормозить (в особенности в IE).
P.S. Технология, кстати, не новая. В первый раз я её увидел в browser demo тов. gasman-a года два назад.
Update: Эмуляция canvas-а для IE тормозит ещё больше чем картинки (сами посмотрите). По этому если требуется кроссбраузерность, то либо флэш, либо картинки.
Update 2: В комментах часто упоминают про бесполезность изобретания велисипеда в виде 3d на канвасе/картинками/дивами. Однако замечу, что мною не ставилась цель написать 3d движок, а всего лишь показать использование интересного метода. Просто так сложились звёзды, что на момент написания поста я был под впечатлением wolf3d на канвасе.
Вот и недавно, просматривая хабр, наткнулся на wolf3d на джаваскрипте через canvas (от того же автора что и mario). (в ссылке буквы c и p русские, но это не я такой, а хабр)
А ведь на самом деле многие эффекты можно сделать без использования этого замечательного тэга.
А ещё, используя эти идеи, в некоторых случаях можно отказаться от флэша, тем более что, в отличии от канваса, это всё прекрасно работает в IE (доля рынка которого, пока ещё, очень велика).
Возьмём, к примеру, тот же Wolf3D.
Технология рендера основывается на RayCasting.
Вкратце: изображение формируется из можества столбцов, причём для каждого стобца из точки обзора «испускается» луч и «доходит» до стены. Высота столбца обратно пропорциональна длине луча.
Для нас особенно важно то, что изображение формируется из множества вертикальных линий.
Каждая эта линия — это какой-либо столбец из текстуры, ужатый (или наоборот, растянутый) до нужной высоты.
А браузер очень хорошо умеет эти самые картинки увеличивать и уменьшать.
Осталась одна проблема — выделить из картинки нужный столбец. А точнее, никакая это не проблема, так как это обычные css-sprites, по-этому делаем (например) так:
<div style="position:absolute;top:0px;left:0px;width:1px;height:256px;overflow:hidden;">
<img src="wall.png" style="width:256px;height:128px;position:absolute;top:64px;left:-32px;" alt="" />
</div>
и получаем этот самый столбец.
А если применить raycasting + css-sprites, то может получится интересная штука, которая работает во всех браузерах
(ну почти :), тестироваось в IE6, IE7, FF2, FF3, Opera и Safari).
Замечание для пользователей IE: эксплорер как-то уж очень долго в первый раз отрисовывает элементы, поэтому при загрузке страницы наблюдаются интересные артефакты (кстати, пока артефакты артефактятся, уже вполне себе можно бегать по карте).
Пример можно развить, добавив туда спрайты (лампы, монстры и т.д), причём в отличие от отрисовки вручную (с использованием canvas-а),
не придётся отрисовывать их по столбцам, сравнивая каждый столбец с z-index-ом уже отрисованного. Вместо этого можно установить одноимённое css свойство,
и за нас это будет делать сам браузер.
Применение технологии, естественно, не ограничено созданием шутеров :).
Есть только одна вешь которую делать совершенно не нужно — эмулировать canvas посредством выстроеных в таблицу div-ов. Это будет жутко тормозить (в особенности в IE).
P.S. Технология, кстати, не новая. В первый раз я её увидел в browser demo тов. gasman-a года два назад.
Update: Эмуляция canvas-а для IE тормозит ещё больше чем картинки (сами посмотрите). По этому если требуется кроссбраузерность, то либо флэш, либо картинки.
Update 2: В комментах часто упоминают про бесполезность изобретания велисипеда в виде 3d на канвасе/картинками/дивами. Однако замечу, что мною не ставилась цель написать 3d движок, а всего лишь показать использование интересного метода. Просто так сложились звёзды, что на момент написания поста я был под впечатлением wolf3d на канвасе.
