没入门就别看了！

// 归一化屏幕坐标系
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);
}