Визуализация DOM-дерева в 3D (расширение Firefox)



    Расширение Tilt для Firefox строит трёхмерную модель текущей веб-страницы, используя WebGL для быстрого рендеринга. Таким образом, можно мгновенно анализировать структуру страницы и взаимосвязи между разными частями.

    Как известно, с помощью объектной модели документа (DOM) любой HTML-документ может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или другой объект. Данное расширение строит такое дерево, накладывая на него текстуру из текста и графики, которые находятся в соответствующих узлах дерева.

    Как показано на видео, кроме обычной визуализации, плагин показывает по щелчку правой кнопки различную информацию о каждом узле тип, id, класс или другие атрибуты).



    Авторами расширения являются Виктор Пороф (основная часть), Седрик Вивье (рендеринг DOM-элементов в виде WebGL-текстур, эквивалент canvas.drawWindow, см. баг № 653656) и Роб Кэмпбелл (автор идеи).

    Исходный код на guthub
    Блог разработчиков
    Последний стабильный билд: tilt.xpi

    После установки расширения оно запускается сочетанием клавиш Ctrl+Shift+L (или Cmd+Shift+L на маке) или выбором соответствующего пункта меню в браузере, выход — по клавише Esc. Расширение работает на любой странице.

    В будущем разработчики планируют добавить новые фичи, в том числе модификацию и обновление 3D-модели на лету (как только страница меняется, инициируется трансформация CSS для каждого узла; плюс настройка отображения элементов, в том числе прозрачность и взаиморасположение 3D-узлов); рендеринг не только страницы целиком, но отдельных частей, используя z-index; создание более удобного для веб-разработчика инструментария; лучшая интеграция с редактором Ace и Firefox Developer Tools (подсветка текущего выделенного узла, мгновенный 3D-предпросмотр), экспорт 3D-графики в другие браузеры или приложения (через файл с 3D-объектами, вероятно, .obj и/или COLLADA).

    Самым большим прорывом будет возможность 3D-сёрфинга между страницами, как в нормальном 2D-режиме.

    Полный список планов по совершенствованию расширения см. в списке TODO.md.

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

      0
      Как включить WebGL в Firefox 5?
        +2
        webgl.enabled_for_all_sites в about:config
          0
          Не было такого ключа. Добавил true. Перезапустил браузер. Всё равно пишет, что не установлен.
            0
            Хм. Попробуйте тогда webgl.force-enabled
              0
              сделал как здесь: www.ubuntugeek.com/howto-enable-webgl-on-firefox-4.html заработало
              попытался включить в хроме (google-chrome --ignore-gpu-blacklist) включается нормально, но что то происходит с xorg когда пытаюсь проверить на гуглбоди, 2 раза приходилось перезагружать.
          +1
          Перейдите по ссылке about:support (Справка > Информация для решения проблем). Там в самом низу будет сказано, возможно ли у вас запустить WebGL, аль нет. На моем старом ноутбуке пишет «Заблокирован для вашей видеокарты из-за нерешённых проблем с драйвером.». Так что не у всех это заработает…
            0
            Визуализатор WebGL: (WebGL unavailable)
          0
          так и не совладал. по комбинации Ctrl+Shift+L вываливается фаербаг. никакого пункта в меню так и не встретил
            0
            а вот. отключил фаербаг и все ок. смотрится неплохо. только направление применения как то прозрачно)
              0
              почемуто мне кажется, что при наличии нужных технологий, может получится альтернативный рендер для слепых…
            • НЛО прилетело и опубликовало эту надпись здесь
                0
                У меня по Ctrl+Shift+M открывается
                +3
                корявые верстальщики негодуэ
                  +1
                  посмотрел на небоскребы на сайте нашего проекта, пора давать по шее верстальщику) вложенные таблицы как то не кашерно)
                    –1
                    к сожалению, не всегдя всё можно сделать на дивах.
                    это признают даже ярые дивные-верстальщики.
                    а когда времени нет, тем более.
                      0
                      всегда*
                        0
                        Не всегда всё нужно делать на дивах, это да.

                        А вот время — не аргумент, зависит от конкретного верстальщика.
                          0
                          ага, того верстальщику, что «оформляет» табличные данные «div-ами с float», в аду черти на кусочки разберут и перепутают
                      +2
                      Теперь на css можно горы сверстать (не путать с графиком).
                        +1
                        Открыл свой проект на Sencha (extjs) и офигел)) вот где горы то))
                          0
                          Вы проекты на друпале использующие вивы посмотрите )
                            0
                            А что не так там? Могу поспорить, что вы на некоторых проектах вы не определите где вывод views ;)
                            В нормальных руках — отличий нет от простой разметки. У фанатов пуре-гарланд — возможно ;)
                          0
                          В гугломыле только один слой. Видимо есть ограничение на количество элементов в доме.
                          Простые сайты смотрятся весьма опрятно, не хватает сглаживания и эффектов :)
                            0
                            в гугомыле айфреймы, а с айфрэймами расширение не работает.
                            0
                            Неприятный момент — параллельно установлен FireGestures, который продолжает реагировать на жесты с нажатой правой кнопкой мыши, а перемещать длинную простыню сайта предлагается именно так.
                              0
                              и стрелками на клавиатуре
                                0
                                Нажмите help. Там написано, что можно перемещаться и крутить кнопками WASD и стрелками.
                                0
                                Шикарно! Осталось добавить правку модели мышкой и генерацию соответствующего html + css.
                                  0
                                  Я не понял, как установить этот tilt.xpi? Куда его копировать, как подключать?
                                    +1
                                    Можно установить дополнение из файла.
                                      +2
                                      Можно сам файл tilt.xpi после загрузки драгнуть на открытое окно Firefox — остальное он сам сделает.
                                      Ну и как писали выше — может потребоваться перенастроить конфы в about:config
                                      0
                                      Тёплая ламповая изометрия была бы теплее и ламповее.
                                        0
                                        Наш сайт по GUI выглядит как звездолёт :)
                                        Кстати, действительно, на такой 3-ех-мерной карте сразу видны «проблемные» места
                                          0
                                          Требуем такой же для планшетов на дроиде и iOS!
                                          Смело можно будет в маркет ставить.
                                            0
                                            Выглядит круто. Но в итоге не читабельно. Либо нужно сайт адаптировать специально.
                                              0
                                              Если не дергаться, не спешить, дожидаться отклика — то вполне прикольно, но порой браузер падает. А так — вещь!
                                                +1
                                                теперь осталось только пустить в фоне музыку и заставить столбики под нее колебаться — и будет красота ваще :))))
                                                  0
                                                  о, надо сделать платформе по страницам. «не всякий гик добежит до середины поисковой страницы гугла» :))
                                                  +1
                                                  Удобно для быстрой ревизии верстки.
                                                    +2
                                                      0
                                                      Gmail плоский, причём с двух сторон 0_о
                                                      my.jetscreenshot.com/3439/20110721-82zx-98kb.jpg
                                                        0
                                                        Видимо этот плагин плохо работает с ифреймами.
                                                          0
                                                          Именно так. Только что проверил на одном из клиентских сайтов. Сайт с ифрэймами — плоский.
                                                        0
                                                        А ещё выпадающие меню спрятались выше.
                                                        +1
                                                        это вещь :) сайты выглядят как торты, с gmail, да — какой то solid rock получается
                                                          +1
                                                          в режиме 3Д ссылки становятся не активны
                                                          т.е мы получаем мертвый сайт =(
                                                          ну и качество рендеринга удручает
                                                          тупой бесполезный плагин в общем…

                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                          • НЛО прилетело и опубликовало эту надпись здесь

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

                                                            Самое читаемое