�ݺ�ߣ

Двухмерная графика
ИЗНУТРИ
Александр Бурт

Alexander Burt - Inside of 2D-graphics

Полутоновый экран

Центральная ямка

Плюсы и минусы

Y

X

Плюсы и минусы

Y
Z

X

Прямоугольные
ПИКСЕЛИ

Соотношение сторон

Монитор 1.0
PAL 1.09
PAL Widescreen 1.46
NTSC 0.91
NTSC Widescreen 1.21
Anamorphic 2.0
Cinemascope 2.39

ЧТО
ТАКОЕ
ПИКСЕЛЬ?

Преобразование координат
масштаб вращение

перспективная
смещение искажение
проекция

перспективная
проекция

Р А С
Т Е Р
И З А
Ц И Я

byte b = 0xFF; // 8 битов
ushort w = 0xFFFF; // 16 битов

0 1 2 3 4 5 6 7 8 9 A B C D E F ?

00 10
10 20
20 30
30 40
40 50
50 6060 70 70 80 80 90 90 A0 A0 B0 B0C0 C0D0 E0
D0 F0
E0 F0
FF FF

0 1 2 3 4 5 6 7 8 9 A B C D E F

00 10 20 30 40 50 60 70 80 90 A0 B0 C0 D0 E0 F0 FF

00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF

000 111 222 333 444 555 #fff ≡
666 777 #ffffff
888 999 AAA BBB CCC DDD EEE FFF

0000 1111 2222 3333 4444 5555 6666 7777 8888 9999 AAAA BBBB CCCC DDDD EEEE FFFF

byte b = 0x98;
ushort w = b << 8; // 0x9800
ushort w = (b << 8) | b; // 0x9898

ushort w = 0x98FF;
byte b = w >> 8; // 0x98
byte b = (w + 0x80) >> 8; // 0x997F >> 8 = 0x99

96 97 98 99 9A

9666 96EE 9777 97FF 9888 9911 9999 9A22 9AAA

98FF

ushort w = 0x9900;
byte b = w >> 8; // 0x99
byte b = (w + 0x80) >> 8; // 0x9980 >> 8 = 0x99

96 97 98 99 9A

9666 96EE 9777 97FF 9888 9911 9999 9A22 9AAA

9900

96 97 98 99 9A
111

88

9666 96EE 9777 97FF 9888 9911 9999 9A22 9AAA

ushort w = 0x9900;

byte b =
((w & 0xF000) >> 8)
| ((w & 0x0FFF) + 0x88) / 0x111; // 0x98

ushort w = 0x9900;
byte b = w >> 8;
byte b = (w + 0x80) >> 8;

00 01 FF

0000..00FF
... FF00..FFFF

Image
class Image
{
public:
Image(uint width, uint height)
: m_width(width)
, m_height(height)
{
m_buffer = (pix8*)calloc(m_width * m_height, sizeof(pix8));
}

~Image() { free(m_buffer); }

uint GetWidth() { return m_width; }
uint GetHeight() { return m_height; }

pix8* GetBuffer() const { return m_buffer; }

private:
uint m_width;
uint m_height;

pix8* m_buffer;
};

Graphics
class Graphics
{
public:
Graphics(Image* image) : m_image(image) {}

void FillRect(int x, int y, int width, int height, const Brush& brush);
void DrawImage(int x, int y, Image* image, float opacity);

/*
*
*
*
* ...etc...
*
*
*
*/

private:
Image* m_image;
};

Единичный отрезок

Интерполяция

A B C

float a = … ; // [0..1]
float b = … ; // [0..1]

float c = a * b;

int a = … ; // [0..255]
int b = … ; // [0..255]

int c = a * b;

float fa = (float)a / 255.0;
float fb = (float)b / 255.0;

int c = (int)((fa * ft) * 255.0);

int MultInt(int a, int b)
{
return (a * b) / 255;
}

{
return (a * b) >> 8; // (a * b) / 256
}

{
return (a * b + 0x80) >> 8;
}

{
int temp = a * b + 0x80;
return (temp + (temp >> 8)) >> 8;
}

int a = … ; // [0..255]
int b = … ; // [0..255]
int t = … ; // [0..255]

int c = a + IntMult(b – a, t);

int p1 = … ; // 0xAARRGGBB
int p2 = … ; // 0xAARRGGBB
int t = … ; // [0..255]

int r1 = (p1 >> 16) & 0xFF;
int g1 = (p1 >> 8) & 0xFF;
int b1 = (p1 ) & 0xFF;
int a1 = (p1 >> 24) & 0xFF;

int r2 = (p2 >> 16) & 0xFF;
int g2 = (p2 >> 8) & 0xFF;
int b2 = (p2 ) & 0xFF;
int a2 = (p2 >> 24) & 0xFF;

int r3 = r1 + MultInt(r2 – r1, t);
int g3 = g1 + MultInt(g2 – g1, t);
int b3 = b1 + MultInt(b2 – b1, t);
int a3 = a1 + MultInt(a2 – a1, t);

int p3 =
(r3 << 16)
| (g3 << 8)
| (b3 )
| (a3 << 24);

union pix8
{
int RGBA;
struct { byte R, G, B, A };
};

//
// ...
//

pix8& p1 = (pix8&)… ; // 0xAARRGGBB
pix8& p2 = (pix8&)… ; // 0xAARRGGBB
int t = … ; // [0..255]

pix8 p3;

p3.R = p1.R + MultInt(p2.R – p1.R, t);
p3.G = p1.G + MultInt(p2.G – p1.G, t);
p3.B = p1.B + MultInt(p2.B – p1.B, t);
p3.A = p1.A + MultInt(p2.A – p1.A, t);

Цветовые пространства
Цветовые пространства

компонентные хроматические концептуальные

Распределение конусов

CIE 1931 2° Стандартный наблюдатель

Гамут
1
0.9

0.8

0.7

0.6

0.5

0.4

0.3

0.2

0.1

0
0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1

Гамут
1
0.9
спектральный
локус
0.8

0.7

0.6

0.5

0.4

0.3

0.2

0.1

0
0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1

Гамут
1
0.9

0.8

0.7

0.6

0.5

0.4

0.3

0.2

0.1

0
0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 1 0.8 0.9

фиолетовый край

Гамут
1
0.9

0.8 локус
0.7 чѐрного тела
0.6

0.5

0.4

0.3

0.2

0.1

0
0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1

Компоновка
(compositing)

Перемножение
Цвета

неперемноженный
(unpremultiplied)

перемноженный
(premultiplied)

линейный радиальный угловой

t
t t

Нарочный
антиалиасинг

class ColorBrush : Brush
{
public:
ColorBrush(const Color& color) : m_color(color) {}

// virtual
void FillScanline(Image& img, int y, int[] edges)
{
assert(edges.Count % 2 == 0);

for (int i = 0; i < edges.Count; i += 2)
{
for (int x = edges[i]; x < edges[i + 1]; x++)
{
pix8& pix = img.Buffer[y * img.Width + x];
pix = Over(pix8(m_color), pix);
}
}
{

private:
Color m_color;
};

Brush
Color Brush
Gradient Brush
Linear Gradient Brush
Radial Gradient Brush
Angular Gradient Brush
Pattern Brush
Noise Brush
...

Векторная

графика

Ненулевая намотка

Концы
тупые

квадратные

круглые

Опять координаты

void DrawLine(FPoint p1, FPoint p2, float width)
{
p1 += FPoint(0.5, 0.5);
p2 += FPoint(0.5, 0.5);

// ...
}

DrawLine(FPoint(3, 2), FPoint(12, 2), 1);


{
p1 += FPoint(0.5, 0.5);
p2 += FPoint(0.5, 0.5);

// ...
}



{
p1 += FPoint(0.5, 0.5);
p2 += FPoint(0.5, 0.5);

// ...
}

DrawLine(FPoint(3.5, 1.5), FPoint(11.5, 1.5), 2);


{
// ...
}



{
// ...
}

DrawLine(FPoint(3, 2.5), FPoint(13, 2.5), 1);

Толстые полилинии

Стыки

фасковый угольный круглый

Митровое соотношение

Митровое соотношение (WPF)

Митровый лимит (WPF)

Т о н к и е л и н и и

float _width = max(1, width);

float _opacity =
width < 1
? opacity * width
: opacity;

DrawLine(..., _width, _opacity);

знаем t, какая P01?

знаем P01, какой t?

// float t

float _1mt = 1 – t;

p01.X = _1mt * p0.X + t * p1.X;
p01.Y = _1mt * p0.Y + t * p1.Y;

// float t

float tm1 = t – 1;
float t2 = t * t;
float tm12 = tm1 * tm1;
float _2ttm1 = 2 * t * tm1;

p012.X = tm12 * p0.X – _2ttm1 * p1.X + t2 * p2.X;
p012.Y = tm12 * p0.Y – _2ttm1 * p1.Y + t2 * p2.Y;

// float t

float t2 = t * 2;
float t3 = t2 * t;
float _1mt = 1 – t;
float _1mt2 = _1mt * _1mt;
float _1mt3 = _1mt2 * _1mt;
float _3t_1mt2 = 3 * t * _1mt2;
float _3t2_1mt = 3 * t2 * _1mt;

p0123.X = _1mt3 * p0.X – _3t_1mt2 * p1.X + _3t2_1mt * p2.X + t3 * p3.X;
p0123.Y = _1mt3 * p0.Y – _3t_1mt2 * p1.Y + _3t2_1mt * p2.Y + t3 * p3.Y;

Метод Ньютона

   

Геометрические
формы

Закруглѐнные углы

Сглаживание

(antialiasing)

Аналитическое сглаживание

%

Аналитическое сглаживание

Облом с прозрачностью

Расположение субпикселей

RGB (горизонтально)

ПРОТИВНАЯ ГАММА

Контрастность зрения

100:1*

* Вообще-то 1000:1, но типичные условия не позволяют

Порог различения

Y Y+ΔY

Y0
ΔY ≈ 0.01

Сколько нужно битов?

14 битов

9 битов*

* то есть 8 :)

Сколько нужно битов?

256
8 битов

Проблема кода 100

0 · · · · · · · · · · · · · · · · · · · · 255

лишние

не хватает
Δ ≈ 0.01

Проблема кода 100

лишние

не хватает

Путь света

гамма гамма «гамма»
камеры дегамма гамма монитора глаз

?
свет 8-bit 16-bit 16-bit 8-bit свет зрение
RGB RGB RGB RGB

для наших глаз
свет более светлый,
светлый
чем темнота тѐмная

Калибрация

0.8


1.0


1.2


1.4


1.6


1.8


2.0


2.2

1

0
R G B R G B R G B

порог
случайность

распыление

полутон

Bayer

Floyd-Steinberg

Выбор языка

С (недоС++)

Исключение как правило

GetPixel(int x, int y);
SetPixel(int x, int y, int color);

pix8* buffer = image->GetBuffer();
int imageWidth = image->GetWidth();

...buffer[y * imageWidth + x]...

if (...)
{

}
else
{

}

int c = min(a, b); // c = a < b ? a : b
int c = a + (((b - a) >> 31) & (b - a));

int b = a / 3;
int b = (int)(((__int64)a * 0x55555556) >> 32);

�ݺ�ߣ

Alexander Burt - Inside of 2D-graphics

More Related Content

Alexander Burt - Inside of 2D-graphics

Editor's Notes