Translate GLSL tutorial into Simplified Chinese by duetonever · Pull Request #1540 · processing/p5.js-website

duetonever · 2026-07-28T05:25:19Z

Adds the Simplified Chinese (zh-Hans) translation of the Introduction to GLSL tutorial. The issue refers to intro-to-shaders.mdx, but the current English file on main is intro-to-glsl.mdx, so this translation uses the current filename.

The MDX structure, examples, links, metadata, image descriptions, and code comments are preserved.

Checks

npm run check: 0 errors and 0 warnings
git diff --check
Checked headings, links, code fences, components, and annotation slots against the English source

This translation was completed with AI assistance partly.I reviewed every line against the English source manually.

Addresses #1412

lirenjie95 · 2026-07-29T11:16:16Z

@@ -0,0 +1,862 @@
+---
+title: "GLSL 入门"
+description: 介绍如何使用 GLSL 借助计算机的 GPU 创作有趣视觉效果的不同方式。


原文：An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL.

“创作有趣视觉效果”缺“的”，应为“创作有趣的视觉效果”；

“使用 GLSL 借助计算机的 GPU”语序别扭，原文的逻辑是“用 GPU、通过 GLSL”。

建议：“介绍如何借助计算机的 GPU，使用 GLSL 创作出有趣视觉效果的各种方式。”

lirenjie95 · 2026-07-29T11:16:18Z

+
+## 准备工作
+
+在浏览器中对 GPU 进行编程需要使用名为 [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) 的 API。p5.js 非常适合用来编写着色器，因为它处理了许多重复的 WebGL 设置工作，让你可以专注于着色器代码本身。开始使用着色器前，我们需要先将 p5.js 画布设置为 WebGL 模式。为此，请把 `WEBGL` 常量作为第三个参数传给 `createCanvas()`。


“处理了许多重复的 WebGL 设置工作”——原文 boilerplate 指“样板代码／模板化的繁琐设置”，并非“重复的”。建议：“因为它处理了繁琐的 WebGL 样板设置工作”。

lirenjie95 · 2026-07-29T11:16:19Z

+}
+```
+
+还有一个名为 `createShader()` 的函数，可用于直接从草图中定义的字符串加载着色器。


“直接从草图中定义的字符串加载着色器”容易误读成“从草图／中定义的字符串”。建议：“直接使用草图中定义的字符串来加载着色器”。

lirenjie95 · 2026-07-29T11:16:21Z

+
+### 着色语言（GLSL）
+
+着色器文件使用图形库着色语言（Graphics Library Shading Language，GLSL）编写（基于 OpenGL 2.0 和 GLSL ES 1.00），它的语法和结构与我们熟悉的语言很不一样。GLSL 的语法类似 C 语言，因此包含一些 JavaScript 中没有的概念。


“（Graphics Library Shading Language，GLSL）编写（基于 OpenGL 2.0 和 GLSL ES 1.00）”连续两个括号读起来别扭。建议：“着色器文件使用图形库着色语言（Graphics Library Shading Language，GLSL，基于 OpenGL 2.0 和 GLSL ES 1.00）编写”。

lirenjie95 · 2026-07-29T11:16:22Z

+bool          // true 或 false
+```
+
+总的来说，着色语言比 JavaScript 严格得多。缺少分号是不允许的，并且会产生错误消息。浮点数和整数等不同数值类型不能混用。如果一个 `float` 没有以小数形式书写，GLSL 也会报错，因此你会经常写出 `0.0` 或 `1.0` 这样的数值。


“缺少分号是不允许的，并且会产生错误消息”翻译腔较重。建议：“少写一个分号就会直接报错”。

lirenjie95 · 2026-07-29T11:16:24Z

+
+<td>
+
+GLSL 中的循环必须在一个常量值处停止。如果希望根据条件结束循环，可以使用 `break` 跳出循环。


“GLSL 中的循环必须在一个常量值处停止”拗口。原文：Loops in GLSL have to stop at a constant value. 建议：“GLSL 中循环的结束条件必须是常量”。

lirenjie95 · 2026-07-29T11:16:26Z

+  ${end('main')}
+`}>
+  <Fragment slot="precision">
+   着色器首先用一行 `precision` 语句声明浮点数精度。精度可以是 `lowp`、`mediump` 或 `highp`。从最高精度开始是个不错的选择，可以确保着色器在各处看起来一致。在台式机和笔记本电脑上，无论你写什么，GPU 很可能都会使用最高精度。在手机上，使用较低精度可能更快，但也可能让着色器呈现出不同的效果。


“可以确保着色器在各处看起来一致”——原文 look the same everywhere 指在不同设备上显示效果一致，“在各处看起来一致”比较生硬。建议：“确保着色器在任何设备上的显示效果都一致”。

lirenjie95 · 2026-07-29T11:16:27Z

+
+### 片元着色器
+
+片元着色器负责着色器的颜色输出，也是我们进行大量着色器编程的地方。下面是一个非常简单的片元着色器，它只会显示红色：


“也是我们进行大量着色器编程的地方”拗口。建议：“我们大部分的着色器编程工作都将在这里完成”。

lirenjie95 · 2026-07-29T11:16:29Z

+
+## Uniform：从草图向着色器传递数据
+
+像这样的简单着色器本身就很实用，但有时还需要把变量从 p5.js 草图传递给着色器。这时就要用到 uniform。uniform 是一种可以从草图发送给着色器的变量，让我们能够通过 JavaScript 更细致地控制着色器。


“更细致地控制”与原文 have much more control 不符，应为“更大程度的控制”。建议：“让我们能够从 JavaScript 对着色器进行更灵活、更充分的控制”。

lirenjie95 · 2026-07-29T11:16:31Z

+  }
+`} />
+
+uniform 在片元着色器中也同样有效。在下面的示例中，我们创建了一个颜色 uniform `myColor`，以便通过草图的 JavaScript 部分更改颜色。请记住，在着色器中，颜色通道的取值范围是 0–1，而不是 0–255。


“uniform 在片元着色器中也同样有效”——原文 It also works in the fragment shader 的主语是“向着色器传递数据这种做法”，而非 uniform 本身。建议：“这种做法在片元着色器中同样可行”。

lirenjie95 · 2026-07-29T11:16:32Z

+    纹理坐标最初以名为 `aTexCoord` 的 `attribute` 形式传入。p5.js 会自动填入这个值。
+  </Fragment>
+  <Fragment slot="varying">
+    我们在这里声明一个 `varying` 变量。在顶点着色器中声明的任何 varying，都可以在片元着色器中再次声明；随后就能在片元着色器中访问顶点着色器赋给它的值。


“都可以在片元着色器中再次声明；随后就能在片元着色器中访问……”——“在片元着色器中”重复。建议：“都可以在片元着色器中再次声明，并在那里访问顶点着色器赋给它的值”。

lirenjie95 · 2026-07-29T11:16:34Z

+
+## 滤镜着色器
+
+在 p5.js 中，滤镜会查看画布上的所有像素，然后将它们替换为其他内容。p5.js 内置了许多滤镜，例如反转画布颜色或对画布内容应用模糊效果。你也可以通过编写片元着色器来创建自己的滤镜。


“滤镜会查看画布上的所有像素”——“查看”不准确，滤镜是读取并处理像素。建议：“滤镜会读取画布上的所有像素，并将它们替换成别的内容”。

lirenjie95 · 2026-07-29T11:16:36Z

+
+## 总结
+
+掌握这些知识后，你就可以创建一些基本的着色器了。不过，着色器编程的世界远不止于此，许多主题也超出了本教程的范围。在 p5.js 中，着色器是创建视觉画面、效果和纹理的强大工具，这些内容还可以映射到三维几何体上。


“这些内容还可以映射到三维几何体上”——原文 creating visuals, effects, and textures that can be mapped to your 3D geometry 中，能映射到 3D 几何体上的是“纹理”，“这些内容”指代不明。建议：“……是创建视觉画面、效果以及纹理的强大工具，这些纹理还可以映射到你的三维几何体上”。

lirenjie95 · 2026-07-29T11:16:37Z

+- [Shadertoy](https://www.shadertoy.com/)：一个庞大的在线着色器作品库，其中的着色器通过浏览器编辑器编写。
+- [p5js Shader Examples](https://github.com/aferriss/p5jsShaderExamples)：Adam Ferriss 整理的资源合集。
+- [OpenGL ES 2.0 规范](https://registry.khronos.org/OpenGL/specs/es/2.0/es_cm_spec_2.0.pdf)：非常技术性的 GLSL 规范。
+- [WebGL 快速参考卡](https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf)：另一份技术性稍强的参考资料，但其中包含大量有关 GLSL 函数的实用信息。


“另一份技术性稍强的参考资料”——原文 slightly dense 指内容密集、略显艰深，并非“技术性稍强”；goodies 是口语化的“好东西／干货”，译成“实用信息”丢了原文的语气。建议：“另一份略显艰深的技术参考资料，但里面有很多关于 GLSL 函数的干货”。

lirenjie95 · 2026-07-29T11:16:39Z

+
+#### 浮点数（Float）
+
+一种存储浮点数的数据类型，数值中可以包含小数点。


“一种存储浮点数的数据类型”——用“浮点数”解释“浮点数（Float）”属于循环释义。原文：stores floating point numbers, which can have a decimal point。建议：“一种存储带小数点的数值的数据类型”。

lirenjie95 · 2026-07-29T11:16:41Z

+
+#### 整数（Int）
+
+一种存储整数的数据类型，即不含小数部分的数。


同上一条的问题：“一种存储整数的数据类型”用“整数”解释“整数（Int）”。建议：“一种存储整数值的数据类型，即不含小数部分的数”。

@lirenjie95 非常感谢你细致的审阅和逐条提供的修改建议！我重新对照了英文原文和上下文，大部分内容已按你的建议修改；少数涉及技术含义或指代范围的地方也结合原文作了相应调整。修改已推送，辛苦你有空时再帮忙看看。

lirenjie95

Most of your translation is pretty good. Just some minor change requests.

Refined definitions for float and int data types in Chinese.

docs(i18n): refine GLSL Chinese translation

lirenjie95

LGTM

Translate GLSL tutorial into Simplified Chinese

193f2d3

duetonever marked this pull request as ready for review July 28, 2026 06:54

docs(i18n): clarify GLSL precision wording

2fb3a6d

ksen0 requested a review from lirenjie95 July 29, 2026 09:43

lirenjie95 reviewed Jul 29, 2026

View reviewed changes

lirenjie95 suggested changes Jul 29, 2026

View reviewed changes

docs(i18n): address GLSL translation review feedback

8e98e1a

duetonever mentioned this pull request Jul 29, 2026

docs(i18n): refine GLSL Chinese translation duetonever/p5.js-website#1

Merged

duetonever added 5 commits July 29, 2026 22:22

Clarify loop termination condition in GLSL

7f1abe2

Update intro-to-glsl.mdx

c6c4557

Update intro-to-glsl.mdx

57160cd

Update float and int definitions in intro-to-glsl

384b32d

Refined definitions for float and int data types in Chinese.

Merge pull request #1 from duetonever/agent/refine-glsl-zh-hans-review

9f51b53

docs(i18n): refine GLSL Chinese translation

duetonever requested a review from lirenjie95 July 29, 2026 14:33

Fix minor grammatical issues in GLSL tutorial

2f853f2

lirenjie95 approved these changes Jul 29, 2026

View reviewed changes


		## 准备工作

		在浏览器中对 GPU 进行编程需要使用名为 [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) 的 API。p5.js 非常适合用来编写着色器，因为它处理了许多重复的 WebGL 设置工作，让你可以专注于着色器代码本身。开始使用着色器前，我们需要先将 p5.js 画布设置为 WebGL 模式。为此，请把 `WEBGL` 常量作为第三个参数传给 `createCanvas()`。


		### 着色语言（GLSL）

		着色器文件使用图形库着色语言（Graphics Library Shading Language，GLSL）编写（基于 OpenGL 2.0 和 GLSL ES 1.00），它的语法和结构与我们熟悉的语言很不一样。GLSL 的语法类似 C 语言，因此包含一些 JavaScript 中没有的概念。


		<td>

		GLSL 中的循环必须在一个常量值处停止。如果希望根据条件结束循环，可以使用 `break` 跳出循环。


		### 片元着色器

		片元着色器负责着色器的颜色输出，也是我们进行大量着色器编程的地方。下面是一个非常简单的片元着色器，它只会显示红色：


		## Uniform：从草图向着色器传递数据

		像这样的简单着色器本身就很实用，但有时还需要把变量从 p5.js 草图传递给着色器。这时就要用到 uniform。uniform 是一种可以从草图发送给着色器的变量，让我们能够通过 JavaScript 更细致地控制着色器。


		## 滤镜着色器

		在 p5.js 中，滤镜会查看画布上的所有像素，然后将它们替换为其他内容。p5.js 内置了许多滤镜，例如反转画布颜色或对画布内容应用模糊效果。你也可以通过编写片元着色器来创建自己的滤镜。


		## 总结

		掌握这些知识后，你就可以创建一些基本的着色器了。不过，着色器编程的世界远不止于此，许多主题也超出了本教程的范围。在 p5.js 中，着色器是创建视觉画面、效果和纹理的强大工具，这些内容还可以映射到三维几何体上。


		#### 浮点数（Float）

		一种存储浮点数的数据类型，数值中可以包含小数点。


		#### 整数（Int）

		一种存储整数的数据类型，即不含小数部分的数。

Uh oh!

Conversation

duetonever commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checks

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lirenjie95 Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

duetonever Jul 29, 2026

Choose a reason for hiding this comment

Uh oh!

lirenjie95 left a comment

Choose a reason for hiding this comment

Uh oh!

lirenjie95 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

duetonever commented Jul 28, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading

lirenjie95 Jul 29, 2026 •

edited

Loading