着色器玩具-发光#

../../_images/cyber_fuji_2020.png — Cyber_Fuji_2020.glsl完整上市#

显卡可以运行用类似C语言的OpenGL Shading Language(简称GLSL)编写的程序。这些程序可以很容易地并行化，并在显卡GPU的处理器上运行。

着色器需要一些设置才能编写。ShaderToy网站已经标准化了其中一些着色器，并使编写着色器变得更容易。该网站的网址为：

https://www.shadertoy.com/

Arcade包括其他代码，使您可以更轻松地在Arcade程序中运行这些ShaderToy着色器。本教程帮助您入门。

PyCon 2022幻灯片#

本教程计划在2022年美国PyCon大会上展示。以下是该演示文稿的幻灯片：

第一步：打开一扇窗#

这是一个简单的程序，只需打开一个基本的Arcade窗口。我们将在下一步中添加着色器。

打开一扇窗#

import arcade

# Derive an application window from Arcade's parent Window class
class MyGame(arcade.Window):

    def __init__(self):
        # Call the parent constructor
        super().__init__(width=1920, height=1080)

    def on_draw(self):
        # Clear the screen
        self.clear()

if __name__ == "__main__":
    MyGame()
    arcade.run()

步骤2：加载着色器#

此程序将加载GLSL程序并显示它。我们将在下一步编写着色器。

运行着色器#

import arcade
from arcade.experimental import Shadertoy


# Derive an application window from Arcade's parent Window class
class MyGame(arcade.Window):

    def __init__(self):
        # Call the parent constructor
        super().__init__(width=1920, height=1080)

        # Load a file and create a shader from it
        shader_file_path = "circle_1.glsl"
        window_size = self.get_size()
        self.shadertoy = Shadertoy.create_from_file(window_size, shader_file_path)

    def on_draw(self):
        # Run the GLSL code
        self.shadertoy.render()

if __name__ == "__main__":
    MyGame()
    arcade.run()

备注

将文件读入字符串的正确方法是使用 with 陈述。为清楚起见，我们的代码在演示文稿中没有这样做。以下是做这件事的正确方法：

file_name = "circle_1.glsl"
with open(file_name) as file:
    shader_source = file.read()
self.shadertoy = Shadertoy(size=self.get_size(),
                           main_source=shader_source)

步骤3：编写着色器#

接下来，让我们创建一个简单的First GLSL程序。我们的计划将：

使坐标正常化。我们不是从0到1024，而是从0.0到1.0。这是标准的做法，允许我们独立于解决方案而工作。解析已经为我们存储在一个名为 iResolution 。
接下来，我们将使用白色作为默认颜色。颜色是四个浮点RGBA值，范围从0.0到1.0。首先，我们将只设置RGB，并使用1.0作为Alpha。
如果我们的坐标大于0.2(屏幕尺寸的20%)，我们将使用黑色。
设置我们的输出颜色，使用变量名进行标准化 fracColor 。

用于创建着色器的GLSL代码。#

void mainImage(out vec4 fragColor, in vec2 fragCoord) {

    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // How far is the current pixel from the origin (0, 0)
    float distance = length(uv);

    // Are we are 20% of the screen away from the origin?
    if (distance > 0.2) {
        // Black
        fragColor = vec4(0.0, 0.0, 0.0, 1.0);
    } else {
        // White
        fragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
}

程序的输出如下所示：

您可以使用的其他默认变量：

uniform vec3 iResolution;
uniform float iTime;
uniform float iTimeDelta;
uniform float iFrame;
uniform float iChannelTime[4];
uniform vec4 iMouse;
uniform vec4 iDate;
uniform float iSampleRate;
uniform vec3 iChannelResolution[4];
uniform samplerXX iChanneli;

“统一”意味着运行GLSL程序的每个像素的数据都是相同的。

步骤4：将原点移至屏幕中心，调整纵横比#

接下来，我们想要将圆居中，并根据纵横比进行调整。这将在屏幕中央显示一个(0，0)和一个完美的圆圈。

使原点居中#

void mainImage(out vec4 fragColor, in vec2 fragCoord) {

    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Position of fragment relative to center of screen
    vec2 rpos = uv - 0.5;
    // Adjust y by aspect ratio
    rpos.y /= iResolution.x/iResolution.y;

    // How far is the current pixel from the origin (0, 0)
    float distance = length(rpos);

    // Default our color to white
    vec3 color = vec3(1.0, 1.0, 1.0);

    // Are we are 20% of the screen away from the origin?
    if (distance > 0.2) {
        // Black
        fragColor = vec4(0.0, 0.0, 0.0, 1.0);
    } else {
        // White
        fragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
}

步骤5：添加淡入淡出效果#

我们可以获取颜色，比如白色(1.0，1.0，1.0)，并通过将它们乘以浮点数来调整它们的强度。乘以白色乘以0.5将得到灰色(0.5、0.5、0.5)。

我们可以使用它在我们的圆圈周围创建淡入淡出效果。距离的倒数 \(\frac{{1}}{{d}}\) 给了我们一个很好的曲线。然而，数字太大了，无法调整我们的白色。我们可以通过缩小规模来解决这个问题。运行此命令，然后调整比例值以查看其变化情况。

添加淡入淡出效果#

void mainImage(out vec4 fragColor, in vec2 fragCoord) {

    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Position of fragment relative to center of screen
    vec2 rpos = uv - 0.5;
    // Adjust y by aspect ratio
    rpos.y /= iResolution.x/iResolution.y;

    // How far is the current pixel from the origin (0, 0)
    float distance = length(rpos);
    // Use an inverse 1/distance to set the fade
    float scale = 0.02;
    float strength = 1.0 / distance * scale;

    // Fade our white color
    vec3 color = strength * vec3(1.0, 1.0, 1.0);

    // Output to the screen
    fragColor = vec4(color, 1.0);
}

第六步：调整我们淡出的速度#

我们可以使用指数来调整这条曲线的陡度或浅度。如果我们使用1.0，它将是相同的，0.5会导致它淡出得更慢，1.5会淡出得更快。

我们也可以把颜色改成橙色。

调整淡入淡出速度#

void mainImage(out vec4 fragColor, in vec2 fragCoord) {

    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Position of fragment relative to center of screen
    vec2 rpos = uv - 0.5;
    // Adjust y by aspect ratio
    rpos.y /= iResolution.x/iResolution.y;

    // How far is the current pixel from the origin (0, 0)
    float distance = length(rpos);
    // Use an inverse 1/distance to set the fade
    float scale = 0.02;
    float fade = 1.5;
    float strength = pow(1.0 / distance * scale, fade);

    // Fade our orange color
    vec3 color = strength * vec3(1.0, 0.5, 0.0);

    // Output to the screen
    fragColor = vec4(color, 1.0);
}

步骤7：色调映射#

一旦我们添加了颜色，光晕看起来就有点暗了。我们可以做一些数学“色调映射”，如果你喜欢看起来更好。

音调映射#

void mainImage(out vec4 fragColor, in vec2 fragCoord) {

    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Position of fragment relative to center of screen
    vec2 rpos = uv - 0.5;
    // Adjust y by aspect ratio
    rpos.y /= iResolution.x/iResolution.y;

    // How far is the current pixel from the origin (0, 0)
    float distance = length(rpos);
    // Use an inverse 1/distance to set the fade
    float scale = 0.02;
    float fade = 1.1;
    float strength = pow(1.0 / distance * scale, fade);

    // Fade our orange color
    vec3 color = strength * vec3(1.0, 0.5, 0);

    // Tone mapping
    color = 1.0 - exp( -color );

    // Output to the screen
    fragColor = vec4(color, 1.0);
}

步骤8：定位光晕#

如果我们想要将光晕定位在某个点上，该怎么办？把x，y放在中心位置？如果我们也想控制发光的颜色呢？

我们可以使用以下命令将数据发送到着色器制服。对于着色器渲染的每个像素，我们发送的数据将是相同的(统一的)。可以很容易地在我们的Python程序中设置制服：

运行着色器#

import arcade
from arcade.experimental import Shadertoy


# Derive an application window from Arcade's parent Window class
class MyGame(arcade.Window):

    def __init__(self, width=1920, height=1080, glow_color=arcade.color.LIGHT_BLUE):
        # Call the parent constructor
        super().__init__(width=width, height=height)

        # Load a file and create a shader from it
        shader_file_path = "circle_6.glsl"
        window_size = self.get_size()
        self.shadertoy = Shadertoy.create_from_file(window_size, shader_file_path)
        # Set uniform light color data to send to the GLSL shader
        # from the normalized RGB components of the color.
        self.shadertoy.program['color'] = glow_color.normalized[:3]

    def on_draw(self):
        # Set uniform position data to send to the GLSL shader
        self.shadertoy.program['pos'] = self.mouse["x"], self.mouse["y"]
        # Run the GLSL code
        self.shadertoy.render()

if __name__ == "__main__":
    MyGame()
    arcade.run()

然后，我们可以在着色器中使用这些制服：

发光跟随鼠标，颜色可以更改。#

uniform vec2 pos;
uniform vec3 color;

void mainImage(out vec4 fragColor, in vec2 fragCoord) {

    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    vec2 npos = pos/iResolution.xy;

    // Position of fragment relative to specified position
    vec2 rpos = npos - uv;
    // Adjust y by aspect ratio
    rpos.y /= iResolution.x/iResolution.y;

    // How far is the current pixel from the origin (0, 0)
    float distance = length(rpos);
    // Use an inverse 1/distance to set the fade
    float scale = 0.02;
    float fade = 1.1;
    float strength = pow(1.0 / distance * scale, fade);

    // Fade our orange color
    vec3 color = strength * color;

    // Tone mapping
    color = 1.0 - exp( -color );

    // Output to the screen
    fragColor = vec4(color, 1.0);
}

备注

内置制服

ShaderToy采用了一些内置值。这些设置可以在 Shadertoy.render() 打电话。在本例中，我没有使用这些变量，因为我想展示如何发送任何值，而不仅仅是内置的值。内置值：

PYTON变量

GLSL变量

时间

ITime

time_delta

ITimeDelta

mouse_position

IMouse

大小

这是由Shadertoy.resize()设置的

框架

IFRAME

下面是它们如何设置的一个示例：
my_shader.render(time=self.time, mouse_position=mouse_position)
调整窗口大小时，请确保始终调整着色器的大小。

PYTON变量	GLSL变量
时间	ITime
time_delta	ITimeDelta
mouse_position	IMouse
大小	这是由Shadertoy.resize()设置的
框架	IFRAME

其他例子#

下面是另一个加载GLSL文件并显示该文件的Python程序：

着色器玩具演示#

import arcade
from arcade.experimental import Shadertoy


class MyGame(arcade.Window):

    def __init__(self):
        # Call the parent constructor
        super().__init__(width=1920, height=1080, title="Shader Demo", resizable=True)

        # Keep track of total run-time
        self.time = 0.0

        # File name of GLSL code
        # file_name = "fractal_pyramid.glsl"
        # file_name = "cyber_fuji_2020.glsl"
        file_name = "earth_planet_sky.glsl"
        # file_name = "flame.glsl"
        # file_name = "star_nest.glsl"

        # Create a shader from it
        self.shadertoy = Shadertoy(size=self.get_size(),
                                   main_source=open(file_name).read())

    def on_draw(self):
        self.clear()
        mouse_pos = self.mouse["x"], self.mouse["y"]
        self.shadertoy.render(time=self.time, mouse_position=mouse_pos)

    def on_update(self, dt):
        # Keep track of elapsed time
        self.time += dt


if __name__ == "__main__":
    MyGame()
    arcade.run()

您可以将此演示与下面的任何示例代码一起使用。单击此处示例着色器下方的标题可查看着色器的源代码。

其他一些示例着色器：

../../_images/star_nest.png — Star_nest.glsl完整列表#

../../_images/flame.png — Flame.glsl完整列表#

../../_images/fractal_pyramid.png — FRAMETAGE_PATMID.glsl完整列表#

其他学习#

在本网站上：

了解在中创建粒子的方法着色器玩具粒子。
了解如何在光线投射阴影。
让您的屏幕看起来像80年代的显示器 CRT滤光片。
阅读有关在Arcade中使用OpenGL的详细信息 OpenGL 。
学习如何使用计算着色器计算着色器。

在其他网站上：

这里有一个制作着色器的很好的样例学习教程：https://www.shadertoy.com/view/Md23DV
以下是一个视频教程，逐步介绍了如何进行爆炸：https://www.youtube.com/watch?v=xDxAnguEOn8