svefnz
d3471018b4
- index.html: 页面标题、meta 标签、按钮文字/提示、状态栏 - docs.html: 完整文档页面 9 个章节 - js/main.js: 模式名称、分区标题、滑块标签、toast 消息、按钮文字 - js/ui.js: 新种子按钮、随机化提示 - js/modals.js: 导出对话框标题/选项/标签、套装生成器文本 - js/exporter.js: 渲染进度文本、完成/错误 toast 消息 - js/palettes.js: 16 种调色板名称 - README.md: 项目说明全文
185 lines
8.8 KiB
HTML
185 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>文档 - LUMEN 生成式着色器工作室</title>
|
||
<meta name="description" content="LUMEN 使用指南：风格、合成风格、色彩、运动、分享代码、渐变套装及导出 PNG、视频或 GIF。" />
|
||
<link rel="canonical" href="https://lumenshaders.vercel.app/docs.html" />
|
||
<meta property="og:url" content="https://lumenshaders.vercel.app/docs.html" />
|
||
<meta property="og:image" content="https://lumenshaders.vercel.app/assets/og.jpg" />
|
||
<meta property="og:image:type" content="image/jpeg" />
|
||
<meta property="og:image:width" content="1200" />
|
||
<meta property="og:image:height" content="630" />
|
||
<link rel="icon" type="image/png" sizes="64x64" href="assets/favicon.png" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="styles.css" />
|
||
<style>
|
||
body { overflow: auto; }
|
||
.docs-wrap {
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
padding: 48px 24px 110px;
|
||
}
|
||
.docs-hero {
|
||
margin-bottom: 44px;
|
||
}
|
||
.docs-hero h1 {
|
||
font-family: var(--font-display);
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.01em;
|
||
margin-bottom: 10px;
|
||
}
|
||
.docs-hero p { color: var(--text-mid); font-size: 14px; line-height: 1.65; max-width: 56ch; }
|
||
.docs-hero .btn { margin-top: 18px; }
|
||
.docs-section { margin-bottom: 38px; }
|
||
.docs-section h2 {
|
||
font-family: var(--font-display);
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--line-soft);
|
||
}
|
||
.docs-section p, .docs-section li {
|
||
font-size: 13.5px;
|
||
line-height: 1.7;
|
||
color: var(--text-mid);
|
||
}
|
||
.docs-section p + p { margin-top: 8px; }
|
||
.docs-section ul { padding-left: 18px; margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
|
||
.docs-section strong { color: var(--text); font-weight: 600; }
|
||
.docs-section code {
|
||
font-family: var(--font-mono);
|
||
font-size: 11.5px;
|
||
background: var(--bg-raised);
|
||
border: 1px solid var(--line-soft);
|
||
padding: 1.5px 6px;
|
||
border-radius: 6px;
|
||
color: var(--text);
|
||
}
|
||
.kbd {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
|
||
border: 1px solid var(--line);
|
||
box-shadow: inset 0 -1.5px 0 rgba(0,0,0,0.4);
|
||
padding: 2px 7px;
|
||
border-radius: 6px;
|
||
color: var(--text);
|
||
}
|
||
.docs-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
||
.docs-table td {
|
||
padding: 7px 10px;
|
||
border-bottom: 1px solid var(--line-soft);
|
||
font-size: 13px;
|
||
color: var(--text-mid);
|
||
vertical-align: top;
|
||
}
|
||
.docs-table td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; width: 140px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<svg class="brand-mark" viewBox="0 0 20 20" aria-hidden="true">
|
||
<path d="M10 1 L19 10 L10 19 L1 10 Z" fill="none" stroke="currentColor" stroke-width="1.4"/>
|
||
<path d="M10 5.5 L14.5 10 L10 14.5 L5.5 10 Z" fill="currentColor"/>
|
||
</svg>
|
||
<span class="brand-name">LUMEN</span>
|
||
<span class="brand-sub">文档</span>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<a class="btn btn-primary" href="index.html">打开工作室</a>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="docs-wrap">
|
||
<div class="docs-hero">
|
||
<h1>LUMEN 工作原理</h1>
|
||
<p>LUMEN 在你的浏览器中生成循环抽象着色器艺术：液态铬、丝绸、柔和渐变、半调场等。所有内容均通过 WebGL2 实时渲染，每段动画都是完美循环，你的所有创作都可以导出或以代码形式分享。</p>
|
||
</div>
|
||
|
||
<div class="docs-section">
|
||
<h2>风格</h2>
|
||
<p>在<strong>风格</strong>区域选择 9 种基础风格之一：铬、丝绸、绽放、光环、光线、半调、字形、罗纹和马赛克。每种风格都有独立的渲染器和独特的视觉特征。</p>
|
||
<p><strong>生成风格</strong>远超基础集合：<code>新风格</code>运行一个 12 基因风格合成器，涵盖场类型、域几何、色彩映射、着色模型和表面叠加。每组基因都是一个独立风格，不存在于基础九种之中，以其场原型命名：FLUX（通量）、RIDGE（脊线）、WAVE（波）、RING（环）、CELL（细胞）或 FLOW（流）。<strong>随机化</strong>大按钮有时也会发现新风格。</p>
|
||
<p>找到喜欢的了？<code>保存风格</code>将其存储在浏览器中。保存的风格以标签形式显示，一键即可重新加载，且页面刷新后依然保留。</p>
|
||
</div>
|
||
|
||
<div class="docs-section">
|
||
<h2>色彩</h2>
|
||
<ul>
|
||
<li><strong>预设：</strong>16 种为渲染器精心调校的调色板。</li>
|
||
<li><strong>色板 A 至 D：</strong>每种风格绘制所用的四种调色板颜色，加上<strong>背景</strong>色。</li>
|
||
<li><strong>色相偏移、饱和度、曝光：</strong>在不修改调色板的情况下调整最终图像。</li>
|
||
<li>分区标题中的骰子按钮会随机生成一个适合当前风格的和谐调色板。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="docs-section">
|
||
<h2>形态、光照、纹理、运动</h2>
|
||
<table class="docs-table">
|
||
<tr><td>种子</td><td>每个设计都是确定性的。相同种子，相同图像。输入数字或随机生成。</td></tr>
|
||
<tr><td>缩放/细节</td><td>形态大小和噪声八度数。</td></tr>
|
||
<tr><td>扭曲/湍流</td><td>场向自身折叠的程度和运动时的搅动程度。</td></tr>
|
||
<tr><td>拉伸</td><td>各向异性。正值水平拉伸，负值垂直拉伸。</td></tr>
|
||
<tr><td>光照</td><td>强度、光泽紧度、光照角度、虹彩和辉光。</td></tr>
|
||
<tr><td>纹理</td><td>胶片颗粒、半调和字形密度、脊线数量、色差、暗角、柔和度。</td></tr>
|
||
<tr><td>循环长度</td><td>一个无缝循环的持续时间，2 至 12 秒。</td></tr>
|
||
<tr><td>行程</td><td>场在一次循环中移动的距离。</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="docs-section">
|
||
<h2>分享代码</h2>
|
||
<p>每个设计可序列化为以 <code>LMN1.</code> 开头的紧凑代码。它包含风格、全部五种颜色、种子和所有参数。</p>
|
||
<ul>
|
||
<li><strong>复制设计代码</strong>将代码复制到剪贴板。任何人都可以粘贴到分享框中获得完全相同的设计。</li>
|
||
<li><strong>复制链接</strong>创建一个包含代码的 URL。打开链接即可直接加载设计。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="docs-section">
|
||
<h2>渐变套装</h2>
|
||
<p><strong>套装</strong>按钮生成当前设计的 4 至 12 个变体，它们共享风格、调色板和所有设置，但使用不同的种子。它们看起来像一个系列，非常适合网站使用：一个用于主视觉，其他用于卡片或分区背景。</p>
|
||
<p>点击缩略图将该种子应用到编辑器，或一键下载整套 PNG 的 ZIP 文件。</p>
|
||
</div>
|
||
|
||
<div class="docs-section">
|
||
<h2>导出</h2>
|
||
<p>每个导出按钮打开一个带有实时预览和设置的对话框，确认后下载。</p>
|
||
<table class="docs-table">
|
||
<tr><td>PNG</td><td>最高 3840×2160 静态图像，离屏全质量渲染。</td></tr>
|
||
<tr><td>WebM 视频</td><td>使用 WebCodecs 离线编码，VP9 或 VP8，由内置 WebM 封装器封装。24、30 或 60 帧/秒，精确时长以循环数或秒数指定。</td></tr>
|
||
<tr><td>GIF</td><td>帧精确无缝循环，使用无依赖 GIF89a 编码器在页面内编码。可选抖动，永久循环或播放一次。</td></tr>
|
||
</table>
|
||
<p>循环在构造上是无缝的：噪声场沿闭合圆采样，因此最后一帧精确过渡到第一帧。</p>
|
||
</div>
|
||
|
||
<div class="docs-section">
|
||
<h2>快捷键</h2>
|
||
<table class="docs-table">
|
||
<tr><td><span class="kbd">R</span></td><td>随机化全部</td></tr>
|
||
<tr><td><span class="kbd">Space</span></td><td>播放或暂停</td></tr>
|
||
<tr><td><span class="kbd">S</span></td><td>以当前设置保存 PNG</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="docs-section">
|
||
<h2>技术说明</h2>
|
||
<p>LUMEN 是一个零依赖的静态页面：一个 WebGL2 超级着色器、一个手写 GIF 编码器、一个 WebM 封装器和一个仅存储的 ZIP 写入器。源代码在 <a href="https://github.com/Leonxlnx/lumenshaders" style="color: var(--text);">GitHub</a> 上，采用 MIT 许可证。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
|
||
</script>
|
||
<script defer src="/_vercel/insights/script.js"></script>
|
||
</body>
|
||
</html>
|