Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 53
Хороший обзор. Правда здесь уже упоминался — habrahabr.ru/blogs/webdev/135336/.
Есть такой чувак, Niklas von Hertzen. Он делает просто отличную штуку — html2canvas, которая по сути своей есть альтернативный упрощенный рендерер страниц на js; html2canvas.js позволяет делать скриншоты страниц прямо на клиенте, безо всяких плагинов, просто подключая скрипт.
По такой же схеме, хоть и чуть попроще, работает и его html2webgl, но в 3D, используется прикрученный three.js с анаглифным рендером, поэтому это работает в любом браузере с поддержкой webgl. Сейчас скрипт скорее демонстрационный, основывается на вложенности DOM-модели, но никто не мешает позиционировать глубину по z-index или по специальным классам, и создавать свои правила для трансформирования в полигоны, для текстур своих дивов и так далее.
Только представьте — реальное позиционирование на заднем фоне всего, кроме основного контента (какой-нибудь ленты), настоящий эффект параллакса, выделение текста не только размерами шрифта, но и глубиной. Презентации вроде impress.js уже сейчас есть в 3D, но используется не так широко. Для маркетинговых сайтов и закрытых показов, особенно в случае продвижения других, помимо анаглифного, рендеров, когда-нибудь можно будет всё чаще видеть кнопочку «3D Mode On/Off».
По такой же схеме, хоть и чуть попроще, работает и его html2webgl, но в 3D, используется прикрученный three.js с анаглифным рендером, поэтому это работает в любом браузере с поддержкой webgl. Сейчас скрипт скорее демонстрационный, основывается на вложенности DOM-модели, но никто не мешает позиционировать глубину по z-index или по специальным классам, и создавать свои правила для трансформирования в полигоны, для текстур своих дивов и так далее.
Только представьте — реальное позиционирование на заднем фоне всего, кроме основного контента (какой-нибудь ленты), настоящий эффект параллакса, выделение текста не только размерами шрифта, но и глубиной. Презентации вроде impress.js уже сейчас есть в 3D, но используется не так широко. Для маркетинговых сайтов и закрытых показов, особенно в случае продвижения других, помимо анаглифного, рендеров, когда-нибудь можно будет всё чаще видеть кнопочку «3D Mode On/Off».
Первое что пришло в голову при виде всего этого великолепия, это easter egg'и в виде 3D-объектов, которые теперь можно будет наблюдать на сайтах. Мало того, теперь можно их делать!
Уверен что скоро и остальные браузеры украдут подхватят модное веяние и введут эту плюшку в своих вэб-инспекторах. Но прямо из-за этого чуть не вернулся на ФФ.
Напоминает Трон, причём первую часть, все эти 3D визуализации сайтов :)
> спасибо, Mozilla, за 3d-будущее
Зачем столько пафоса, и как мозила относится к webGL, который вообще раньше всех в хроме появился?
Зачем столько пафоса, и как мозила относится к webGL, который вообще раньше всех в хроме появился?
Mozilla начинала разработку WebGL в 2006 году.
В названии заголовка при желании можно рассмотреть как пафос, так и иронию :)
Ну а вообще, кроме того что Mozilla работает над webgl уже лет 6, именно они они подошли к 3д с такой необычной стороны, в то время как остальные зациклились в основном на играх и технологических демках
Ну а вообще, кроме того что Mozilla работает над webgl уже лет 6, именно они они подошли к 3д с такой необычной стороны, в то время как остальные зациклились в основном на играх и технологических демках
Напомнило Snoop для WPF. В принципе, бывают моменты, когда такое необходимо.
Видео впечатлило
напомнило
Господа, подскажите как влючить эту функци, скачал специально ff 11 beta5 и ff 12 aurora, пока ни там не там не нашел. (
Уж простите дурака за глупый вопрос.
Уж простите дурака за глупый вопрос.
Ctrl+Shift+I либо FirefoxButton->Web Developer->Web Inspector
а дальше снизу на кнопку 3D View нужно нажать
а дальше снизу на кнопку 3D View нужно нажать
Я наверное не совсем точно выразился, я не вижу кнопку 3D
У меня та же проблема.
Попробуйте запустить какую-нибудь webgl-демку, если не получится — то проблема в вашей системе
а как включается это webgl? в хроме у меня он прекрасно работает, а что не нравиться ff?
Попробуйте в about:config поставить webgl.force-enabled = true
Попробуйте пройти тест отсюда www.khronos.org/webgl/wiki/Demo_Repository
Если работает — просто обновите драйвера на видеокарту. Мне помогло.
Если работает — просто обновите драйвера на видеокарту. Мне помогло.
Windows Vista, лицензия, последние обновления установлены. Где может быть проблема?
Демки работают, но кнопки «3D» всё-равно нет :(
Ждемс когда инициативу подхватит кром в своем инспекторе
[картинка про троллейбус из буханки]
в тебе нет ни капли хайтек-романтики :)
Одно дело играть в CSS, а другое — встраивать такое в веб-инспектор, как очень важную фичу.
Ну, мне тоже троллейбус из буханки кажется весьма милым, как практикующему визуалу. Но пользы для конечного продукта в этом мало. Если верстальщики начнут визуализировать все обёртки в своём коде, то они непременно свихнутся. А так — мы держим в голове только значимые блоки.
Ну вот ничего не могу поделать — смотрю на эту визуализацию и никак не могу связать её с имеющимся и хорошо знакомым кодом.
Ну вот ничего не могу поделать — смотрю на эту визуализацию и никак не могу связать её с имеющимся и хорошо знакомым кодом.
Вы про этот?
Что-то определенно в этом есть!
Теперь сиськи на css будут трехмерные.
До этого не замечал, что у Google есть такой большой блок отставленный на 999px и имеющий z-index:999
Мне интересно, в этом режиме работают CSS-анимация и трансформация? Было бы интересно.
Интересно, сколько памяти кушает этот инструмент… А то как бы знаете, памяти много не бывает ;)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Нестандартное применение браузера, или спасибо, Mozilla, за 3d-будущее