вебмастер, фидошник
0,0
рейтинг
27 марта 2012 в 09:52

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

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

[облако]

Тем не менее на сайте «CSS3D Clouds» объёмное облако вращается, реагируя на движения мыши, и может быть заново (иначе) сгенерировано в любой момент. Ведь на деле оно является итогом применения JavaScript и трёхмерных CSS-преобразований к нескольким копиям одной и той же картинки облака: из них, как из вокселей, формируется более крупное облако.
Mithgol the Webmaster @Mithgol
карма
61,5
рейтинг 0,0
вебмастер, фидошник
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (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.

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

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