3D-Модель метро (JavaScript + CSS3)

[Eugene Varf]

Это, конечно, не схема метро - это модель. Она абсолютно не удобна для ориентирования, но зато позволяет примерно представить, как выглядят сотни километров тоннелей под землей. Я применил слово "схема" для короткого описания.

Тормозит - анимация CSS3 для примерно 350 элементов. Попробуйте сделать ее на чистом Javascript - она вообще не запустится Можно делать на WebGL, но я не пробовал. Скорость зависит от браузера: в Opera быстрее всех, в FireFox медленнее всех, в IE 9 вообще без анимации. Если анимация мешает, то там есть кнопка, чтобы ее отключить - будет намного быстрее.

[dmitriymar]

тормозит - анимация CSS3 для примерно 350 элементов. Попробуйте сделать ее на чистом Javascript - она вообще не запустится

Да ща
это конечно интересно, наверное, грузить браузер перерисовками при каждом малейшем изменении стилей любого из 350 элементов .
Только вот принципы анимации давно сложились , и нет смысла перерисовывать окно браузера чаще 30-60 раз в секунду, и реализация на JS не только запуститься, но и сожрёт гораздо меньше ресурсов браузера - при правильной реализации

[Eugene Varf]

Вы меня почти убедили - я попробую.

Изменения стилей анимируются, конечно, не малейшие, а как раз составляющие разницу в положении модели до клика по кнопке поворота и после.

Признаться, я поверил на слово Илье Кантору в главе учебника про CSS-анимацию, что она "Гораздо «легче» для процессора, чем анимации JavaScript. Лучше используется графический ускоритель. Это очень важно для мобильных устройств." Кстати, на "мобильном устройстве", где я это читал, разница между Javascript-анимацией и CSS-анимацией и впрямь была огромная.

Но раз dmitriymar так авторитетно заявляет иное, надо испытать.

[dmitriymar]

Признаться, я поверил на слово Илье Кантору в главе учебника про CSS-анимацию, что она "Гораздо «легче» для процессора, чем анимации JavaScript. Лучше используется графический ускоритель. Это очень важно для мобильных устройств." Кстати, на "мобильном устройстве", где я это читал, разница между Javascript-анимацией и CSS-анимацией и впрямь была огромная.

Изменения стилей анимируются, конечно, не малейшие, а как раз составляющие разницу в положении модели до клика по кнопке поворота и после.

а на этом пути изменения каждого разве не заставляют перерисовываться браузер? если нет -как бы вы их видели?

так и есть , но у вас 350 объектов , шаг трансформации каждого заставляет браузер перерисовываться. -посчитайте сколько раз в секунду вы пытаетесь перерисовать браузер. в то время как для человеческого глаза достаточно 30 -60 раз.
всё хорошо но в меру, вы же эту меру раз в 350 превысили для CSS

[Eugene Varf]

а на этом пути изменения каждого разве не заставляют перерисовываться браузер? если нет -как бы вы их видели?

так и есть , но у вас 350 объектов , шаг трансформации каждого заставляет браузер перерисовываться. -посчитайте сколько раз в секунду вы пытаетесь перерисовать браузер. в то время как для человеческого глаза достаточно 30 -60 раз.
всё хорошо но в меру, вы же эту меру раз в 350 превысили для CSS

Недавно добавил в проект "Лермонтовский проспект" и "Жулебино". Заметил, что Chrome (который несколько раз обновился за это время) стал неприлично медленно показывать CSS-анимацию. Сделал JS-анимацию по Вашему совету - все стало работать лучше. Спасибо! Правда, частота кадров не возросла, зато исчезли хромовские баги отрисовки CSS-анимации и появилась поддержка IE.

[ANAGAMA]

Круто, что можно сказать. Сама идея хороша.

Можно много говорить, по поводу управления — это не важно, его можно улучшать, фишка не в этом.

Понятное дело, что по нему ездить не будут, но, повторюсь, идея прекрасная!!!

Я бы добавил по возможности

1. Отключить линии, тогда можно видеть будет одну, две линии.
2. Мега задача — наложить рельеф местности.

Успехов!

[ixth]

Было бы клево сделать поворот при помощи мыши: чтобы при таскании карты, менялись phi/theta в зависимости от положения курсора. Я вчера пытался это допилить, но так и не осилил.

[alexan0308]

Можно делать на WebGL, но я не пробовал.

Жаль, сделал бы легко и непринужденно =)))

[MrNSky]

Мне кажется ? или там действительно можно было обойтись одним лишь CCS3+Html5? В качестве критики могу выдвинуть предложние, когда заходишь на сайт и видишь карту не сразу понимаешь че с ней делать надо, я лишь прочитав остальные посты в эфтой ветке форму понял что там что то крутить можно. Я предлагаю сделать так чтобы когда юзер заходил на карту она демонстрационно так и боковито вращалась до тех пор пока он ее не тронет.

[Eugene Varf]

Я прикрутил управление мышкой: левой кнопкой повороты, правой зумирование. Также сделал возможность просмотра модели за любой год, начиная с 1935-го. Не советую смотреть в Firefox - там почему-то это работает на порядок медленнее, чем в остальных современных браузерах, включая IE.

update: Теперь приемлемо работает и в Firefox: помогло подключение requestAnimationFrame для рендеринга.