Расширение 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.
