这个号荒废了好久，因为疫情在家这些日子继续学了点跟Shader有关的知识，就拿工作号做个记录吧，我会慢慢从最基础的Shader知识开始分享同时也会有一部分数学原理的，如果有错误也希望大家及时更正，这个东西还是非常有意思的。

这几天打交道的东西比较多的就是RayMarching同时也避免不了用SDF建模，可以理解为纯数学硬核建模。以前因为家里电脑配置太垃圾，有时玩的64KB的枪战小游戏，这种程序体积特别小但是制作出来的效果特别惊人，直到最近我才知道这可能就是运用了图形学的知识实时生成，才能达到这么小。国外有个艺术家'reptile'，经常做一些体积非常小的可执行程序绘出非常漂亮的画面，下面的画面就是4KB生成的，现在为了直观地了解4KB的大小，现在所产生的1080p视频为40MB，这比产生它的可执行文件大10000倍。而且可执行文件还包含生成音乐的代码。

reptile

许多demo中使用的技术叫RayMarching-光线步进。这个算法与SDF-有向距离场结合使用，可以实时创建一些非常有意思的东西。下面是这个文章的目录，搬好小板凳慢慢看。

[TOC]

SDF

SDF(Signed Distance Field),译为有向距离场。'GPU Gems 3'中是这么描述SDF：

“SDF是由到（多边形模型）物体表面最近距离的采样网格。一般使用负值来表示物体内部，使用正值表示物体外部。SDF理念对于图形图像及相关领域具有很大的诱惑力。它经常被用于布料动画碰撞检测、多物体动力学、变形物体、mesh网格生成、运动规划和雕刻。”

举个例子，一个以原点为中心的球体。球体内的点到原点的距离小于半径，球上的点的距离等于半径，球外的点的距离大于半径。

用向量表示一下

数学公式非常简洁明了，再用GLSL表示一下

float sphereSDF(vec3 p) {
    return length(p) - 1.0;
}

在未来我会整理一部分SDF模型和原理。

RayMarching

首先从知乎大佬‘叛逆者’的一个回答COPY一下几个概念

• Ray Tracing：这其实是个框架，而不是个方法。符合这个框架的都叫ray tracing。这个框架就是从视点发射ray，与物体相交就根据规则反射、折射或吸收。遇到光源或者走太远就停住。一般来说运算量不小。
• Ray Casting：其实这个和volumetric可以脱钩。它就是ray tracing的第一步，发射光线，与物体相交。这个可以做的很快，在Doom 1里用它来做遮挡。
• Path Tracing：ray tracing + 蒙特卡洛法。在相交后会选一个随机方向继续跟踪，并根据BRDF计算颜色。运算量也不小。还有一些小分类，比如Bidirectional Path Tracing。
• Ray Marching：顾名思义，是一根ray一步一步向前走（marching），知道与物体相交。基本只用于volumetric，或可以当作volumetric处理的情况。

返回来继续，再我们将物体建模为SDF，该怎么去渲染它呢？接下来该光线步进登场了。

就像在RayTracing光线追踪中一样，首先相机确定位置，在其前面放置一个网格，通过网格中的每个点发送来自相机的光线，并且每个网格点对应于输出图像中的一个像素。

Ray Marching 1

区别在于场景的定义方式，而且这也改变了用于查找视线与物体之间的交点的方法。

在光线行进中，整个场景是根据SDF定义的。为了找到视线和物体之间的交点，我们首先从Camera开始，沿着视线一点一点地移动。在每个Step中，要执行判断此点是否在场景表面内，或者用另一种语言来来表达，SDF在这一点上的值是正还是负。如果是负，那这条射线的判断就结束了！即光线与物体相交。如果不是，则我们继续沿着射线不断增加距离。

每次以沿很小的Step增加光线，同时使用sphere tracing可以做得更好，无论是速度还是准确性。我们采取最安全的最大步骤，而不是一步步走。

Ray Marching 2

float RayMarch(vec3 start, vec3 viewRayDirection) {
    float depth=0.;
    
    for(int i=0; i<MAX_STEPS; i++) {
        vec3 p = start + viewRayDirection*depth;
        //倒视线所及之处
        float dist = senceSDFGetDist(p);
        //看看是不是达到物体表面？
        depth += dist;
        //开始前进！
        if(depth>MAX_DIST || dist<SURF_DIST) break;
        //大于视距或进入物体
    }
    return depth;
}

当设置得到的结果放在R通道会得到以下的效果

Result 1

接下来就是计算法向量和光照了。

Normal&Lights

计算机图形学中的大多数光照模型都使用表面法线的一些概念来计算物体在表面上的颜色。当表面由诸如多边形之类的几何定义时，通常为每个顶点指定法线，并且可以通过对周围的顶点法线进行插值来找到面上任意给定点的法线。

那么，怎么利用SDF定义的物体的表面法线呢？当然是梯度啦，从概念上讲Gradient表示在该点处的方向导数沿着该方向取得最大值，即函数在该点处沿着梯度方向变化最快，变化率最大。

有点啰嗦，那就拿简洁的数学表达一下。

NO NO NO 计算机和学艺术的你可能对这个公式发一会呆。为了让计算机看明白，所以通过对曲面上周围的点进行采样来近似计算，而不是采用函数的实数导数。

看起来好像还是有点麻烦，直接上代码吧。

vec3 estimateNormal(vec3 p) {
    return normalize(vec3(
        sceneSDF(vec3(p.x + EPSILON, p.y, p.z)) -
         sceneSDF(vec3(p.x - EPSILON, p.y, p.z)),

        sceneSDF(vec3(p.x, p.y + EPSILON, p.z)) -
         sceneSDF(vec3(p.x, p.y - EPSILON, p.z)),

        sceneSDF(vec3(p.x, p.y, p.z  + EPSILON)) -
         sceneSDF(vec3(p.x, p.y, p.z - EPSILON))
    ));
}

有了这些理论基础，就可以计算表面上任何点的法线，并使用两个光源照明，并Phong光照模型运用在我们的模型上。

Result 2

Phong Lighting Model

用简洁的数学来说就是

其中，为环境反射系数，为漫反射系数，为镜面反射系数，对所有特定光源求和，并有。由上式看出，一旦反射光中三种分量的颜色以及它们的系数确定以后，从景物表面上某点达到观察者的反射光颜色就仅仅和光源入射角和视角有关。

Phong Lighting Model 1

下面是光照的类型

Phong Lighting Model 2

• 环境光照(Ambient Lighting)：即使在黑暗的情况下，世界上也仍然有一些光亮(月亮、一个来自远处的光)，所以物体永远不会是完全黑暗的。我们使用环境光照来模拟这种情况，也就是无论如何永远都给物体一些颜色。
• 漫反射光照(Diffuse Lighting)：模拟一个发光物对物体的方向性影响(Directional Impact)。它是Phong光照模型最显著的组成部分。面向光源的一面比其他面会更亮。
• 镜面光照(Specular Lighting)：模拟有光泽物体上面出现的亮点。镜面光照的颜色，相比于物体的颜色更倾向于光的颜色。

这是目前最简单的光照模型，把三个光照相加求和就行了，现在有更复杂的光照模型或者基于物理规则的光照模型PBR，等以后有功夫我整理整理发到公众号。

Model Transformations

到现在为止，实现了基础建模和光照，那怎么建立复杂的模型呢？Emm，通过旋转/缩放/位移/布尔来做，本质上跟布尔建模差不多。那就从这些基础操作开始叨叨。

CSG

构造实体几何（简称CSG）是一种通过布尔运算从简单的几何形状创建复杂的几何形状的方法。

CSG

CSG建立在3种基本操作之上：交集，并集，差。当组合两个SDF的曲面时，这些操作都可以简洁表达。敲黑板！下面都是非常常用的操作。

float intersectSDF(float distA, float distB) {
    return max(distA, distB);
}

float unionSDF(float distA, float distB) {
    return min(distA, distB);
}

float differenceSDF(float distA, float distB) {
    return max(distA, -distB);
}

其中最要注意SDF的负区域和正区域的含义，SDF的负区域是表面内部和外部的反转。差集这个概念可以将视为第一个SDF与第二个SDF的反转的交集。因此，仅当第一个SDF为负，第二个SDF为正时，物体在该点的SDF才为负。

通过上面三种操作来简单建个模型吧。

float sceneSDF(vec3 samplePoint) {
    float sphereDist = sphereSDF(samplePoint / 1.2) * 1.2;
    float cubeDist = cubeSDF(samplePoint);
    
    return intersectSDF(cubeDist, sphereDist);
}

放入刚才的场景中，得到现在这样的情况。

Result 3

旋转&位移

对于旋转和平移，是因为它们是刚体变换，这意味着它们保留了点之间的距离。通常，可以通过将采样点乘以变换矩阵的逆来应用任何刚体变换。

旋转Y轴的变换矩阵用数学表示

上代码！

mat4 rotateY(float theta) {
    float c = cos(theta);
    float s = sin(theta);

    return mat4(
        vec4(c, 0, s, 0),
        vec4(0, 1, 0, 0),
        vec4(-s, 0, c, 0),
        vec4(0, 0, 0, 1)
    );
}

直接在物体所在的点相乘即可。
这部分内容我以后也会跟着更新，关于图形学的数学。

缩放

当缩放物体时，它不能保留点之间的距离。比如和两点之间的距离缩放0.5，然而两点的坐标却并不是这样改变的。

所以在等比缩放的同时要在外部补偿缩放比例。

float dist = someSDF(samplePoint / scalingFactor) * scalingFactor;

同理不规则缩放也是这样，为了防止缩放变换引起的距离误差，我们需要得到曲面上相交光线的点在哪里并用此调整距离。那么先分析一下单位球的SDF，沿X轴放大一半。

当计算这个点的SDF时，会得到距离是1，这是结果是正确的，球体表面上的最近点是。但是如果计算为，会得到距离是3，这是结果显然是不正确的。但实际上表面的点是（别忘了SDF=0时才是表面），而这会导致1.5的误差。

为了校正误差，我们可以乘以最小缩放比例，如下所示：

float dist = someSDF(samplePoint / vec3(s_x, s_y, s_z)) * min(s_x, min(s_y, s_z));

合体

有了这些基础，现在就可以创建一些复杂的几何体。

Result 4

https://www.shadertoy.com/view/3dsyDl

参考文献

本文参考了很多知乎大佬的专栏、Inigo Quilez和总结jamie-wong的文章。

1. Ray Marching and Signed Distance Functions
2. Modeling with Distance Functions
3. 矩阵的位移,旋转,缩放 - 沫小淘
4. Phong reflection model - WIKIPEDIA
5. ray tracing ray marching 区别? - 叛逆者的回答 - 知乎
6. Why Ray Marching - Kontrapunkt - 简书
7. Raymarching Sample Code on Shadertoy