Question

我正在尝试制作一个稍微发光的灯泡然后变得不那么强烈了。也是在边缘有点暗。我发现了一个代码，我认为它会创建我想要创建的效果，但我似乎并不理解它。这是代码：

f = open('test.txt', 'r')

for line in f:
    data = line.split()
       for word in data:
          last = 
          rate =
          totalHours =

   #these are my computations
    otHours = 0
    if totalHours > 40:
         otHours = totalHours - 40   
    regPay = (totalHours - otHours) * rate
    otPay = 1.5 * rate * otHours
    gross = regPay + otPay
    print("%-21s%-15.2f%-17.1f%-15.1f%-15.2f%-16.2f%3.2f" % \
       (last, rate, totalHours, otHours, regPay, otPay, gross))
f.close

我不明白为什么我们需要标准化向量的点积以及如何选择它：

mat2 rotate2d(float angle){
return mat2(cos(angle),-sin(angle),
            sin(angle),cos(angle));
    }

float variation(vec2 v1, vec2 v2, float strength, float speed) {
    return sin(
        dot(normalize(v1), normalize(v2)) * strength + iGlobalTime * speed
    ) / 100.0;
}

vec3 paintCircle (vec2 uv, vec2 center, float rad, float width) {

    vec2 diff = center-uv;
    float len = length(diff);

    len += variation(diff, vec2(0.0, 1.0), 5.0, 2.0);
    len -= variation(diff, vec2(1.0, 0.0), 5.0, 2.0);

    float circle = smoothstep(rad-width, rad, len) - smoothstep(rad, rad+width, len);
    return vec3(circle);
}


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.xy;
    uv.x *= 1.5;
    uv.x -= 0.25;

    vec3 color;
    float radius = 0.35;
    vec2 center = vec2(0.5);


    //paint color circle
    color = paintCircle(uv, center, radius, 0.1);

    //color with gradient
    vec2 v = rotate2d(iGlobalTime) * uv;
    color *= vec3(v.x, v.y, 0.7-v.y*v.x);

    //paint white circle
    color += paintCircle(uv, center, radius, 0.01);


    fragColor = vec4(color, 1.0);
}

我的意思是 - 为什么首先添加，然后减法？那为什么呢：

len += variation(diff, vec2(0.0, 1.0), 5.0, 2.0);
len -= variation(diff, vec2(1.0, 0.0), 5.0, 2.0);

这是怎么回事？ vec2 uv = fragCoord.xy / iResolution.xy; uv.x *= 1.5; uv.x -= 0.25;

制作颜色渐变？如果有人喜欢在那里观看它以及它做了什么，这里是代码的链接：https://www.shadertoy.com/view/ltBXRc。我显然不是很擅长几何。如果有人可以帮助我，我会很感激：）

Answer 1

如果我们想绘制一个完美的圆圈，我们只需绘制距离场景中心一定距离的所有点。从程序上说，我们将从中心开始，选择任意随机方向，在那个方向上走一段距离r，并绘制一个点。然后返回中心，选择其他方向，走同一距离r，并绘制另一个点。依此类推，直到我们有一个平滑的圆圈： r = 1

要绘制扭曲的圆圈，我们可以根据我们所面对的方向改变距离r。如果我们将方向表示为以弧度为单位的角度（theta），那么r将是该角度的某个函数。究竟有什么功能？我们先尝试一下简单的事情：r = theta

不安静我们想要的东西，它应该更像一个圆圈（r = 1），但有一点波纹（r = 1 +波纹度）。最简单的波浪函数是sin(x)。我们尝试添加它：r = 1 + 0.1 * sin(5 * theta)

通过改变数字，我们可以控制波的幅度和频率。但是对称太多了，为了打破它，我们需要一些比正弦波更复杂的东西。

这个怪物sin(5 * sin(x)) - sin(5 * cos(x))

怎么样？

我们将其添加到圈子r = 1 + 0.1 * sin(5 * sin(theta)) - 0.1 * sin(5 * cos(theta))

对我来说很好看。

着色器正好执行此失真，但方式不同。使用带有标准基矢量的点积可以简单地给出矢量的X或Y坐标。我们可以将该位重写为：

len += 0.02 * sin(normalize(diff).y * 5.0 + 2.0 * iGlobalTime);
len -= 0.02 * sin(normalize(diff).x * 5.0 + 2.0 * iGlobalTime);

归一化矢量的X和Y坐标只是该矢量所代表的角度的sin和cos。因此，normalize(diff).y为您提供角度的正弦，normalize(diff).x为您提供余弦。

希望这可以解决一些问题。

WebGL代码的解释 - 为什么它以这种方式工作

1 个答案: