Метод отсечения по нормалям

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

Задание на лабораторную работу:

1. В цикле скрипта main.jsрассчитываем для каждого полигона значение intensity – интенсивность освещения. Косинус угла можно заменить на скалярное произведение векторов, если нормировать оба вектора (привести к длине равной единице). Длину вектора  можно сразу задать единичным

Для расчета необходимо будет добавить в файл geometry.jsновые функции работы с векторами

2. Используем полученное значение интенсивности при передачи цвета

3. Проверяем результат на модели (рис. 4.5). Дефекты на модели объясняются тем, что пока еще наш визуализатор не учитывает видимость граней. Мы исправим это в следующей работе.

рис. 4.5Плоская модель затенения

УДАЛЕНИЕ НЕВИДИМЫХ ГРАНЕЙ. Z-БУФЕР

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

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

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

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

В общем случае он представляет собой двумерный массив. Изначально мы заполняем его каким-нибудь значением, настолько маленьким, что координаты Z для точек сцены будут заведомо больше.Далее для каждой рисуемой точки считаем значение Z. Если оно больше, чем значение в Z-буфере, то ее рисуем и в Z-буфер записываем текущее значение Z. Если оно меньше, чем значение в Z-буфере – точка закрыта какой-то другой, уже нарисованной точкой, и мыее не рисуем (рис. 5.2).

Задание на лабораторную работу:

1. Добавляем в файл graphic.jsмассив zbufferнеобходимой размерности и заполнить его минимальными возможными значениями

2. Применяем алгоритм Z-буфера в функции triangle

3. Проверяем результат на модели (рис. 5.3)

рис. 5.2 Алгоритм Z-буфера

рис. 5.3 Плоская модель затенения с удалеными невидимыми гранями

НАЛОЖЕНИЕ ТЕКСТУРЫ

Текстура – это растровое изображения, накладываемая на поверхность модели. Помимо того, что текстура задает цвет, окрас модели, она позволяет воспроизвести небольшие объекты, создание которых полигонами оказалось бы чрезмерно ресурсоёмким (шрамы, элементы одежды и т.д.). Для нашей модели текстуры хранятся в формате TGA(рис. 6.1). Открыть и посмотреть их можно в программах ACDSee, IrfanView, GIMP, Paint.NETи т.д.

рис. 6.1 Дифузная текстура модели

В файле OBJесть следующие определения:

· Список текстурных координат

vt 0.123 0.249

vtXX

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

В определении треугольника второе число кортежа указывает на текстурные координаты вершины в данном треугольнике.

· Список граней

f -42/-42/-42 -41/-41/-41 -43/-43/-43

f X/X/X X/X/X X/X/X

Нам остается лишь интерполировать их внутри треугольника (рис. 6.2).

рис. 6.2 Текстурные координаты интерполируются для отображения на модели

Также с текстурами идет файл формата MTL – лист материалов. Его можно открыть простым блокнотом. Из него видно, что модель состоит из нескольких материалов, у каждого из которых своя собственная текстура.

В файле OBJесть определение usemtl. Оно и указывает на принадлежность граней материалу.

Задание на лабораторную работу:

1. Добавляем в свой проект скрипт tga.js(можно найти по ссылкеhttps://github.com/vthibault/jsTGALoader) Не забываем вписать его в index.html

2. В файл model.jsдобавляем два новых массива для текстур. Их заполняем точно также, как до этого заполняли массив вершин и граней.

Не забываем, что координаты текстур нам нужны в абсолютном виде. Также нужно учитывать, что система координат текстуры отличается от заданной нами экранной – у нас координата yувеличивается снизу вверх, а текстура читается сверху вниз

3. Также добавляем переменную материала. Значение будет меняться при достижении в файле OBJопределения usemtl. Текущее значение следует добавить к массиву с полигоном. Пусть в listFaceхранятся данные о полигонах, которые представлены тремя вершинами и ссылкой на материал.

4. Подключаем текстуру и получаем массив данных, в котором хранятся цвета пикселей.

5. Модифицируем нашу функцию triangle. Во входящие параметры мы добавляем:

a. текстурные координаты вершин (их нужно будет интерполировать)

b. интенсивность освещения (т.к. цвет будет считаться внутри функции)

c. массив текстур откуда брать цвет пикселя

В массиве цвета хранятся в модели RGBA. Т.е. чтобы получить значение синего компонента в пикселе с координатами пользуемся формулой:

6. Проверяем результат на модели (рис. 6.3)

рис. 6.3 Текстурированная модель

ЗАТЕНЕНИЕ ПО ФОНГУ

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

Таким образом видна «ребристость» модели, тогда как реальные трехмерные объекты имеют гладкие криволинейные поверхности. Но что если нам рассчитывать освещенность для каждой точки? (рис. 7.2)

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

рис. 7.2Плоская модель затенения (слева) и модель затенения по Фонгу (справа)

· Список вершинных нормалей

vn 0.7791682 -0.4117558 -0.4725487

vnXX X

Ав определении треугольника третье число кортежа указывает на нужные для данного треугольника нормали

· Список граней

f -42/-42/-42 -41/-41/-41 -43/-43/-43

f X/X/X X/X/XX/X/X

Остается интерполируем их внутри треугольника точно также как это делали с текстурами (рис 7.4)

рис. 7.4Интерполирование нормалей внутри треугольника

Задание на лабораторную работу:

1. В файл model.jsдобавляем два новых массива для нормалей. Их заполняем точно также, как до этого заполняли массив вершин, граней и текстур.

2. Модифицируем нашу функцию triangle. Во входящие параметры мы добавляем наши нормали (их нужно будет интерполировать). Интенсивность освещения будет рассчитываться для каждой рисуемой точки.

3. Проверяем результат на модели (рис. 6.3). На рисунке 6.4 можно увидеть разницу плоского затенения и затенения Фонга на нашей модели

рис. 7.5 Текстурная модель с затенением по Фонгу

рис. 7.6 Текстурная модель с плоским затенением (сверху) и затенением по Фонгу (снизу)