SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场genart-ops

genart-ops

设计与创作

查看项目

更新于 10-13 16:45

技能介绍

用途

Genart-ops 用于创意编程与生成式艺术，提供可落地的实践模式。其核心思路是按固定顺序决策：先选渲染载体，再选内容生成算法，最后在感知均匀色彩空间上色。

主要能力

  1. Three.js 场景：创意/着色器侧的脚手架，包括最小场景 + 相机 + 渲染器（ACES 色调映射、响应式缩放）、2026 版 THREE.Timer 动画循环（切换标签页时自动暂停）、OrbitControls（阻尼需要每帧调用 update()）、三点布光（主光/补光/轮廓光 + 环境光）、通过 EffectComposer 实现泛光（OutputPass 必须放最后，它负责色调映射）、用于 1 万以上粒子/大规模几何体的 InstancedMesh（支持逐实例颜色），以及自定义 ShaderMaterial 模板（uTime/uResolution/uMouse 等 uniform）。

  2. P5.js 草图：模式选择决定一切——全局模式（单草图，出像素最快）、实例模式（单页多草图，模块隔离）、WebGL 模式（3D、灯光、orbitControl）；此外支持通过 createShader 自定义 GLSL、loadPixels/updatePixels 逐像素操作，以及录制/导出——PNG 帧序列、SVG 输出（p5.js-svg），以及用 canvas-sketch 做高分辨率 Canvas2D 与 MP4 流式输出。

  3. SVG 生成：分辨率无关的矢量输出，涵盖编程式构建（createElementNS + XMLSerializer）、完整路径命令参考（M/L/H/V/C/S/Q/T/A/Z，绝对与相对）、生成式图案（通过平滑闭合三次路径生成有机斑点、线条排线）、生成式 SVG 滤镜（feTurbulence / feDisplacementMap / feDiffuseLighting）、SMIL + CSS 动画，以及 SVGO 优化（保留 viewBox，为响应式输出移除尺寸）。

  4. GLSL 着色器：GPU 片段着色器工具箱，包括独立 WebGL 样板代码（全屏四边形）、常用 uniform、哈希/随机函数、value / simplex / Worley 噪声、FBM、域扭曲（单次与双重，Inigo Quilez）、2D 与 3D SDF 图元、布尔/平滑/变换 SDF 操作、完整光线步进模板（法线估计 + 光照），以及余弦调色板颜色混合。其中噪声、FBM、域扭曲等已有对应的 CPU/JS 版本，可先选载体再复用数学。

  5. 程序化生成算法：JavaScript 的 CPU 侧配方，包括 Perlin/simplex 噪声（simplex-noise + alea 种子）、FBM、域扭曲、脊状噪声、流场（含粒子驱动）、Poisson 圆盘采样、L 系统（树 / Koch / Sierpinski / 龙形曲线）、康威生命游戏、通过 d3-delaunay 实现的 Voronoi/Delaunay（含 Lloyd 松弛）、波函数坍缩（简单瓦片）、由噪声倍频生成地形（含生物群系分类），以及无缝环形平铺。

  6. 颜色与调色板：OKLAB/OKLCH 转换（JS 与 GLSL 双版本，是上述一切的感知均匀基础）、余弦调色板（Quilez 预设）、OKLCH 调色板生成器（等色相、邻近色、暖/冷色）、在感知空间进行渐变插值（OKLCH 最短色相路径、多色标）、颜色循环（逐元素相位偏移），以及和谐规则（互补 / 邻近 / 三角 / 分裂互补 / 四角）。

使用方式

先确定渲染载体：2D 草图、快速迭代与教学用 p5.js；3D 场景、相机、光照与后处理用 three.js；逐像素场、全屏着色器、光线步进用原生 GLSL / WebGL 片段；分辨率无关的矢量、绘图仪/打印用 SVG。再生成内容（CPU）：有机纹理、地形、大理石纹用噪声（value/simplex/FBM/域扭曲）；均匀点分布用 Poisson 圆盘；树、分形、自相似曲线用 L 系统；涌现运动/图案用流场 / 元胞自动机；空间划分用 Voronoi / Delaunay（d3-delaunay）；带邻接规则的瓦片世界用波函数坍缩。最后上色：调色板、渐变、和谐色用 OKLAB / OKLCH。顺序为：载体 → 生成器 → 颜色。确定性 = 带种子的 RNG（alea）+ 在场/粒子循环中不使用每帧 Math.random()。

常用库与安装：噪声 simplex-noise（npm install simplex-noise）；种子随机 alea（npm install alea）；Voronoi/Delaunay d3-delaunay（npm install d3-delaunay）；3D 引擎 three（npm install three）；2D 画布 p5（npm install p5）；画布导出 canvas-sketch（npm install canvas-sketch）；视频导出 ccapture.js（npm install ccapture.js）；SVG 优化 svgo（npm install -g svgo）；颜色 culori（npm install culori）；着色器库 LYGIA（#include from lygia.xyz）。

前置参考文档：threejs-scenes.md（搭建创意 three.js 场景时）、p5-sketches.md（p5.js 各模式、自定义着色器、像素操作、录制导出）、svg-generation.md（编程式 SVG、路径命令、生成式图案、滤镜、动画、SVGO）、glsl-shaders.md（GLSL 样板、哈希/噪声、FBM、域扭曲、SDF、光线步进、调色板混合）、procedural-algorithms.md（JS 程序化配方）、color-and-palettes.md（OKLAB/OKLCH 转换、调色板生成、感知渐变、循环、和谐）。

对比速查

噪声算法在维度、特性、成本与用途上的差异：值噪声成本低但有块状网格伪影，适合快速原型；Perlin（梯度）平滑且有方向性，成本中等，适合经典地形与云；Simplex 平滑各向同性，是默认选择，伪影比 Perlin 少；Worley（细胞）呈细胞状有机，成本高，适合石头、水、细胞；FBM 成本为 N × 基础，具有分形细节，适合地形、云、有机形状；脊状 FBM 适合山脊与闪电；域扭曲（2D+，成本为基础 3–9 倍）适合大理石、烟雾、异星地貌。

适用场景与限制

适用于创意编程中的 2D/3D 视觉生成、着色器编写、矢量导出与程序化图案创作。需注意边界：CSS 颜色、无障碍与设计令牌属于 color-ops；应用/游戏规模的 three.js（GLTF 资产管线、AnimationMixer、固定步长游戏循环、物理引擎 rapier/cannon-es、react-three-fiber、大规模实例化与销毁）属于 threejs-ops。本技能不涉及这些内容，只负责 three.js 的创意/着色器侧。官方文本暂未提供。