The OpenNET Project / Index page

[ новости /+++ | форум | wiki | теги | ]

Проект Mozilla представил дополнение для трёхмерного анализа web-страниц

21.07.2011 15:56

Разработчики Mozilla представили экспериментальное Firefox-дополнение Tilt, реализующее новый подход в визуализации web-страниц. Разбивая узлы DOM-представления (Document Оbject Model) на слои, Tilt формирует трёхмерное изображение страницы, которое можно свободно вращать и масштабировать. Для вывода используется WebGL и шейдеры GLSL.

С практической стороны Tilt можно использовать не просто как забавную игрушку, но и как инструмент для наглядного анализа взаимосвязи различных частей web-страницы. Например, при использовании Tilt в глаза сразу бросаются скрытые области и спрятанные за пределы страницы элементы. Как и обычные средства инспектирования web-страниц, Tilt позволяет просмотреть и отредактировать параметры каждого узла DOM, такие как тип, идентификатор, класс, набор стилей и прочие атрибуты.

Алгоритм формирования трёхмерного изображения достаточно прост и сводится к преобразованию древовидной структуры DOM в набор слоёв. Позиция каждого слоя определяется уровнем элемента в дереве DOM. При формировании слоёв в качестве основы берётся содержимое области "BODY", появление на странице нового блочного элемента, например, "DIV", "UL" или "TABLE", приводит к созданию нового выпуклого слоя, относительно которого происходит отображение вложенных элементов. Для повышения наглядности области "IFRAME" выводятся отдельно. На каждый слой натягивается заранее подготовленная текстура, полученная путём разбиения результатов стандартной плоской отрисовки страницы.

Из планов на будущее можно отметить:

  • Поддержка изменения и обновления состояния трёхмерного варианта на лету, по мере внесения изменения в web-страницу или правки CSS. Данная возможность позволит интегрировать Tilt с уже существующими отладчиками web-приложений;
  • Поддержка различного рендеринга для элементов, имеющих абсолютную и относительную позицию;
  • Создание более удобного для разработчиков инструментария;
  • Подготовка средств для интеграции с редактором Ace и инструментами Firefox Developer Tools;
  • Возможность экспорта результатов визуализации для просмотра в других браузерах или приложениях;
  • Создание прототипа системы трёхмерной навигации по страницам;
  • Использование web-камеры для оценки положения головы пользователя для формирования более реалистичной 3D-графики.
  • Подготовка внешней JavaScript-библиотеки для встраивания функций визуализации DOM в обычные web-страницы;
  • Возможность управления визуальными эффектами и контроля параметров визуализации, например, расстояния между слоями.


  1. Главная ссылка к новости (https://hacks.mozilla.org/2011...)
Лицензия: CC-BY
Тип: Программы
Короткая ссылка: https://opennet.ru/31252-webgl
Ключевые слова: webgl, firefox, debug, web, 3d
Поддержать дальнейшую публикацию новостей на OpenNET.


Обсуждение (37) Ajax | 1 уровень | Линейный | +/- | Раскрыть всё | RSS
  • 1.1, Аноним (-), 16:52, 21/07/2011 [ответить] [﹢﹢﹢] [ · · · ]  
  • –1 +/
    Хм... даешь doom на голом DOM? :D
     
     
  • 2.11, Аноно (?), 17:42, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +5 +/
    Дум-дом какой-то получиться.
     

  • 1.2, Аноним (-), 17:00, 21/07/2011 [ответить] [﹢﹢﹢] [ · · · ]  
  • +1 +/
    Чего только люди не придумают, лишь бы не работать.
    Вместо поиска багов, утечек и эксплоитов выдали какаю то трех мерную @#@$!
    Если так потянуло на 3д, то допилили бы webgl, а то на 440gf по 3 фпса в демках.
     
     
  • 2.5, rain87 (?), 17:10, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    а причём тут вебгл? наверное ж производительность видеодрайвера слегка ниже плинтуса. да и карточка, скажем честно... не супер скоростная
     
     
  • 3.16, Заоза (?), 18:24, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    А какая для вас супер пупер? Топ 590? Ну ну...
     
     
  • 4.31, rain87 (?), 23:06, 22/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    > А какая для вас супер пупер? Топ 590? Ну ну...

    супер пупер да, какая нибудь гтх 570. а жаловаться, что вебгл тормозит на видеокарте, (щас подсчитаю...) которой уже лет 10 - по моему слегка неадекватно

     
     
  • 5.32, анон (?), 03:35, 23/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    игрушка в браузере тормозит -> бегом покупать новую видеокарточку
    нормально чо
     
     
  • 6.33, XoRe (ok), 15:50, 23/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    > игрушка в браузере тормозит -> бегом покупать новую видеокарточку
    > нормально чо

    Это неоптимально, да.
    Но и ожидать от карточки 10-летней давности супер скорости - тоже неоптимально.
    Карточка 10-летней давности успешно справляется с задачами 10-летней давности.

     
     
  • 7.34, анон (?), 16:55, 23/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    > Это неоптимально, да.
    > Но и ожидать от карточки 10-летней давности супер скорости - тоже неоптимально.
    > Карточка 10-летней давности успешно справляется с задачами 10-летней давности.

    Вывод примитивной низкополигональной графики с простенькими текстурами - это и есть задачи 10-летней давности.

     
  • 2.17, Dim (??), 18:43, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +2 +/
    Ты вот правда думаешь, что все мозилловцы все бросили и начали пилить это дополнение? В любой приличной разработчиской фирме есть отдел, который занимается перспективными разработками. Эти разработки может и не пойдут в жизнь, но наработки из них часто включаются в готовые продукты.
     
     
  • 3.38, anonymous (??), 02:56, 24/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    > есть отдел, который занимается перспективными разработками

    обычно его называют «отделом разработки ненужной х…ни», но, конечно, «перспективные разработки» звучит круче.

     
  • 2.18, Тот_Самый_Анонимус (?), 20:11, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +4 +/
    >Чего только люди не придумают, лишь бы не работать.

    И вправду. Вместо посильного вклада в развитие браузера ты настрочил дурацкий комментарий. Иди работай, а не трынди тут вместо работы.

     
     
  • 3.24, Аноним (-), 21:03, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • –3 +/
    С удовольствием окажу посильную помощь в развитие Firefox.
    Я уже подготовил лопату и табличку с надписью.
     
     
  • 4.30, анонимус (??), 16:59, 22/07/2011 [^] [^^] [^^^] [ответить]  
  • +1 +/
    Верно. ставьте табличку "Under construction" и начинайте копать.
     

  • 1.3, Адольф (?), 17:01, 21/07/2011 [ответить] [﹢﹢﹢] [ · · · ]  
  • +2 +/
    Нужны 3D очки?
     
  • 1.4, yurror (ok), 17:05, 21/07/2011 [ответить] [﹢﹢﹢] [ · · · ]  
  • +1 +/
    Господа, что за наезды? Идея, действительно, несет в себе многое! Вам не надоело сидеть в двухмерном мире? Пора выбираться уже!
     
     
  • 2.6, pro100master (ok), 17:19, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +4 +/
    когда выпустите книжку с трехмерными буковками, экземпляр подпишите? :)
     
     
  • 3.7, klalafuda (?), 17:24, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    > когда выпустите книжку с трехмерными буковками, экземпляр подпишите? :)

    Зря смеетесь. К примеру, когда вышел 1й Гари Потер, газета Хогвардса в которой были живые картинки смотрелась скорее как сказка. Сегодня же это практически реальность.

     
  • 3.8, yurror (ok), 17:28, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    Трехмерный текст тоннами имхо маразм. Будет очень сложно воспринимаем. Однако, компромисс все же найти можно. Мультимедийный интернет контент очень даже хорошо смотрится в 3D, а текст при этом можно отдельным плоским слоем оставить...
     
     
  • 4.10, Аноним (-), 17:40, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    а что, идея!
     
  • 2.20, Тот_Самый_Анонимус (?), 20:14, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +2 +/
    >Вам не надоело сидеть в двухмерном мире? Пора выбираться уже!

    Нет, не надоело. Пусть сидение в инете будет двухмерным: этого достаточно. А трёхмерной для меня является реальная жизнь.

     
     
  • 3.21, Аноним (-), 20:17, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    > для меня

    Какой же вы аноним после этого?

     
  • 3.27, Sergey722 (ok), 09:09, 22/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    Я бы сказал, трёхмерный - для меня родной.
     

  • 1.12, Аноним (-), 17:49, 21/07/2011 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Мне одному это напоминает старые добрые газеты?
     
  • 1.13, XVilka (ok), 18:03, 21/07/2011 [ответить] [﹢﹢﹢] [ · · · ]  
  • +1 +/
    скоро VRML переизобретут такими темпами
     
     
  • 2.23, maximkorobov (?), 20:59, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    VRML требовал установки плагина типа Adobe Flash.
     

  • 1.14, Crazy Alex (??), 18:17, 21/07/2011 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Про "надоело сидеть в двухмернм мире" - конечно, чушь несусветная, а как инструмент быстрого анализа струкртуры страницы - вполне интересно, надо пощелкать. Для того же helper к adblock - очень приятная фича. Да и в нём самом, полагаю, есть возможность быстро скрыть некоторые слои (скрыть не в 3d,  а вмысле visibility: hidden).
     
  • 1.15, Аноним (-), 18:23, 21/07/2011 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    А что на скриншоте Safari никто не заметил?
     
     
  • 2.19, ывв (?), 20:11, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    иииии?
     
  • 2.22, Crazy Alex (ok), 20:19, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    В тексте ясно сказано - расширение для Мозиллы.
     
  • 2.25, h31 (ok), 23:25, 21/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    Под макосью FF очень сильно косит под Safari. А на скриншоте наверняка просто скин.
     
  • 2.35, Добрый орк (?), 22:53, 23/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    приблизительно так выглядит ФФ в гномо-убунте, и кнопки слева, кстати. Так что скорее всего это некий линуксовый дистр, если я и ошибся с убунтой.
     

  • 1.26, анон (?), 02:24, 22/07/2011 [ответить] [﹢﹢﹢] [ · · · ]  
  • +/
    Could not initialize the WebGL context,
    your hardware or drivers may not support it.

    Вот собственно и весь Tilt

     
     
  • 2.28, Sergey722 (ok), 09:13, 22/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    И что Вам не нравится? Что программа вас честно предупредила, что на Вашем софте/железе не заработает? Надо было повесить весь браузер? Или всю ОС? По БСОДам соскучились?
     
     
  • 3.29, анон (?), 09:42, 22/07/2011 [^] [^^] [^^^] [ответить]  
  • –1 +/
    > И что Вам не нравится? Что программа вас честно предупредила, что на
    > Вашем софте/железе не заработает? Надо было повесить весь браузер? Или всю
    > ОС? По БСОДам соскучились?

    Какие бсоды, паря?
    Жава работает везде и даже софтверно выдает увполне приличную картинку.
    Это только браузеропейсатели выдают быдлокод под видом типа инноваций

     
     
  • 4.36, Добрый орк (?), 23:02, 23/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    а жава тут причем?
    идея WebGL - использовать аппаратную графику в браузере. Там нет ничего про "один код, который работает везде", как это, якобы, работает в жаве.
    что за манера - сравнивать теплое с мягким?
    Я кстати сильно сомневаюсь, что написанное под OpenGL на жаве будет работать без соотв. железки на борту.
     
     
  • 5.37, анон (?), 02:38, 24/07/2011 [^] [^^] [^^^] [ответить]  
  • +/
    > а жава тут причем?

    При том, что работает без проблем, и в софтверном режиме, и по желанию с аппаратным ускорением.

    > что за манера - сравнивать теплое с мягким?

    Ничуть. Это вещи одного типа. Там RIA и здесь RIA.

    > Я кстати сильно сомневаюсь, что написанное под OpenGL на жаве будет работать без соотв. железки на борту.

    http://demo.dzzd.net/SIMCA1000/

     

     Добавить комментарий
    Имя:
    E-Mail:
    Текст:
    При перепечатке указание ссылки на opennet.ru обязательно



    Спонсоры:
    Inferno Solutions
    Hosting by Hoster.ru
    Хостинг:

    Закладки на сайте
    Проследить за страницей
    Created 1996-2021 by Maxim Chirkov
    Добавить, Поддержать, Вебмастеру