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

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



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

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

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

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

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

animation: pl 5s infinite;

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

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

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

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

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

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

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