Эффект 3D с помощью белых линий

    Анимированные GIF’ы до сих пор часто используются в интернете. Хотя это древний формат, но даже в нём остаётся место для инноваций. На сайте Tumblr пополняется коллекция 3D GIF, в которых трёхмерный эффект создан путём простого добавления двух вертикальных белых линий. Странно, но такой простой трюк действительно работает, и без всяких 3D-очков.

    Собственно, эффект действует даже на статических изображениях, причём есть мнение, что он давно используется в комиксах.



    Вот несколько анимаций с демонстрацией эффекта.













    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 58
    • +46
      Так эффект не за счет добавления вертикальных линий возникает, а за счет разделения изображение на две части — до «решетки» и после неё. Такая своеобразная дискретная третья ось.
      Можно в виде мелкой сетки реализовать, например. А если использовать сетки разных цветов, то можно и больше двух слоёв использовать — еще больше передать объём выйдет.
      • +2
        Вы описали эффект, который вызывает добавление двух вертикальных линий. В чём противоречие с тем, что пишет автор?
        • +62
          Если вы просто нарисуете поверх gif'а или картинки две белые линии — чуда не произойдёт.
          Должен ещё быть объект, часть картинки, нарисованный поверх этих линий.
          Ваш КЭП.
          • –8
            Это действительно капитанский комментарий, потому что это вполне очевидно.

            Я даже больше скажу: линии должны быть именно белыми, потому что на большинстве сайтов фон — белый, и глаз воспринимает картинки как разделённые. С полосами других цветов это работает хуже.
            • +12
              Хабр становится всё унылее и унылее. Всех адекватных чуваков давно заминусовали по карме
              • +17
                Хабр не первый год хоронят, но в этом посте творится что-то действительно странное — объяснения того, что каждый видит своими глазами, заплюсованы так, будто без этого люди бы падали на колени и кричали «Магия! Магия!» Это ж не ракетная наука, даже слабоумный должен уловить принцип создания 3D-эффекта, когда ему его показали на примере 7 разных гифок.
                • +3
                  Нет, выпад в комментариях вполне аргументирован.
                  трёхмерный эффект создан путём простого добавления двух вертикальных белых линий

                  В то время как комментаторы справедливо замечают, что эффект достигается не путём создания этих линий, а путём выведения некоторых объектов на передний план. Здесь фактическая ошибка.
                  А то, что кто-то заметил (несмотря на ошибку в тексте), то они молодцы.
                  • 0
                    Это не ошибка, а недоговоренность. Но 7 картинок подряд как бы позволяют понять принцип без разжёвывания. Ну, мне так казалось.
            • –1
              Это же alizar. Пора бы привыкнуть:)
              • –3
                Ух как. Тут рейтинг подняли и пошли в карму гадить:)
                Хабр радует все больше:)
                • +1
                  В чем смысл написания настолько стандартных комментариев? Они не несут абсолютно никакого смысла и только занимают время читающих. Вы надеялись на другой исход?
                  • 0
                    Нет, мне было интересно то, как рейтинг записи сначала опустили (все понятно). Затем его подняли до 0 (странно, да?) и начали гадить в карму :)
              • +9
                Я ПРОБОВАЛ рисовать две белых линии поверх GIF, и вы правы, это СОВСЕМ НЕ РАБОТАЕТ!!! Но ЧАСТЬ КАРТИНКИ, нарисованная поверх этих линий, тоже не работает, ЧУДА НЕ ПРОИСХОДИТ!!!



                Напишите, пожалуйста, КАК МОЖНО БОЛЕЕ ПОДРОБНЕЕ, как именно надо рисовать линии, Я ХОЧУ ЧУДО!!!
              • +9
                Добавление белых линий никаких эффектов само по себе не вызывает.
                А вот разделение изображения на две части, находящиеся перед и после воображаемой плоскостью, вызывает.
                Заголовок же гласит именно о том, что две вертикальные белые линии делают из обычного изображения трёхмерное.
              • +5
                Ух. Для тех кто ничего не понял (а то я тоже не сразу понял что именно имел ввиду автор комментария):
                условно говоря эти линии создают «оконную раму», сквозь которую вы условно смотрите. И вот до этого объект как бы «за» ней, а в другой момент — «перед» ней. Эта самая рама работает как ориентир точки отсчёта третьей оси, о которой и говорит автор, позволяя мозгу «зацепиться» за неё и от неё отмерять дистанцию «в глубину».

                На самом деле здесь есть ещё один эффект — эффект «различных картинок» — именно белый цвет полосок сливается с белым цветом фона заставляя думать что картинка не цельная — а это несколько отдельных картинок. И когда нечто двигается между кажущимися раздельными картинками — и вызывает этот самый эффект.
              • +56
                Сделать даже из этого тему для поста — это действительно талант.
                • +29
                  Иногда пост задает тему, а ценность посту добавляют комментарии. Так давайте развивать тематику особенностей визуального восприятия!

                  • +1
                    Добавлены не белые и не линии! Как это относится к теме этого поста!?

                    Сарказм, если что.
                    • +4
                      Вы только что открыли эффект голых тел!
                      На нижней картинке не видно привычных купальников, поэтому воображение дорисовывает голые тела за закрашенными областями.
                      • 0
                        А зачем маскировка над головами? Ведь там нечего было скрывать.
                        • +10
                          зачем на верхней фото Вы нарисовали купальники?
                      • +6
                        instagram.habrahabr.ru
                        • +4
                          Скрат удался лучше всего, ИМХО.
                          • +3
                            Диск Капитана Америки тоже очень эффектно вылетает.
                            • +2
                              Диск вылетает настолько эффектно, что и без всяких линий был бы 3D эффект.
                              • +16
                                Я конечно понимаю что тут в основном IT аудитория, но это щит.
                                • +49
                                  щит — это данная «статья»
                                • +9
                                  Вот кстати да, на этой гифке щит выходит на передний план «решетки» еще в нижней точке траектории замаха. Так что получается, что эта воображаемая плоскость, делящая пространство, проходит где-то чуть перед тем местом, где стоит супергерой. Вот примерно так она уходит в землю, а не за границами кадра:
                                  image

                                  А тот факт, что после броска диск летит в нашу сторону — очевиден и так. Выходит, что конкретно в данном случае не добавляется никакой дополнительной информации о кадре.

                                  Вот если бы щит пересекал плоскость уже во время полёта (ну и плоскость бы была дальше от точки броска), эффект бы был намного более впечатляющий я думаю.
                                  • 0
                                    Нет, совсем не очевидно, что щит в сторону зрителя полетит. Что же капитан не смотрит в ту сторону, куда собирается щит бросать? Я вообще думал, он щит вправо бросит. Кроме того, его левая нога вообще в землю не упирается, капитан упадёт после броска, а сам бросок выйдет очень слабым.
                            • 0
                              Повис в Тумблере на пол-часа…
                              • +2
                                Увы, там регистрироваться надо.
                              • 0
                                И это ведь тоже можно использовать для совместимости со старыми браузерами! Avatar в gif — вот самая изощрённая совместимость с неподдерживающими html5 браузерами.
                                • +10
                                  Помню была игра Comix Zone на SEGA, теперь я понял чем она покоряла сердца геймеров.
                                  скриншоты и обложка игры
                                  image

                                  Эх пойду скачаю эмулятор, и подключу джойстик.
                                • +24
                                  Нужно же сравнить без линий и с линиями…
                                  • +2
                                    А я вот подумал, насколько краше стали бы обычные фильмы, если бы для подобного «3D» задействовали полосы снизу и сверху экрана, которые появляются из-за того, что многие фильмы имею пропорции, отличные от 16:9. Тогда бы никаких очков для 3д не понадобилось.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      • +1
                                        В «Судье Дредде» было. Кровь, частицы, вылетали за пределы каше. Хотели так в «Сталинграде» с пеплом сделать, но когда посчитали сколько это будет стоить, сразу же отказались :)
                                        • +2
                                          За пределы чего?
                                          • 0
                                            черные полоски сверху и снизу при просмотре 2.39:1 материала на иного формата экране :)
                                            • 0
                                              upd: только сейчас допер что все киношники пользуются морально устаревшим словом. Но это лучше чем говорить леттербокс.
                                    • +1
                                      А видео есть такие?
                                      Жаль, что нельзя автоматически генерироватью
                                      • +32
                                        Никогда прежде хабр не приближался так близко к фишки.нет
                                      • +10
                                        Пусть axxl давно не с нами, но дело его живо!
                                        • +3
                                          Кто есть сий axxl?
                                          • +1
                                            Некий %username%, широко известный в узких кругах. Довольно легко гуглится.
                                          • +1
                                            Думаю, alizar и есть местный axxl, если это вообще не виртуалы одного человека.
                                          • +1
                                            Особенно рекомендуется смотреть одним глазом, чтобы исключить конфликт с оценкой расстояния и параллаксом. Вообще, при рассматривании одним глазом даже простое фото способно приобрести объём, способ, известный более 100 лет. А тут некоторые ролики, типа варианта с пистолетом или с саблезубой белкой — вообще при рассматривании одним глазом уносят :)
                                            • 0
                                              С пистолетом эффект во многом благодаря динамической зоной резкости.
                                            • +3
                                              Только я не понимаю, почему этот эффект назван 3D? Это ведь даже не стереоскопия.
                                              • 0
                                                Четвертая картинка, это что за фильм?

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