您需要 登录 才可以下载或查看，没有账号？注册
x
本帖最后由 幺九 于 2020-3-21 19:27 编辑
Francisco Garcia-Obledo shared the way he and his colleagues improved the blood in Assassin’s Creed 3 Remastered.
Francisco Garcia-Obledo分享了他和同事优化改进刺客信条3重置版中血液特效表现
The purpose of this post is to show how we improved the blood from AC3 with the latest tech changes we implemented in Anvil. This is how the blood looks like in the final game.
Here is a comparison. In the original game, the blood was simulated with just one particle emitter with a generic texture (the same texture map was used to simulate dirt, snow bits, etc). The nice touch it had was the use of a threshold alpha animation which is a common technique nowadays and used in a wide range of effects. My approach here was to use the same technique but with a more realistic base texture plus adding more emitters and better dynamics (gravity, dampening, etc). I ended up having 4 emitters: thick drops, smaller drops, core, and spray.
这组对比，在原先的游戏版本中，血液是使用粒子发射器赋予贴图制作（同样的贴图我们也使用来模拟污渍，雪碎等）使用现在已经在大范围特效中被普遍应用的阈值动画可以实现出色的效果。我们的目标在这里是使用相同的技术，但是更加偏写实的风格基于贴图纹理并增加一些发射器和更好的动态力场如：重力，阻尼等。我最终使用四个发射器来分别负责发射一些轻薄的掉落细节，小一些的掉落细节，核心主体，喷射效果来完成整个特效制作。
Original vs Remaster:
原版本与重置版
TEXTURE CREATION 贴图绘制
I’m going to explain how I created the core blood effect (the other ones are basically the same but changing the shape of the blood). The purpose of this breakdown is to show my workflow in which I mix both procedural and traditional techniques.
我想要揭秘是如何来创建核心主体的血液特效制作（另一部分也是基于相同技术稍微改变了形状）揭秘的目的在于展示结合了程序化和传统特效制作流程。
I added Blender into my pipeline when I was working at Gears 4 and we didn’t have any fluid simulation software and I’ve used it since then on other projects, from Red Dead Redemption 2 to Candy Crush.
在开发战争机器4期间，我把Blender软件加入到我的制作管线之中，由于我们当时还没有使用任何流体模拟软件，虽然我在荒野大镖客2和糖果传奇中使用过类似软件。
The scene setup is very basic, it just consists of one geometry acting as fluid emitter and other being the collider. There is some animation on them to achieve (after many attempts) the look I was looking for.
场景的搭建非常基础，包括一个几何体模型作为流体发射器，另一个作为碰撞体。两者之间创建一些动画来实现下面的效果（经过多次尝试）。
Scene setup
场景建立 | Emission
发射器 | Collision
碰撞 | Animation
动画 |
When we choose a frame we are happy with we are ready to isolate the fluid mesh and place a camera to take renders:
当我们单独挑选出其中的一帧关键帧动画，并且把他单独分离成流体模型，放置在一个摄像机中开始渲染。
This is how the fluid looks after the collision and isolating it from the rest of the geometries. By default, you get not very realistic results, the texture looks too “blobby” 上图就是经过碰撞和单独生成的流体模型的样子，默认点滴状的效果让他看起来不是那么写实
You can work with the fluid geometry as if it was a “normal” geometry. I applied here basically 2 modifiers, Displace (to get rid of the blobbiness) and Smooth (to clean the geometry) 你可以制作一个看起来特别一些的流体模型使用修改和置换平滑工具。
Render of the normal map ready to be imported into the engine 渲染法线贴图准备导入引擎
Render of the opacity map 渲染透明贴图
MPORT TO ENGINE (1) 导入引擎
We can move to our engine, import the textures and create the shader we will use.
导入贴图，创建将要使用的引擎材质
Basic shader 基础材质
PBR values PBR材质
Fake reflection I always like to add fake reflection to liquid textures so that we can still observe some specular highlights and preserve the liquid feel (it is especially noticeable on the darkest bits of the image) 假反射 我习惯于增加一个假反射给液态的贴图让它看起来有更多的镜面反射，更有液体的感觉（在画面最暗的区域也能被观察到） Cubemap texture 立方体贴图
CREATION OF THRESHOLD TEXTURE MAP 创建阈值贴图
At this moment we have a basic blood sprite with which we can start to work on the dynamics of the effect. But, the disappearance of this blood splat will be a classic alpha fade out and, in my opinion, this is outdated now for things like liquids. Let’s move on and create the threshold map. For this, I incorporated into my pipeline Substance Designer.
现在我们已经得到了一组让我们可以开始制作动态特效的血液序列整图，但是血液消失动画还是会使用透明通道渐变来处理。以我的观点来看，这些图片输出的工作例如液体，最好还是使用我的制作管线SD软件来生成阈值贴图
First, we have to import the opacity map we got from Blender and invert it:
首先我们需要导入从Blender中生成的透明贴图，将它反转色彩
After that, we are ready to add the Distance node. I don’t really know the maths behind it or what other people use it for but let me explain it the way I understand it which will make this process easier to understand. This node takes the intersection between black and white pixels and creates a gradient inwards defined by the Maximum Distance parameter. I see it as an inverted push (3dsmax)/ displace (Blender) modifier: 随后我们准备来增加一个间距节点，虽然我并不了解其后的算法，或者有人需要我来解释为什么需要使用，但我能解释的是这能让制作流程更加清晰易懂。这个节点可以通过调节最大距离参数在黑白像素之间产生向内的渐变。我把它视作一个3dsmax中的倒推或Blender中的修改工具
There is one thing here to pay attention to. This node works with absolute values so a value of, let’s say 20, works for the thicker parts but will create almost no gradient in thinner parts (such as the squirts). To solve that, I divided the image in 2, the center and the squirts (the maximum distance was set to a much lower value for these)
这里有一点需要关注的是，这个节点运用有一个效果的绝对值，例如我们设置20，作用在薄边缘的区域，然而在边缘区域并没有太多的渐变效果，为了解决这个问题，我把图片分成两部分，中央区域和边缘喷射状区域（最大值在不同的部分设置的数值不尽相同）
When we are happy with our threshold map, one thing we have to be mindful of is that this texture doesn’t have to be necessarily “nice”, we have to think of the values of it. So, as this is a grayscale texture that will define the animation of the opacity, we need as many values as we can. So, one common mistake I’ve seen out there is having threshold maps without a smooth histogram. With that, I mean that the histogram should have pixels filling up the whole range, from 0 to 255. To do that I added the Auto Levels node:
当我们愉快的制作阈值贴图的时候，有一件事情需要提醒贴图并不需要看起来太完美，这是一张灰度范围的贴图来定义动画的透明效果，我们需要尽可能多的数据，所以我们通常的错误在于这张阈值贴图并没有顺滑的直方图曲线。我的意思是直方图上的像素需要覆盖的范围从0到255，为了实现这个效果我加入了自动调节色阶节点。
After some tweaks here and there, we will get our resultant threshold map. Note: You can simulate the threshold animation with the threshold adjustment layer in Photoshop.
经过一些微调，我们得到了最终的阈值贴图。提示：你可以通过PS中的阈值调节层来制作阈值动画
贴图与动画
You can see that although the animation is smooth and will look ok like this, it looks unnatural. Especially, it creates some hard angles that you never see in liquids. To fix that you can modify the texture as if it was a standard texture, adding filters to it but being careful that you don’t break the shape of it and, more importantly, you keep the whole range of grays in the histogram.
你可以看到虽然动画看起来还不错很平顺，但整体并不自然，尤其是真实的液体并不会出现生硬的转角切边。为了解决这个问题我们可以通过修改贴图，增加滤镜来实现，但是需要小心的是不要破坏原有的外形，更重要的是保持整体灰度在直方图上覆盖的范围。
（接下来似乎是原作者优化过得贴图与动画）
MPORT TO ENGINE (2) Taking the shader from where we left it we will add the alpha threshold animation (also called erosion). It depends on the engine we are using so here I’ll link some references to this topic. So, let’s add the threshold map we created into our shader, this is how it will look up to this point: 导入引擎02
将我们遗漏下的材质部分中增加透明阈值动画（也被称为腐蚀），方法取决于我们使用的引擎，这里我们会备注一些相关主题的参考，让我们增加阈值贴图来创建我们的材质，效果如下图
Looks cool but you can appreciate what made me create this whole pipeline for when the liquid is untouched the borders look nice with some height but as long as the threshold animation starts to act, those borders are lost and the liquid loses the feeling of something “thick”. To me, this looks as if you were cutting paper. Here you can see the normals of the image in which you will see what I’m referring to:
看起来挺酷的，这是由于我们之前在制作管线中所创建的，当液体被腐蚀，边缘部分配合高度细节，加上阈值动画会让效果更加真实。这些边缘的腐蚀和液体的腐蚀看起来有点单薄，对我来说，看起来就像在切割纸片。下图是法线贴图模式下的效果。
Somehow we need to change the normal map over time and sync it with the threshold animation. There was a cool tutorial explaining how they did it on The Last of Us. I will explain here my method with no programmers involved, no crazy maths.
我们需要改变法线贴图让其与阈值动画同步，这里有一个很酷的教程被应用在《最后生还者》游戏中，我将会介绍自己的方式并不需要程序的协助和太多数学运算的方法。
SECONDARY NORMAL MAP 次级法线贴图
Back in Substance Designer, we will create a normal map directly from the threshold map. We will do this with the Height to Normal node (in this image the blue channel is removed but we don’t need to do it for this example):
回到SD软件，我们将从阈值贴图中直接生成一张法线贴图。通过使用高度到法线节点来实现这个步骤（在这张图片中蓝色通道被移除，但是我们没必要这么做在这个案例中）
So, my way of thinking here was, instead of jumping to the shader itself I started playing around in Photoshop being always conscious of what we can do in real time. Up to this point we have:
因此，我想法是，意识到我们可以做一些即时的效果，开始在ps里探索，而不是跳到着色器上。迄今为止：
Primary normal map from Blender: this gives us a nice static result
Secondary normal map from Designer: this gives us nice borders during the animation
Threshold map: this acts as a mask and gives us the animation via shader
主体法线贴图由Blender制作：给了我们漂亮的静态的效果
次级重新设计法线贴图：给了我们在动画中漂亮的边缘
阈值贴图：这起到了遮罩的作用给我们利用材质动画
Basically what we are aiming for is to get the primary normal map in the center and the secondary normal map on the borders. So what I thought is, I will mask the normal maps based on the threshold map, inverting one of them. Then I will expose variables in the shader to control the brightness/contrast of the threshold map so that we can expand/shrink the borders. Here are 2 examples (pay attention to the differences between the 2 threshold masks):
基于上述从主体法线贴图得到中心细节，从次级法线贴图得到边缘细节，所以我认为，我会使用阈值贴图来制作遮罩，反转其中的一个贴图，然后我会暴露更多的参数在材质中来控制阈值贴图的亮度和对比度，这样我们可以扩大/缩小边缘。这里有两个例子（请重点关注两个阈值贴图的区别）。
Thinner border: 轻薄的边缘
Wider border: 宽厚的边缘
FINAL RESULT IN ENGINE 最终在引擎中的效果
In our shader, we have to mix both normal maps in the same way as Photoshop. So I ended up adding some maths to the mask used in the blend/lerp function (brightness and contrast): 在我们的材质中，我们不得不像PS用同样的方式混合两张法线贴图，所以我最终加了一些算法使用混合插值功能（亮度和对比度）
WITH procedural borders: 使用程序化的边缘
This is what we had without the “procedural” borders:
这是我们没用使用程序化的边缘
In this example case my final touch was adding UV Distortion to all above so that we had an extra animation on it:
在这个例子中我们最后增加了UV扰动达到下面的效果，获得额外的动画效果。
This will be it, the rest would be using this technique with other textures and compose the effect with different emitters. Of course, you have to be careful with how many textures you add and all, that’s why I used this technique with a generic normal map plus generic threshold map to use it in other cases in which I didn’t/couldn’t add a specific texture. Here is again the video with the result in the game:
就是这样，其余的使用了一些别的贴图和技术，并使用了不同发射器的特效表现，当然你不得的小心控制使用增加的贴图数量，这就是为什么我使用这些技术来生成普通的法线贴图加阈值贴图来达到效果。
|
画板
