вторник, 6 декабря 2011 г.

Из истории создания 3D в Javascript

В интернете много опубликовано информации, есть даже исходники, для отображения трехмерных моделей в браузере без использования дополнительных плагинов вроде Microsoft Silverlight или Adobe Flash. В основном отображение осуществляется внутри контейнера canvas (одна из технологий HTML 5). Кое-где встречаются еще примеры работы с SVG и VML.

Казалось бы, что можно брать самую совершенную технологию и использовать ее, но что делать, когда у пользователей, которые будут просматривать странички с 3D содержимым, установлен только браузер по умолчанию, а это - Internet Explorer 6 или 7 (в лучшем случае) и нет возможности массово устанавливать новые версии браузеров вроде Mozilla Firefox или Google Chrome, плагин Adobe Flash Player? 
Ответ очевиден - использовать уже устаревшие технологии. SVG в Internet Explorer 6,7 не поддерживается, поэтому остается использовать VML.

Из известных примеров в интернете можно отметить (ни одного русскоязычного ресурса не встретилось, который бы затрагивал подобную тему):

http://www.garybeene.com/3d/3d-vml.htm - к сожалению, пример не удается загрузить (404 - Not found), а из тех частей кода, которые приведены в тексте невозможно восстановить текст целиком.
http://www.lutanho.net/svgvml3d/index.html - бесплатная библиотека, которая может быть использована для отображения и преобразования 3D объектов на html-страницах. Как видно из названия она поддерживает VML и SVG.
http://www.gersolutions.com/vml/ - еще одна из бесплатных библиотек 3D VML.

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

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

Ни одна из найденных 3D библиотек не могла (на момент создания библиотеки) инициализировать VML из Javascript'а (к счастью, это умела делать библиотека Raphael и ExCanvas (эмуляции canvas в Internet Explorer). То есть в html-коде нужно только подключить библиотеку и она сама сделает все необходимое.

Другой трудностью была крайне низкая производительность. Объекты, состоящие из большого количества полигонов можно было даже не пытаться отобразить (а про преобразование - забыть). В связи с этим была выбрана концепция ухудшения качества отображения в пользу повышения производительности.
Суть концепции - использовать один элемент shape не для каждого полигона, а для каждого выпуклого многогранника, что позволило ускорить отображение в несколько раз.

Ну и узкое место многих библиотек - z-сортировка полигонов для правильного отображения глубины. От этого вообще пришлось отказаться. Одно дело, когда отображается всего лишь один многогранник, и совершенно другое, когда объектов несколько, и они находятся рядом друг с другом.

Продолжение следует...

Комментариев нет:

Отправить комментарий