纯色填充

1 / 30

📝 练习目标

学习最基础的着色器概念,创建纯色填充效果。理解gl_FragColor的作用和RGBA颜色模式。

💡 💡 教程内容

学习最基础的着色器概念,创建纯色填充效果。理解gl_FragColor的作用和RGBA颜色模式。

概览

  • 按步骤完成练习。

学习目标

  • 理解GLSL着色器的基本结构和入口点main()函数。
  • 学习如何使用gl_FragColor输出片元颜色。
  • 掌握RGBA颜色模式以及如何在GLSL中表示颜色值(0.0到1.0范围)。
  • 能够编写一个最简单的GLSL着色器来填充整个画布为单一颜色。

输入

  • float u_time — 时间(秒)。
  • vec2 u_resolution — 画布尺寸(像素)。

关键概念

  • u_time + sin/cos 做动画。
float pulse = sin(u_time) * 0.5 + 0.5;

如何实现(步骤)

  • 用 u_time 做动画(可选)。

自检

  • 是否能无错误编译?
  • 输出是否符合目标?
  • 关键数值是否在 [0,1]

常见坑

  • 如果画面全黑,检查遮罩/因子是否一直为 0。

GLSL 代码编辑器

正确代码预览

当前代码预览