资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

ShaderToy入门：制作浪漫心形特效

创作时间:

作者:

@小白创作中心

ShaderToy入门：制作浪漫心形特效

引用

CSDN

等

来源

https://blog.csdn.net/long5305350/article/details/142185430

https://blog.csdn.net/2301_79877546/article/details/143029792

https://dj.studio/blog/shadertoy-tutorial

https://flutter.ducafecat.com/github/topics/animation

http://qrc-eye.com/2024/10/07/shadertoy%EF%BC%9A%E7%A8%8B%E5%BA%8F%E5%8C%96%E5%9C%B0%E5%BD%A2%E7%94%9F%E6%88%90-1/

https://ayats.org/blog/learning-shaders

https://www.shadertoy.com/view/XXdcz2

ShaderToy是一个强大的在线着色器编辑平台，用户可以通过GLSL代码创建各种视觉效果。本文将带你从零开始，学习如何使用ShaderToy制作一个浪漫的心形特效。

什么是ShaderToy？

ShaderToy是一个基于Web的GLSL（OpenGL Shading Language）着色器编辑器，用户可以在这里创建、编辑和分享各种视觉效果。平台拥有超过8万个着色器项目，涵盖了从简单的图形绘制到复杂的3D动画等各种类型的效果。

ShaderToy的主要功能和特点

在线编辑环境：ShaderToy提供了完整的在线编辑环境，用户可以直接在浏览器中编写和调试GLSL代码。
实时预览：编辑器支持实时预览功能，用户可以即时看到代码修改带来的视觉效果变化。
社区分享：用户可以将自己的作品发布到ShaderToy社区，与其他用户交流经验和技巧。
开源项目：平台上的大多数项目都是开源的，用户可以查看其他人的代码，学习不同的实现方法。

如何创建和编辑着色器项目

打开ShaderToy网站（https://www.shadertoy.com/）
点击页面右上角的“Create”按钮，创建一个新的着色器项目。
在编辑器中，你可以看到一个默认的代码模板。这个模板包含了绘制一个简单图形的基本代码结构。
编辑代码后，点击页面右侧的“Render”按钮，即可在预览窗口中看到效果。

制作心形特效

基本原理

在数学中，心形可以用极坐标方程表示：

r = a * (1 - sin(θ))

其中，r是极径，θ是极角，a是一个常数，用于控制心形的大小。

在GLSL中，我们可以利用这个方程来绘制心形。具体实现方法是：遍历屏幕上的每个像素点，计算其坐标是否满足心形方程，如果满足，则将该像素点设置为心形的颜色。

具体实现

在ShaderToy中，我们可以使用以下代码来绘制一个基本的心形：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 获取像素点的归一化坐标
    vec2 uv = fragCoord.xy / iResolution.xy;
    
    // 将坐标原点移动到屏幕中心
    uv -= 0.5;
    
    // 交换x和y坐标，使心形垂直显示
    uv = vec2(uv.y, uv.x);
    
    // 计算极角
    float theta = atan(uv.x, uv.y);
    
    // 计算极径
    float r = length(uv);
    
    // 心形方程
    float heart = 1.0 - sin(theta);
    
    // 判断像素点是否在心形内部
    float inside = step(r, heart * 0.5);
    
    // 设置像素颜色
    fragColor = vec4(vec3(inside), 1.0);
}

这段代码首先获取每个像素点的归一化坐标，然后将其转换为极坐标系下的坐标。接着，使用心形方程计算极径，并通过step函数判断像素点是否在心形内部。最后，根据判断结果设置像素的颜色。

添加动画效果

为了让心形更具动感，我们可以添加一些简单的动画效果。例如，让心形的大小随时间变化：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 获取像素点的归一化坐标
    vec2 uv = fragCoord.xy / iResolution.xy;
    
    // 将坐标原点移动到屏幕中心
    uv -= 0.5;
    
    // 交换x和y坐标，使心形垂直显示
    uv = vec2(uv.y, uv.x);
    
    // 计算极角
    float theta = atan(uv.x, uv.y);
    
    // 计算极径
    float r = length(uv);
    
    // 心形方程
    float heart = 1.0 - sin(theta);
    
    // 添加动画效果
    heart *= 0.5 + 0.5 * sin(iTime * 2.0);
    
    // 判断像素点是否在心形内部
    float inside = step(r, heart);
    
    // 设置像素颜色
    fragColor = vec4(vec3(inside), 1.0);
}

在这个版本的代码中，我们通过iTime变量引入了时间因素，使心形的大小随时间变化。iTime是ShaderToy提供的一个内置变量，表示当前时间（以秒为单位）。