没入门就别看了！
// 归一化屏幕坐标系
vec2 ProjectionCoord(in vec2 fragCoord, in float scale) {
//本函数实现将屏幕坐标转换为以画布中心为原点的坐标系，并进行归一化
//首先当前画布左上角为原点，右下角为iResolution.xy，我们需要将其转换为以中心点为原点，
vec2 centerCoord = fragCoord - 0.5 * iResolution.xy;
//然后将坐标归一化, 这里需要取屏幕宽高的最小值，因为画布可能不是正方形，我们需要保证最小的一边长度为1，范围为(-0.5,0.5)
vec2 normalizationCoord = centerCoord / min(iResolution.x, iResolution.y);
//此时坐标系的范围是(-0.5,0.5), 为了让坐标系的范围是(-1,1), 我们再乘以2
vec2 dobuleNormalizationCoord = 2. * normalizationCoord;
//最后我们再乘以scale, 这样我们就可以控制坐标系的大小
return scale * dobuleNormalizationCoord;
}
//坐标轴辅助对象，筛选出归属于坐标轴的片元，返回坐标轴颜色
vec4 AxisHelper(in vec2 coord, in float axisWidth, in vec4 xAxisColor, in vec4 yAxisColor) {
//设置默认颜色为黑色透明度为0
vec4 color = vec4(0.0);
float dx = dFdx(coord.x) * axisWidth;
float dy = dFdy(coord.y) * axisWidth;
if(abs(coord.x) < dx) {
color = xAxisColor;
} else if(abs(coord.y) < dy) {
color = yAxisColor;
}
return color;
}
//网格辅助对象，筛选出归属于网格的片元，返回网格颜色
vec4 GridHelper(in vec2 coord, in float gridWidth, in vec4 gridColor) {
vec4 color = vec4(0, 0, 0, 0);
float dx = dFdx(coord.x) * gridWidth;
float dy = dFdy(coord.y) * gridWidth;
//每单位长度的余数，如果说想要2个单位长度的网格，那么需要把coord.x和coord.y都除以2，然后取余数
vec2 fraction = fract(coord);
if(fraction.x < dx || fraction.y < dy) {
color = gridColor;
}
return color;
}
// 投影坐标系辅助对象
vec4 ProjectionHelper(in vec2 coord, in float axisWidth, in vec4 xAxisColor, in vec4 yAxisColor, in float gridWidth, in vec4 gridColor) {
// 坐标轴
vec4 axisHelper = AxisHelper(coord, axisWidth, xAxisColor, yAxisColor);
// 栅格
vec4 gridHelper = GridHelper(coord, gridWidth, gridColor);
// =投影坐标系
return bool(axisHelper.a) ? axisHelper : gridHelper;
}
// 定义 5 个爱心的位置
const vec2 heartPositions[5] = vec2[](vec2(-1.0, 1.0), // 左上角
vec2(1.0, 1.0), // 右上角
vec2(0.0, 0.0), // 中心
vec2(-1.0, -1.0), // 左下角
vec2(1.0, -1.0) // 右下角
);
vec4 LoverHeartHelper(in vec2 coord, in vec4 fragColor) {
for(int i = 0; i < heartPositions.length(); i++) {
//这里用减法是因为要将全局坐标系转化为局部坐标系，这样我们依据全局坐标的原点来计算爱心形状
//假如不减，我们就是在全局坐标系原点绘制
//假如减去，我们就是将传入的每个片元都相对到全局的原点做偏移，然后再计算爱心形状
//类似的图像绘制，都是先将全局坐标系转化为局部坐标系，然后再进行绘制，也就是绘制前先做一个坐标系的转换
//这样方便我们计算，也方便我们绘制
float x = coord.x - heartPositions[i].x;
float y = coord.y - heartPositions[i].y;
// 爱心公式，将圆变形
float heart = pow(x * x + y * y - 0.2, 3.0) - x * x * y * y * y * 2.;
// 判断是否在爱心范围内
if(heart <= 0.0) {
fragColor = vec4(0.01, 0.0, 0.09, 1.0); // 红色
} else {
// 设置边缘光
float edgeWidth = 0.1; // 边缘光的宽度
float edgeIntensity = smoothstep(0.0, edgeWidth, abs(heart)); // 计算边缘光的强度
// 边缘光颜色（从绿色到背景色渐变）
vec4 edgeColor = mix(vec4(0.0, 1, 0.0, 1.0), fragColor, edgeIntensity);
// 仅在边缘附近显示边缘光
if(abs(heart) <= edgeWidth) {
fragColor = edgeColor;
}
}
}
return fragColor;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
//片元着色器代码,入参为片元坐标，出参为片元颜色
vec2 uv = ProjectionCoord(fragCoord, 3.);
fragColor = ProjectionHelper(uv, 1., vec4(1, 0, 0, 1), vec4(0, 1, 0, 1), 1., vec4(0.57, 0.57, 0.57, 1.0));
fragColor = LoverHeartHelper(uv, fragColor);
}
