Tạo hiệu ứng Colored Shadow Penumbra trong Unreal Engine 5: Đưa màu sắc vào vùng bán bóng

Tạo hiệu ứng Colored Shadow Penumbra trong Unreal Engine 5: Đưa màu sắc vào vùng bán bóng

Gần đây, tôi đã bắt gặp một hiệu ứng hình ảnh thú vị được Romain Durand chia sẻ trên mạng xã hội, nơi mà vùng bán bóng (penumbra) của các nguồn sáng sẽ có thêm màu sắc, thường được gọi là Colored Penumbra hay Colored Shadow Terminator. Tôi rất ấn tượng với hiệu ứng này nên đã quyết định tự mình triển khai và giờ đây xin chia sẻ lại với cộng đồng.

Nếu bạn muốn tìm hiểu sâu hơn về lý thuyết, bài viết trên Medium của Shahriar Shahrabi đã giải thích rất kỹ về cơ chế hoạt động của nó.

Minh họa hiệu ứng Colored Shadow Penumbra

Tại sao chỉnh sửa Engine Shaders?

Có nhiều cách để triển khai hiệu ứng này, nhưng tôi đã chọn phương pháp chỉnh sửa trực tiếp Engine Shaders (Shader của Engine). Cách tiếp cận này có những ưu và nhược điểm riêng:

Ưu điểm:

• Dễ thực hiện, không cần đoán định giá trị ánh sáng hay bóng tối (điều khá đau đầu nếu dùng giải pháp Post Process), đặc biệt khi làm việc với Lumen hoặc chu kỳ ngày/đêm.
• Hoạt động tốt với mọi loại ánh sáng.
• Hiệu suất xử lý cực kỳ nhẹ nhàng.

Nhược điểm:

• Mức độ bão hòa màu (color saturation) chỉ có thể cấu hình chung cho toàn bộ Engine, không thể tùy chỉnh riêng cho từng ánh sáng hay từng cảnh.
• Hiệu ứng chỉ rõ rệt khi vùng bán bóng đủ rộng.
• Chỉ hoạt động với Ánh sáng động (Dynamic Lights), không hỗ trợ Ánh sáng nướng (Baked Lights).

Chúng ta chỉ chỉnh sửa file shader chứ không can thiệp vào lõi của Engine, nên bạn vẫn có thể sử dụng phiên bản từ Launcher. Tôi đã giải thích chi tiết hơn về việc chỉnh sửa Engine Shaders trong bài viết trước, hãy đảm bảo bạn đã đọc qua để hiểu rõ những gì mình đang làm.

Cách triển khai

Nếu bạn đang sử dụng Substrate

Hãy mở file Engine\Shaders\Private\Substrate\SubstrateDeferredLighting.ush.

Tại dòng 190 (trong UE 5.7), tìm đoạn mã sau:

float3 SpecularLuminance = BSDFEvaluate.IntegratedSpecularValue * LightData.SpecularScale;

Và thêm ngay sau đó đoạn mã dưới đây:

// Colored shadow penumbra - Start
const float PenumbraSaturation = 4.0f; // cấu hình theo ý bạn (1.0 nghĩa là không thay đổi)
float3 LuminanceFactors = float3(0.3f, 0.59f, 0.11f); // Hệ số độ sáng để giảm bão hòa
float3 PenumbraColor = dot(DiffuseLuminance, LuminanceFactors); // Giảm bão hòa
PenumbraColor = lerp(PenumbraColor, DiffuseLuminance, PenumbraSaturation); // Áp dụng bão hòa (ngược lại với giảm bão hòa)
DiffuseLuminance = lerp(DiffuseLuminance, PenumbraColor, 1.0f - BSDFShadowTerms.SurfaceShadow); // Trộn màu
// Colored shadow penumbra - End

Nếu bạn KHÔNG sử dụng Substrate

Hãy mở file Engine\Shaders\Private\DeferredLightPixelShaders.usf.

Tại dòng 397 (trong UE 5.7), tìm đoạn mã sau:

OutColor += Radiance;

Và thêm ngay sau đó đoạn mã dưới đây:

// Colored shadow penumbra - Start
const float PenumbraSaturation = 4.0f; // cấu hình theo ý bạn (1.0 nghĩa là không thay đổi)
float3 LuminanceFactors = float3(0.3f, 0.59f, 0.11f); // Hệ số độ sáng để giảm bão hòa
float3 PenumbraColor = dot(OutColor.xyz, LuminanceFactors); // Giảm bão hòa
PenumbraColor = lerp(PenumbraColor, OutColor.xyz, PenumbraSaturation); // Áp dụng bão hòa (ngược lại với giảm bão hòa)
OutColor.xyz = lerp(OutColor.xyz, PenumbraColor, 1.0f - SurfaceShadow); // Trộn màu
// Colored shadow penumbra - End

Sau khi lưu file shader lại, hãy quay lại Unreal Engine và nhấn tổ hợp phím Ctrl + Shift + ., sau đó đi pha một tách cà phê trong lúc Engine biên dịch lại shader. Đơn giản vậy thôi!

Dưới đây là một số ảnh so sánh giữa có và không có hiệu ứng colored penumbra trên các cảnh từ Quixel:

So sánh hiệu ứng trên cảnh vật thể

So sánh chi tiết vùng bóng

Lưu ý rằng hiệu ứng trong các ảnh so sánh này được đẩy lên khá cao để bạn dễ thấy sự khác biệt. Trong thực tế, bạn có thể muốn cấu hình giá trị PenumbraSaturation thấp hơn một chút.

Ngoài ra, như bạn có thể thấy trong đoạn mã, cách triển khai này làm thay đổi màu bề mặt trở nên bão hòa hơn. Do đó, các bề mặt màu xám hoặc đã bão hòa hoàn toàn sẽ không có hiệu ứng này.

Nếu bạn có bất kỳ câu hỏi hay thắc mắc nào, đừng ngần ngại phản hồi trên các bài đăng tương ứng của tôi qua Twitter, Bluesky, ArtStation hay LinkedIn.