ShaderToy 前端教程：解锁特殊功能

前端

2024-02-18 07:58:52

ShaderToy 简介

ShaderToy 是一款在线渲染平台，允许用户使用 GLSL（图形着色语言）编写和共享着色器程序。这些程序可用于创建实时交互式图形，如流体模拟、分形和几何图案。

画布控制

ShaderToy 提供了一系列内置函数，可用于控制画布行为。以下是一些有用的函数：

iResolution: 返回画布分辨率。
iTime: 返回自 ShaderToy 界面启动以来的时间（以秒为单位）。
iMouse: 返回鼠标位置（范围：-1 至 1）。
iChannel0: 加载从 HTML 文档提供的图像。

流体模拟

ShaderToy 内置了许多函数，用于创建流体模拟。这些函数基于 Navier-Stokes 方程，可以模拟流体动力学现象，例如涡流、湍流和波浪运动。以下是一些常用的流体模拟函数：

voronoi(): 生成 Voronoi 图，用于创建有机流体图案。
noise(): 生成噪声纹理，用于创建湍流效果。
fluid(): 用于模拟流体的运动和相互作用。

分形生成

分形是具有自相似图案的几何图形。ShaderToy 提供了一系列函数，用于创建分形，例如：

fractal(): 用于创建经典分形，例如曼德博集合和朱利亚集合。
rayMarch(): 用于创建基于射线行进算法的分形。
perturb(): 用于将分形纹理与噪声相结合，创建更加复杂的效果。

鼠标和键盘交互

ShaderToy 允许用户通过鼠标和键盘与着色器程序交互。以下是一些有用的交互函数：

mouse()：返回鼠标位置的向量（范围：-1 至 1）。
keyboard()：返回一个布尔数组，表示键盘上按下的键。

通过使用这些交互函数，您可以创建响应用户输入的动态图形。

示例

流体模拟演示

uniform float time;
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 p = ( fragCoord.xy / iResolution.xy ) * 2. - 1.;
    fragColor = vec4( fluid( p, iTime, iResolution.x ), 1.0 );
}

此着色器创建一个基本的流体模拟，其中流体以鼠标位置为中心流动。

分形生成演示

uniform float time;
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 p = ( fragCoord.xy / iResolution.xy ) * 2. - 1.;
    fragColor = vec4( fractal( p, iTime ), 1.0 );
}