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

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

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

[облако]

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

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

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

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

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

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

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

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

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

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

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

Интересные публикации

Вакансии