★ FEATURED ARTICLE 【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载导读本文完整解析 Skills 仓库中 3d-wood-lighting-scorecard 技能的实现与用法。它解决一个具体问题——油光木作场景常常读起来像塑料或一张贴图根源不是模型而是灯光与色调映射木纹只有在暗室里被一束掠射主光斜扫时才会显现纹理、阴影接缝与光束。因此本项目用 Three.js r169 WebGL2 GLSL 构建一扇窗 程序化木纹 体积光束 灰尘的单光源暗室管线并由一个可无头运行、带锚点评分的 scorecard 对最终画面逐项打分满分 10目标 8再以消融ablation驱动迭代。读完你既能复刻这套渲染实现也能把评分-消融-迭代的量化调光方法用到自己的 3D 场景中。一、技能定位与适用边界3d-wood-lighting-scorecard是灯光与材质层的技能适用于有明确方向性主光的室内木作场景油光木材oiled timber、组子细工kumiko、榫卯与工坊场景以及这木头看起来发平、发塑、发灰体积光把黑色抬灰了把灯光打到 8 分这类需求。其核心论点在 SKILL.md 开篇即点明Wood only looks like wood under one directional key raking across a dark room——木纹、阴影接缝与光束由同一扇窗照亮最后只做一次色调映射且每项指标都在成品画面上测量而不是靠观感判断。该技能从 Kibori木彫滚动式 WebGL 木工页面抽取移植而来woodMat、buildEnvironment、主光 rig、光束平面、灰尘与最终 pass并把环境光窗位移到真实窗户所在处。与其相邻的仓库技能有清晰分工太阳光柱需要被真实树冠/屋脊切割的场景用 3d-sky-rays 的同名技能屏幕空间遮挡这里的光柱是作者绘制的平面扫描/绘制的 PBR 贴图与 texel 预算用 3d-high-resolution-textures 体系这里的木纹是从单一 1024 噪声场程序化生成。如果只想要评分习惯本身可参考 workflow-score-to-target而本技能额外提供木纹 rubric 与测量它的机器。二、构建顺序从渲染器到最后的评分循环SKILL.md 给出的构建顺序是理解整条管线的最佳索引共 6 步渲染器NoToneMappingLinearSRGBColorSpace渲染目标是HalfFloatType且samples: 4半浮点 MSAA-4autoClear false。把场景、加性光束平面和灰尘全部画进该目标在最后一个全屏 pass 里只做一次色调映射。一扇窗让发光窗纸、主光方向、光束平面、PMREM 环境中的窗卡window card保持在同一条直线上其余什么都不放。主光DirectionalLight0xfff2df、强度 2.0、4096 阴影贴图820 px 以下用 2048、normalBias0.00452048 时为 0.0085、bias-0.00025、shadowMap.autoUpdate false静态房间。让真实墙体与真实窗洞参与投影工作台上的光池自然就是窗洞的形状。补光填充光 0xaec7df、0.60-0.76 从相机一侧打轮廓光 0xffdeb4、0.72 从背后打半球光 0xb5c5d7 / 0x35281c、0.19。这些只负责让背光一侧不死黑不是画面的主角。木纹MeshPhysicalMaterialior 1.43、specularIntensity 0.72、roughness clamp(base * W.rough, 0.35, 1)albedo/roughness/bump 都来自一个周期噪声场烘烤一次1024x1024 RGBA8、64 个周期单元、三层 octave、mipmap、可重复。光束 → 灰尘 → 末 pass → 运行references/scorecard.mjs。三、木纹单张噪声场驱动的程序化纹理3.1 一个噪声场多种特征PROMPT.md 的 Implementation contract 中说明木纹用MeshPhysicalMaterial补丁onBeforeCompile改写的 chunk 包括map_fragment、roughnessmap_fragment、normal_fragment_maps以及 clearcoat roughness。一张1024x1024 周期噪声场一次性烘进一张 mipmap 渲染目标驱动年轮漂移ring drift与髓心游走pith wander、节疤knots、管孔pores、纤维fibres、髓射线rays、开裂checks与凹凸bump。纹理使用物体空间坐标每个材质有独立的 seed。16 px 的场就是low开关即纹理场 1024 vs 16 分层。从 demo 的字段常量demo.html可见分层开关由applyState()中的uFlat、uWoodField切换const S {grain:true, field:true, env:true, key:true, fill:true, shadow:true, shafts:true, back:true, dust:true, grade:true};其中field层在 1024 场与 16 px 场之间切换grain层则通过uFlat把程序化木纹关成纯色uFlat S.grain ? 0 : 1。3.2 频带与防闪烁SKILL.md 记录了三条直接决定画面成败的木纹规则细频带必须在掠射角下防闪烁管孔96/88 周/米、纤维230 周/米、髓射线13/115 周/米必须用它们自己坐标的fwidth做衰减且 bump 要先于颜色退场1 - smoothstep(0.05, 0.18, vesselPx)否则dFdx(h)会打成摩尔纹。scorecard 的shimmer指标就是半像素视差测试demo 中为 1.13 即为走样。浮雕纹要按像素预算设计小于 12 px/周期的沟槽会在 bump 中走样、在亮环境下闪光。demo 的青海波seigaiha雕花用 0.15 m 单元、每圆两环1440 宽下约 16 px曾经尝试 0.062 m1x 下全是噪点。髓射线要分切面平切flat-sawn顶面上的髓射线斑点会读成瓷砖网格。Kibori 的 0.8 默认值是为径切quartersawn面准备的demo 的匾额上为 0其它物体上为 0.15。3.3envMapIntensity的坑SKILL 特别警告Three.js r163 下材质值只在material.envMap被显式设置时才生效仅设置scene.environment会被忽略。因此 demo 在最后一行显式执行for(const m of woodMats) m.envMap ENV;demo.html层的开关通过改 intensity而非置空贴图实现置空会触发重编译。每材质envMapIntensity工作台 0.25、雕花匾 0.45、默认 0.40。四、灯光一扇窗、一个主光、真实投影4.1 环境与窗PMREMGenerator.fromScene生成一个暗盒内含12 格窗窗格 1.24x1.38辐射率 3.8/3.55/3.05与四张暗卡窗位与真实窗户重合此处(-2.3, 4.3, -3.2)缩放 0.5。关键规则环境窗格必须放在真实窗户所在处否则面板上的高光会反射一扇不存在的窗——Kibori 原版把环境窗挂在左前而本场景窗户在后左照抄会让画面呈现不存在的灯光。同时要倾斜板材让镜面反射方向略微偏离窗户此处 0.27 rad恰好落在镜面角上整块板会发奶。4.2 主光参数与光池主光DirectionalLight0xfff2df、2.0、4096 阴影贴图、静态autoUpdatefalse、bias -0.00025、normalBias 0.0045。墙体由窗洞四周四块 box 组成并参与投影光池的形状就是窗洞的形状——这正是一扇窗原则的落点窗纸toneMapped:false线性 1.15/0.86/0.52、主光方向、光束平面、PMREM 环境窗卡全部对齐。4.3 常量表SKILL.md 的 Constants 一节给出可直接复制的完整参数表项值相机34 度垂直 FOV(0.60, 1.25, 2.55) 看向 (0.05, 0.50, -0.30)宽高比 1 时加宽 FOV光方向(0.40, -0.75, 0.45) 归一化窗心 (-0.60, 1.40, -1.0)窗洞 1.5 x 1.5目标HalfFloat、MSAA 4、DPR 上限 2主/填/轮廓/半球2.0 / 0.60 / 0.72 / 0.19Kibori 填充为 0.76光束5 平面 0.44-0.52 宽、长 2.75、增益 0.13、脚部淡出 0.22Kibori 0.30、fbm 3 层 octave墙面光线10 平面 0.20-0.90 宽、长 2.2、增益 0.08灰尘1900 点大小17 / depthpx 截断到 3.4-461 - smoothstep焦外门限在光束轴 ~0.33 m 内纹理场1024² RGBA8、64 周期单元n、f、第二个n、mipmap16 px 为low开关末 pass锐化 0.10、暗角0.42 0.58 v、ACES、sRGB、抖动 0.0034.4 体积光束的四个失败预防规则体积光冲淡黑色与木纹加性平面会给它穿过的一切包括木料顶部加光。每个光束按世界高度淡出smoothstep(0.02, 0.34, y)增益保持 0.13参考带上方亮度 35 级且必须读黑点p1必须低于 7。实测增益 0.14 就会在匾上铺一层奶白雾。光束平面切开实体时出现硬楔pow(1.0 - across, 2.2)在坐标略微为负时是 NaNNaN 经过加性混合会变成黑楔——先 clamp 再 pow。神光裁切如果渲染器先做了色调映射、或光束 pass 加在 ACES 之后光束要么双重映射、要么撞到 1.0 变平。必须在线性 HDR 里求和最后跑一次 ACESa2.51 b0.03 c2.43 d0.59 e0.14。窗纸亮度取 (3.9, 3.35, 2.55) 时会裁成白纸故用 (1.15, 0.86, 0.52)。加性 AlphaAdditiveBlending连 alpha 一起加。不透明画布上看不见若场景将来要画进带 alpha 合成的图层改用CustomBlendingblendSrc One, blendDst One, blendSrcAlpha Zero, blendDstAlpha One。4.5 阴影与接触阴影痤疮acne来自过小的负bias需配合按贴图缩放的normalBias4096 时 0.00452048 时 0.0085normalBias过高则出现彼得潘式浮空物体与阴影之间亮缝scorecard 用contactGap读它。每个物体脚下烘一层接触池contact pool径向 alpha 0.78、半径r 0.30..1.0smoothstep、y 0.0012否则阴影贴图单独留不住接缝处的暗线。PROMPT 中列出四处接触池匾、楔块、立柱与木槌。五、评分系统rubric、metrics 与 headless scorecard这是本技能区别于凭感觉调参的核心机制由三件套组成全部位于 references 目录rubric.md8 项指标的文字基准9 分一眼分不出照片与每项 2-4 个子指标的锚点值metrics.js双端通用页面内window.KiboriMetrics/ Noderequire的测量实现输入单帧 RGBA 区域输出锚点映射后的 0-10 分scorecard.mjsPlaywright headless 抓帧、冻结时间、评分、逐层消融、写 JSON 的驱动器退出码 1 表示某项未达标。5.1 打分模型锚点线性映射metrics.js 的核心是anchor(v, a, cap)let s (v - a3) / (a6 - a3) 1 ? 3 3 * (v - a3) / (a6 - a3) : 6 3 * (v - a6) / (a9 - a6); s clamp(s, 0, 10); if (cap v cap[0]) s Math.min(s, clamp(9 - 6 * (v - cap[0]) / (cap[1] - cap[0]), 0, 9));每个子指标给出三个锚点[v3, v6, v9]锚点之间线性插值、两端截断到 0-10锚点可高→低排列表示越低越好cap处理过头也错的指标如光束太亮、墙面光线刺眼。子指标得分均值即该项得分。锚点的权威数值写在 rubric.md改一处必须两处同步否则分数失去意义。--sync参数就是把metrics.js原样内联回demo.html的标记区间保证页面内与 Node 端测量完全一致。5.2 八项指标与锚点rubric 的 8 项及关键锚点完整表格见 rubric.md指标核心测量锚点 [v3, v6, v9]1 材质与木纹grainContrast1-8 px 带通 std/mean[0.006, 0.022, 0.05]grainAniso横顺纹梯度能量比[1.1, 1.9, 3.2]toneVar29 px 模糊 std/mean[0.008, 0.035, 0.08]2 主光/填充对比keyFillStopslog2(亮面/暗面)[0.7, 1.7, 2.8]rangeStops全帧 p99/p1[3, 5, 7]shadeAlive暗面线性 x1000[1.5, 4, 10]3 阴影与接触shadowRatio[1.6, 3.5, 7]contactDark越低越好[0.75, 0.42, 0.18]penumbraMono[0.6, 0.8, 0.95]contactGap越低越好[0.30, 0.10, 0.02]4 光束与灰尘shaftDelta[1.2, 4, 9]、cap [35, 70]35 即洗黑shaftRough越低越好[0.5, 0.22, 0.08]dustFrac[0.0002, 0.001, 0.003]5 背景光线rayContrast[1, 3, 6.5]、cap [45, 90]rayPeaks独立光带数[1, 2, 4]6 色彩与色调映射clipPct越低越好[4, 1.2, 0.25]p1黑点[34, 18, 7]crushPct越低越好[45, 22, 8]warmCool[1, 8, 18]flatRun越低越好[0.5, 0.2, 0.04]7 纹理分辨率/texel 密度fineStd1 px Laplacian[0.5, 1.4, 3.2]texelPerPx[0.45, 0.9, 1.6]shimmer越低越好[3.2, 1.9, 1.15]8 高光与粗糙度sheenSpread[1.06, 1.3, 1.9]paintClip越低越好[0.05, 0.01, 0.0005]hlBreakup[0.004, 0.018, 0.045]这些子指标在metrics.js的measure()中逐一实现全帧直方图p1/p50/p99、rangeStops、箱型滤波器boxAt积分图、线剖面lineProfile双线性采样 垂向平均、smooth平滑、rect区域截取等全部是纯数组运算不依赖浏览器 API所以同一份代码既能跑在页面也能跑在 Node。5.3 区域regions测量坐标如何跟着相机走rubric 规定每个区域都用画面分数坐标frame fractions表示并由世界点经当前相机投影得到KiboriScore.regions()因此测量区域天然跟随相机任何视口下都有效。demo 的实现demo.html提供P()世界点→屏幕分数、R()世界矩形→分数矩形、PL()/RL()物体局部坐标→屏幕三组工具然后从世界锚点构建grain/spec/lit匾的雕花顶面与光滑面shade立柱朝向相机一侧的暗面shadow/litRef柱影带与其亮邻contact匾前缘的接触线用于测 peter-panningshaft/ref窗台角落向下的光束带与光束外暗墙参考带dust及其ref光束内粉尘区与窗外暗墙区bgRays窗台右侧墙面光带wall暗墙条带测 8-bit 条带。换场景如 Remix 场景意味着重写regions()而不是改指标——这正是 rubric 反复强调的设计。此外texelPerPx()用世界 0.1 m 采样换算屏幕像素密度再除以最细纤维带的周波数230 周/米 x 1024/64 texel/周得到每个设备像素对应多少源 texel。5.4 headless scorecard抓帧、冻结、消融、成本scorecard.mjs 的用法npm i playwright-core node references/scorecard.mjs # 默认抓 http://localhost:8099/skills/3d-wood-lighting-scorecard/demo.html node references/scorecard.mjs --url URL --target 8 --size 1440x900 --dpr 1 --out scorecard.json node references/scorecard.mjs --sync # 把 references/metrics.js 同步回 demo.html 标记区间 node references/scorecard.mjs --url URL --generic --selector canvas --regions regions.json # 任意页面你自供区域关键工程细节依赖 Playwrightnpm i playwright-core Chromiumheadless: true始终开启——页面内的评分面板与渲染共用 GPU所以它是给人看的不是用来测量的抓帧约束先KiboriScore.freeze(true)冻结时间与晃动然后在同一任务里渲染并读取画布grab()在page.evaluate里完成render()drawImagegetImageData因此无需preserveDrawingBuffer帧与读数一一对应固定尺寸与 DPRshimmer指标靠render(0.5, 0)的半像素视差抓第二帧做差分消融ablation对layers()暴露的每个层执行setAll(true)后单层关闭再评分记录总分 drop 与被伤害的项——一层被移除反而抬高总分 该层没在挣钱或指标测错了成本测量60 帧循环内render() 1 pxreadPixels强制等待 GPU 完成计时取中位数与 p90输出scorecard.json含 baseline、all-on、ablation、cost、short 项pass:false/退出码 1 表示仍有项低于 target。六、评分循环与真实成绩诚实报告不调参作弊SKILL 的 Scoring loop 是完整的工作方法论先打基线所有层关闭demo 约 3.7存档。消融是对指标本身的检验某层移除后总分上涨要么测错要么这层不值得成本。从最便宜的子指标入手修最低项同尺寸同 DPR 重跑每次指标驱动修改后都看 2x 裁图。demo 曾有三次涨分但画面变差全板 clearcoat、anisotropy 0.3、逐像素 tone gain 2.4全部回退。想要看起来对的分数把抓图与 rubric 交给没看过数字的新评委取两者中较低者。诚实汇报demo 在 1440x900 x1 下总分 8.8——grain 8.1、key/fill 10、shadows 9.6、shafts 8.0、rays 8.8、tone 9.8、texture 9.7、specular 6.5未达 8sheen 宽而不锐且加分的修法都会伤木纹。DPR 2 下 specular 7.4、shafts 7.3灰尘斑点比 7 px 测量窗还细。last-scorecard.json 给出了完整实测数据可交叉验证上述结论all_on.total 8.81、baseline.total 3.73消融表中grain层移除 drop 0.94伤害 grain/texture/spec、key移除 drop 0.70伤害 keyfill/shadow/tone/texture、shadow移除 drop 0.67、grade移除 drop 0.58而env工作室反射移除后总分反而 0.14——因为它抬高了阴影亮度这正是报告而非调参抹平的典型案例。成本项60 帧中位数 10 ms含静态阴影贴图关闭重渲与 1 px 回读。short列表唯一未达标项为spec6.52最差子项hlBreakup0.01 - 4.29、sheenSpread1.3228 - 6.11。七、性能成本哪些层在花钱哪些是免费杠杆SKILL 记录了一组实测成本headless Chromium on Apple Silicon / Metal单帧 1 px 回读1440x900 x1约 7.4-7.9 ms2880x1800DPR 216.5 ms390x844 DPR 27.2 ms最贵的层是光束与墙面光线平面每加性像素跑 3 层 octave fbmx1 约 1 ms、x2 约 5 ms阴影贴图首帧之后免费静态木纹、环境、主光、灰尘各约 0.2-0.7 ms最便宜的优化杠杆是降低光束 fbm 的 octave 数或半分辨率绘制而不是减少平面数单次切换结论不可靠DPR 2 下两次运行之间噪声约 1 ms。八、可访问性与生命周期减动、暂停、键盘可达prefers-reduced-motion固定时间 5.2 的设计定格无相机晃动、无灰尘漂移按需渲染层开关与评分照常工作document.hidden与画布离开视口时暂停IntersectionObserverdt截断到 1/30 s暂停后首帧dt 0ResizeObserver驱动尺寸DPR 上限 2目标尺寸与灰尘点大小跟随层开关是真实 checkbox带可见金色聚焦环评分为aria-live区域820 px 以下面板移到画布下方、画布上叠评分徽标score chip390 px 无横向滚动字号不小于 11 px1440x900 与 390x844 下控制台干净。九、Remix换题材、保机制PROMPT 的 Remix 提示给出可复用模板换成涂漆组子屏kumiko靠在唐柜tansu上相机右侧低窗傍晚光房间更冷key 0xffe6c8、fill 0x9fb4d0但机制与预算全部保留——一个主光、会投影的真实窗洞、环境窗与真实窗同位置、按高度淡出的光束、结尾一次 ACES、4096 静态阴影贴图、接触池、门限在光束内的灰尘。然后为新媒体重写regions()保留metrics.js与 rubric 锚点先打平基线、跑消融、迭代到每项 8 分或明确说明哪项平台化及原因。十、可直接运行的最小路径本地服务页面demo 默认地址http://localhost:8099/skills/3d-wood-lighting-scorecard/demo.html可自行换成任意 URLnpm i playwright-core或 playwright或设PW_DIR指向含依赖的目录Chromium 可通过CHROME环境变量指定先node references/scorecard.mjs --sync保证页面内 metrics 与 references/metrics.js 一致node references/scorecard.mjs --url url --target 8 --size 1440x900 --dpr 1按SHORT/PASS与 JSON 中short.worst指出的最差子指标迭代每次指标驱动修改后看 2x 裁图确认画面真的变好分数只在同一尺寸与 DPR 下可比。小结3d-wood-lighting-scorecard的价值不在于某一项渲染技巧而在于把木头在暗室里被一扇窗照亮这件事拆成了可构建的管线单噪声场木纹、单窗对齐、静态 4096 阴影、线性 HDR 一次 ACES与可测量的闭环锚点 rubric 双端 metrics 消融 scorecard。用它灯光与材质不仅能看对还能数对并且知道每层到底在挣多少分、花多少钱——这正是它适合被 Agent 用来评分到 8 分的原因。赞分享【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载相关推荐Three.js小程序适配版让3D开发像搭积木一样简单Three.js小程序适配版让3D开发像搭积木一样简单 你是不是曾经在小程序中想要实现炫酷的3D效果却因为技术门槛太高而放弃或者尝试过原生Three.js小程序3D渲染10分钟上手建木让DevOps流程编排像搭积木一样简单10分钟上手建木让DevOps流程编排像搭积木一样简单 你是否还在为这些DevOps痛点抓狂 流程搭建难 编写YAML如同面向字符编程一个缩进错误DevOpsCI/CD低代码流程编排后端前端任务调度three.js LensflareMesh 完全指南用 WebGPU 实现追踪灯光的镜头光晕three.js LensflareMesh 完全指南用 WebGPU 实现追踪灯光的镜头光晕 LensflareMesh 是 three.js 提供的附加组前端3D渲染图形学上一篇Renovate 发布说明提取机制深度解析从 js-yaml CHANGELOG 测试夹具看 changelog 解析与 PR 渲染链路下一篇Argo CD v2.0 到 v2.1 升级指南四个关键变更与迁移实操创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
