完整汉化：将所有用户可见文本翻译为简体中文
- 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: 项目说明全文
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Docs, LUMEN generative shader studio</title>
|
||||
<meta name="description" content="How to use LUMEN: styles, synth styles, color, motion, share codes, gradient sets and exporting PNG, video or GIF." />
|
||||
<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" />
|
||||
@@ -91,88 +91,88 @@
|
||||
<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">documentation</span>
|
||||
<span class="brand-sub">文档</span>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<a class="btn btn-primary" href="index.html">Open the studio</a>
|
||||
<a class="btn btn-primary" href="index.html">打开工作室</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="docs-wrap">
|
||||
<div class="docs-hero">
|
||||
<h1>How LUMEN works</h1>
|
||||
<p>LUMEN generates looping abstract shader art in your browser: liquid chrome, silk, soft gradients, halftone fields and more. Everything renders in real time with WebGL2, every animation is a perfect loop, and everything you make can be exported or shared as a code.</p>
|
||||
<h1>LUMEN 工作原理</h1>
|
||||
<p>LUMEN 在你的浏览器中生成循环抽象着色器艺术：液态铬、丝绸、柔和渐变、半调场等。所有内容均通过 WebGL2 实时渲染，每段动画都是完美循环，你的所有创作都可以导出或以代码形式分享。</p>
|
||||
</div>
|
||||
|
||||
<div class="docs-section">
|
||||
<h2>Styles</h2>
|
||||
<p>Pick one of the 9 base styles in the <strong>Style</strong> section: Chrome, Silk, Bloom, Aura, Rays, Halftone, Glyphs, Reeded and Mosaic. Each one is its own renderer with its own character.</p>
|
||||
<p><strong>Generated styles</strong> go far beyond the base set: <code>New style</code> runs a style synthesizer with 12 genes covering field type, domain geometry, color mapping, shading model and surface overlay. Every gene set is a standalone style that does not exist in the base nine, named by its field archetype: FLUX, RIDGE, WAVE, RING, CELL or FLOW. The big <strong>Randomize</strong> button also discovers new styles some of the time.</p>
|
||||
<p>Found something you love? <code>Save style</code> stores it in your browser. Saved styles appear as chips you can reload with one click, and they survive page reloads.</p>
|
||||
<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>Color</h2>
|
||||
<h2>色彩</h2>
|
||||
<ul>
|
||||
<li><strong>Presets:</strong> 16 curated palettes tuned for the renderers.</li>
|
||||
<li><strong>Swatches A to D:</strong> the four palette colors every style draws from, plus <strong>BG</strong> for the background.</li>
|
||||
<li><strong>Hue shift, saturation, exposure:</strong> grade the final image without touching the palette.</li>
|
||||
<li>The dice in the section header rolls a new harmonised palette that fits the current style.</li>
|
||||
<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>Form, lighting, texture, motion</h2>
|
||||
<h2>形态、光照、纹理、运动</h2>
|
||||
<table class="docs-table">
|
||||
<tr><td>Seed</td><td>Every design is deterministic. Same seed, same image. Type a number or roll a new one.</td></tr>
|
||||
<tr><td>Zoom / Detail</td><td>Size of the forms and the number of noise octaves.</td></tr>
|
||||
<tr><td>Warp / Turbulence</td><td>How much the field folds into itself and how much it churns while moving.</td></tr>
|
||||
<tr><td>Stretch</td><td>Anisotropy. Positive stretches horizontally, negative vertically.</td></tr>
|
||||
<tr><td>Lighting</td><td>Intensity, gloss tightness, light angle, iridescence and bloom glow.</td></tr>
|
||||
<tr><td>Texture</td><td>Film grain, halftone and glyph density, ridge count, chromatic aberration, vignette, softness.</td></tr>
|
||||
<tr><td>Loop length</td><td>Duration of one seamless cycle, 2 to 12 seconds.</td></tr>
|
||||
<tr><td>Travel</td><td>How far the field moves during one loop.</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>胶片颗粒、半调和字形密度、脊线数量、色差、暗角、柔和度。</td></tr>
|
||||
<tr><td>循环长度</td><td>一个无缝循环的持续时间，2 至 12 秒。</td></tr>
|
||||
<tr><td>行程</td><td>场在一次循环中移动的距离。</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="docs-section">
|
||||
<h2>Share codes</h2>
|
||||
<p>Every design serializes to a compact code starting with <code>LMN1.</code> It contains the style, all five colors, the seed and every parameter.</p>
|
||||
<h2>分享代码</h2>
|
||||
<p>每个设计可序列化为以 <code>LMN1.</code> 开头的紧凑代码。它包含风格、全部五种颜色、种子和所有参数。</p>
|
||||
<ul>
|
||||
<li><strong>Copy design code</strong> puts the code on your clipboard. Anyone can paste it into the Share box to get the exact same design.</li>
|
||||
<li><strong>Copy link</strong> creates a URL with the code in the hash. Opening it loads the design directly.</li>
|
||||
<li><strong>复制设计代码</strong>将代码复制到剪贴板。任何人都可以粘贴到分享框中获得完全相同的设计。</li>
|
||||
<li><strong>复制链接</strong>创建一个包含代码的 URL。打开链接即可直接加载设计。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="docs-section">
|
||||
<h2>Gradient sets</h2>
|
||||
<p>The <strong>Set</strong> button generates 4 to 12 variations of your current design that share the style, palette and all settings but use different seeds. They look like one family, which makes them perfect for a website: one for the hero, others for cards or section backgrounds.</p>
|
||||
<p>Click a tile to apply that seed to the editor, or download the whole set as a ZIP of PNGs in one click.</p>
|
||||
<h2>渐变套装</h2>
|
||||
<p><strong>套装</strong>按钮生成当前设计的 4 至 12 个变体，它们共享风格、调色板和所有设置，但使用不同的种子。它们看起来像一个系列，非常适合网站使用：一个用于主视觉，其他用于卡片或分区背景。</p>
|
||||
<p>点击缩略图将该种子应用到编辑器，或一键下载整套 PNG 的 ZIP 文件。</p>
|
||||
</div>
|
||||
|
||||
<div class="docs-section">
|
||||
<h2>Export</h2>
|
||||
<p>Each export button opens a dialog with a live preview and its settings, then downloads on confirm.</p>
|
||||
<h2>导出</h2>
|
||||
<p>每个导出按钮打开一个带有实时预览和设置的对话框，确认后下载。</p>
|
||||
<table class="docs-table">
|
||||
<tr><td>PNG</td><td>Stills up to 3840 x 2160, rendered offscreen at full quality.</td></tr>
|
||||
<tr><td>WebM video</td><td>Encoded offline with WebCodecs, VP9 or VP8, muxed by a built-in WebM writer. 24, 30 or 60 fps, exact length in loops or seconds.</td></tr>
|
||||
<tr><td>GIF</td><td>Frame-exact seamless loop, encoded in-page with a dependency-free GIF89a encoder. Optional dithering, loop forever or play once.</td></tr>
|
||||
<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>Loops are seamless by construction: the noise field is sampled along a closed circle, so the last frame flows exactly into the first.</p>
|
||||
<p>循环在构造上是无缝的：噪声场沿闭合圆采样，因此最后一帧精确过渡到第一帧。</p>
|
||||
</div>
|
||||
|
||||
<div class="docs-section">
|
||||
<h2>Shortcuts</h2>
|
||||
<h2>快捷键</h2>
|
||||
<table class="docs-table">
|
||||
<tr><td><span class="kbd">R</span></td><td>Randomize everything</td></tr>
|
||||
<tr><td><span class="kbd">Space</span></td><td>Play or pause</td></tr>
|
||||
<tr><td><span class="kbd">S</span></td><td>Save a PNG with current settings</td></tr>
|
||||
<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>Tech notes</h2>
|
||||
<p>LUMEN is a static page with zero dependencies: one WebGL2 uber-shader, a hand-written GIF encoder, a WebM muxer and a store-only ZIP writer. The source is on <a href="https://github.com/Leonxlnx/lumenshaders" style="color: var(--text);">GitHub</a> under the MIT license.</p>
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user