到这里还没入门，就放弃
// 归一化屏幕坐标系
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);
//这里dx为例，dFdx返回当前点的coord.x与相邻点的coord.x的差值，然后乘以axisWidth，得到一个屏幕上的一个像素在x方向上的长度
// dFdx 的入参 必须是一个引用 而不能是一个具体的数值是吗，因为他要靠这个引用来查找相邻片源的该值
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;
}
vec4 LoverHeartHelper(in vec2 coord, in vec4 fragColor) {
// 圆心坐标
float x = coord.x;
float y = coord.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; // 边缘光的宽度
//这里用到三次 Hermite 插值函数，smoothstep 函数是其近似函数
//这样的插值相比于线性插值，更加平滑，不会出现明显的端点
//当然适情况而定有的场景下，你需要转折更明显的线性插值
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;
}
//问题：为什么这里的边缘光不是贴合边缘的？提示：隐式方程与sdf方程的差异，偏移路径（用法线求得）。
}
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);
}
