Дмитрий Кашицын, Троллейбус из буханки: алиасинг и векторизация в LLVM
Компьютерная графика в Processing, часть 7. 3D в Processing
1. Компьютерная графика
3D в processing
Jordi Linares i Pellicer
Escola Politècnica Superior d’Alcoi
Dep. de Sistemes Informàtics i Computació
jlinares@dsic.upv.es
http://www.dsic.upv.es/~jlinares
2. 3D в processing
•
•
•
•
•
•
В processing есть 2 режима отображения 3D: P3D и OPENGL
P3D основано на программной реализации, OPENGL
выполняется через OpenGL («железо»). За несколькими
исключениями, в них одни и те же функции и примитивы
2D примитивы и функции можно использовать в 3D
(возможно, с несколькими исключениями)
Некоторые из примитивов, такие как линии (line),
точки (point), кривые и фигуры (примитив vertex), могут
задаваться через 3 координаты: x, y, z
Остальные 2D примитивы тоже можно использовать (с
z=0 по умолчанию)
Функции stroke, fill, text и image (текстуры) тоже можно
использовать в 3D
4. 3D в processing
Геометрические преобразования в 3D
Перенос
translate(tx, ty, tz)
Масштабирование
scale(sx, sy, sz)
Вращение вокруг оси
rotateX(), rotateY(), rotateZ()
5. 3D в processing
•
•
•
По умолчанию используется перспективная проекция
(0,0,0) находится в верхнем левом углу
-z уходит вдаль
-z
(0,0,0)
yx+z
6. 3D в processing
// Эллипс, вращающийся
// вокруг оси y
float ang = 0.0;
void setup()
{
size(400, 400, P3D);
stroke(255, 0, 0);
noFill();
}
void draw()
{
background(0);
// Рисование с центром в
// (0,0,0)
translate(width/2, height/2);
rotateY(ang += 0.1);
ellipse(0, 0, 300, 200);
}
7. 3D в processing
box(width, height, depth)
•
Рисует кубоид, правильную призму, с центром в (0,0,0)
с шириной (x), высотой (y) и глубиной (z) в качестве
аргументов
sphere(radius)
•
•
Рисует сферу с центром в (0,0,0) с заданным радиусом
Уровень детализации, с которой рисуется сфера, можно
настроить через функцию sphereDetail(n), где n
означает, что вершины будут порождаться через каждые
360º/n (по умолчанию, n = 30)
8. 3D в processing
// Куб, вращающийся
// вокруг трёх осей
// Версия с каркасом
void setup()
{
size(400, 400, P3D);
stroke(255, 0, 0);
noFill();
}
void draw()
{
background(0);
// Рисование с центром
// в (0,0,0)
translate(width/2, height/2);
rotateX(frameCount*PI/60.0);
rotateY(frameCount*PI/120.0);
rotateZ(frameCount*PI/180.0);
box(200, 200, 200);
}
9. 3D в processing
// Куб, вращающийся
// вокруг трёх осей
// Версия с гранями
void setup()
{
size(400, 400, P3D);
fill(255, 0, 0);
}
void draw()
{
background(0);
// Рисование с центром
// в (0,0,0)
translate(width/2, height/2);
rotateX(frameCount*PI/60.0);
rotateY(frameCount*PI/120.0);
rotateZ(frameCount*PI/180.0);
box(200, 200, 200);
}
10. 3D в processing
// Куб, вращающийся
// вокруг трёх осей
// Версия с простым освещением
void setup()
{
size(400, 400, P3D);
fill(255, 0, 0);
noStroke();
}
void draw()
{
background(0);
// Простое освещение
lights();
// Рисование с центром
// в (0,0,0)
translate(width/2, height/2);
rotateX(frameCount*PI/60.0);
rotateY(frameCount*PI/120.0);
rotateZ(frameCount*PI/180.0);
box(200, 200, 200);
}
12. Практика 7-1
•
•
•
•
Измените предыдущую программу так, чтобы было
возможно увеличение, путём перемещения куба по оси z
Для этого необходимо добавить компонент z в операцию
переноса
Изначально эта координата будет 0 и будет изменяться от
0 до -500 по шагам в 10
Используйте клавиши UP и DOWN, чтобы поймать событие
keyPressed() и изменить увеличение
17. Практика 7-2
•
Измените предыдущую программу, чтобы нарисовать
поверхность в «твёрдом» режиме с использованием
простой модели освещения (используйте lights()
и fill())
18. Практика 7-3
•
•
Измените предыдущую программу, чтобы нарисовать
поверхность с двухцветным градиентом (например,
красный для малых значений z, а жёлтый для больших)
Для этого используйте вызов fill() перед каждым
вызовом vertex()
19. Практика 7-4
•
Снова измените предыдущую программу, чтобы вместо
рисования функции загружать изображение, и после
перевода в серую шкалу, использовать значения пикселей
как координаты по z для полосы четырёхугольников