Giới thiệu

Trong phần trước của chuỗi bài viết này, chúng ta đã cùng nhau tìm hiểu về cách tạo ra một engine WebGPU từ đầu. Hôm nay, chúng ta sẽ đi sâu vào một khái niệm quan trọng trong đồ họa 3D: ánh sáng dựa trên vật lý (PBR). Ánh sáng PBR không chỉ mang lại vẻ đẹp tự nhiên cho các mô hình mà còn giúp chúng ta hiểu rõ hơn về cách ánh sáng tương tác với các bề mặt vật liệu trong thế giới thực.

Tại sao cần PBR?

Ánh sáng dựa trên vật lý (PBR) là một phương pháp mới đang được sử dụng rộng rãi trong ngành công nghiệp game và đồ họa máy tính. Phương pháp này giúp mô phỏng ánh sáng một cách chính xác hơn bằng cách tuân theo các định luật vật lý. Điều này có nghĩa là ánh sáng sẽ được phản xạ, hấp thụ hoặc truyền qua các vật liệu một cách tự nhiên, tạo ra hiệu ứng chân thực hơn.

Các thành phần của PBR

Để hiểu PBR, chúng ta cần nắm rõ một số thành phần chính:

Albedo: Màu sắc của bề mặt vật liệu.
Roughness: Độ nhám của bề mặt. Độ nhám cao sẽ làm ánh sáng phân tán nhiều hơn, trong khi độ nhám thấp sẽ tạo ra các ánh sáng phản xạ rõ nét hơn.
Metalness: Đặc tính kim loại của vật liệu. Kim loại sẽ có phản xạ sáng hơn và ít khuếch tán hơn.

Nguyên lý ánh sáng trong PBR

Trong PBR, chúng ta sẽ xem xét nhiều hơn đến cách ánh sáng tương tác với các bề mặt. Thay vì chỉ đơn giản là sử dụng một công thức ánh sáng, chúng ta sẽ áp dụng các mô hình ánh sáng phức tạp hơn, như Blinn-Phong và Cook-Torrance, để mô phỏng cách ánh sáng được phản xạ từ các microfacet trên bề mặt.

BDRF (Bidirectional Reflectance Distribution Function)

BDRF là một khái niệm quan trọng trong PBR. Nó mô tả cách ánh sáng được phản xạ từ bề mặt. Trong trường hợp của Blinn-Phong, BDRF được chia thành hai phần: khuếch tán và phản xạ.

Khuếch tán: Được tính từ màu sắc bề mặt và hướng ánh sáng. Công thức tính khuếch tán có dạng:

$$
ext{Diffuse} = ext{Albedo} imes ext{max}( ext{dot}(N, L), 0) imes ext{LightColor}
$$
Phản xạ: Sử dụng mô hình Cook-Torrance, bao gồm ba thành phần chính: hàm phân phối (D), hàm hình học (G) và hàm Fresnel (F).

Hàm phân phối (D)

Hàm này mô tả cách các thông số bề mặt (normal) được phân phối trên bề mặt. Một trong những hàm phổ biến là GGX (Trowbridge-Reitz), giúp xác định tỷ lệ các microfacet hướng về phía người xem.

Hàm hình học (G)

Hàm này mô tả cách ánh sáng phản xạ giữa các gờ bề mặt. Một trong những mô hình phổ biến là Shlick-GGX, giúp xác định tỷ lệ ánh sáng bị bóng tối bởi các gờ.

Hàm Fresnel (F)

Hàm này mô tả tỷ lệ ánh sáng được phản xạ so với ánh sáng truyền qua. Chúng ta sẽ sử dụng gần đúng Schlick cho hàm này.

Triển khai trong shader

Để triển khai PBR trong shader, chúng ta sẽ cần định nghĩa một số cấu trúc và hàm. Dưới đây là mã ví dụ cho shader WebGPU:

wgsl Copy

struct VertexOut {
    @builtin(position) frag_position : vec4<f32>,
    @location(0) world_position: vec4<f32>,
    @location(1) uv : vec2<f32>,
    @location(2) normal : vec3<f32>
};

struct Material {
    use_specular_map: u32,
    roughness: f32,
    metalness: f32,
    base_reflectance: vec3<f32>
}

fn get_diffuse(surface_albedo: vec3<f32>, light_color: vec3<f32>, normal: vec3<f32>, to_light: vec3<f32>) -> vec3<f32> {
    return surface_albedo * max(dot(normal, to_light), 0.0) * light_color;
}

fn get_specular(fresnel: vec3<f32>, to_view: vec3<f32>, to_light: vec3<f32>, normal: vec3<f32>, half_vector: vec3<f32>, roughness: f32) -> vec3<f32> {
    // Tính toán phản xạ specular
}

fn fragment_main(frag_data: VertexOut) -> @location(0) vec4<f32> {
    // Tính toán màu sắc cuối cùng cho fragment
}

Mẹo và Lưu ý

Điều chỉnh độ nhám: Nên thử nghiệm với các giá trị độ nhám khác nhau để thấy ảnh hưởng đến ánh sáng và độ phản xạ.
Sử dụng ánh sáng hướng: Thêm ánh sáng hướng để tạo ra các hiệu ứng ánh sáng tự nhiên hơn.
Chỉnh sửa gamma: Chỉnh sửa gamma để điều chỉnh sự tương phản của màu sắc, giúp hiển thị rõ hơn các chi tiết tối.

Giải quyết sự cố

Một số lỗi thường gặp khi triển khai PBR bao gồm:

Lỗi ánh sáng không hiển thị: Kiểm tra xem liệu ánh sáng có được cấu hình đúng và có đang chiếu vào bề mặt hay không.
Vấn đề về độ phản xạ: Đảm bảo rằng các thông số vật liệu như độ nhám và độ phản xạ được thiết lập chính xác.

Kết luận

PBR là một bước tiến lớn trong việc mô phỏng ánh sáng và vật liệu trong đồ họa máy tính. Bằng cách áp dụng các nguyên lý vật lý, chúng ta có thể tạo ra những hình ảnh chân thực hơn. Hãy thử nghiệm với các thiết lập khác nhau và tìm hiểu thêm về cách PBR có thể cải thiện dự án của bạn. Đừng quên theo dõi các phần tiếp theo trong chuỗi bài viết này để khám phá thêm nhiều khía cạnh thú vị khác của WebGPU!

Xây dựng WebGPU: Ánh sáng dựa trên vật lý (PBR) - Phần 8