Guest3d.ru
некоммерческий проект, цель которого объединить профессионалов для обмена опытом и знаниями в области real-time рендеринга
guest3d
2.07: Виртуальная студия: Графический интерфейс пользователя (Gui)

Пользовательский ввод влияет на приложение. Посредник, с помощью которого пользователь может взаимодействовать с программой, называется интерфейсом. Клавиатура и мышь являются частью интерфейса в большинстве приложений. Часть интерфейса, расположенная на экране компьютера, называется графическим интерфейсом пользователя (Graphic User Interface), или сокращенно GUI.

Графический интерфейс пользователя обычно выступает в виде 2D слоя поверх обычной сцены. Курсор мыши, различные кнопки, слайдеры и боксы ввода - все они могут быть частью GUI.

HUD элементы интерфейса (Head-up Display)
Неинтерактивные элементы 2D вывода являются лицевой частью интерфейса Head-up Display, или сокращенно HUD. Примерами элементов HUD являются счетчики очков, логотипы компаний, миникарты виртуального окружения пользователя и вращающиеся 3D представления текущего физического состояния аватара пользователя в компьютерной игре.

Термины графического интерфейса пользователя ‘Graphic User Interface’ и лицевой части интерфейса ‘Head-up Display’ часто используются, как синонимы. На картинке выше, логотип Quest3D и тестовая информация являются элементами HUD, а значения RGB и опция вращения Rotation являются частями GUI.

GUI в Quest3D
В Quest3D, 2D слой, распологающийся поверх остальной сцены, визуализируется особым способом. Фактически, это вторая 3D сцена, визуализируемая с помощью собственной камеры с особым типом проецирования. Текстуры GUI делаются четкими благодаря отключению фильтра anti-aliasing.

Кроме этой техники вы можете использовать канал Copy Image для создания четко пикселизированных элементов GUI.

Z буфер
Каждый кадр, в котором полностью отрендерена 3D сцена, следует за слоем GUI и HUD. В промежутке Z Буфер очищается, чтобы избежать возможных помех со стороны 3D сцены в направлении интерфейса.

Ввод мыши (Mouse input)
Действия мыши с элементами GUI могут быть осуществлены с помощью Mouse Over и User Input channels.

2D изображения
Идеально пикселизированные 2D изображения могут быть отрендерены с помощью канала Copy Image. Разрешение экрана не имеет значения, картинка всегда будет отображена с одинаковым количеством пикселей. Этот метод производит кристально чистые изображения.

Текст
Канал Text Out может быть использован для быстрого вывода 2D текста на экран. Проверочная информация, такая, как частота кадров fps и разрешение экрана легко могут быть отображены с помощью этого метода.

Шаблоны (Templates)
Ряд готовых к использованию элементов GUI может быть найден в списке шаблонов Templates.

Урок
Графический интерфейс пользователя состоит из кнопок и слайдеров, позволяющих пользователю влиять на приложение. Следующий урок имеет дело с рядом таких элементов.

Необходимая сцена Quest3D:
..\Tutorials\2.7 – Graphic user interface\Graphic user interface.cgr

Шаг за шагом:

  • Откройте сцену ‘Graphic user interface.cgr’. Она содержит объект машины и Object Inspection Camera. Обратите внимание, что изображение логотипа Quest3D размещается поверх сцены, отображенной в окне обзорного вида Animation 3D View.
  • Создайте ярлык канала ‘Checkbox’ и подключите его к каналу ‘Mouse Over Checkbox’ (Мышь над чекбоксом).
  • Создайте ярлык для канала ‘Checkbox State’ (Состояние чекбокса) и подключите его к каналу ’Rotation’ (Вращение), который является частью движения Motion объекта ‘Car’. Обратите внимание, что объект ‘Car’ расположен в папке ‘3D Scene’.
  • Перейдите в Раздел Анимации.
  • В закладке ‘Camera’, выберите ‘GUI Camera’.
  • В режиме перемещения ‘Move Mode’, поставьте замок на Z position.
  • В закладке ‘Object’, выберите объект ‘Quest3D Logo’ и переместите его в нижний правый угол экрана.
  • Переключитесь в режим Run Mode.
  • Зажмите правую клавишу мыши и повращайтесь вокруг объекта автомобиля.
  • Нажмите на чекбокс, чтобы проверить его. Обратите внимание, что машина начала вращаться.
  • Когда закончите, перейдите в режим Edit Mode.

  • Перейдите в Раздел Каналов.
  • Создайте ярлык канала ‘R Slider Value’ и подключите его к потомственной ссылке ‘R’ канала ‘Emissive’ поверхности ‘Car Chassis’ объекта ‘Car’. Обратите внимание, что объект ‘Car’ расположен в папке ‘3D Scene’.
  • Перейдите в Раздел Анимации.
  • Переключитесь в режим Run Mode.
  • Протестируйте слайдер ‘R’, потянув за него слева направо. Пронаблюдайте изменение цвета авто.
  • Когда будете готовы, переключитесь в режим Edit Mode.
  • Перейдите в Раздел Каналов.
  • Подключите канал ‘Debug’ к каналу ‘Project’ . Обратите внимание на статистику, появившуюся на экране.
  • Перейдите в Раздел Анимации.
  • Проверьте всю статистику: частоту кадров (framerate), ширину и высоту разрешения экрана (width and height), поддержку бамповых карт (bump map) и поддержку пиксельных шейдеров (pixel shading).

  • Вернитесь в раздел каналов, найдите объект Rotation Check Box и привяжите канал Checkbox к Mouse Over Checkbox. Если вы теперь нажмете на чекбокс в окне анимации, автомобиль начнет вращаться.

Законченная сцена:
..\Tutorials\2.7 – Graphic user interface\Graphic user interface – Complete.cgr

Если у вас есть материалы, или вы хотите дополнить существующие, если вы хотите писать новости относящиеся к технологиям реалтайм рендеринга, или имеете полезные файлы, вы можете стать резидентом Guest3D.ru. Для этого нужно написать письмо в свободной форме на admin@guest3d.ru, с указанием вашей мотивации. Кроме того, каждый резидент получает возможность создать свою страницу, ссылка на которую будет прикреплена к каждому опубликованному вами материалу.
вход