Фотореалистическое изображение облака при помощи JavaScript и трёхмерных CSS-преобразований

    Эта картинка, если на первый взгляд, выглядит фотографией реального облака в реальных небесах:

    [облако]

    Тем не менее на сайте «CSS3D Clouds» объёмное облако вращается, реагируя на движения мыши, и может быть заново (иначе) сгенерировано в любой момент. Ведь на деле оно является итогом применения JavaScript и трёхмерных CSS-преобразований к нескольким копиям одной и той же картинки облака: из них, как из вокселей, формируется более крупное облако.
    Метки:
    Поделиться публикацией
    Комментарии 42
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Забавно. Вероятно, где-то ограничение на количество одновременно рендерящихся объектов; может быть, даже и не во браузере, а в драйвере видюхи? Другой браузер пробовали?
        • НЛО прилетело и опубликовало эту надпись здесь
          • +1
            FF11, Kubuntu x64 — лаги страшные, облака квадратные. Проприетарный видео-драйвер ATI стоит.
            • 0
              Что говорит по адресу «about:support» в конце страницы?
              • 0
                Проверил на домашней системе (Ubuntu x32), лиса та же, квадраты те же:
                Визуализатор WebGL: Tungsten Graphics, Mesa DRI Intel 945GME x86/MMX/SSE2 -- 1.4 Mesa 7.11
                Аппаратно ускоренные окна: 0
                • 0
                  Стало быть, нет аппаратного ускорения-то.
                  • +1
                    Да, но подвязывать дизайн (фичу) под аппаратное ускорение не есть гуд. Хотя решение интересное.
              • 0
                FF10, Mac OS X Lion, Macbook Pro 17" Late 2011 — работает очень быстро.
            • НЛО прилетело и опубликовало эту надпись здесь
              • НЛО прилетело и опубликовало эту надпись здесь
                • +10
                  Просто Хабр сейчас люто, бешено тормозит.
                • 0
                  что за модель. Встроенная в i3 sb все ок.
              • +4
                Chrome 17, полет нормальный.
                • +1
                  17.0.963.83 — аналогично, все отлично!
              • 0
                Демонстрация эта работает во браузерах на основе WebKit (Chrome, Safari) и в Файерфоксе — причём, согласно уведомлению на сайте, Firefox официальной версии тормозит сильнее, чем ночные сборки.

                Я попробовал бета-версию Файерфокса — в ней облака и впрямь тормозят.
                • 0
                  В официальном FF11/Win7 не тормозит абсолютно (core i7 2.7ghz)
                  • 0
                    Хм-м. На самом деле всё, всё зависит от видеокарты и версии установленного драйвера. Совершенно та же бета-версия Файерфокса не тормозит на более вменяемой системе, вечером я проверил это.
                • +2
                  После просмотра CSS-кода неожиданно явствует, что та картинка, из копий которой формируется облако, имеет адрес https://habrastorage.org/getpro/habr/comment_images/409/2df/ea6/4092dfea6e478e630954e0bdf4e3b68c.png и выглядит следующим образом:
                  [troll.png]
                  Эта шутка (в отличие от остальных элементов демонстрации) выглядит несколько скудоумно.
                  • 0
                    А если проявить несколько больше внимания, которое несомненно было потраченно на выявление причастия ЕРЖ к данным облакам, то можно сделать вывод о том, что облака генерируются из www.clicktorelease.com/code/css3dclouds/cloud.png
                    • +1
                      Или всё-таки облако генерируется из этой http://www.clicktorelease.com/code/css3dclouds/cloud.png картинки?
                      • 0
                        Верно, верно.

                        Сперва эта картинка имеет адрес «troll.png», а затем срабатывает оператор «src = computedWeights[ k ].src».

                        Стало быть, реально применяемые картинки берутся из массива объектов «textures».
                    • +2
                      а ещё облака могут стать огненными или вообще превратиться в коробки

                      • +2
                        Как раз хотел спросить: а зачем здесь коробки? О_о
                        • +9
                          Дропбокс в облаках :)
                          • +1
                            Dropbox ))
                            • 0
                              Коробка в облаках
                              • +1
                                Такая же коробка на аватарке автора в твиттере
                              • +2
                                «Michael Bay» порадовало :)
                                • +1
                                  напомнило заставку на ro.me
                                  • 0
                                    Кстати присутствует и обман зрения — если тянуть мышку вправо — некоторым людям кажется, что облако поворачивается вслед за мышкой, а некоторым — в другую сторону.

                                    Как здесь: в какую сторону крутится баллрина?
                                    image
                                    • +1
                                      это очевидно. если смотреть, с моей стороны — влево, а со своей — вправо
                                      • +3
                                        Разве у кругового движения есть характеристики «Лево-право»? Тут наверно грамотнее сказать по часовой или против часовой она двигается
                                        • 0
                                          Что, реально есть люди, которые, двигая мышку вправо, видят движение облаков по экватору(не когда крутятся(вид снизу-сверху), а когда отдаляются-приближаются) против часовой стрелки?
                                          • 0
                                            ой, я имел в виду по часовой
                                          • +3
                                            И в ту, и в ту, — у меня. Могу «переключать» в мозгу :)
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                          • +2
                                            Это не «как из вокселей», а «как из спрайтов», когда на каждую точку в пространстве назначается картинка (текстура) всегда повернутая к зрителю.
                                            • 0
                                              и лагает как судный день
                                              • +1
                                                И что здесь такого? Ниразу спрайтов не видели? Поиграйте в Duke nukem 3D, там их полно. А если серьезно, то именно так и рисуют облака в авиасимуляторах.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                • +2
                                                  По заголовку кажется что облака реализованы без картинок, а сорс код показывает обратное, облака в картинках, только трёхмерность реализуется с помощью css.

                                                  И если я не ошибаюсь постоянную анимацию можно было сделать на keyframes вместо js.

                                                  А вообще круто, оригинальный эксперимент!

                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.