# @codejen/pack-glsl 中文文档

规范地址：https://npmcn.com/package/%40codejen/pack-glsl/

版本：2\.6\.1
npm 元数据更新时间：2026-11-01T20:25:13.338Z
中文译文更新时间：2026-11-10T09:29:10.092Z
软件包许可：MIT-0 AND MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40codejen/pack-glsl
原文对照：https://npmcn.com/package/%40codejen/pack-glsl/?lang=original
项目主页：https://learosema.github.io/jen/glsl.html
源码仓库：https://github.com/learosema/jen

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：233 kB，153 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=24
- 运行依赖：0 个
- peer 依赖：@codejen/jen ^3\.2\.0 \|\| ^4\.0\.0
- 首次发布：2026-10-04T20:27:22.647Z
- 最新版本发布：2026-11-01T20:25:13.085Z
- 近 30 天下载量：1850（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 15 个）

## 中文简介

gLSL 的 Jen 包: 阴影启动器、 SDF/射线、噪音和照明片段(麻省理工学院许可,归属)

## 安装

```sh
npm install @codejen/pack-glsl
```

也可以使用：`pnpm add @codejen/pack-glsl`、`yarn add @codejen/pack-glsl`、`bun add @codejen/pack-glsl`

## README

# @ codejen/ pack- glsl

A 类 [简](https://github.com/learosema/jen) gLSL 的包: 碎片和顶点阴影启动器, 加上您可以降入任何阴影器的功能 。 WebGL2的GLSL ES 3.00是默认的;每件事物也编译为桌面 GLSL 3.30 / 4.10 核心,以及 `glsl:port` 将原型从浏览器移动到 C++/OpenGL 时,切换阴影头.

**联合国 [https://learosema.github.io/jen/glsl.html 页面存档备份,存于互联网档案馆](https://learosema.github.io/jen/glsl.html)**

## 安装

```sh
npm install --save-dev @codejen/pack-glsl   # or: npm install -g @codejen/jen @codejen/pack-glsl
```

```sh
jen glsl:frag --name=Clouds                                    # shaders/clouds.frag.glsl
jen glsl:util --fns=rot2,remap --into=shaders/clouds.frag.glsl # insert helpers before main()
jen glsl:port --file=shaders/clouds.frag.glsl --to=410         # ready for cpp:sdl3-opengl
jen cpp:shader --file=shaders/clouds.frag.glsl                 # (pack-cpp) embed it in the CMake build
```

## WebGL 游乐场

```sh
jen glsl:webgl --name=Clouds            # index.html, shader-canvas.js, shaders/clouds.frag.glsl
jen glsl:webgl --name=Clouds --inline   # shader inside index.html – opens straight from disk
```

`<shader-canvas>` 是一个单一的无依赖脚本。 它会供养 `uTime`, (中文(简体) ), `uResolution` 财务报告和审定财务报表 `uMouse`,在画布上显示原始行号的编译错误,并使用 `live` 每当阴影文件更改时会重新编译(拖动文件需要任何静态服务器,例如. `npx serve`) (中文(简体) ). 它也画 `mesh="plane|sphere"` 带有自定义 `vert` 遮蔽器( 抹上 `orbit`),绑定 `texture0`.`texture3` 改为 `uTexture0`.`uTexture3`,暂停屏幕并尊重 `prefers-reduced-motion`. 桌面遮蔽器(`#version 410 core`)运行不变,所以同一文件在浏览器和在 `cpp:sdl3-opengl`。见 [其读物](https://npmcn.com/package/%40codejen/pack-glsl/web/shader-canvas/README.md) 所有属性、制服和事件.

## 噪声

```sh
jen glsl:noise --kind=fbm --into=shaders/clouds.frag.glsl                  # simplexFbm(p, octaves[, gain])
jen glsl:noise --kind=worley --dim=3 --into=shaders/cells.frag.glsl        # worleyNoise(vec3), worley(vec3) → F1, F2
jen glsl:noise --kind=warp --name=Marble --tile                             # preview shader, drawn 2×2 to show the seams
```

-   **基声** (单位:千美元)`--kind=value|perlin|simplex|worley`: `<kind>Noise(p)`,大约\[-1, 1\]. 沃利还有 `worley(p)`,距离最近的两个特征点.
-   **分块** (单位:千美元)`--kind=fbm|turbulence|ridged|warp`: `<base>Fbm(p, octaves)` 和朋友,在任何基础噪声 通过 `--base` (默认) `simplex`) (中文(简体) ). 可选 `gain` (默认 0. 5) 设置粗糙度; 曲幅 a `strength` (默认为2.0)取而代之. 不同的碱基可以共享阴影: `perlinFbm` 财务报告和审定财务报表 `simplexFbm` 不要发生冲突.
-   **流动** (单位:千美元)`--kind=curl`: `curlNoise(p, alpha)`,用于粒子的无偏差向量字段;动画 `alpha` 因为旋转运动.

二维和三维`--dim=2|3`),每个函数都有一个超载 `period` 那瓷砖是无缝的,例如. `simplexFbm(p, vec2(4.0), 6)`和SVG的游戏一样 `stitchTiles`,但对于任何噪声:每个八分位数与频率相加相加相加. 周期为正整数;2D simplex想沿y实现一个偶数期,而3D simplex 周期限为289.

## 有符号的相距字段和射线

```sh
jen glsl:raymarch --name=Scene                     # starter: scene(), orbiting camera, soft shadows, AO, fog
jen glsl:raymarch --name=Scene --minimal           # just march, normal and diffuse light
jen glsl:raymarch --name=Scene --materials         # sceneMaterial() also returns a material id per surface
jen glsl:raymarch --name=Scene --lighting=pbr      # lambert (default), blinn, toon or pbr
jen glsl:raymarch --name=Land --scene=terrain --water  # a flyover: noise terrain, water, sky, sun, fog
jen glsl:sdf --dim=3 --shapes=box,torus --ops=smooth-union --into=shaders/scene.frag.glsl
jen glsl:sdf --shapes=star --effects=fill,stroke,glow --into=shaders/logo.frag.glsl
jen glsl:sdf --dim=3 --shapes=all --name=Shapes    # preview: every shape side by side
```

-   **形状** (单位:千美元)`--shapes`,以给出的顺序预览 : 2D `circle`, (中文(简体) ), `box`, (中文(简体) ), `round-box`, (中文(简体) ), `segment`, (中文(简体) ), `polygon`, (中文(简体) ), `star`, (中文(简体) ), `vesica`, (中文(简体) ), `arch` (一指拱; 三维) `sphere`, (中文(简体) ), `box`, (中文(简体) ), `round-box`, (中文(简体) ), `torus`, (中文(简体) ), `capsule`, (中文(简体) ), `cylinder`, (中文(简体) ), `plane`名称 `sdCircle`, (中文(简体) ), `sdBox`2D和3D超载.
-   **运算符** (单位:千美元)`--ops`: `union`, (中文(简体) ), `subtract`, (中文(简体) ), `intersect` 联合国 `smooth-` 变体, `round`, (中文(简体) ), `onion`, (中文(简体) ), `repeat`, (中文(简体) ), `repeat-limited`,以及 `extrude`编号 :`revolve` 将 2D 形状变成 3D 形状.
-   **二维效果** (单位:千美元)`--effects`: 抗异名 `fill` 财务报告和审定财务报表 `stroke`, (中文(简体) ), `glow`减少 `shadow`, (中文(简体) ), `inner-shadow` - 口罩在 \[0, 1\] 从一个距离.
-   **光线助手** (单位:千美元)`glsl:raymarch --into`选择 `--parts`: `raymarch`, (中文(简体) ), `calcNormal`, (中文(简体) ), `softShadow`, (中文(简体) ), `calcAO`, (中文(简体) ), `cameraMatrix`他们叫你 `float scene(vec3 p)`他们将它宣布在前面 这样它就可以在阴凉的地方生活 对于材料,保持该函数返回距离,并在命中点一次查看材料,作为 `--materials` 启动器有 : `vec2 sceneMaterial(vec3 p)` 返回距离和编号, `scene()` 返回其 `.x`。 。 。 .

每份名单还须 `all`。公式遵循伊尼戈·奎莱斯关于 [距离函数](https://iquilezles.org/articles/distfunctions/), (中文(简体) ), [2D 距离函数](https://iquilezles.org/articles/distfunctions2d/), (中文(简体) ), [跨部门射线](https://iquilezles.org/articles/intersectors/), (中文(简体) ), [平滑最小值](https://iquilezles.org/articles/smin/), (中文(简体) ), [SDF 常规](https://iquilezles.org/articles/normalsSDF/) 财务报告和审定财务报表 [软阴影](https://iquilezles.org/articles/rmshadows/)他的片段是麻省理工学院的,Jen把他们的通知放在你的阴影旁边.

## 照明

```sh
jen glsl:lighting --models=pbr --tonemap=aces,srgb --into=shaders/scene.frag.glsl
jen glsl:lighting --models=toon --into=shaders/scene.frag.glsl
```

-   **模型** (单位:千美元)`--models`: `lambert(n, l, albedo)`, (中文(简体) ), `blinnPhong(n, v, l, albedo, shininess, specular)`, (中文(简体) ), `toon(n, v, l, albedo, bands)` 带一束光 `pbr(n, v, l, albedo, metallic, roughness)` - 与GGX,Smith-Schlick和Schlick Fresnel一起烹饪-托伦斯,加 `pbrAmbient()`一个不需要环境图的天空/地面环境光.
-   **环境** (单位:千美元)`--env=sky|equirect|cube`: `envSky`, (中文(简体) ), `envEquirect` (全景显示于 `texture0`)或(或) `envCube` (单位:千美元)`cubemap0`),每个 `(…, dir, roughness)`,以及 `pbrEnv()` 以光辉和光辉的光辉照耀他们; `glsl:raymarch --lighting=pbr --env=…` 写一个开头语.
-   **颜色输出** (单位:千美元)`--tonemap`: `tonemapAces()` (Stephen Hill的ACES 适配), `tonemapReinhard()`,以及 `linearToSrgb()`编号 :`srgbToLinear()` 与精确的 sRGB 曲线.

每个型号都是正常的 `n`,给观众的方向 `v` 和光线 `l`,并返回反射光为强度为1的白色光:由光的颜色和阴影相乘,总和超过光,色调图,编码. `jen glsl:raymarch --name=Scene --lighting=pbr` 显示一个模型在一个完整的场景.

## 过滤器

```sh
jen glsl:filter --name=Retro --kinds=crt,vignette
jen glsl:webgl --name=Retro --inline --shader=retro.frag.glsl --texture=test-pattern
```

-   **类型** (单位:千美元)`--kinds`: `grayscale`, (中文(简体) ), `sepia`, (中文(简体) ), `posterize`, (中文(简体) ), `dither` (拜尔), `vignette`, (中文(简体) ), `grain`, (中文(简体) ), `chromatic`, (中文(简体) ), `pixelate`, (中文(简体) ), `sobel` (篱笆), `blur-box`, (中文(简体) ), `blur-gaussian`, (中文(简体) ), `sharpen`, (中文(简体) ), `kuwahara` (白话)和 `crt` 在蒂莫西·洛特斯的公有领域CRT阴影后.
-   **投入**数字 : `texture0` 打开 `<shader-canvas>` - 图像或视频(都需要网络服务器), `camera`,或 `test-pattern`。 。 。 .
-   **通行证** (单位:千美元)`--post`:过滤整个场景 – 启动器读取 `uPrevious`,以及 `jen glsl:webgl --shader=scene.frag.glsl --post=retro.frag.glsl` 锁住他们.

## Vertex流离失所和矩阵

```sh
jen glsl:displace --kind=noise --name=Blob    # shaders/blob.vert.glsl + blob.frag.glsl
jen glsl:displace --kind=waves --name=Sea     # Gerstner waves with exact normals
jen glsl:matrix --fns=rotate,look-at --into=shaders/mesh.vert.glsl
```

-   **流离失所** (单位:千美元)`glsl:displace`: `displace(position, normal)` 将一个顶点推向正常的 `float displacement(vec3 p)` 并且从两个流离失所的邻居那里重新计算出正常情况,所以照明遵循了新的形状. `--kind=noise` 用3D简单音响驱动它, `--kind=wobble` 有正弦; `--kind=waves` 数额 `gerstnerWave()`s,其正常情况准确.
    
-   **预览** (单位:千美元)`--name`: 使用下列特性和制服的顶点/碎片对: `<shader-canvas>`数字 :
    
    ```html
    <shader-canvas mesh="sphere" detail="96" vert="shaders/blob.vert.glsl" src="shaders/blob.frag.glsl" orbit></shader-canvas>
    ```
    
    对于波浪,使用 `mesh="plane" detail="128"`。 。 。 .
    
-   **矩阵** (单位:千美元)`glsl:matrix`: `rotateX/Y/Z`, (中文(简体) ), `rotateAxis`, (中文(简体) ), `perspective`, (中文(简体) ), `lookAt`, (中文(简体) ), `translate`, (中文(简体) ), `scale` 财务报告和审定财务报表 `transform` (mat3 → mat4),遵循OpenGL常规.
    

## 函数如何进入阴影

GLSL 没有 `#include`,所以功能 船为平坦 `.glsl` 文件在 `glsl/`与 `--into=<shader>` 联合国 `.glsl` 文件,或页面 `glsl:webgl --inline` ),jen会插入你所选择的,加上他们所依赖的,以上a `// jen:functions` 标记行。 如果您的阴影器还没有阴影, 标记会在第一个函数之前添加, 因此插入的函数会出现在您自己调用它们的代码之前( 一个光线提示) `scene()`说吧 后面的运行 加上已经存在。 文件中的任何内容都被跳过,所以运行两次发电机,或者共享一个帮助器的两台发电机,从不重复代码. 无 `--into`,每个函数都作为自己的文件在 `lib/` 将文件移入何处( w)`--dir`用于包含机制的设置(vite-plugin-glsl, glslify, 三.js,.).

插入的代码与其精确的文本相匹配:如果您编辑了被插入的函数并运行一个再次需要它的生成器,则会再次被插入.

该包需要Jen 2或更新; npm警告如果你的Jen年龄较大.

## 档案去的地方

生成器写入当前目录; `--dir=<path>` 写别的地方. `--into` 财务报告和审定财务报表 `--file` 也相对当前目录.

`glsl:webgl` 在当前目录中创建新工程文件夹( n)`--dir` 名称)和 `--shaderDir` 命名其中的阴影子文件夹.

## 许可证

包本身的代码 - 启动器和函数 - 是 [MIT 无归属](https://npmcn.com/package/%40codejen/pack-glsl/LICENSE) (MIT-0):随心所欲,不需要通知. (不是"Unlicense"或"CC0":德国版权法不能将代码放入公有领域,但可以无条件授予所有权利. )

其他作者的功能仅包含在麻省理工学院许可中,这确实需要他们的通知,或者发布到公有领域:当Jen插入这样的功能时,作者的完整通知(或者说不需要的一行)会进入一个 `THIRD_PARTY_NOTICES.md` 在你的阴影上,每个来源一次。 见 [第三次议会 NoTICES.md](https://npmcn.com/package/%40codejen/pack-glsl/THIRD_PARTY_NOTICES.md) 对所有作者和资料来源.

## 许可证

麻省理工学院,Lea Rosema;第三方职能

## 常见问题

### @codejen/pack-glsl 是什么？

gLSL 的 Jen 包: 阴影启动器、 SDF/射线、噪音和照明片段\(麻省理工学院许可,归属\)

### 如何安装 @codejen/pack-glsl？

在项目目录运行 npm install @codejen/pack-glsl，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@codejen/jen（^3\.2\.0 \|\| ^4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @codejen/pack-glsl 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @codejen/pack-glsl 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @codejen/pack-glsl 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @codejen/pack-glsl 可以商用吗？

@codejen/pack-glsl 使用 MIT-0 AND MIT 许可。声明的许可为 MIT-0 AND MIT，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @codejen/pack-glsl 的下载量有多少？

根据 npm 官方下载统计，@codejen/pack-glsl 在 2026/10/10 – 2026/11/08 这 30 天内被下载 1,850 次，日均约 62 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @codejen/pack-glsl 还在维护吗？

最新版本 2\.6\.1 发布于 2026/11/02（8 天前）；至今共发布 15 个版本，其中过去 12 个月发布了 15 个；首次发布于 2026/10/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。