如何编写OptiFine光影包(1)

发表于 2022-03-14 更新于 2023-11-30

这是《如何编写OptiFine光影包》系列正文的第一篇. 本篇教程将搭建光影包编写的基本框架, 以接管 OptiFine/minecraft 自带的那些着色器, 将延迟着色真正地执行起来.

作为教学性质的光影包, 笔者期望能在教程结束时实现以下特性和指标:

光线追踪每帧样本量 1~4 spp
使用 SVGF 降噪
能处理透明物体的反射, 但出于简化的考虑, 假定所有折射率都是 ; 递归的反射也不会被考虑
实体受光照影响, 但不遮挡除太阳和月亮外的光源的光照, 来自实体的反射光也不会照亮其它物体
不使用泛光等光污染后处理特效
仅处理 LD*E 和 LD*SE 的路径^[1]

尽管更高的光线追踪性能是可以期望的, 但降噪算法也具有不小的消耗(SVGF 所使用的滤波器大小是的, 且要在不同的尺度上执行 5 次), 因此指标(1)的 1~4 spp 是较为合理的结果. 特性(3)是为了 TAA 方便而设置的, 这使得透明物体的透射能较为简单地执行时间重投影, 否则就需要考虑 Temporally Reliable Motion Vectors for Real-time Ray Tracing 的方法, 何况 SEUS PTGI 也是这么干的(逃. 特性(4)使得光线追踪的求交完全不用考虑非方块形状的实体, 大大简化了求交算法, 而太阳/月亮的直接光照可以较方便地利用阴影映射处理. 特性(6)是我们能处理的较简单情况, 然而这使得我们无法计算焦散等效果而只能做一些看起来比较像焦散的特效, 但 SEUS PTGI 也是这么干的×2... 何况焦散这样的效果本来就需要光子映射这样的技术去计算.

minecraft RTX 的折射. 即使是 Nvidia, 也难以将复杂的反射和折射处理得完美无瑕

回顾原理篇中的光影包目录结构, 笔者创建了下列目录树:

HowToOptiFine/commit/a2208932f54e50cb434cf52aa9467312b2f7f054

.
├── makefile
├── src
│   ├── block.properties
│   ├── composite.fsh
│   ├── composite15.fsh
│   ├── composite2.fsh
│   ├── core
│   │   ├── gbuffers
│   │   │   ├── gbuffers_discard.frag
│   │   │   ├── gbuffers_discard.vert
│   │   │   ├── gbuffers_main.frag
│   │   │   └── gbuffers_main.vert
│   │   ├── shadow
│   │   └── svgf
│   │       ├── flush_history_buffers.hpp
│   │       └── temporal_accumulation.hpp
│   ├── inc
│   │   ├── blockmapping.hpp
│   │   ├── buffers.hpp
│   │   ├── constants.hpp
│   │   ├── gbuffer.hpp
│   │   ├── glsl.hpp
│   │   ├── random.hpp
│   │   ├── uniforms.hpp
│   │   └── utils.hpp
│   ├── lang
│   │   └── zh_CN.lang
│   └── shaders.properties
└── tools
    ├── blocks.txt
    ├── build.py
    ├── genblocks.py
    ├── patch.py
    └── validate.sh

8 directories, 26 files

通过 tools 目录里的各种工具, 可以生成最终的 shaders/ 目录. 乍一看, 有各式各样的 gbuffers_*.*sh 着色器需要编写, 非常可畏, 然而 gbuffers_*.*sh 可以大致分为 3 类, 即绘制透明物体的着色器①, 绘制不透明的普通物体的着色器②和绘制特效或云/日月等不受光照影响的物体的着色器③, 每类着色器的代码都是可以共用的.

对于③, 在教程的本阶段, 简单地丢弃它们的像素即可:

HowToOptiFine/blob/a2208932f54e50cb434cf52aa9467312b2f7f054/src/core/gbuffers/gbuffers_discard.vert

#pragma once
#include "inc/glsl.hpp"
void main() {
    gl_Position = vec4(-1.);
}

HowToOptiFine/blob/a2208932f54e50cb434cf52aa9467312b2f7f054/src/core/gbuffers/gbuffers_discard.frag

#pragma once
#include "inc/glsl.hpp"
void main() {
    discard;
}

透明物体(如水面, 玻璃)的处理较为复杂, 和实体一起暂时归到这一类中.

工具篇提供的预处理工具会保证带有 #pragma once 指令的文件只被包含一次, 可以起到保护宏的作用. inc/glsl.hpp 是工具篇中用于将 glsl 伪装成 C++ 的头文件.

对于②, 我们需要绘制一张 G-buffer, 并在 composite 阶段完成着色:

HowToOptiFine/blob/a2208932f54e50cb434cf52aa9467312b2f7f054/src/core/gbuffers/gbuffers_main.vert

#pragma once
#include "inc/glsl.hpp"

attribute vec4 at_tangent;
attribute vec3 mc_Entity;
attribute vec2 mc_midTexCoord;

#include "inc/constants.hpp"
#include "inc/uniforms.hpp"
#include "inc/utils.hpp"

flat out uint blockID;      // 方块种类
out vec2      texCoord;     // 纹理坐标
out vec3      color;        // 顶点色
out vec3      normal;       // 面法线(世界坐标)
out vec3      tangent;      // 面切线(世界坐标)
out vec3      worldPos;     // 世界坐标
out vec3      motionVector; // 运动向量

void main() {
    blockID     = getBlockID(mc_Entity);
    texCoord    = gl_MultiTexCoord0.st;
    color       = gl_Color.rgb;
    normal      = normalize(mat3(gbufferModelViewInverse) * gl_NormalMatrix * gl_Normal);
    tangent     = at_tangent.xyz;
    worldPos    = (gbufferModelViewInverse * gl_ModelViewMatrix * gl_Vertex).xyz + cameraPosition.xyz;
    gl_Position = gbufferProjection * gl_ModelViewMatrix * gl_Vertex;
}

HowToOptiFine/blob/a2208932f54e50cb434cf52aa9467312b2f7f054/src/core/gbuffers/gbuffers_main.frag

#pragma once
#include "inc/glsl.hpp"

uniform sampler2D tex;
uniform sampler2D specular;

flat in uint blockID;      // 方块种类
in vec2      texCoord;     // 纹理坐标
in vec3      color;        // 顶点色
in vec3      normal;       // 面法线(世界坐标)
in vec3      tangent;      // 面切线(世界坐标)
in vec3      worldPos;     // 世界坐标
in vec3      motionVector; // 运动向量

#include "inc/blockmapping.hpp"
#include "inc/gbuffer.hpp"
#include "inc/uniforms.hpp"
#include "inc/utils.hpp"

#pragma rendertargets(0, 1, 4)
void main() {
    GBufferData gd;

    vec4 diffuse = sRGB2linear(texture(tex, texCoord) * vec4(color, 1.f));
    if (diffuse.a < .0125) { discard; } // 丢弃树叶等材质的镂空部分

    vec3 spec     = texture(specular, texCoord).rgb; // b for emissive
    gd.blockID    = blockID;
    gd.diffuse    = diffuse.rgb;
    gd.normal     = normal;
    gd.smoothness = spec.r;
    gd.metalness  = spec.g;
    gd.tangent    = tangent;
    packGBufferData(gd);
    gl_FragData[0] = gd.rawData;
    gl_FragData[1] = vec4(worldPos, 1.f);

    vec4 projPosPrev = gbufferPreviousProjection * gbufferPreviousModelView * vec4(worldPos - previousCameraPosition, 1.f);
    projPosPrev.xyz /= projPosPrev.w;

    vec3 curr = gl_FragCoord.xyz / vec3(viewWidth, viewHeight, 1.f);
    curr *= 2.f;
    curr -= 1.f;
    gl_FragData[2] = vec4(projPosPrev.xyz - curr, 0.f);
}

G-buffer 的定义如下

struct GBufferData {
    vec4 rawData;

    // (3 + 1) * 8 位精度, 丢弃 diffuse.a, 放入 blockID 的高 8 位
    vec3 diffuse;
    uint _blockIDHigh8;

    // (3 + 1) * 8 位精度
    vec3  normal;
    float smoothness;

    // (3 + 1) * 8 位精度
    vec3  tangent;
    float metalness;

    // blockID 的低 8 位
    uint _blockIDLow8;

    uint blockID;
};

其打包的数据有:

vec3 diffuse, 为漫反射颜色
vec3 normal, 世界坐标下的法线
vec3 tangent, 世界坐标下的切线
float smoothness, 光滑度
float metalness, 金属度
int blockID, 16 bits 的方块 ID, 低 5 位表示方块形状, 第 6 位表示是否发光, 第 7 位表示是否透明, 高 8 位编码方块的各种数据值

最终 G-buffer 将被打包进 RGBA32F 格式(即有 RGBA 共 4 个通道, 每个通道都是 32 bits 的 float)的 colortex0.

世界坐标将被写入同样是 RGBA32F 的 colortex1, 浪费了一个 w 分量, 日后不够用了再来优化.

colortex4 则是运动向量(motion vector), 此处我们学习 UE4 的做法, 在 G-buffer 阶段分别使用本帧和上帧的 MVP 矩阵, 计算好裁切坐标系中的坐标并作差, 得到运动向量(其 xy 分量是屏幕 uv 的变化量, z 分量是深度值的变化量). 在教程的本阶段就准备好运动向量的原因是希望较早地完成 TAA 的调试. 当然, 此处又有待填的坑, 即日后加入实体的渲染时, 还需要考虑实体的运动.

我们计划在 composite.fsh 中完成蒙特卡洛光线追踪, 而目前只是将 G-buffer 的 diffuse 部分加上噪声填到 colortex6 中, 以使 TAA 的调试能进行.

HowToOptiFine/blob/a2208932f54e50cb434cf52aa9467312b2f7f054/src/composite.fsh


#include "inc/gbuffer.hpp"
#include "inc/glsl.hpp"
#include "inc/uniforms.hpp"
#include "inc/blockmapping.hpp"
#include "inc/buffers.hpp"
vec2  texCoord = gl_FragCoord.xy / viewSize;
ivec2 texelPos = ivec2(gl_FragCoord.xy);

uniform sampler2D tex_gbuffer;

#include "inc/random.hpp"
vec3 random3d(uvec3 seed) {
    return vec3(pcg3d(seed)) * (1.f / float(0xffffffffu));
}

#pragma rendertargets(6, 7)
void main() {
    GBufferData gd;
    gd.rawData = texelFetch(tex_gbuffer, texelPos, 0);
    unpackGBufferData(gd);
    gl_FragData[0].rgb = gd.diffuse + (random3d(uvec3(texelPos, frameCounter)) - .5f) / 2.f;
    gl_FragData[1].rg  = vec2(gd.smoothness, gd.metalness);
    
    // if (isCube(gd.blockID) && !isEmissive(gd.blockID)) { discard; }
    // if (isFence(gd.blockID) && (isWest(gd.blockID) || isNorth(gd.blockID))) { discard; }
    // if (isWallTorch(gd.blockID) && getFacing(gd.blockID)==facing_north) { discard; }
}

// To be continued...

1.路径表示法见光传输, 即用 L 表示光源, D 表示漫反射面, S 表示光泽反射面, E 表示眼睛. ↩︎