Chapter 6 CS-396 Jeff Bush
Colors are RGBA but we only have used RGB and have kept A (𝛼) always 1
Alpha is opacity
▪ Opaque: 𝛼 = 1, no light passes through
▪ Transparent: 𝛼 = 0, all light passes through
▪ Translucent: some light passes through 𝑡𝑟𝑎𝑛𝑠𝑙𝑢𝑐𝑒𝑛𝑐𝑦 = 1 − 𝛼
Green
𝒂=𝟏
Blue
𝒂 = 𝟎. 𝟓
Yellow
𝒂 = 𝟎. 𝟓
Black
𝒂 = 𝟎. 𝟎𝟓
Red
𝒂=𝟏
Dealing with translucency in a physically correct manner is difficult
▪ The complexity of the interactions of light and matter
▪ We are using pipeline rendering and only know about the current vertex/fragment we are working with
During rendering we can expand our model to use 𝛼 of the fragment colors
All fragments for a pixel participate For each pixel:
pxColor = the clear/background color
For each fragment starting with furthest:
pxColor = blend(pxColor, fragColor)
▪ How does this compare to our current system?
Blends source 𝑆 and destination 𝐷 colors together
▪ 𝑆 is the output from the current fragment
▪ 𝐷 is final output color for the pixel (and temporary
pixel color while still processing fragments)
Need to define source 𝑠 and destination 𝑑
factors
▪ Determine the amount of 𝑆 and 𝐷 to utilize
The blended color is then:
𝐶=𝑠∗𝑆+𝑑∗𝐷
Just need to define the values of 𝑠 and 𝑑
Only supports specific 𝑠 and 𝑑 values, most common are:
gl.ZERO
gl.ONE
gl.SRC_ALPHA
gl.DST_ALPHA
gl.ONE_MINUS_SRC_ALPHA gl.ONE_MINUS_DST_ALPHA gl.SRC_COLOR
gl.DST_COLOR
gl.SRC_ALPHA_SATURATE
See developer.mozilla.org/docs/Web/API/WebGLRenderingContext/blendFunc for more
0 1
𝑆𝛼
1 − 𝑆𝛼 1 − 𝐷
𝐷 𝛼
𝛼
𝑆
𝐷
min 𝑆 , 1 − 𝐷
∗ 𝛼𝛼
gl.enable(gl.BLEND); gl.blendFunc(src_factor, dst_factor);
Default blending factors are gl.ONE so just add colors together without using 𝛼
▪ However if we pre-multiplied by 𝛼 this may be correct One of the most common sets of factors is
interpolative blending:
▪ 𝑠 is gl.SRC_ALPHA
▪ 𝑑 is gl.ONE_MINUS_SRC_ALPHA
▪ Destination 𝛼 is not used at all (which makes sense)
GPU handles overflow of colors by clamping
▪ Anything >1 is set to 1
▪ Anything <0 is set to 0
Means we can over- or under-saturate colors
by not using the appropriate factors
▪ Just end up getting white or black
If we add up too many values we may run into
accuracy issues
Is this image correct?
▪ Probably not
▪ Polygons are rendered in the order they pass down the pipeline
▪ Blending is drawing order dependent!
Suppose that we have a group of polygons some of which are opaque and some translucent
How do we use hidden-surface removal?
▪ Opaque polygons block all polygons behind them
▪ Affectthedepthbuffer
▪ Translucent polygons should not affect depth buffer
▪ Render with gl.depthMask(false) to make depth buffer read-only
▪ Or: sort all polygons first from front to back to remove order dependency
Can color a pixel by adding a fraction of its color to the frame buffer using blending
Fraction depends on:
▪ percentage of pixel covered by fragment ▪ whether there is overlap
no overlap overlap
Use average area 𝛼1 + 𝛼2 − 𝛼1𝛼2 as blending factor
How does culling effect the results?
▪ What do you want to use here?
How do the source and destination factors (func)
effect the results?
▪ Which seem the best for this situation?
▪ What does a source factor of 0 do?
How does lighting of the sides effect results? How does the clear color and 𝛼 effect the
results?
▪ How does it interact with the src/dst factors?
To accurately get results we need to sort all of our triangles from back-to-front and render each triangle in that order
▪ Not just the objects but even the triangles within a single object ▪ Required whenever we can see both sides or if there are intersecting
transparent objects
Fast and accurate solution are binary space partitioning trees:
▪ 𝑘-d trees ▪ quadtree ▪ octree
Too complicated to implement those trees ourselves in-class
▪ Although it would make a great final project with a demo showing the results
For now lets just make it automatically select whether the cube or tetrahedron should be rendered first
Try every combination and describe each one
docs.google.com/spreadsheets/d/1YAa0J56_aLS
lHBXaPKmH3-nN6h387uQyVJ7ApmDw56k/edit
Cube 𝛼 = 0.25, 𝛼 = 0.5, or 𝛼 = 1
Tetrahedron 𝛼 = 0.25, 𝛼 = 0.5, or 𝛼 = 1
Depth Testing enabled or disabled
Culling none or back
Blending enabled or disabled
▪ If blending enabled: various choices for factors
Make sure to view from all sides
When do we want depth testing enabled? When do we want culling of the back side?
▪ What does front culling cause?
▪ What does front-and-back culling cause?
When does blending need to be enabled?
▪ What source and destination factors are good?