[Оглавление]

Информационные технологии в расчетах динамики твердого тела. П.з. №4.
Разработка 3D-сцены по вариантам. Движение деталей. Камера

Цель лабораторной работы – познакомиться c процедурой подготовки аффинных матриц для создания динамических 3D-сцен. Практическое занятие проводиться в компьютерном классе, в течение двух академических часов. Студенты работают самостоятельно по методическим указаниям. Преподаватель помогает и отвечает на вопросы.

Первая часть работы связана с изучением эмуляции перемещения камеры в 3D-сцене. В прикладном интерфейсе программирования WebGL камера не перемещается, и находиться в позиции [0, 0, 0]. Перемещают всю сцену перед камерой. Для этого заполняют коэффициентами "Обратную матрицу камеры", и, далее по коду, инициируют ей "Матрицу сцены".

1.  Сделать копию файла (VV – вариант)
      VV_01.htm
    определить новое имя в соответствии с маской
      VV_02.htm

2.  В функции drawScene заполнить "Обратную матрицу камеры".
    Использовать "метод прямых движений с инверсией" и функции
    библиотеки glMatrix [1], входящие в состав объектов quat и mat4:
    - Определить статическую переменную cmAngl в функции drawScene
    - Определить приращение переменной на 0.5 градуса за кадр анимации
    - Сбросить "Обратную матрицу камеры" к единичной
    - Составить кватернион поворота камеры вокруг оси Y из углов Эйлера
        quat.fromEuler(qCam, 0.0, cmAngl, 0.0);
    - Пересчитать кватернион в аффинную матрицу
        qCam в qtMatrix
    - Пересчитать коэффициенты "Обратной матрицы камеры" так,
      чтобы в позиции [0, 0, 0] камера повернулась на угол cmAngl
    - Отодвинуть камеру от позиции [0, 0, 0] по оси Z на 7 единиц
    - Инвертировать матрицу, чтобы завершить её заполнение
    - Инициировать "Матрицу сцены" (mvMatrix) "Обратной матрицей камеры"
    - Убедиться в том, что создан эффект вращения 3D-сцены перед камерой

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

1.  В функции
      initBuffers
    определить массив вершин пирамиды
      vertex.position.raphBuffer
    и массив цветов для вершин пирамиды
      vertex.color.raphBuffer
    Координата [0, 0, 0] должна принадлежать основанию пирамиды.
    Размеры основания должны быть чуть больше диаметра цилиндра

2.  В функции drawScene, после кода отрисовки цилиндра, написать
    код отрисовки пирамиды над цилиндром:
    - Изменить коэффициенты "Матрицы сцены" (mvMatrix) так, чтобы
      позиция отрисовки пирамиды сместилась по оси Y на 1.2 ед
    - Загрузить аффинные матрицы область данных программы видеокарты
    - Нарисовать пирамиду

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

1.  В функции drawScene, перед кодом отрисовки пирамиды, внести изменения
    в коэффициенты "Матрицы сцены" так, чтобы манипулятор рисования
    поворачивался вокруг оси Y на небольшой угол за каждый кадр анимации:
    - Определить статическую переменную dwAngl в функции drawScene
    - Определить приращение переменной на 0.3 градуса за кадр анимации
    - Составить кватернион поворота вокруг оси Y из углов Эйлера
        quat.fromEuler(qDw, 0.0, dwAngl, 0.0);
    - Пересчитать кватернион в аффинную матрицу
        qDw в qtMatrix
    - Внести изменения в коэффициенты "Матрицы сцены"
    - Убедиться в том, что пирамида над цилиндром вращается

2.  Полученный результат, файлы:
      VV_01.htm, VV_02.htm и gl-matrix-min.js
    сохранить на флешь-носитель и приносить на все последующие занятия.

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

Литература

  1. Brandon Jones. glMatrix – Javascript Matrix and Vector library for High Performance WebGL apps // URL: http://glmatrix.net (дата обращения: 14.09.2017).
  2. WebGLFundamentals.org: WebGL – Камеры // URL: https://webglfundamentals.org/webgl/lessons/ru/webgl-3d-camera.html (дата обращения: 23.08.2017).
  3. Sergey. Перевод уроков "WebGL lessons: Урок 10 – Загрузка мира и основы камеры" // DevBurn.ru. URL: http://devburn.ru/webgl-урок-10-загрузка-мира-и-основы-камеры/ (дата обращения: 23.08.2017).
  4. Илья Кантор. Современный учебник Javascript. // – URL: http://javascript.ru/. – URL: https://learn.javascript.ru (дата обращения: 14.09.2017).

14.09.2017