GDC2023

Shader
5k words

简介

记录从GDC2023里学的东西

车漆效果

GDC2023干货分享 90帧高质量写实手游的程序实现与美术设计 - 网易游学的文章 - 知乎

王牌竞技中的汽车涂层
Image text
Image text
使用了双层BRDF和双层法向量

双层BRDF可以分为两个部分：表面层和基底层，每个部分都有自己的BRDF函数。表面层通常是一个镜面反射，基底层通常是一个漫反射。两个层之间有一个菲涅尔项来计算光线在表面层和基底层之间的反射和透射比例，网易提供的图片中，正中位置也存在着对于周边环境的反射结果，或许是通过 Lerp(base,base+surface,value) 插值的方式控制

Bing大小姐提供的伪代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 定义表面层的BRDF函数，这里假设是一个Cook-Torrance模型
def surface_brdf(L, V, N, H):
    # 计算菲涅尔项，这里假设是一个Schlick近似
    F = surface_fresnel + (1 - surface_fresnel) * (1 - dot(V, H)) ** 5
    # 计算几何项，这里假设是一个Smith模型
    G = smith_g1(V, N, H) * smith_g1(L, N, H)
    # 计算法线分布项，这里假设是一个Beckmann模型
    D = exp(-tan(acos(dot(N, H))) ** 2 / surface_roughness ** 2) / (PI * surface_roughness ** 2 * dot(N, H) ** 4)
    # 返回表面层的BRDF值
    return F * G * D / (4 * dot(N, L) * dot(N, V))
# 定义基底层的BRDF函数，这里假设是一个Lambertian模型
def base_brdf(L, V, N):
    # 返回基底层的BRDF值
    return base_reflectance / PI
# 定义双层BRDF的求值函数
def evaluate(L, V, N):
    # 计算半角向量
    H = normalize(L + V)
    # 计算表面层的BRDF值
    surface_value = surface_brdf(L, V, N, H)
    # 计算基底层的BRDF值
    base_value = base_brdf(L, V, N)
    # 计算菲涅尔项，这里假设是一个Schlick近似
    F = surface_fresnel + (1 - surface_fresnel) * (1 - dot(V, H)) ** 5
    # 返回双层BRDF的求值结果，考虑了表面层和基底层之间的能量守恒
    return surface_value + (1 - F) * base_value * (1 - surface_value)

抗锯齿

GDC2023干货分享 90帧高质量写实手游的程序实现与美术设计 - 网易游学的文章 - 知乎
没有选择使用TSAA，而是使用其他方式实现抗锯齿

  1. 去除法线细节
  2. 高光锯齿(通过法线导数计算边缘锯齿形状，应该是做遮罩)
    通过法线导数计算边缘锯齿形状 
    1
    2
    3
    4
    5
    6
    用法线导数来计算出边缘的锯齿形状是一种常用的抗锯齿技术，它可以根据法线贴图的变化来估计表面的倾斜程度，从而调整纹理坐标的偏移量，使得边缘看起来更平滑。具体的步骤如下：

    i. 计算法线贴图的梯度，即在屏幕空间x和y方向上的偏导数，可以使用DDX和DDY函数来实现。
    ii. 根据梯度的大小和方向，计算出一个偏移量，通常是一个小于1的比例，可以根据需要调整。
    iii. 将偏移量加到纹理坐标上，得到新的纹理坐标，用于采样纹理。
    iiii. 重复以上步骤，直到达到满意的效果或者超过最大迭代次数。
  3. 烘培ao到顶点，改善缝隙细节

动态光照

GDC2023干货分享 90帧高质量写实手游的程序实现与美术设计 - 网易游学的文章 - 知乎

使用 Parallax IBL （Parallax-Corrected Image-Based Lighting，视差图像光照）来改善环境反射效果，使用烘焙的SH（球谐函数Spherical Harmonics，简称SH））来模拟动态光源产生的反射效果
Unity中应该对应的是反射探针

场景优化

全局光照优化

天空盒的处理,LDR（Low Dynamic Range，低动态范围成像） 和 HDR（High Dynamic Range，高动态范围成像） 天空效果的区别
Image text
然而，很多手机并不支持 HDR 成像的纹理压缩格式 ASTC（Adaptive Scalable Texture Compression，自适应可扩展纹理压缩）。使用 Modified Reinhard curve（修改后的Reinhard曲线）将 HDR 图像映射到 LDR图像格式，在shader中对其进行解码

将远景烘培到天空盒中

Image text

人眼自适应

树木优化

对法线的优化

Image text
将混合的法线信息烘焙到 Billboard 上，以创建 3D 模型，从而计算 Billboard 的动态阴影，奥日中场景的阴影好像也是用这种方式实现的
Image text

对网格的优化

使用简单网格模拟画面远处的树，估计是LOD和直接用低精度模型

纹理压缩

将PBR渲染中用到的漫反射贴图、法线贴图、(AO、Roughness、Metallic)贴图，压缩成一张贴图，使用时解析
三张贴图用九维向量表示，通过PCA找到最佳四维平面对九维向量进行拟合

Image text
Image text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
from sklearn.decomposition import PCA
import numpy as np

# 准备原始的9维数据
data = np.array([[1, 2, 3, 4, 5, 6, 7, 8, 9],
                 [4, 5, 6, 7, 8, 9, 10, 11, 12],
                 [7, 8, 9, 10, 11, 12, 13, 14, 15],
                 [10, 11, 12, 13, 14, 15, 16, 17, 18],[1, 2, 3, 4, 5, 6, 7, 8, 9],
                 [4, 5, 6, 7, 8, 9, 10, 11, 12],
                 [7, 8, 9, 10, 11, 12, 13, 14, 15],
                 [10, 11, 12, 13, 14, 15, 16, 17, 18],[1, 2, 3, 4, 5, 6, 7, 8, 9],
                 [4, 5, 6, 7, 8, 9, 10, 11, 12],
                 [7, 8, 9, 10, 11, 12, 13, 14, 15],
                 [10, 11, 12, 13, 14, 15, 16, 17, 18]])

# 创建PCA对象，并设置n_components为4
pca = PCA(n_components=4)

# 对原始数据进行拟合和转换
reduced_data = pca.fit_transform(data)
print(reduced_data)

# 将降维后的数据转换回原始的9维空间
reconstructed_data = pca.inverse_transform(reduced_data)

print("还原后的原始数据：")
print(reconstructed_data)
使用PCA对图片进行压缩 对于 jpg 压缩效果不错，png 感觉一般

Image text
Image text
Image text

jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import numpy as np
import matplotlib.pyplot as plt
from sklearn.decomposition import PCA
from PIL import Image

# 读取图像并转换为NumPy数组
image = Image.open("image.jpg")
image_arr = np.array(image)

# 将图像数组转换为二维形式，并将每个像素表示为RGB向量
n_components=10 #min(vector_img.shape[0], vector_img.shape[1])*0.1
vector_img = image_arr.reshape((-1, n_components))

# 对RGB向量进行PCA压缩

pca = PCA(n_components)
pca.fit(vector_img)

# 将压缩后的RGB向量转换回原始形式
compressed_vector_img = pca.transform(vector_img)
reconstructed_vector_img = pca.inverse_transform(compressed_vector_img)
reconstructed_img = reconstructed_vector_img.reshape(image_arr.shape).astype('uint8')

# 显示原始图像和压缩后的图像
fig, axs = plt.subplots(1, 2, figsize=(10, 5))
axs[0].imshow(image_arr)
axs[0].set_title("Original Image")
axs[1].imshow(reconstructed_img)
axs[1].set_title("Compressed Image")

# 图片导出
origin=Image.fromarray(image_arr).convert('RGB')
origin.save("origin.jpg")

compress=Image.fromarray(reconstructed_img).convert('RGB')
compress.save("compress.jpg")

plt.show()

png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import numpy as np
import matplotlib.pyplot as plt
from sklearn.decomposition import PCA
from PIL import Image

# 读取图像并转换为NumPy数组
image = Image.open("demon_seal.png")
image_arr = np.array(image)

# 确保图像是三维的，将数据类型转换为浮点类型
if image_arr.ndim == 2:
    image_arr = np.expand_dims(image_arr, axis=2)
    
    
image_arr = image_arr.astype('float64')

# 将图像数组转换为二维形式，并将每个像素表示为RGB向量
n_components=2
vector_img = image_arr.reshape((-1,n_components))

# 对RGB向量进行PCA压缩
pca = PCA(n_components)
pca.fit(vector_img)

# 将压缩后的RGB向量转换回原始形式
compressed_vector_img = pca.transform(vector_img)
reconstructed_vector_img = pca.inverse_transform(compressed_vector_img)
reconstructed_img = reconstructed_vector_img.reshape(image_arr.shape).astype('uint8')

# 创建压缩后的图像对象
compressed_image = Image.fromarray(reconstructed_img)

# 保存压缩后的图像
compressed_image.save("compressed_image.png")

# 显示原始图像和压缩后的图像
fig, axs = plt.subplots(1, 2, figsize=(10, 5))
axs[0].imshow(image_arr.astype('uint8'))
axs[0].set_title("Original Image")
axs[1].imshow(reconstructed_img.astype('uint8'))
axs[1].set_title("Compressed Image (n=50)")
plt.show()

n_components 的值需要根据情况设置，感觉可能有地方写的有问题