黑脸包公

光源类型

2019-03-20T00:00:00+00:00

定向光源

没有确切位置，无穷远光源

初始光源强度乘以光源颜色

```math I(d)_{dir} = I0_{dir} * Cl_{dir} ```

点光源

光照强度由三个因子来模拟

```math 常量衰减因子:k_c 线性衰减因子:k_l 二次衰减因子:k_q ```

计算公式

```math I(d)_{point} = \frac{I0_{point}Cl_{point}}{k_c+k_ld+k_q*d^2} 其中d=|p-s| ```

一般建议只使用线性衰减因子，设置在0.001-0.0005

聚光灯

有一个聚光灯照射范围的圆锥，这个椎体由两个区域组成

```math 内部区域角度（本影umbra）:\alpha 外部区域角度（半影penumbra）:\phi ```

本影中光照强度恒定，半影中急剧衰减。

1. 如果光源方向与光源到点s向量之间夹角大于半影角度，不计算光照

2. 如果光源方向与光源到点s向量之间夹角小于本影角度，使用100%聚光灯强度，但根据距离进行衰减

3. 如果光源方向与光源到点s向量之间夹角在本影到半影之间，根据距离和减弱（falloff）公式进行衰减

定义一些参数

```math 指定位置p 方向向量l \alpha^=\alpha / 2 \phi^=\phi / 2 总体光照强度的指数因子pf 衰减因子k_c,k_l,k_q ```

公式如下

```math 1）\theta > \phi^时 I(d)_{sportlight}=0 ```
---
```math 2) \theta < \alpha^ I(d)_{sportlight} = \frac{I0_{sportlight}Cl_{sportlight}}{k_c+k_ld+k_qd^2} ```
---
```math 3) \alpha^ < \theta < \phi^* I(d)_{sportlight} = \frac{I0_{sportlight}Cl_{sportlight}}{k_c+k_ld+k_qd^2}\frac{(cos\theta-cos\phi^)^{pf}}{(cos\alpha^-cos\phi^)} ```
---
对于实时渲染中，可以简化公式，将整个椎体内的衰减因子设置为cosθ

```math I(d)_{sportlight} = \frac{I0_{sportlight}Cl_{sportlight}MAX(cos\theta,0)^{pf}}{k_c+k_ld+k_q*d^2} ```

光线计算

2019-03-20T00:00:00+00:00

颜色运算

颜色加法

```math C_{sum} = C_1 + C_2 = (MIN(r1+r2, 255), MIN(g1+g2, 255), MIN(b1+b2,255)) ```

颜色调制

```math C_{modulated}=sC_1 = (sr1,sg1,sb1) ```

其中s应该被约束在最大值不超过255，否则会发生颜色改变

```math C_{modulated}=C_1C_2=(r_1r_2,g_1g_2,b_1b_2) ```

按照光映射的工作原理，C1应该被约束在(0~1,0~1,0~1),这样结果将不会溢出。

光照纹理：LIGHT_TEXTURE[x][y]

颜色纹理：COLOR_TEXTURE[x][y]

alpha混合

对两个源像素按照alpha比例进行混合

```math Pixel_{dest}[x,y]_{rgb} = Pixel_{s1}[x,y]_{rgb} * alpha + Pixel_{s2}[x,y]_{rgb}*(1-alpha) ```

环境光

对于表面S上的一个点，反射的环境光强度为：

```math I_{total-a}=R_{S_{ambient}} * I_{ambient} ```

反射色为浮点RGB

total-a中a是一个光类型表示，此处a表示环境光

散射光

一束光照到表面S后将向所有方向散射出去，强度取决于表面和光源之间的相对角度

散射光强度与面法线和光源向量之间的夹角余弦成正比

漫反射也被称为Lambertian反射

我们假设没中表面材质都有特定的漫反射颜色(浮点RBG)

```math R_{s_{diffuse}} ```

单光源的散射光照方程如下 n:法线向量，l光源向量

```math I_{total-d} = R_{s_{diffuse}} * I_{diffuse} * ( n · l) ```

加入散射项后，单光源光照模型如下

```math I_{total-ad} = R_{S_{ambient}} * I_{ambient} + [R_{s_{diffuse}} * I_{diffuse} * ( n · l)] ```

在多光源下。只需要将每个光源的散射累计起来

```math I_{total-ad} = R_{S_{ambient}} * I_{ambient} + R_{s_{diffuse}} * \sum_{i=1}^{n}{[I(i)_{diffuse} * ( n_i · 1_i)]} ```

镜面反射光

Phong光照模型，另外通过差值计算法线来计算着色时被称为Phong着色。

物体表面光洁度常量specularity

定义一个反射系数

```math R_{s_{specular}} ```

光照强度

```math I_{specular} ```

镜面反射指数（specular exponent），决定了镜面反射区域大小，称之为sp

这样，单光源反射光照方程如下，r:反射向量,v:观察向量

```math I_{total-s}=R_{s_{specular}} * I_{specular} * MAX(r·v,0)^{sp} ```

光照向量和法线夹角必须小于90度，可以在上面的方程再乘以

```math [(n·l)>0?1:0] ```

多光源下

```math I_{total-s}=R_{s_{specular}} * \sum_{i=1}^{n}{[I(i)_{specular} * MAX(r_i·v_i,0)^{sp}*[(n_i·l_i)>0?1:0]]} ```

发射光

```math I_{total-e} = R_{S_{emission}} ```

综上

```math I_{total-aeds} = I_{total-a} + I_{total-e} + I_{total-d} + I_{total-s} ```
float numFrames = XYFramesXYFrames; float accumdist = 0; float StepSize = 1/MaxSteps; for(int i = 0;i<MaxSteps,i++) { float cursample = PseudoVolumeTexture(Tex,TexSample,saturate(CurPos),XYFrames,numFrames)r, accumdist+= cursampleStepSize, CurPos+= -CamVec*StepSize, } return accumdist,

滑落的雨水以及涟漪效果（二）

2018-11-09T00:00:00+00:00

J这是第一部分的延续，所以如果你没有读过，我建议首先去读第一篇，因为这将继续在那个基础上，你需要知道这些设置，以便你知道如何组合最后......

坡度

“斜率感知”功能实际上非常简单，我们所做的只是使用Z轴渐变来混合我们在这篇文章中创建的涟漪效果和条纹效果。

下面你可以看到获得z-渐变的简单方法

结果看起来像这样

我们稍后使用这个结果来混合涟漪和水条纹

纹理设置

所以，如果你还记得上一篇文章，我们使用的纹理设置如下所示，在这部分我们将使用绿色和蓝色通道使水看起来像滴水。.

和法线贴图

对于条纹，我们实际所做的只是将纹理设置为沿xz和yz轴对齐到世界，然后在蓝色通道中平移渐变纹理以创建一些简单的alpha eroision，使得条纹看起来像条纹。

首先，我们创建两个输入参数Streaks_Tiling和Streak_Length。RainSpeed是在最后一部分创建的，但它也将用于条纹

接下来，我们将雨条纹纹理设置为沿xz和yz平面进行世界对齐。我们使用包含条纹图案的绿色通道。

我们使用相同的RB和GB输出作为法线贴图的uv输入。

结果将如下所示

接下来，我们为蓝色通道中的渐变纹理设置世界对齐的平移设置</B>

结果将纹理映射到世界空间并沿z轴平移。

现在我们从平移渐变纹理中获取结果，对其进行一些数学运算，然后从绿色通道中的原始世界对齐条纹纹理中减去它。

我们还使用此结果在默认的正常颜色值和World Aligned Normal Result之间进行混合

如果您从StreakMask和Normal中预览结果，您将分别看到以下结果

平移梯度会产生α侵蚀效果，从而产生滴水的错觉

结合涟漪

现在剩下要做的就是使用我们之前在帖子中创建的z-渐变，在此条纹效果和涟漪效果之间进行混合

这是您需要参考之前博客文章的部分，因为我们实际上只是为上一篇博文中的所有函数输出添加了一个lerp，

找到在前一个Post中设置的正常输出，并在纹波法线和条纹法线之间添加线性插值

也做同样的事情

注意：此输出的结果现在将取代所有用于混合波纹蒙版的地方，如Basecolor，Metallic等</B>

而且现在你可以使用一个材质函数，它可以分层到任何现有的着色器，使其看起来像表面正在下雨，带有参数来控制纹波大小，降速等。

这是一个小测试环境，我把它放在一起，以显示着色器在场景中的外观。场景中使用的所有材质都具有分层的RainySurfaceMaterial功能。

滑落的雨水以及涟漪效果（一）

2018-10-13T00:00:00+00:00

介绍

这将是两部分中的其中之一，将介绍我如何创建 雨水在斜坡上的表现 在UE4中用材质函数这一部分将介绍如何在直接受雨撞击的表面上创建雨涟漪/图案，无需多说，让我们开始吧！

Textures

有两个主要的纹理贴图，我们需要用它来创建所需功能, 第一个是水滴的RGB通道压缩MSK纹理,条纹和条纹渐变. 使用适当的渐变值编写此纹理对于shader准确的工作很重要。.

在这部分, 我们只会用带液滴遮罩的红色通道, 在第2部分中，将利用其他两个通道来创建条纹效果。

另一个纹理将是水滴的正常贴图

基本概念

基本思想是使用 Alpha 侵蚀 在红色通道的图案上我们的通道填充纹理, 用一些额外的数学计算来创造波纹

所以我们开始吧, 在UE4中创建一个新的Material函数，并根据需要命名它。, 我称他为“mf_ripples”（这是一个临时函数，在本文的第2部分中，我们将结合本文中创建的内容）并设置节点，如下所示

上面的网络创建了一个基本的Alpha侵蚀设置, 从我们制作材质函数开始, 我还设置了两个函数输入来控制 涟漪大小 和雨速

TextureSample2D.x - (1.0 - frac(time*RainSpeed));

上面的方程给出了一个简单的周期 0-1, 0-1, 我们可以从 红通道 的贴图, 看到的APLHA侵蚀效应

现在我们可以使用一些数学方法来创建一个简单的边缘遮罩，使扩展点看起来像波纹。从“减法”节点中获取结果，然后执行以下操作:

这将导致点的边缘被遮掩，给我们一些看起来像的东西，并扩大波纹

不错，但是波纹出现和消失得太突然，我们需要让它们随着时间的推移逐渐消失和消失，以使它看起来更自然。我们可以通过一点数学来达到这个目的:

时间乘以 RainSpeed 我们之前做的变量.

我们要做的是将结果乘以 边缘遮罩 绝对值 sine-波纹 i.e 没有负部分, 有一段时间 [1,0,1] 而不是[1,0,-1,0,1]. 我们重新调整时间sine-波纹所以它去 [0,1,0] 同时我们的Aphla侵蚀时间函数 [0-1]. 这在下图中可见.

我们乘的方程是

abs(sin((Time*RainSpeed)*0.5));

当波纹达到其最大尺寸时，这一结果会很好地从波纹中消失，如下所示

隐藏时间循环

这看起来不错，但目前的一个大问题是，波纹不是连续的。我们需要找到隐藏这种效果的方法，这可以通过创建当前设置的时间偏移并将两者结合在一起来实现:

因此，复制并通过当前节点网络并将其放在上面，以便当前节点网络在图像中标记这些小更改

所以我们做了两件事，首先我们将UV偏移0.1，这样第二组涟漪与第一组涟漪不在同一个位置.

接下来，我们添加0.5的时间偏移，以便这些波纹以与第一个网络相比0.5s的频率偏移开始和结束。

您可以在下图中看到两个时间频率可视化

现在我们可以在这两组涟漪之间进行混合，时间函数的频率完全相同，以隐藏突然的开始和无缝的涟漪。

现在我们使用这个插值时间函数作为两组涟漪之间的α到Lerp，无缝的涟漪。

纹波法线

涟漪的法线是starightforwad来设置，我们只使用两组涟漪中的纹理坐标并将它们提供给两个单独的TextureSamples，它们与之前链接的相同的Normal纹理，然后我们在这两个法线之间进行混合，相同的时间插值函数。

湿表面，基本材质输入

涟漪的所有基本设置都已完成，现在我们需要设置从基础材质（BaseColor，普通，金属，粗糙度）获取输入的方法，以便我们可以混合涟漪和水面效果。以下部分将介绍如何要做到这一点。

基本颜色

对于BaseColor，我们需要添加一个函数输入来从基础材料中接收基色，以便我们可以覆盖水的颜色。然后我们覆盖水彩并使用我们刚刚创建的ripplemask混合它。

首先添加4个函数输入WaterBrightness（标量），BaseColor（Vector3），WaterColor（Vector3），Metallic（Scalar）</B>

我们采用BaseColor输入并将其与水彩相乘，然后与水亮度相乘，这为涟漪创造了基色。

我们也采用基色并将其乘以0.5以使其颜色更深，我们这样做是因为大多数表面在潮湿时颜色变深，有一些例外，主要是金属/非多孔材料。这就是为什么我们使用金属输入来常规基色和倍增的基色之间的lerp。

我们在这些结果之间进行ninterpolate与teh Ripple创建最终的baseColor输出。

创建一个名为Basecolor的函数输出并将其插入其中

法线混合

在本节中，我们创建一个函数输入来读取基础材质法线信息，然后在其上叠加纹波法线。

我们采用我们之前创建的纹波法线，并使用方便的Blend Angle Corrected Normals函数将其与基础材料法线信息相结合，然后使用ripplemask在基础材质法线和叠加法线之间进行变换。

然后，我们创建一个名为Normal的函数输出并将结果插入其中。如果您预览结果，您将看到涟漪被覆盖：:

金属，粗糙度

金属和粗糙度设置非常简单：:

对于Metallic，我们设置了一个函数Input来读取Base Material Metallic值，我们用0.0的值对它进行线性插值（我不确定用于水的正确金属值是多少但是我喜欢0.0，因为..水不是金属）再次使用ripplemask作为alpha，然后将其插入名为Metallic的函数输出中。

对于粗糙度，我们设置一个输入函数来读取基础材质的值，将其乘以0.5的值（因为一旦表面湿润，它往往更光亮），然后将其值为Lerp 0.0使用ripplemask作为alpha。然后我们创建粗糙度的函数输出并将其插入其中。

这就是我们现在所需要的所有功能，我们可以创建更多的波纹以添加更多变化，但是现在这已经足够了，我们可以做的另一件事就是添加折射选项，以便水可以折射和弯曲表面上的光线，当我们看到条纹和斜坡时，将在第2部分中介绍的内容。

第二部分将是斜坡的水流

三角函数：基本概念

2017-10-22T00:00:00+00:00

三角函数属于基本数学的范畴，这里我们重新回顾三角函数的计算和推导出来的定理，用来理解计算机程序中图形学方面的计算。

首先我们来一些基本名词的讲解：

1.角可以看作平面内一条射线绕着它的端点从一个位置旋转到另一个位置所形成的图形，射线的端点叫做角的顶点，旋转开始时的射线叫做角的起始边，终止时的射线叫做角的终止边。

2.普遍规定按逆时针旋转的角为正角，顺时针旋转的角为负角，当射线没有任何旋转时则为零角

3.怎么确定角在哪个象限，把角的顶点和坐标原点重合，角的初始边与x轴的正半轴重合，角的终止边落在第几象限，就称这个角为第几象限角，如果角的终止边在坐标轴上，就称这个角不属于任何象限

4.弧度制：规定长度等于半径的圆弧所对应的圆心角为1个弧度（radian）的角，那么根据圆周长为2πr的圆心角为360°得到1弧度为(360/2π)°

5.建立直角坐标系，已坐标原点为圆心画半径为1的圆，那么任意角a的终止边与圆相交的点P（x,y），则有：

sinα = y,cosα = x，tanα = y/x；

arcsinα = 1/y,arccosα = 1/x,arctanα = x/y;

博客图片链接测试

2017-03-20T00:00:00+00:00

待添加项目

2016-04-06T00:00:00+00:00

四（视频部分）

2016-03-15T00:00:00+00:00

视频嵌入在主内容块宽度的帮助下响应和缩放 FitVids.

不确定这是否只会影响kramdown，或者是否是一般的MD问题. 但是添加视频嵌入会在构建jekyll站点时出错. 要修复，请在 <iframe> 标签和删除 allowfullscreen. 下面的例子:

<iframe width="560" height="315" src="//www.bilibili.com/video/av32582939" frameborder="0"> </iframe>

Markdown 句法

2016-03-15T00:00:00+00:00

HTML 元素

下面是您在主题中需要的所有样式。检查源代码以查看段落中的许多嵌入元素.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body text

lorem ipsum dolor sit amet，测试链接Adipiscing Elite. This is strong. Dignisim公司的Nullam Convallis Est. Quisque aliquam.

This is emphasized. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

换行

Lorem ipsum dolor sit amet，测试链接Adipiscing Elite。Dignisim公司的Nullam Convallis Est.奎斯奎.

列表类型

有序表

Item one
1. sub item one
2. sub item two
3. sub item three
Item two

无序列表

Item one
Item two
Item three

统计表

Header1	Header2	Header3
cell1	cell2	cell3
cell4	cell5	cell6
cell1	cell2	cell3
cell4	cell5	cell6
Foot1	Foot2	Foot3

代码片段

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

按钮

在应用 .btn class.

<a href="#" class="btn btn-success">Success Button</a>

KBD

你也可以用 <kbd> 键盘按钮标签.

<kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd>

按下 WASD 来移动你的小车车. 疯狂赛车!!

通告

注意! 您还可以通过附加 {: .notice} 段落

例子

2015-08-10T00:00:00+00:00

MathJax 是在HTML网页中包含基于Tex/LaTex/MathML的数学的简单方法. 要启动和运行，需要在Github页面的标题中包含mathjax脚本。, a然后写一些数学。对于LaTex，您需要知道两个分隔符，一个用于块或显示的数学。 \[ ... \], 另一个用于排列数学 $ ... $.

用法

要启用mathjax支持，请确保kramdown是您的降价风格选择，并且mathjax在您的 _config.yml 目录.

markdown: kramdown
mathjax: true

Here is an example MathJax inline rendering \\( 1/x^{2} \\), and here is a block rendering: 
\\[ \frac{1}{n^{2}} \\]

Here is an example MathJax inline rendering $ 1/x^{2} $, and here is a block rendering: \[ \frac{1}{n^{2}} \]

唯一要注意的是使用markdown时反斜杠的转义，因此分隔符变成 \\[ ... \\] and \$ ... \$ 分别用于排列数学和数学平方.

$\begin{align*} & \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) = \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\ & (x_1, \ldots, x_n) \left( \begin{array}{ccc} \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\ \vdots & \ddots & \vdots \\ \phi(e_n, e_1) & \cdots & \phi(e_n, e_n) \end{array} \right) \left( \begin{array}{c} y_1 \\ \vdots \\ y_n \end{array} \right) \end{align*}$