Zangarmarsh

A vertex shader animation

  • Jellyfish body: Use a sine wave to offset the vertices on the mesh, and use a mask to slightly scale the X and Z of each vertex, move the vertices in and out, so that the tentacles move beyond the width of the umbrella cover.

  • Overall swing: Let the vertex rotate with sine wane around the Y axis to obtain the effect of swimming swing.

  • Color: Give gradient color according to Y axis value.

  • Fresnel effect: Adding Fresnel effect for a jelly effect, two normal direction related challenges solved.

  • Compared with skeletal animation, the fixed-point displacement shader is simpler and more effective.

  • 水母缩张: 使用正弦波偏移网格上的顶点,并使用遮罩,将每个顶点的X和Z稍微缩放,将顶点移入和移出,以使触手在超出伞盖宽的范围内移动。

  • 整体摇摆:让顶点绕Y轴正弦旋转,获得游动摇摆的效果。

  • 颜色:按Y轴值赋予渐变色。

  • 菲涅尔效果:添加菲涅尔效果形成果冻效果,解决法线方向造成的两个问题。

  • 相较于骨骼动画相比,定点置换着色器更为加简单有效。

Breakdown 步骤详解

Sine movement

First, get the position node of the object space and create a Time node. Split the coordinates to get the Y-axis coordinate (G), so the displacement of each vertex will depends on the value of its Y coordinate. Add the value of the Y-axis coordinate and the value of the time output to an adjusted variable respectively, here I set both to multiply by 3. Sum the adjusted values, and then input the result into the sine node, you can get the value in (- 1, 1) of interval fluctuation. This value is affected by the value of the Y coordinate of each vertex and the time code of the current frame.

正弦运动

首先,获取对象空间(object space)的位置节点并创建一个时间(Time)节点。将对象空间的坐标拆分,得到Y轴坐标(G),这样的每个顶点的波动就取决于它在局部坐标的Y坐标的值。将Y轴坐标的值与时间输出的值各自加入一个调节变量,再次均设置为乘以3,并将调节后的值求和,然后将结果输入到正弦结点中,就可以获得在(-1,1)区间波动的值。这个值受每个顶点Y坐标的值和当前帧时间码的影响。

Mask (Y mask)

Use a mask to scale the X and Z coordinates so that the lower tentacles can move slightly outside the umbrella cover. First, get the Y coordinate, subtract 1, and then take its absolute value. Then, use clamp to limit the output range from 1 to 3. In this way, the output value of the origin and the value above the origin is 1, the output value of 1 unit below the origin is 2, and the output value of points other than 2 units below the origin is 3. Multiply it by the output of the sinusoidal motion just obtained to enhance the strength of the antennae offset. Add a control variable here, 0.2 here, to adjust the intensity of the offset. Add a position-adjusting variable to it, here the value is 1. Then multiply the result with the original vertex coordinates in the object space, and multiply the result with the original vertex coordinates. Set Y to 1, without changing the original Y value. In this way, the final effect is obtained.

遮罩

使用一个遮罩,缩放X和Z坐标,使下部的触手可以稍微移动到伞盖以外的地方。首先,获取Y坐标,减去1,然后取其绝对值。然后,使用clamp将输出的范围限定在1到3之间。这样,原点及原点上方的值输出的值为1,原点下方的1个单位内输出的值为2,原点下方2个单位以外的点输出值为3。将其乘以刚刚得到的正弦运动的输出,从而增强触角偏移强度。 在此添加一个控制变量,此处为0.2,以调节偏移的强度。将一个调整位置的变量与其相加,此处值为1。然后将结果与对象空间的原始顶点坐标相乘,将得到的结果与原本的顶点坐标相乘。将Y设置为1,不改变原本的Y值。这样就得到了最后的效果。

Sine Rotation around Y axis

A sine rotation around the Y axis is added to make the jellyfish swing back and forth a bit over time. Pass the vertex displacement just obtained to the "rotate around axis" node, and set the coordinate axis to the Y axis (0, 1, 0). The output of the time node is added to the Y-axis output of the local coordinates, and the sine node is passed into it as the input of the rotation variable, and finally the vertex displacement of the swing effect is obtained.

摆动

添加了绕Y轴的正弦旋转,使水母随时间来回摆动一点。将刚刚得到的顶点位移传入“绕轴旋转”节点,将坐标轴轴设置为Y轴(0,1,0)。将时间节点的输出与局部坐标的Y轴输出相加,传入正弦节点,用作旋转变量的输入,最终得到摇摆效果的顶点位移。

Color

Use a simple gradient between the two colors created using the Lerp node. Map the Y component of the local coordinate to the interval of 0 and 1 to control the degree of color gradation. Here, blue and purple are selected as the two colors for the start and end of the gradient.

颜色

使用Lerp节点创建的两种颜色之间使用简单的渐变。将局部坐标的Y分量映射到0和1区间,以此控制颜色渐变的程度。这里选择了蓝色和紫色作为渐变起止的两个颜色。

Fresnel effect

We can also multiply the color output with the Fresnel effect node to create a more jelly-like appearance as the final color output. The rendering mode uses transparent rendering mode and adding blending, double-sided rendering. There are two small problems here. First of all, since Fresnel rotation involves the direction of the normal, when we rotate the vertex, we need to rotate the normal input to the Fresnel effect node to make it output the expected value. So I put the normal vector node into the “input” of another “rotate axis” node to synchronize the discovery with other inputs. Secondly, for all normals facing away from us, the Fresnel effect output is 1. So we need to judge the normal to the back. If the normal is facing us, it directly send the input to the Fresnel node. If you are facing away from us, use the Is Front Face node to invert it before entering it.

菲涅耳效果

我们还可以将颜色输出与``菲涅耳效果''节点相乘以创建更像果冻的外观,作为最终的颜色输出。渲染模式使用透明渲染模式和添加混合,双面渲染。这里出现两个小问题。

首先,由于菲涅尔旋转涉及法线方向,当我们旋转顶点时,需要将法线输入旋转到``菲涅耳效果''节点以使其输出预期的值。所以我将法线向量节点放入另一个``绕轴旋转''节点的``输入''中,让发现与其它输入同步。

其次,对于所有背向我们的法线,菲涅耳效果输出为1。 所以我们需要判断法线向背。如果法线面向我们,就直接输入到菲涅尔节点。如果背向我们,就使用Is Front Face结点将其反转后再输入。

Thanks for reading!

感谢阅读!

Previous
Previous

AImpressionism

Next
Next

MANA Bottle