Blending Jaanus Jaggo 1 The Roadmap This week 2 This lecture - - PowerPoint PPT Presentation

blending
SMART_READER_LITE
LIVE PREVIEW

Blending Jaanus Jaggo 1 The Roadmap This week 2 This lecture - - PowerPoint PPT Presentation

Blending Jaanus Jaggo 1 The Roadmap This week 2 This lecture How to determine which pixel is visible? How to represent transparency? How to draw semitransparent pixel? 3 Back to projections What does the projection matrix do?


slide-1
SLIDE 1

Blending

Jaanus Jaggo

1

slide-2
SLIDE 2

The Roadmap

This week

2

slide-3
SLIDE 3

This lecture

  • How to determine which pixel is visible?
  • How to represent transparency?
  • How to draw semitransparent pixel?

3

slide-4
SLIDE 4

Back to projections

What does the projection matrix do?

4

slide-5
SLIDE 5

Back to projections

What does the projection matrix do?

5

slide-6
SLIDE 6

Projection matrix

With projection matrix we transform the z coordinate to range [-1, 1]

6

slide-7
SLIDE 7

Projection matrix - z value

How can we store this value?

7

slide-8
SLIDE 8

Projection matrix - z value

How do we store this value?

We normalize it to range [0,1] by substituting:

Finally we multiply it with the max value and round it to an integer.

8

slide-9
SLIDE 9

Depth buffer

While objects are rendered one by one the complete image is stored in the framebuffer. Framebuffer is a collection of buffers including color buffer, depth buffer and some other buffers. Depth buffer is a 2D array with one integer value for each screen space pixel.

9

slide-10
SLIDE 10

Depth buffer is not linear

But this is a linear representation:

10

slide-11
SLIDE 11

Depth buffer

When new portion of geometry is processed how do we determine which pixels should be drawn to the framebuffer?

11

slide-12
SLIDE 12

Depth testing

Depth test compares each pixel z value to the corresponding pixel z value in the framebuffer. But what happens if both pixels have the same z value, and when does it happen?

12

slide-13
SLIDE 13

Z-fighting

How to avoid:

  • Reducing view frustum depth
  • Careful modelling of distant geometry

Example: https://www.youtube.com/watch?v=XjHt-4Z6PwI&t=1m04s

13

slide-14
SLIDE 14

Some depth buffer applications

  • Fog
  • Depth of field
  • Screen Space Ambient Occlusion (SSAO)
  • Shadows
  • Soft particles

14

slide-15
SLIDE 15

Fog

15

slide-16
SLIDE 16

Depth of field

16

slide-17
SLIDE 17

Screen Space Ambient Occlusion

17

https://www.youtube.com/watch?v=-IFxjKT7MXA

slide-18
SLIDE 18

Shadow projection

18

slide-19
SLIDE 19

Soft particles

https://www.youtube.com/watch?v=ES0IY_e5Kd8

19

slide-20
SLIDE 20

Color blending

Color blending is a way to mix source and destination colors together to produce third color.

Color:

20

slide-21
SLIDE 21

Alpha

Color consists of R, G, B, A channels At the fundamental level Alpha has no meaning Most often it’s used to represent transparency. Two ways:

  • Conventional (straight) alpha
  • Premultiplied alpha

21

slide-22
SLIDE 22

Conventional alpha

Transparency is considered as:

  • RGB specifies the color of the object
  • Alpha specifies how solid it is

22

slide-23
SLIDE 23

Conventional alpha

Blend equation:

23

slide-24
SLIDE 24

Conventional alpha

Blend equation: Problem: if we sample floating point precision we could encounter color bleeding issue: https://www.youtube.com/watch?v=dU9AXzCabiM

24

slide-25
SLIDE 25

Premultiplied alpha

Transparency is considered as:

  • RGB specifies how much color the object

contribute to the scene

  • Alpha specifies how much it obscures

whatever is behind it

25

slide-26
SLIDE 26

Conventional alpha

Blend equation:

26

slide-27
SLIDE 27

Conventional alpha

Blend equation: Advantages:

  • no bleed issues
  • blend function has one less multiplication
  • Normal and additive blending can be done within the

same batch

  • Smooth transformation from normal to additive

https://www.shadertoy.com/view/MdfGRX

27

slide-28
SLIDE 28

Alpha conventions

The information whether an image has straight

  • r premultiplied alpha is not stored in file itself.

Do not mix them together:

http://www.andersriggelsen.dk/glblendfunc.php

28

slide-29
SLIDE 29

Blend function

Generalized formula: Conventional alpha blending:

  • blendFunction =
  • sourceBlendFactor =
  • destBlendFactor =

29

slide-30
SLIDE 30

Blend function

Generalized formula: Conventional alpha blending:

  • blendFunction = GL_FUNC_ADD
  • sourceBlendFactor =
  • destBlendFactor =

30

slide-31
SLIDE 31

Blend function

Generalized formula: Conventional alpha blending:

  • blendFunction = GL_FUNC_ADD
  • sourceBlendFactor = GL_SRC_ALPHA
  • destBlendFactor =

31

slide-32
SLIDE 32

Blend function

Generalized formula: Conventional alpha blending:

  • blendFunction = GL_FUNC_ADD
  • sourceBlendFactor = GL_SRC_ALPHA
  • destBlendFactor = GL_ONE_MINUS_SRC_ALPHA

32

slide-33
SLIDE 33

Additive blending

  • Behaves similarly to the light
  • blend(source, dest) = (source * 1) + (dest * 1)

33

slide-34
SLIDE 34

Multiplicative blending

  • Useful for shadows
  • blend(source, dest) = (source * 0) + (dest * source)

34

slide-35
SLIDE 35

Try it yourself

http://www.andersriggelsen.dk/glblendfunc.php

35

Video recommendation for game designers: https://www.youtube.com/watch?v=AJdEqssNZ-U

slide-36
SLIDE 36

Color correction

36

slide-37
SLIDE 37

Curves

37

slide-38
SLIDE 38

What did you learn today? What more would you like to know?

38