聊聊用 shadertoy 画画的方法

wuyudi

姑且开一帖讲讲怎么画, 而且事后复盘也不会看不懂.

wuyudi

扫描线画图的基本思路是, 通过几何线段获得点 P(x,y) , 再有一个函数 f(x, y) -> 颜色, 把 P.x P.y 输入进去就得到了整个平面的颜色.

wuyudi

练习题: 扫描一个半径为 5 的实心圆, 外面是黑的, 里面是白的.

提示: 利用 sgn sqrt 写出判断函数. 并上色.

wuyudi

但是这种的问题是, 进行复杂操作非常不便.

好在已经有一种神奇的专门解决这种问题的技术, 叫着色器. 这里我们不介绍背景, 就介绍怎么用.

我们打开 https://www.shadertoy.com/new

1. Shader Toy 简介

Shader Toy 是一个简单易用的着色器编写和预览工具，非常适合初学者入门。它使用 GLSL (OpenGL Shading Language) 作为着色器语言。

2. 基本结构

一个最简单的 Toy Shader 程序通常包含以下结构：

1. void mainImage( out vec4 fragColor, in vec2 fragCoord )
   
2. {
   
3.     // 在这里编写着色器代码
   
4.     fragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
   
5. }

复制代码

mainImage 是着色器的主函数

fragColor 是输出的颜色，类型是 vec4，分别代表红、绿、蓝、透明度 (RGBA)。

fragCoord 是当前像素的坐标，类型是 vec2，表示 X 和 Y 坐标。

3. 绘制纯色

上面例子已经展示了如何绘制纯色。vec4(1.0, 0.0, 0.0, 1.0) 表示红色，将这段代码放入 mainImage 函数中，整个屏幕就会显示红色。你可以修改 RGBA 的值来改变颜色。 例如, vec4(0.0, 1.0, 0.0, 1.0)为绿色。

4. 使用坐标

fragCoord 包含了当前像素的坐标。 我们可以根据坐标来改变颜色， 做出一些简单的图案。 请注意，fragCoord 的坐标原点在左下角，并且坐标值通常是像素的绝对坐标。 为了方便计算，我们通常需要将坐标归一化到 0.0 到 1.0 的范围内：

1. void mainImage( out vec4 fragColor, in vec2 fragCoord )
   
2. {
   
3.     vec2 uv = fragCoord/iResolution.xy;  // iResolution 是 Toy Shader 内置的屏幕分辨率变量
   
4. 
   
5.     fragColor = vec4(uv.x, uv.y, 0.5, 1.0);
   
6. }

复制代码

这段代码将 fragCoord 除以 iResolution.xy，得到归一化的坐标 uv。 然后，将 uv.x 作为红色分量，uv.y 作为绿色分量，蓝色分量设为 0.5，最终得到一个颜色。 这个着色器会生成一个从左到右颜色从黑到红，从下到上颜色从黑到绿的渐变。

5. 绘制圆形

我们可以利用距离函数 length() 来绘制圆形。 首先，计算当前像素到屏幕中心的距离，然后根据距离来决定颜色：

1. void mainImage( out vec4 fragColor, in vec2 fragCoord )
   
2. {
   
3.     vec2 uv = fragCoord/iResolution.xy;
   
4.     vec2 center = vec2(0.5, 0.5);  // 圆心
   
5.     float radius = 0.3;        // 半径
   
6. 
   
7.     float dist = length(uv - center); // 计算距离
   
8. 
   
9.     if (dist < radius) {
   
10.         fragColor = vec4(1.0, 1.0, 1.0, 1.0); // 圆内白色
    
11.     } else {
    
12.         fragColor = vec4(0.0, 0.0, 0.0, 1.0); // 圆外黑色
    
13.     }
    
14. }

复制代码

这段代码会在屏幕中心绘制一个白色的圆形，背景为黑色。

6. 其他技巧

平滑边缘: 可以使用 smoothstep() 函数来平滑边缘，让圆形看起来更自然。

内置变量: Shader Toy 提供了许多内置变量，例如 iTime (时间) 等。

函数: 可以将常用的代码封装成函数，提高代码可读性。

wuyudi

然后在网站搜关键字, 比如 https://www.shadertoy.com/results?query=Mandelbrot , 有一堆前辈的作品.