极

极客前沿

零基础学着色器：安装 p5.js 并运行你的第一段 GPU 代码

2026-07-17 01:30
freeCodeCamp
查看原文

手把手教你安装 p5.js、编写第一个着色器程序，理解 GPU 如何同时处理数百万像素。

准备环境

你只需要一个浏览器和文本编辑器（比如 VS Code 或记事本）。p5.js 是一个让初学者轻松画图的 JavaScript 库，我们用它在网页上运行着色器。

Tutorial Image

安装步骤

  1. 下载 p5.js 库：访问 p5js.org/download/，点击下载完整压缩包，解压到你的项目文件夹。
  2. 创建 HTML 文件：在文件夹里新建一个 index.html，用文本编辑器打开。
  3. 引入 p5.js：把下面代码粘贴到 HTML 的 <head> 部分：
    <script src="p5.min.js"></script>
  4. 添加着色器代码：在 <body> 里放一个 <script> 标签，写入你的 p5.js 代码（见下一步）。

编写第一个着色器程序

着色器 是运行在 GPU 上的小程序，能同时处理屏幕上的每个像素。下面是一个最简单的片段着色器，让画面变成红色渐变：

Tutorial Image
  • 在 HTML 的 <script> 中写入：
    function setup() {
    createCanvas(400, 400, WEBGL);
    }
    function draw() {
    background(0);
    shader(redShader);
    rect(0, 0, width, height);
    }
  • 定义着色器字符串：在上方加入 let redShader;，然后在 preload() 中加载：
    function preload() {
    redShader = loadShader('shader.vert', 'shader.frag');
    }
  • 创建两个文件 shader.vert 和 shader.frag（与 HTML 同目录）。shader.frag 内容示例：
    precision highp float;
    uniform vec2 u_resolution;
    void main() {
    vec2 st = gl_FragCoord.xy / u_resolution;
    gl_FragColor = vec4(st.x, 0.0, 0.0, 1.0);
    }
  • 在 p5.js 中传递分辨率：在 draw() 里添加：
    redShader.setUniform('u_resolution', [width, height]);

验证是否成功

用浏览器打开 index.html，你应该看到一个从黑到红的渐变矩形。如果出现白屏，检查浏览器控制台（F12）看错误信息。常见坑：文件路径写错、忘记加 WEBGL 参数。

下一步可以做什么

尝试修改 shader.frag 里的颜色公式，比如用 sin 函数让颜色动起来。学习更多 p5.js 和 GLSL 函数，就能画出闪烁的星星、流动的波纹甚至分形图案。

内容来源

freeCodeCamp

发布时间

2026-07-17 01:30

返回 AI技术