Как стать автором
Обновить

Комментарии 26

По ссылке картинка в разрешении 4 096px × 2 048px и весом 1 768.24 КБ
Ваш дисторшин напомнил мне «перевод» настроек из монитора ViewSonic. Термины pincusion и trapezoid так и оставили пинкушн и трапезоид.
сам прием основан на простом передвижении фона (либо контейнера с текстурой, если нет возможности двигать фон), поэтому единственный вариант достижения лучшего результата в данном случае — предварительная подготовка текстуры.
да, вполне. Т.к. она действительно всего лишь напоминает, а не заменяет 3D анимацию.

Хорошая 3D-анимация безусловно лучше и приятнее глазу, а приведенным выше трюком не удивить изощренных дизайнеров и девелоперов. Но если в программе или на странице нужно сделать простой элемент (лоадер, небольшую анимацию земного шара, заставку во время загрузки и т.д.), который не несет сильной функциональной нагрузки, то простое решение лучше минимум тем, что на него будет затрачено минимум времени при весьма неплохом результате.
Мне лично эффект показался настолько отвратительным и дешевым, что имхо лушче я в прелоадере буду смотреть на статику, чем на это.
а если Вы научитесь внимательнее читать, то увидите, что статья в первую очередь описывает простой способ анимации без использования математики, и не предлагает готовое решение. И результат в первую очередь будет зависеть от подготовленных графических элементов (в первую очередь фон), а этот коммент habrahabr.ru/post/180353/#comment_6261603 это только доказывает.

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

Так что кто из нас «не умеет внимательно читать» — еще вопрос ;)
Отрендеренная гифка будет более красиво смотреться и там даже js,css не будет.
да, это тоже вполне хорошее решение, тем более, что шар будет естественнее смотреться, а также можно и наклон оси изменить. Но лично у меня «скил» подготовки гифок развит плохо по ставнению с программированием и для себя я выберу решение более быстрое в реализации, особенно, при отсутствии дизайнера в команде.
WebGL Вам в руки если скилл программирования развит. Создать сферу и натянуть на неё текстуру не самая сложная задача.
WebGL — это уже не псевдо 3D, статья посвящена именно крайне простой имитации 3D эффекта.
Да и в самой статье я уже упомянул о pixi.js, которая webgl поддерживает и это была бы уже другая история…
Анимация весьма правдоподобно напоминает 3D

А ничего что когда вращается сфера то визуально полюса движутся медленней чем экватор? Без этого и без, хоть малейшего намека на объем, в виде теней и рефлекса, все кажется очень плоским.
ответил на подобный вопрос выше

Demo 2 — здесь попробовал использовать тени вместо осветления. Но нужно текстуры доработать, да и дизайнер тоже не помешал бы.
Нельзя просто слайдить текстуру, нужна имитация эффекта вращения. Относительно просто можно имитировать вращающийся цилиндр и рисовать его грани, т.е. скомпоновать «планету» из прямоугольников, каждый из которых использует разный скейл оригинальной текстуры:
Скрытый текст
Скрытый текст
Скрытый текст
Скрытый текст

В движении
Круто! Записал решение))
попробовал повторить подобное Demo 2, но на видюшке результат лучше смотрится. Можно, конечно, попробовать сделать шаблон с прозрачными тенями для улучшения результата, но это уже выходит за грани простого «трюка» в сторону реализации целого компонента.

Спасибо за видюшку и краткое описание
Дело не в прозрачных тенях, а в математике: надо представить себе половину N-гранного цилиндра и рассчитать параметры проекции его граней на плоскость.
В реализации этот метод будет посложнее.

До «натяжки» на n-гранный цилиндр что из себя представляет текстура? Как-то её предварительно подготавливаете или это проекция сферы (элипса и тд) на плоскость?
Технически подходит почти любая текстура, как в вашем примере:


(это не совсем ваша текстура 200x100, а чуть более детальная ее версия отсюда)

На деле, лучше всего выглядят не-контрастные текстуры с ярко выраженными полярными шапками, а заодно можно в фотошопе сделать горизонтальный фильтр Spherize, чтобы ближе к шапкам была видна деформация поверхности.
А что за игрушка?
Движок-заготовка для мобильной/десктопной космо-игры. Планируется делать что-то вроде КР, с баунти хантером в главной роли, квестами, развитием корабля и пр. Если по какой-то причине не выгорит, то сделаю небольшую аркаду а-ля бой в SC2.
Что-бы народ меньше критиковал 3Д-шность — добавьте отвлекающий контекст в демку, например скорость вращения, пропорциональную реальной для каждой из планет.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории