Рецепт вращения планет в космосе на HTML5 + JavaScript

[Magistr_AVSH]

Угу, есть такой же эффект, но написанный на three.js/webgl



Вот здесь всякое.
Там и есть кастомизируемые тени и вообще рандомайзер.
Спасибо Darthman за идею и большую часть реализации =)
twitter.com/magistr_avsh

[Magistr_AVSH]

Во еще красивая планетка:

Все вращается естественно.

[AstrumOnline]

Да, реализовано красиво. Признаться, вариант реализации на Three.js тоже рассматривали, но нас остановило то, что сейчас не все браузеры поддерживают WebGL (в особенности, старые версии браузеров). Поэтому, вариант отпал.

[Darthman]

Всегда пожалуйста.

[vintage]

http://liveweave.com/xZtwj5

[ginkage]

Или вот, тоже WebGL (можно крутить, таская мышкой и зумить колёсиком), реализовано двумя треугольниками, с освещением, bump-mapping'ом и атмосферой. :)

[theillarionov]

Хм. Вам и canvas-то не обязательно использовать, да и jQuery — разве что у вас остальная логика на нем написана.

Плавное движение фона легко реализуется через CSS3 animations и background-position.

@keyframes pl {
100% {
background-position: -1000px 0;
}
}

animation: pl 5s infinite;

А направление вращения через transform: rotateY :)

Эти вещи уже даже мобильные браузеры свободно поддерживают, по-моему.

А WEBGl тут использовать, мне кажется, чересчур, он все-таки для более комплексных задач предназначен.

[AstrumOnline]

Вы все верно поняли — использовали jQuery, поскольку, большая часть функционала реализована на нем. А предложенный Вами вариант на CSS3, и правда, рациональнее, да и целесообразнее при использовании в простых эффектах анимации, поскольку является куда более производительным, чем анимация на javascript. Осталось только протестировать кроссбраузерность этого способа.

[YChebotaev]

Все уже протестировано до вас: caniuse.com/#feat=css-animation

[swanrnd]

Где можно карту сгенерировать для планеты?

[AstrumOnline]

к примеру, фильтр LunarCell для Adobe Photoshop оказался наиболее удобным.

[badchemist]

Извините, но это не вращение. Это передвижение текстуры вбок и поворот вокруг центра круга. Математически неправильно — это ладно, но оно и невооруженным глазом заметно, что «что-то не так».

Можно сделать точно (правда, не уверен, насколько это просто будет реализовать имеющимися средствами). Проекция ортогональная, смотрим на планету мы с плоскости экватора, так что математика довольно простая. Для каждой точки на карте косинус широты — координата по вертикали, косинус [долготы минус угол поворота] — координата по горизонтали. Само собой, все координаты (в т.ч. широта / долгота) отсчитываются от центра в данном примере.

Если вот так не получится, то можно учесть хотя бы, что при взгляде на планету экватор вращается «быстро», а полюса — «медленно», и наложить на текстуру что-то вроде линзирования в центре.

[AstrumOnline]

Фактически — да, Вы правы. Подобным способом создается лишь эффект вращения, весьма далекий от реалистичного, однако, пока более «правильного» способа реализации данными методами мы, к сожалению, не нашли.

[barkalov]

Более правильный способ есть в three.js — эмуляция 3d на canvas'е (без WebGL). Но, поскольку канвас умеет только аффинные преобразования сферу приходится разбивать на (слишком) большое количество треугольников (чтобы аффинные преобразования выглядели не так криво), что напрочь убивает производительность.