87 lines
4.3 KiB
Markdown
87 lines
4.3 KiB
Markdown
# LUMEN 生成式着色器工作室
|
||
|
||
**[在线体验 →](https://lumenshaders.vercel.app/)**
|
||
|
||
一个自包含的 Web 工具，用于生成循环抽象着色器艺术：液态铬、丝带、柔和渐变绽放、光环、光线、半调场、数据字形、罗纹玻璃和像素马赛克。所有内容均通过 WebGL2 实时渲染，每段动画都是数学上的完美循环。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
## 运行
|
||
|
||
无构建步骤，零依赖。
|
||
|
||
- **在线演示：** [lumenshaders.vercel.app](https://lumenshaders.vercel.app/)
|
||
- **本地：** 双击 `index.html`，或运行 `npx http-server . -p 8080`
|
||
|
||
需要支持 WebGL2 的浏览器（Chrome、Edge、Firefox）。
|
||
|
||
## 部署（Caddy）
|
||
|
||
```bash
|
||
mkdir -p /var/www/lumenshaders
|
||
cp -r /root/lumenshaders/* /var/www/lumenshaders/
|
||
sudo chown -R caddy:caddy /var/www/lumenshaders/
|
||
sudo find /var/www/lumenshaders/ -type d -exec chmod 755 {} \;
|
||
sudo find /var/www/lumenshaders/ -type f -exec chmod 644 {} \;
|
||
```
|
||
|
||
```Caddyfile
|
||
yourdomain.com {
|
||
root * /var/www/lumenshaders
|
||
file_server
|
||
encode {
|
||
zstd
|
||
gzip
|
||
minimum_length 512
|
||
}
|
||
header {
|
||
X-Content-Type-Options "nosniff"
|
||
X-Frame-Options "DENY"
|
||
Referrer-Policy "strict-origin-when-cross-origin"
|
||
}
|
||
@static {
|
||
file
|
||
path *.ico *.css *.js *.gif *.jpg *.jpeg *.png *.svg *.woff *.woff2
|
||
}
|
||
header @static Cache-Control "public, max-age=31536000, must-revalidate"
|
||
}
|
||
```
|
||
|
||
## 控制
|
||
|
||
- **随机化**（或按 `R`）：新风格、调色板、形态、光照和种子，按艺术风格调校，确保结果始终出色。有时会发明全新的合成风格。
|
||
- **风格**：9 种艺术模式，每种都有独立的渲染器。"随机化时保持风格"在随机化时锁定模式。
|
||
- **生成风格**："新风格"运行 12 基因风格合成器（6 种场类型 × 5 种域几何 × 4 种色彩映射 × 4 种着色模型 × 4 种表面叠加），产生基础集合中不存在的独立风格，如 FLUX（通量）、RIDGE（脊线）、WAVE（波）、RING（环）、CELL（细胞）和 FLOW（流）原型。"保存风格"将收藏保存在浏览器中，以一键标签形式显示。
|
||
- **渐变套装**：套装按钮渲染当前设计的 4 至 12 个变体（相同风格和调色板，不同种子），并下载为 PNG 的 ZIP 文件，非常适合在网站上使用一致的视觉艺术。
|
||
- **色彩**：16 种精选调色板加和谐调色板生成器，4 个可编辑颜色 + 背景，色相/饱和度/曝光。
|
||
- **形态**：种子、缩放、fbm 细节、域扭曲、湍流、各向异性拉伸。
|
||
- **光照**：强度、光泽、光照角度、虹彩、辉光、对比度。
|
||
- **纹理**：胶片颗粒、半调/字形密度、脊线数量、色差、暗角、柔和度。
|
||
- **运动**：循环长度和行程距离。循环在构造上是无缝的（噪声场沿闭合圆采样）。
|
||
- **分享**：每个设计可序列化为紧凑代码（`LMN1.…`）。复制它，发送给任何人，粘贴到分享框即可重建完全相同的设计：风格、颜色、种子、所有参数。"复制链接"生成直接加载设计的 URL。
|
||
- `空格`暂停，`S` 保存 PNG。
|
||
|
||
完整指南：[文档页面](https://lumenshaders.vercel.app/docs.html)。
|
||
|
||
## 导出
|
||
|
||
每个导出按钮打开一个带有实时预览和设置的对话框，确认后下载。
|
||
|
||
- **PNG** 最高 3840×2160，离屏全质量渲染。
|
||
- **视频**（WebM VP9/VP8）使用 **WebCodecs**（`VideoEncoder`）离线编码，由内置无依赖 WebM 封装器封装：无 `MediaRecorder`，无实时捕获，无标签页崩溃。可配置帧率（24/30/60 帧/秒）、分辨率（720p–1440p）和精确时长（1–8 个循环或 5–60 秒）。
|
||
- **GIF** 逐帧确定性渲染，使用无依赖 GIF89a 编码器（中值切割调色板 + 有序抖动）在页面内编码。永久循环或播放一次。
|
||
|
||
## 文件
|
||
|
||
- `index.html` / `styles.css`：应用外壳和设计系统
|
||
- `js/shaders.js`：包含全部 9 种模式的超级片段着色器
|
||
- `js/engine.js`：WebGL2 引擎和渲染循环
|
||
- `js/gifenc.js`：GIF 编码器（量化器 + LZW）
|
||
- `js/webmmux.js`：WebCodecs 输出的 WebM/Matroska 封装器
|
||
- `js/exporter.js`：PNG / 视频 / GIF 管线
|
||
- `js/palettes.js`、`js/ui.js`、`js/main.js`：调色板、控件构建器、状态和随机化器
|