Tinypoly —— 基于 three.js 的低多边形 3D 编辑器
原文作者：dngadelha
原文链接：https://discourse.threejs.org/t/tinypoly-a-low-poly-3d-editor-built-with-three-js/93521
正文编译
大家好！
我一直在独立开发一个名为 Tinypoly 的项目。它是一个完全基于 three.js 构建的 3D 建模与纹理编辑器，全部在浏览器中运行。想法很简单：打开一个标签页，几分钟内就可以开始建模。
[此处插入原文中的 Tinypoly 界面截图 1]
[截图 2]
[截图 3]
建模
支持几何基元（primitives）、顶点（vertex）、边（edge）和面（face）编辑，以及挤出（extrude）、内插（inset）、环切（loop cut）、切割和补洞。还有一个雕刻模式（sculpt mode），提供七种笔刷：绘制（draw）、抓取（grab）、平滑（smooth）、膨胀（inflate）、压平（flatten）、捏合（pinch）和折痕（crease）。
[截图 4]
[截图 5]
纹理编辑器
工作方式类似图像编辑器：支持图层（layers）、画笔（brush）、橡皮擦（eraser）、填充（fill）、滤镜（filters）和特效（effects），还有文字层、形状层和矢量（SVG）图层，并且可以生成噪点（noise）和环境光遮蔽（ambient occlusion）。任何绘制内容都会立刻显示在模型上。
[截图 6]
UV 与材质
支持自动展开（automatic unwrap）或智能投影（smart projection），提供手动 UV 编辑和 UV 贴图导出。PBR 材质（基于物理的渲染材质）可以调整贴图（map）和各项属性，当你需要更多控制时也可以使用自定义着色器（custom shaders）。
[截图 7]
[截图 8]
渲染模式
最终图像使用 GPU 路径追踪（GPU path tracing）渲染：支持 HDRI 环境、景深（depth of field）、曝光（exposure）、色调映射（tone mapping）和 PNG 导出。
[截图 9]
模块
除了常规建模，编辑器还附带一些自动生成几何体的模块：
- 建筑（Building）：带墙、地板、门、窗、楼梯和屋顶的平面图
- 环境（Environment）：低多边形树木、常春藤、天空和水体，水体波浪会对漂浮物做出反应
- 体素（Voxel）：体素模型和体素地形，支持直接编辑
导入与导出
模型支持 OBJ、GLTF、GLB 和 STL 格式；纹理支持 PSD、DDS 和 TGA 格式。可以整体导出，也可以每个对象单独导出。
免费账户（可选）
无需账户即可使用全部编辑器功能。注册账户后，项目会保存到云端，你可以邀请他人协作编辑、生成公开查看链接，并将作品发布到社区。
[截图 10]
这是一个独立的免费项目，非常欢迎任何反馈或批评。
核心优化要点提炼
由于原帖没有给出具体代码，以下 3 个核心优化要点是基于 Tinypoly 的功能描述以及 three.js/WebGL 编辑器开发经验所推断的关键技术策略：
1. 几何数据管理：减少 BufferGeometry 重建频率
在顶点 / 边 / 面编辑和雕刻模式下，频繁修改几何体是性能瓶颈。优化做法是：维护自定义的半边结构或邻接关系，仅在必要时重建 BufferGeometry；使用 BufferAttribute 的 updateRanges 和 needsUpdate 来局部更新 GPU 缓冲区，避免整份几何体重新上传。
2. 实时视口与最终渲染分离渲染管线
Tinypoly 提到“渲染模式”采用 GPU 路径追踪，而编辑视口显然是光栅化渲染。合理的架构是：交互编辑时使用常规的 PBR 光栅化管线（如 MeshStandardMaterial），保证高帧率；需要最终图像时切换到路径追踪着色器。两者共享同一几何体和材质描述，但渲染目标不同。
3. 纹理绘制与模型实时同步的纹理更新策略
纹理编辑器要求任何绘制立即反映在模型上。通常实现是：将 Canvas 2D 或离屏渲染结果作为 CanvasTexture，在绘制事件中标记 texture.needsUpdate = true；对于复杂的多层绘制（图层、混合模式），可先在离屏帧缓冲（WebGLRenderTarget）中合成，再将最终结果直接绑定到 PBR 材质需要的贴图（如 map、roughnessMap 等），避免每一笔都上传整张大型纹理。
GLSL / WebGL 专业术语检查
下表列出原文出现的关键专业术语及其规范中文翻译，并对易混淆点做简要说明：
| 英文术语 | 规范中文翻译 | 备注 |
|---|---|---|
| low-poly | 低多边形 | 指风格化艺术或模型面数较低 |
| three.js | three.js（保留英文） | WebGL 库名称 |
| primitives | 几何基元 / 基本体 | 如立方体、球体等 |
| vertex (vertices) | 顶点 | 几何体最小单元之一 |
| edge | 边 | 连接两个顶点的线段 |
| face | 面 | 封闭的多边形面 |
| extrude | 挤出 | 将一个面沿法线方向拉伸 |
| inset | 内插面 | 在面内部生成缩小的面 |
| loop cut | 环切 | 沿多边形环插入一圈边 |
| sculpt mode | 雕刻模式 | 类似 ZBrush 的形变编辑 |
| brushes | 笔刷 | 雕刻时使用的工具 |
| draw / grab / smooth / inflate / flatten / pinch / crease | 绘制 / 抓取 / 平滑 / 膨胀 / 压平 / 捏合 / 折痕 | 雕刻笔刷类型 |
| texture editor | 纹理编辑器 | 2D 图像编辑用于 3D 模型贴图 |
| layers | 图层 | 纹理合成的基本单位 |
| ambient occlusion | 环境光遮蔽 | 模拟角落暗部 |
| UV | UV（不翻译） | 纹理坐标系统 |
| automatic unwrap | 自动展开 | 自动生成 UV 布局 |
| smart projection | 智能投影 | 常用的自动 UV 投影算法 |
| PBR materials | PBR 材质 | 基于物理的渲染材质 |
| custom shaders | 自定义着色器 | 用户编写的 GLSL 程序 |
| GPU path tracing | GPU 路径追踪 | 渐进式全局光照算法 |
| HDRI environments | HDRI 环境 | 高动态范围图像环境贴图 |
| depth of field | 景深 | 模拟镜头模糊效果 |
| exposure | 曝光 | 控制图像亮度 |
| tone mapping | 色调映射 | 将 HDR 值映射到显示范围 |
| PNG export | PNG 导出 | 无损图像格式导出 |
| voxel | 体素 | 体积像素，用于块状模型 |
| OBJ, GLTF, GLB, STL | 保留英文 | 3D 模型文件格式 |
| PSD, DDS, TGA | 保留英文 | 纹理/图像文件格式 |
术语检查结论：原文中的术语在编译时均保持了业界通用翻译或按惯例保留英文。需要特别注意的是：
- “GLSL” 虽然在原文中未直接出现，但 “custom shaders” 实质上指的就是用 GLSL 编写的着色器，编译时保留“着色器”并注明 GLSL。
- “WebGL” 是 three.js 的底层 API，原帖未直接提及，但所有渲染均基于 WebGL（或 WebGPU），在解读中应适当说明。
- “PBR” 在中文社区常直接使用，亦可用“基于物理的渲染”解释，两者均可接受。
