27 марта 2012 в 09:52

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

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

[облако]

Тем не менее на сайте «CSS3D Clouds» объёмное облако вращается, реагируя на движения мыши, и может быть заново (иначе) сгенерировано в любой момент. Ведь на деле оно является итогом применения JavaScript и трёхмерных CSS-преобразований к нескольким копиям одной и той же картинки облака: из них, как из вокселей, формируется более крупное облако.
+55
3374
197
Mithgol 25,2

Комментарии (42)

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

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

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

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

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

Как здесь: в какую сторону крутится баллрина?
image
+1
QuickStudio, #
это очевидно. если смотреть, с моей стороны — влево, а со своей — вправо
+3
NoMore, #
Разве у кругового движения есть характеристики «Лево-право»? Тут наверно грамотнее сказать по часовой или против часовой она двигается
0
waphyld, #
Что, реально есть люди, которые, двигая мышку вправо, видят движение облаков по экватору(не когда крутятся(вид снизу-сверху), а когда отдаляются-приближаются) против часовой стрелки?
0
waphyld, #
ой, я имел в виду по часовой
+3
masterrr, #
И в ту, и в ту, — у меня. Могу «переключать» в мозгу :)
НЛО прилетело и опубликовало эту надпись здесь
+2
grafmishurov, #
Это не «как из вокселей», а «как из спрайтов», когда на каждую точку в пространстве назначается картинка (текстура) всегда повернутая к зрителю.
0
bulbazaur, #
и лагает как судный день
+1
nikmaster, #
И что здесь такого? Ниразу спрайтов не видели? Поиграйте в Duke nukem 3D, там их полно. А если серьезно, то именно так и рисуют облака в авиасимуляторах.
0
cyberzx, #
спрайтовые плашки это вчерашний день. на современном железе можно рисовать используя 3d текстуры. например как в симуле www.simul.co.uk/cloudwright
+2
Operatino, #
По заголовку кажется что облака реализованы без картинок, а сорс код показывает обратное, облака в картинках, только трёхмерность реализуется с помощью css.

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

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

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