3d picture browser — браузер по изображениям с нестандартным интерфейсом — хитрые советы

Фон браузера — Браузер. Помощь

В качестве фона могут быть использованы:

Чтобы выбрать фон браузера:

  1. Откройте новую вкладку.
  2. Под Табло справа нажмите кнопку Галерея фонов.
  3. Выберите фотографию или видео из нужного альбома.
  4. Нажмите кнопку Применить фон.

Примечание. Вы можете включить чередование случайных изображений или видео из Галереи фонов, которые будут сменяться раз в день.

  • Для одного альбома. Выберите нужный альбом в Галерее фонов и нажмите кнопку Чередовать эти фоны.
  • Для всех альбомов. В Галерее фонов нажмите в разделе Все фоны кнопку Чередовать.
  1. Откройте новую вкладку.
  2. Под Табло справа нажмите .
  3. Выберите нужное изображение.
  4. Нажмите кнопку Открыть.

Ограничение. В качестве фона можно загружать файлы изображений с расширениями png, jpg.

  1. Откройте страницу с нужным изображением.
  2. Вызовите контекстное меню и выберите пункт Сделать фоном в Яндекс.Браузере.

Остановка или запуск

Анимированный фон выглядит привлекательно, но тратит заряд батареи. Если вы хотите избежать этого:

  1. Откройте новую вкладку.
  2. Под Табло справа нажмите значок и отключите опцию Анимация фона.

Воспроизведение при низком заряде батареи

При низком заряде батареи анимация отключается автоматически. Если вы хотите, чтобы анимация воспроизводилась при любом заряде батареи:

  1. Нажмите .
  2. В блоке Настройки внешнего вида выключите опцию Отключать анимацию фонов при низком заряде батареи.

Воспроизведение в высоком разрешении

Анимация воспроизводится по умолчанию в высоком разрешении. Если это замедляет работу Яндекс.Браузера:

  1. Нажмите .
  2. В блоке Настройки внешнего вида отключите опцию Отображать анимационный фон в новой вкладке в высоком разрешении.

Анимация фона может не работать по следующим причинам:

Анимация поставлена на паузу

  1. Откройте новую вкладку.
  2. Под Табло справа нажмите значок и включите опцию Анимация фона.

Устарел драйвер видеокарты

Обновите драйвер для каждой установленной в компьютере видеокарты:

  1. Нажмите .
  2. Откройте раздел Видеоадаптеры. Появится список видеокарт.
  3. Правой кнопкой мыши нажмите название вашей видеокарты.
  4. В контекстном меню выберите пункт Обновить драйверы.

Влияет аппаратное ускорение

Попробуйте включить или отключить аппаратное ускорение:

  1. Нажмите .
  2. В нижней части страницы Настройки нажмите кнопку Показать дополнительные настройки.
  3. Перейдите в блок Система. Если опция Использовать аппаратное ускорение, если возможно включена, отключите ее. Если опция Использовать аппаратное ускорение, если возможно отключена, включите ее.
  4. Перезапустите браузер, чтобы изменения вступили в силу.

Анимация блокируется расширением

  1. Отключите на время все расширения: .
  2. Если анимация появилась, методом перебора найдите расширение, которое ее блокирует.
  3. Отключите расширение. Вы можете также написать его разработчикам о проблеме.
  4. Очистите кэш-память, чтобы в браузер не подгружалась ранее сохраненная копия с блокированной анимацией.

Если рекомендации не помогли, напишите в службу поддержки через форму обратной связи. Как можно подробнее опишите ситуацию, по возможности приложите скриншот.

Попробуйте удалить папку File System в каталоге профиля браузера и проверить, возникает ли проблема после этого. Чтобы войти в каталог профиля браузера:

Windows 7, Windows 8, Windows 10

  1. Откройте поле поиска файлов в Windows.
  2. Скопируйте строку

    [%USERPROFILE%AppDataLocalYandexYandexBrowserUser DataDefault] (без квадратных скобок)

    и вставьте ее в поле поиска файлов.

  3. Нажмите клавишу Enter.

Примечание. Поддержка операционных систем Microsoft Windows XP и Vista прекращена с апреля 2017 года.

В Яндекс.Браузере не предусмотрено использование тем. Темы, загруженные из Каталога Chrome, с Яндекс.Браузером несовместимы. Но вы можете настроить фон браузера по своему вкусу, выбрав в ГалерееГалерее подходящее фото или видео или загрузив в качестве фона собственное изображение.

Была ли статья полезна?

Источник: https://yandex.ru/support/browser/personalization/background.xml

Нестандартное применение браузера, или спасибо, Mozilla, за 3d-будущее

Многие наверняка знают, что в последней стабильной версии Firefox обзавелся собственным веб-инспектором. Его появление было делом времени, он потенциально очень интересен, однако сейчас речь не конкретно о нем.

В 11-ой версии браузера этот инспектор получит интересный апгрейд — 3d DOM Inspector — режим, который ранее можно было увидеть, установив аддон Tilt. Если в двух словах, эта штука может не только визуализировать компоненты сайта, но и взглянуть на них под разным углом, при чем в прямом смысле этого выражения.

Примерно так:В первую очередь этот 3d-режим, использующий WebGL, будет полезен с точки зрения анализа сайта — он наглядно показывает связи между слоями, обнаруживает скрытые элементы и выявляет особо тяжелые места на странице.

Например, вот эти высокие домики — не что иное, как стандартная пачка социальных кнопок — от фейсбука, твиттера, гугл+ и вконтакте.Также, интересно взглянуть на уже знакомые сайты под немного другим углом:Однако, к этому инспектору можно подойти с совсем неожиданной стороны. Как, например, Erik Biermann.

Он сделал со страницей то, что несомненно оценят фанаты Minecraft:

Если у вас установлена бета Firefox и система поддерживает WebGL, вы можете самостоятельно оценить этот нелегкий труд: www.dev-kitchen.com/ff3d/. Почему нелегкий, вы сможете понять, если попытаетесь самостоятельно наваять что-нибудь подобное.

Несмотря на то, что этот пример сделан for fun, такая техника может в будущем активно использоваться на сайтах. Их владельцы смогут хитро скрывать контент для особо продвинутых пользователей, либо размещать какие-нибудь промо-коды. 3д-режиму можно найти еще одно применение — в области обучения основам веба, в частности html и css.

Ведь в таком представлении куда эффективнее будут объяснения о том, что такое слой, блок и как работает z-index. Если немного пофантазировать, то можно увидеть, как сайты могут превратиться в интерактивные 3д-игры.

Я уже представляю пространство между левой частью контента и правым сайдбаром, как трассу из какого-нибудь облегченного The Need For Speed for Websites:Потенциальные возможности этим не ограничиваются, предлагайте ваши варианты, и, возможно, они воплотятся в недалеком будущем.

Напомню, ранее о 3d-режиме было написано в конце прошлого года пользователем jeston в рамках статьи о нововведениях будущей версии Firefox: Новый редактор стилей и 3D отображение DOM-структуры страницы в Firefox 11

Добраться до трехмерного режима можно либо нажав Ctrl+Shift+I, либо проследовать по интерфейсу браузера таким маршрутом: FirefoxButton -> Web Developer -> Web Inspector, в правом нижнем углу должна быть кнопка 3D View. Если ее нет, ваша система скорее всего не поддерживает WebGL

UPD: Страничка с трехмерной эйфелевой башней, спасибо chaos8: http://www.cedricrey.fr/atelierWeb/tour_eiffel_3D.html

Источник: https://habr.com/post/139480/

Обзор инструментов для кросс-браузерного тестирования

Проверка веб приложения на кросс-браузерность является важной частью процедуры разработки проекта.

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

В данной статье приводится краткий обзор различных приложений и сервисов для проверки на кросс-браузерную совместимость.

BrowserShots

BrowserShots — это самый старый и известный  бесплатный онлайновый сервис снимков экрана. Он поддерживает большое количество браузеров: 61 комбинацию различных браузеров и операционных систем.

Просто великолепно, но достаточно сложно представить человека, который захочет проверить свой веб сайт в браузере  Kazahakase 0.5, который запущен на BSD Unix. Сервис имеет выбор опций: можно включить/отключить Javascript, Java и Flash; изменить размер экрана.

Последняя опция является очень полезной, особенно теперь, когда появляются пользователи со смартфонами с нестандартным разрешением экрана.

Интерфейсом сервиса не удобно пользоваться. Выбор нужных браузеров и опций занимает время. А так как это веб сервис, то операции надо повторять каждый раз, когда нужен снимок экрана.

Когда (и если) вы наконец получите изображение, будет очень сложно сравнить разные варианты для определения несоответствий вывода.

Перенаправление HTTP автоматизировано не полностью: BrowserShots выводит URL, на который вы перенаправлены, но нужно загрузить снимок экрана снова вручную.

Самым большим недостатком BrowserShots, который делает его практически непригодным для профессионального использования, является время отклика. Для некоторых сценариев тестирования оно может достигать 45 минут.

При этом время хранения изображения составляет 30 минут, если его не изменить вручную. Кроме того,  у BrowserShots есть серьезная ошибка с прокруткой страницы (смотрите скриншот с MSIE 8.

0) и он иногда не выводит скриншоты, даже сообщая об успехе операции.

Заключение

Если вам нужно провести испытания более чем для одного конкретного браузера несколько раз. то этот сервис не для вас. И даже в вашем случае вероятно будет быстрее поставить нужную версию браузера, проверить все, а затем деинсталлировать.

Уникальные особенности: нет.

Недостатки: мучительно медленный.

BrowserCam

BrowserCam — другой широко известный сервис снимков экрана. В отличие от BrowserShots, данный сервис является коммерческим. Самый дешевый тарифный план стоит  $159.80 за год  и открывает доступ для пяти пользователей. Интерфейс очень приятный.

Он позволяет создать проект и указать URL и браузеры, для которых надо сделать снимки экрана, таким образом не нужно повторять операции конфигурирования для повторных проверок страницы.

Но так как интерфейс не использует AJAX, время реакции сервиса не сопоставимо с реальными приложениями, что очень раздражает.

Читайте также:  5 способов быстрее получить ответ на свои письма - хитрые советы

Список поддерживаемых браузеров несколько меньше, чем у BrowserShots, но его вполне достаточно для практического использования. Поддерживаются многие версии IE, Firefox, Safari, Opera и Chrome, так же как и некоторые старые версии  браузеров для OS X, Linux и многочисленных версий Windows. Время генерации изображения приемлемо: пробные варианты были готовы в течении двух минут.

BrowserCam поддерживает много разрешений и имеет оконный и полноэкранный режимы отображения, которые имеют возможность прокрутки картинки. Другой прекрасной особенностью является поддержка мобильных устройств: он поддерживает Blackberry, iPhone, Android и Windows Mobile.

Отметим, что поддержка гененрации изображения для мобильных устройств не входит в тарифный план для браузеров и стоит $999.95 за год использования.

Так же есть сервис для отправки изображений по email и удаленный доступ, который может быть очень удобным для при решении проблем с выводом, замеченных на снимках экрана. Обе опции оплачиваются дополнительно.

Удаленный доступ дает возможность соединиться с помощью VNC с машиной под управлением Linux, Windows или Mac с различными версиями браузеров.

Прекрасная возможность провести отладку на тех системах, которых нет в наличии, например, на  Mac. Но цена $499.95 за год очень близка к стоимость минимальной конфигурации Mac.

Протокол VNC очень не эффективен, поэтому интенсивная удаленная отладка может привести к нервному срыву.

Заключение

Очень хороший профессиональный сервис с расширенными опциями и продуманным интерфейсом.

Уникальные особенности: поддержка мобильных устройств, удаленный доступ.

Недостатки: дорогой.

Adobe BrowserLab

BrowserLab — это новое предложение от Adobe, ранее сервис был известен как Meer-Meer. Он написан на Flash и имеет следующие преимущества: кросс-платформерность, отличный интерфейс и (что очень важно) хорошее время отклика.

В настоящее время сервис предлагается бесплатно, пока Adobe “определяет характеристики.” Так как они отслеживают сервис уже более года, то, вероятно, есть другие причины для таких маркетинговых шагов.

В соответствии с заявлениями Adobe, стоить услуга будет от $10 до $20 в месяц начиная с 2011.

Интерфейс сервиса привлекательный, «вылизанный» и легкий в использовании, что хорошо видно на картинке ниже.

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

Рекламируемая опция “onion skin” (луковая кожица) не очень практична: большую часть времени браузеры не рисуют страницу одинаково пиксель за пикселем, но при этом страница может выглядеть одинаково.

Поддержка браузеров скромна по сравнению с конкурентами. На момент написания статьи BrowserLab поддерживал только Chrome, Firefox, IE и Safari: всего 12 комбинаций браузеров и версий ОС. Сервис выглядит как качественный продукт на стадии бета тестирования: в некоторых снимках он обрезал изображения по горизонтали, и реализация прокрутки страницы тоже имеет ошибки.

Скорость генерации снимков экрана очень хорошая.

Заключение

Очень приятный интерфейс. Бесплатный сервис до конца 2010.

Уникальные особенности: нет.

Недостатки: скромный список поддерживаемых браузеров, незначительные ошибки.

Microsoft Expression Web SuperPreview

SuperPreview — новое дополнение к среде разработки Microsoft Expression Web. Это автономная версия, которая ограничена только для Internet Explorer и доступна для скачивания бесплатно. В ней поддерживается только  IE 6, 7 и 8, а полная версия поддерживает также Firefox и Safari. Однако впечатления от использования данного инструмента остаются очень приятные.

Так как приложение работает на локальной машине, время реакции и задержка в получении снимка экрана самые лучшие среди описываемых инструментов.

Однако SuperPreview нельзя купить отдельно от Expression Web, чья цена составляет $149.

Заключение

Интерфейс чрезвычайно легок в использовании, а скорость работы невероятная. Но очень ограниченная поддержка браузеров и то, что SuperPreview является частью пакета Expression Web, сводит к нулю его практическое использование.

Уникальные особенности: нет.

Недостатки:  очень ограниченная поддержка браузеров, дорогой.

BrowserSeal

BrowserSeal — это новый инструмент. Так же как и SuperPreview, он является локальным приложением, а не веб сервисом, поэтому скорость генерации снимков экрана очень высока.

Поддержка браузеров достаточная: можно опробовать многочисленные версии IE, Firefox, Safari, Opera и Chrome.

У данного инструмента есть две особенности, которые выделяют его среди конкурентов: автономная поддержка браузеров и интерфейс командной строки для скриптов автоматизации.

Все браузеры, поддерживаемые в BrowserSeal, могут быть запущены вручную, что означает следующее, как только вы нашли несоответствие в отображении страницы браузером, его можно тут же запустить для отладки проблемного места. Такой возможности другие инструменты тестирования не предлагают.

Цена очень конкурентна: стандартная версия стоит $49. Так же существует версия с интерфейсом командной строки, которая предоставляет возможность проверки нескольких URL из скрипта или командного файла. Интерфейс программы очень приятный и простой. Закладки позволяют легко находить даже незначительные различия при переключении от одного снимка к другому.

Заключение

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

Уникальные особенности:: поставляется с автономными версиями всех основных браузеров; имеет режим командной строки для скриптов автоматизации.

Недостатки:: работает только в Windows.

Litmus

Litmus — еще один веб сервис для генерации снимков экрана. Имеет впечатляющую поддержку браузеров: 23 комбинации браузеров и операционных систем, включая IE, Firefox, Chrome, Safari, Opera, Flock, Camino, SeaMonkey и Netscape. Скорость генерации изображений — достаточно хорошая для веб сервиса.

Интерфейс простой и понятный, но ощущается отсутствие  некоторых функций. Например, нет простого способа сравнить результаты генерации изображений.

Все, что можно сделать — это просматривать изображения одно за другим или загрузить их все на локальный компьютер.

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

Litmus не поддерживает прокрутку страницы. он выводит только верх длинной страницы, что является основным недостатком сервиса. И цена слишком высока  для такого набора функционала: лицензия на одного пользователя стоит $588 в год.

Заключение

Отличная поддержка браузеров и приемлемая скорость работы, которая будет достаточна для большинства пользователей. Но очень мало функций.

Уникальные особенности:: нет.

Недостатки: не поддерживает прокрутку, не хватает других базовых функций для таких веб сервисов.

Multi-Browser Viewer

Multi-Browser Viewer — это приложение, которое использует сервер для генерации снимков экрана. Другими словами — это графический интерфейс со всеми задержками обычного веб сервиса.

Одной интересной особенностью данного инструмента является то, что он поставляется вместе с автономным браузером, который можно использовать для отладки. Но для генерации снимков экрана Multi-Browser Viewer использует специальный сервер с большим числом браузеров.

Поддержка браузеров впечатляет: 54 комбинации браузеров и ОС (17 из которых доступны в автономном варианте), включая IE, Firefox, Chrome, Opera, Safari, Camino, Konqueror. Цена: лицензия на одного пользователя стоит $129.95 в год.

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

Заключение

Хороший интерфейс и впечатляющая поддержка браузеров.

Уникальные особенности: автономный вариант  некоторых (но не всех) браузеров.

Недостатки: Отсутствие многих функций, которые есть у конкурирующих продуктов, плохая работа прокрутки страницы, работает только под Windows.

Browsera

Browsera — это веб сервис для генерации снимков экрана. Поддержка браузеров по сравнению с другими участниками нашего обзора скромная: IE, Firefox и Safari. Стандартный доступ стоит $588 в год. Интерфейс привлекательный, простой и легкий. Можно организовывать сессии снимков экрана в проекты.

Browsera поддерживает аутентификацию, прокрутку страниц и рекурсивный постраничный обзор (то есть вы можете задать для Browsera адрес сайта, и сервис будет проходить его страница за страницей, генерируя снимки экрана). Время реакции очень хорошее для веб сервиса.

Заключение

Профессиональный сервис с хорошим интерфейсом и интересными опциями, но ограничен в поддержке браузеров.

Уникальные особенности: рекурсивный постраничный обзор

Недостатки: ограниченная поддержка браузеров, дорогой.

Наборы браузеров

Если все, что вам нужно — это протестировать ваш веб сайт в определенном браузере, и вы собираетесь сделать это  вручную, есть несколько бесплатных сервисов и приложений, которые могут помочь в решении данной задачи:

  • Spoon
  • BrowserSeal.BrowserPack
  • Internet Explorer Collection
  • IE Tester

На первый взгляд Spoon выглядит привлекательно, так как он является веб сервисом и избавляет вас от необходимости ставить много браузеров на ваш компьютер. Но у него есть проблемы со стабильностью.

Тем не менее, оба инструмента IE Collection и BrowserSeal.BrowserPack (предлагается бесплатно, в отличие от BrowserSeal) работают надежно. IE Collection имеет в своем наборе любую версию IE, о которой вы могли подумать. BrowserSeal.BrowserPack, который полагается на IE Collection для поддержки IE , также поддерживает две версии Firefox, три версии Opera и две версии Safari.

Читайте также:  Jpeg enhancer - программа реставрации изображений с высокой степенью компрессии - хитрые советы

Заключение

Каждый сервис имеет достоинства и недостатки, и решение о том, какой из них использовать, всегда остается за пользователем. Профессиональные разработчики, вероятно, не используют BrowserShots по причине большого времени отклика. SuperPreview и Browsera также мало полезны по причине ограниченного набора поддерживаемых браузеров

BrowserLab остается популярным по причине своей бесплатности. Но как только Adobe начнет брать плату за его использование в размере $20 в месяц, доводов использовать его не останется, разве только из-за работы в Dreamweaver, который имеет расширение BrowserLab.

При выборе инструмента один из важных вопросов на который надо дать ответ, что использовать автономное приложение или веб сервис. Некоторые предпочитают  инструменты на основе веб сервисов, потому что они не требуют инсталляции. Другие предпочитают автономные приложения по следующим причинам: малое время отклика, возможность локальной отладки, отсутствие простоев.

BrowserCam, BrowserSeal, Litmus и Multi-Browser Viewer являются очень хорошим выбором. Но они сильно отличаются в цене. Если вам нужно тестировать приложения для мобильных устройств, то, вероятно, BrowserCam станет вашим выбором. А для автоматизации тестирования лучшим выбором будет BrowserSeal .

Источник: https://ruseller.com/lessons.php?id=697&rub=

Сложности современного масштабирования, часть 4

Итак, с приложениями мы более-менее разобрались: масштабирование в новом интерфейсе зависит от системы, которая автоматически устанавливает параметры и для главного меню, и для приложений. Самостоятельно изменять параметры нельзя — по крайней мере, штатными средствами.

Что касается старого интерфейса, то настройки масштабирования там гораздо более гибкие, и при этом пользователь может управлять ими вручную.

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

В то же время подавляющая часть современных пользователей достаточно много времени проводит в интернете, работая и развлекаясь на самых разных веб-сайтах. Проблема в том, что большинство интернет-сайтов тоже создавались исходя из представлений о том, что 96 DPI — неизменная величина.

И у их разработчиков было еще меньше стимулов (а чаще — вообще никаких) отдельно продумывать оптимизацию под разный DPI/PPI. Подчеркну, речь идет именно об изменении DPI, а не об адаптации под разное разрешение традиционных мониторов.

Следовательно, проблему масштабирования под мониторы с большим PPI для получения комфортного размера шрифтов и элементов интерфейса должны решать браузеры. Вот и посмотрим, как они это делают.

Сайты

Если отбросить экстремальные решения, то большинство сайтов (речь идет о традиционных сайтах с текстовым контентом, а не мультимедийных) делятся, грубо говоря, на две большие категории:

  • сайты с фиксированной шириной основной колонки (которая выравнивается по центру или по левому краю, оставляя остальное пространство экрана пустым) и
  • сайты с адаптивной шириной, которые растягиваются на всю ширину экрана (или окна браузера).

С первым случаем всё просто и понятно. Во втором случае колонки либо делят пространство в какой-то пропорции, либо вспомогательные колонки (меню, навигация и пр.) имеют фиксированную ширину (или какой-то диапазон в зависимости от ширины экрана), а наиболее информационно насыщенная центральная — переменную.

Собственно, за примерами далеко ходить не надо. Типичная иллюстрация первого подхода — разметка статьи на нашем сайте (статьи на iXBT.com имеют центральную колонку шириной 700 пикселей), пример второго — наш форум, forum.ixbt.com. Он имеет дизайн в три колонки, который используется на большинстве современных форумов.

Левая колонка содержит информацию о пользователях и вспомогательные данные (она имеет определенный диапазон ширины), центральная (она растягивается на всю доступную площадь) содержит, собственно, посты, а правая — навигация и т. д. Чем шире экран, тем шире будет центральная колонка, т. к. она самая информационно насыщенная.

Левая и правая колонки могут чуть расширяться и сужаться, но примерно сохраняют свою ширину. Правильно? Вроде да.

На сегодняшний день практически все сайты выполнены и оптимизированы под фиксированный DPI = 96 и хорошо показываются только в том случае, если PPI монитора примерно соответствует этому параметру.

Если радикально увеличить PPI без изменения диагонали, то видимые размеры всех элементов (букв, картинок, кнопок и пр.) существенно уменьшатся.

И чтобы сделать их читаемыми, приходится увеличивать масштаб в браузере.

Браузеры

Однако начав тестирование, мы сразу столкнулись с тем, что браузеры сами по себе ведут себя по-разному. Поэтому пришлось тестировать и поведение браузера, и его интерфейс, и собственно отображение страниц.

Тем более что еще при тестировании Acer Aspire S7 стало понятно: то, насколько к масштабированию готов сам браузер, имеет очень большое значение при работе.

Так, при отсутствии поддержки масштабирования даже элементы интерфейса становятся слишком мелкими: неудобно читать мелкие шрифты, неудобно работать и даже кликать мышкой, не говоря уж об использовании пальца. Поэтому на Aspire S7, например, моим любимым браузером стал IE10… Впрочем, это мы забегаем вперед.

Кроме того, надо понимать, как именно и что он масштабирует.

Помимо формального зачета был и неформальный: мы просто игрались с настройками масштабирования сайтов, чтобы точнее понять, как и что работает. Итак, приступим.

Для теста мы взяли четыре популярных браузера:

  • Internet Explorer 10
  • Opera 12.15

Источник: https://www.ixbt.com/portopc/96dpi-4.shtml

Веб-трехмерка: как работать с 3D, не покидая браузер

Каким будет Интернет через десять лет, пять или даже через год — сказать очень сложно. Изначально он исполнял роль онлайнового хранилища, затем оброс информационными функциями и стал гибким средством коммуникации, реализовывая концепцию Web 2.0. Но и это не предел возможностей веб-технологий.

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

Более того, среди онлайновых приложений все чаще появляются продвинутые проекты, которые мало в чем уступают настольным аналогам. Даже таким сложным, как редакторы трехмерной графики.

Когда речь идет о веб-приложениях для просмотра изображений или прослушивания интернет-радиостанций, вопросов «Зачем это нужно?» не возникает. Небольшие программы «на каждый день» удобно использовать параллельно с основной работой в Сети.

Однако когда речь заходит о более сложных проектах, например о 3D-редакторах, необходимость в таких веб-приложениях уже не столь очевидна.

Зачем «втискивать» средство для работы с трехмерной графикой в отдельное веб-приложение, если его возможности при этом будут ограничиваться потенциалом браузера?

В пользу веб-приложений говорит многое. Они не требуют установки, а запускаются порой быстрее обычных настольных программ. Веб-приложения являются кроссплатформенными, поскольку для их работы нужен всего один инструмент — браузер. Их не нужно переустанавливать, они доступны на любом устройстве, подключенном к Интернету.

К тому же ресурсоемкие веб-приложения могут быть реализованы так, чтобы основная вычислительная нагрузка приходилась на сервер. Такой подход дает возможность запускать довольно сложные приложения на самых простых компьютерах, вплоть до нетбуков.

Ну и конечно, в любом веб-приложении могут быть реализованы все преимущества Интернета — облачное хранилище данных, быстрый доступ к результатам совместной работы и так далее.

Все это как нельзя лучше соотносится с работой 3D-моделлера. Перенос нагрузки на сервер, набор инструментов для трехмерного моделирования и анимации плюс широкие возможности для совместной работы — получаем 3D-редакторы в браузере.

Clara.io

Интерес этот проект вызывает по нескольким причинам. Во-первых, это фактически первая серьезная попытка сделать не «игрушечный» редактор, пригодный лишь для создания объемных текстов и простеньких моделей, а полнофункциональный инструмент, который можно действительно применить в работе.

Во-вторых, вызывает уважение имя разработчика, который взялся реализовать такую сложную задачу.

Это компания Exocortex Technologies, которая хорошо известна среди профессионалов в сфере разработки трехмерной графики (симулятор жидкостных эффектов SlipstreamVX, модуль для просчета динамики в режиме реального времени Momentum, инструмент для GPU-визуализации эффектов с частицами Fury и так далее — все это их творения). С помощью инструментов от Exocortex Technologies в свое время были созданы такие известные картины, как Titanic 3D, The Amazing Spider-Man, G.I. Joe и другие.

Для работы Clara.io нужен браузер с поддержкой JavaScript, HTML5 и, конечно, WebGL. Веб-приложение работает более чем с тридцатью разными стандартами трехмерной графики, включая форматы FBX, Collada/DAE, STL, OBJ, ThreeJS, 3DS и прочие.

Clara.io — это своего рода квинтэссенция всех трехмерных редакторов. Создавая интерфейс данного веб-приложения, разработчики выбрали наиболее привычную схему управления трехмерным проектом.

Менять вид в окне проекции так же просто, как и в большинстве других редакторов: колесико скроллинга приближает или отдаляет объекты сцены, а с нажатой средней кнопкой мыши можно вращать трехмерный проект в окне проекции. Чтобы сместить сцену в сторону, нужно двигать мышь, удерживая нажатой клавишу CTRL и среднюю кнопку мыши.

Разобраться с возможностями программы помогает большая библиотека готовых проектов. При создании новой сцены можно выбрать один из готовых примеров или создать новый, пустой проект.

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

Читайте также:  Укрощаем буфер обмена - хитрые советы

На этом, последнем этапе проекта опытных разработчиков трехмерной графики ждет большой сюрприз: в качестве движка просчета трехмерной сцены в этой программе можно использовать фотореалистичный модуль Vray. Данный визуализатор пользуется большой популярностью среди профессиональных 3D-дизайнеров.

Он имеет массу достоинств, главное из которых — высокая реалистичность просчитываемого изображения.

Модуль Vray способен имитировать глобальную освещенность объектов, вызванную многократным отражением света от поверхностей, позволяет воссоздавать физически корректные отражения и преломления света, показывать эффекты каустики, подповерхностного рассеивания и многое другое. В Clara.

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

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

Любому, кто занимался трехмерной графикой, должна быть знакома утомительная процедура рендеринга, которая напрямую зависит от требований к реалистичности просчитываемого изображения. Фраза «поставил на рендер и пошел пить кофе» в случае интернет-сервисов не актуальна.

Clara.io не использует локальный компьютер для расчетов, поэтому пользователь может не ждать окончания визуализации, а открыть дополнительную вкладку в браузере и начать работу с другим проектом.

И хотя скорость просчета трехмерной сцены не очень велика (по утверждению авторов проекта Clara.io, на этапе визуализации используется четырехъядерный процессор), однако она достаточна для комфортной работы с 3D.

Добиться высокой реалистичности визуализации помогает также богатый выбор источников света, среди которых есть как стандартные направленные и всенаправленные, так и физически корректные, привязываемые к движку визуализатора Vray. Также имеется возможность выбора одной из нескольких наиболее востребованных систем освещения, например трехточечной системы или имитации дневного света от небосвода и солнца.

Бесплатный трехмерный редактор найти очень сложно. По большому счету, кроме хорошо известного проекта Blender, ничего и нет. Ну а бесплатный онлайновый 3D-редактор и вовсе кажется фантастикой. Тем не менее Clara.io — это именно такой проект.

Если сравнивать философию этого приложения и других 3D-редакторов, то наиболее близкая к Clara.io программа — 3ds Max.

Веб-редактор имеет похожее меню и варианты выбора представления объектов в окне проекции, определенная схожесть наблюдается и в наборе инструментов для полигонального моделирования и даже в используемой терминологии инструментов.

Правда, в отличие от редактора от Autodesk, техника полигонального моделирования в Clara.io является основной.

Редактирование модели происходит на уровне подобъектов — вершин, ребер, поверхностей. Можно менять их положение и масштабировать размеры. Чтобы получить доступ к тому или иному подобъекту, нужно переключиться в соответствующий режим — опять-таки видна аналогия с 3ds Max.

Вместе с тем очень удобен режим работы с подобъектами Multi-SubObject. При его активировании отпадает необходимость выбора режима подобъектов. Достаточно в окне проекции просто поднести курсор к нужному подобъекту — и он окрасится цветом.

Это будет означать, что его можно выделить.

В качестве вспомогательных инструментов моделирования можно также использовать внешние деформации (аналог модификаторов в 3ds Max).

Так, например, с помощью оператора Twist можно скручивать форму трехмерной модели, а другой оператор, Tapper сожмет объект в определенной точке.

Список этих операций, по сравнению с оным в том же 3ds Max, невелик, однако они есть, и это здорово помогает в работе.

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

Также в программе реализована экспериментальная опция просчета булевых операций. Кстати, довольно странно видеть в меню программы надпись «экспериментальная функция» — ведь весь проект Clara.

io пока находится на стадии бета-тестирования.

Поскольку центральный визуализатор веб-приложения Clara.io — Vray, то и настройка материалов также связана с фотореалистичным визуализатором. Модуль для настройки материалов носит почти такое же название, как у аналогичного инструмента в 3ds Max, — Material Browser.

Настройка анимации в Clara.io упрощена до минимума. На временной шкале указываются ключи анимации, а движок веб-приложения автоматически просчитывает значения анимируемых параметров.

Добавляемая в сцену виртуальная камера уже может быть анимирована и выполнять «облет» центрального объекта сцены — очень удобная мелочь, которой не хватает во многих настольных редакторах трехмерной графики.

Над одним проектом Clara.io могут работать сразу несколько 3D-дизайнеров или аниматоров. В этом случае действия, которые применяются к открытому проекту, одновременно отображаются в окнах проекций нескольких клиентов сервиса.

Относительно незначительных недостатков проекта, которых, нужно отметить, не так и много, можно высказать скорее пожелания, чем упреки. Ведь это только начало, и сам проект пока имеет статус Beta.

К тому же пользоваться им пока может любой и совершенно бесплатно. За такими проектами, как Clara.

io, — будущее, и чем шире будут возможности таких бесплатных онлайновых редакторов, тем меньше будет аргументов в пользу настольных приложений.

SculptGL

На каком-то этапе развития трехмерной графики у художников появилась возможность трехмерного скульптинга. Новое поколение инструментов для моделирования воплотило давнишнюю мечту 3D-художников, которые мечтали создавать трехмерные объекты точно так же, как скульптор работает с глиной.

Аналогичный подход был применен к созданию трехмерной графики. В таких программах, как Zbrush, используются инструменты (виртуальные кисти), которые наслаивают материал на объект, а также деформируют поверхность или искажают ее особым образом.

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

Трехмерный скульптинг позволил художникам очень быстро воссоздавать органические формы, лица персонажей, трехмерные модели животных, растений и так далее. Иначе говоря, 3D-скульптинг необходим там, где невозможно или очень сложно проектировать объекты.

Несмотря на очевидную пользу инструментов 3D-скульптинга, на рынке программного обеспечения довольно долго вообще не было альтернативы, и единоличным лидером трехмерной лепки была программа Zbrush. Однако со временем картина стала меняться.

Многие профессиональные редакторы включили подобный класс инструментов в свой арсенал, а усилиями отдельных энтузиастов стали появляться и бесплатные утилиты (Sculptris, Meshmixer и прочие), реализующие тот же принцип создания 3D-моделей с помощью виртуальных кистей.

О возможности использования бесплатного онлайнового сервиса разработчики трехмерной графики могли только мечтать. С появлением поддержки WebGL в браузерах мечта стала явью.

Проект под названием SculptGL позволяет творить с помощью одного лишь браузера.

Технология WebGL дает возможность задействовать потенциал видеокарты, поэтому стоит отметить, что в том, насколько комфортной будет работа SculptGL, не последнюю роль играет аппаратное обеспечение.

Трехмерный редактор SculptGL разработал Stéphane Ginier, начав его делать как студенческий проект на C++. Со временем автор переориентировал редактор, сделав его облачным.

Конечно, SculptGL не имеет столь мощного инструментария, как Zbrush, но тоже позволяет моделировать в режиме реального времени, используя инструменты статического, адаптивного и динамичного редактирования топологии модели.

В распоряжении любителя 3D имеется небольшой запас шейдеров и с десяток основных типов кистей для масштабирования, выдавливания, наслаивания, вращения, сглаживания и прочих действий, производимых над обрабатываемой 3D-поверхностью.

В процессе создания модели SculptGL может использовать режим симметрии. Веб-приложение даже поддерживает моделирование с помощью планшетов Wacom, учитывая интенсивность нажатия пера и его наклон. Для упрощения работы с референсами в редакторе можно устанавливать в качестве фонового изображения любую картинку в формате JPG. Готовые работы можно экспортировать в форматы STL, OBJ и PLY.

На движке этого онлайнового 3D-редактора также создано приложение-близнец Scuptfab — трехмерный редактор с аналогичным набором функций, в котором, в придачу ко всему прочему, реализована поддержка онлайнового сервиса Sketchfab.

⇡#Заключение

К онлайновым приложениям пока что трудно относиться серьезно. В основном веб-приложения имеют ограниченный набор функций, и большинство из них можно считать лишь прототипами будущего ПО. Тем не менее сервис Clara.iо и онлайновый 3D-редактор SculptGL опровергают устоявшееся предубеждение против веб-приложений.

Перед нами — вполне дееспособные бесплатные решения, которые можно не только демонстрировать для WOW-эффекта, но и использовать для работы. И конечно, за подобным ПО будущее, ведь облачная концепция имеет массу преимуществ: экономит аппаратный ресурс, гарантирует сохранность работы и упрощает коллективный труд над единым проектом.

Единственный недостаток редакторов в браузере — их слабая функциональность, но это вопрос времени.

Если Вы заметили ошибку — выделите ее мышью и нажмите CTRL+ENTER.

Источник: https://3dnews.ru/820173

Ссылка на основную публикацию