Bloom and color grading in Unity - Step-by-Step Execution

Concept Flow - Bloom and color grading

Start: Render Scene

↓

Extract Bright Areas

↓

Apply Blur to Bright Areas

↓

Combine Blurred Bright Areas with Original Scene

↓

Apply Color Grading Adjustments

↓

Output Final Image

The rendering process extracts bright parts, blurs them to create bloom, then combines with the original image, and finally applies color grading to adjust colors.

Execution Sample

Unity

using UnityEngine;
using UnityEngine.Rendering.PostProcessing;

public class BloomColorGradingExample : MonoBehaviour {
    public PostProcessVolume volume;
    void Start() {
        var bloom = volume.profile.GetSetting<Bloom>();
        bloom.intensity.value = 5f;
        var colorGrading = volume.profile.GetSetting<ColorGrading>();
        colorGrading.saturation.value = -20f;
    }
}

This code sets bloom intensity and reduces color saturation using Unity's PostProcessing stack.

Execution Table

Step	Action	Parameter Changed	Value	Effect
1	Start rendering scene	-	-	Scene rendered normally
2	Extract bright areas	Threshold	Default	Bright parts isolated
3	Apply blur to bright areas	Blur amount	Default	Bright areas blurred for glow
4	Combine blurred bright areas with original	Intensity	5	Strong bloom glow added
5	Apply color grading	Saturation	-20	Colors become less vibrant
6	Output final image	-	-	Image with bloom and color grading shown

💡 Rendering completes with bloom and color grading applied to the final image.

Variable Tracker

Variable	Start	After Step 4	After Step 5	Final
bloom.intensity.value	Default (1)	5	5	5
colorGrading.saturation.value	Default (0)	0	-20	-20

Key Moments - 2 Insights

Why does increasing bloom intensity make bright areas glow more?

Because in step 4 of the execution_table, the blurred bright areas are combined with the original image multiplied by the bloom intensity value, so higher intensity means stronger glow.

Why does reducing saturation in color grading make colors look dull?

As shown in step 5, lowering saturation reduces the vividness of colors, making them appear less vibrant and more grayish.

Visual Quiz - 3 Questions

Look at the execution_table, what is the bloom intensity value after step 4?

A 5

B 1

C 0

D -20

💡 Hint

Check the 'Parameter Changed' and 'Value' columns at step 4 in execution_table.

At which step is color saturation changed?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Look for 'Apply color grading' action in execution_table.

If bloom intensity was set to 0, what would happen to the final image?

A Colors would be more saturated

B No bloom glow would appear

C Bright areas would be more blurred

D Image would be black and white

💡 Hint

Refer to variable_tracker and execution_table step 4 about bloom intensity effect.

Concept Snapshot

Bloom adds glow by blurring bright parts and mixing them back.
Color grading adjusts colors like saturation and contrast.
In Unity, use PostProcessVolume to set bloom intensity and color grading.
Higher bloom intensity means stronger glow.
Lower saturation makes colors duller.
These effects combine to enhance scene visuals.

Full Transcript

This visual execution trace shows how bloom and color grading work in Unity's rendering pipeline. First, the scene is rendered normally. Then bright areas are extracted and blurred to create a glow effect called bloom. This blurred glow is combined with the original image, controlled by bloom intensity. Next, color grading adjusts the image colors, for example by reducing saturation to make colors less vibrant. The final image shows the combined effect of bloom and color grading. Variables like bloom intensity and color grading saturation change step-by-step, affecting the final look. Understanding these steps helps beginners see how visual effects enhance game graphics.

Practice

1. What does the Bloom effect do in Unity's post-processing?

easy

A. Adds a soft glow to bright areas to make lights look natural

B. Changes the color saturation of the entire scene

C. Sharpens the edges of objects in the scene

D. Removes shadows from the scene

Solution

1. Step 1: Understand Bloom effect purpose

   Bloom adds a glow effect around bright parts of the image to simulate light scattering.

2. Step 2: Compare options to Bloom definition

   Only Adds a soft glow to bright areas to make lights look natural describes adding a soft glow to bright areas, matching Bloom's function.

3. Final Answer:

   Adds a soft glow to bright areas to make lights look natural -> Option A

4. Quick Check:

   Bloom = Soft glow on bright areas [OK]

Hint: Bloom = glow around bright lights, not color changes [OK]

Common Mistakes:

• Confusing Bloom with color grading
• Thinking Bloom sharpens edges
• Assuming Bloom removes shadows

2. Which of the following is the correct way to enable Bloom in a Unity Volume component via script?

easy

A. volume.profile.Enable<Bloom>();

B. volume.profile.TryGet<Bloom>(out Bloom bloom); bloom.active = true;

C. volume.profile.SetActive<Bloom>(true);

D. volume.profile.GetComponent<Bloom>().enabled = true;

Solution

1. Step 1: Recall Unity Volume API for post-processing

   To access and enable Bloom, use TryGet to get the Bloom component and set its active property.

2. Step 2: Analyze each option's syntax

   volume.profile.TryGet<Bloom>(out Bloom bloom); bloom.active = true; uses TryGet and sets bloom.active = true, which is correct. Others use invalid or non-existent methods.

3. Final Answer:

   volume.profile.TryGet<Bloom>(out Bloom bloom); bloom.active = true; -> Option B

4. Quick Check:

   Use TryGet and set active true [OK]

Hint: Use TryGet to access and activate Bloom in Volume profile [OK]

Common Mistakes:

• Using GetComponent instead of TryGet
• Calling non-existent Enable or SetActive methods
• Setting enabled instead of active property

3. Given this code snippet in Unity, what will be the effect on the scene's color grading?

var volume = GetComponent<Volume>();
if (volume.profile.TryGet<ColorAdjustments>(out var colorAdjust)) {
    colorAdjust.saturation.value = -100f;
    colorAdjust.contrast.value = 50f;
}

medium

A. The scene colors become fully desaturated with increased contrast

B. The scene colors become more saturated and less contrasty

C. The scene brightness increases but colors stay the same

D. No change happens because values are invalid

Solution

1. Step 1: Understand colorAdjust properties set

   Saturation is set to -100, which means no color (black and white). Contrast is increased to 50, making differences stronger.

2. Step 2: Predict visual effect on scene

   The scene will look grayscale with stronger contrast between light and dark areas.

3. Final Answer:

   The scene colors become fully desaturated with increased contrast -> Option A

4. Quick Check:

   Saturation -100 + Contrast 50 = grayscale + strong contrast [OK]

Hint: Negative saturation means grayscale; contrast >0 means stronger contrast [OK]

Common Mistakes:

• Thinking negative saturation increases color
• Confusing contrast with brightness
• Assuming no effect from these values

4. You wrote this code to enable Bloom but it doesn't show any effect:

var volume = GetComponent<Volume>();
if (volume.profile.TryGet<Bloom>(out var bloom)) {
    bloom.enabled.value = true;
}

What is the likely problem?

medium

A. You need to set bloom.intensity.value to a positive number

B. TryGet is incorrect; use GetComponent instead

C. Bloom effect must be added to the camera, not the volume

D. You should set bloom.active = true, not bloom.enabled.value

Solution

1. Step 1: Check how Bloom is enabled

   Bloom is enabled by setting bloom.active = true (Bloom has no 'enabled' property).

2. Step 2: Identify missing or wrong property

   The code sets non-existent bloom.enabled.value, so Bloom is not enabled (compile error).

3. Step 3: Understand correct fix

   Use bloom.active = true instead, as stated in You should set bloom.active = true, not bloom.enabled.value. (Also ensure intensity > 0 for visibility.)

4. Final Answer:

   You should set bloom.active = true, not bloom.enabled.value -> Option D

5. Quick Check:

   Bloom uses active, not enabled [OK]

Hint: Use bloom.active = true, not enabled.value [OK]

Common Mistakes:

• Not setting intensity value
• Confusing enabled with active property
• Trying to add bloom to camera instead of volume

5. You want to create a night scene with a blue tint and soft glowing street lights using Unity's Volume system. Which combination of settings achieves this best?

hard

A. Set Color Adjustments temperature to 50, saturation to 50; disable Bloom

B. Set Color Adjustments contrast to 100; enable Bloom with intensity 0

C. Set Color Adjustments temperature to -50, saturation to -20; enable Bloom with intensity 1.5

D. Set Color Adjustments exposure to 5; disable Bloom

Solution

1. Step 1: Choose color adjustments for blue tint and mood

   Lower temperature (negative) adds blue tint; slight desaturation (-20) softens colors for night mood.

2. Step 2: Enable Bloom for glowing street lights

   Bloom intensity 1.5 adds soft glow around bright lights, perfect for street lamps.

3. Step 3: Evaluate other options

   Set Color Adjustments temperature to 50, saturation to 50; disable Bloom warms colors (wrong for night), disables bloom; C sets bloom intensity 0 (no glow); D overexposes scene and disables bloom.

4. Final Answer:

   Set Color Adjustments temperature to -50, saturation to -20; enable Bloom with intensity 1.5 -> Option C

5. Quick Check:

   Blue tint + bloom glow = night scene effect [OK]

Hint: Blue tint = negative temperature; bloom intensity > 0 for glow [OK]

Common Mistakes:

• Using positive temperature for blue tint
• Setting bloom intensity to zero
• Overexposing scene for night effect