three.js DotScreenPass 实战3 个参数调出复古网点滤镜【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsthree.js 的DotScreenPass是一条后处理通道它把渲染好的画面压成一层报纸印刷般的网点用点的疏密代替真实明暗再叠上偏色和暗角就是一张复古点阵海报。它适合做艺术化渲染、氛围背景、复古 UI 皮肤这类不追求写实、反而要有味道的场景。下面按先跑起来、再调参数、最后讲原理的顺序带你把它用起来。快速上手最小可跑接入代码DotScreenPass是 addon附加模块不会被打进核心包必须显式引入再挂进EffectComposer的通道链import * as THREE from three; import { EffectComposer } from three/addons/postprocessing/EffectComposer.js; import { RenderPass } from three/addons/postprocessing/RenderPass.js; import { DotScreenPass } from three/addons/postprocessing/DotScreenPass.js; const composer new EffectComposer( renderer ); composer.addPass( new RenderPass( scene, camera ) ); // 放在链尾会被自动渲染到屏幕画面立刻变成网点 composer.addPass( new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 ) );这段代码只做一件事先正常渲染场景再把上一通道的结果喂给DotScreenPass做全屏网点处理。仓库里的 webgl_postprocessing_advanced.html 第 166 行用的正是new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 )参数可以直接拿来参考。参数速览center / angle / scale 三个旋钮构造函数签名是new DotScreenPass( center, angle, scale )三个参数都可选——不传就沿用 DotScreenShader.js 里的默认值。参数类型含义默认值取值参考centerVector2网点相位围绕的中心点( 0.5, 0.5 )示例常用( 0, 0 )anglenumber网点排布的旋转角弧度1.57≈ π/20.5会得到轻微倾斜的网点scalenumber网点缩放越大点越小1.0示例常用0.8越小点越粗重点记住scale的反直觉数值越大采样网格越密点就越小越细密把它调小网点反而放大、颗粒感更粗。如果你调出来的效果和预期相反十有八九是把scale的方向搞反了。运行时调参用 uniforms 做动态网点pass.uniforms是运行时改效果的唯一入口它和material共享同一份引用改完下一次渲染立即生效不用重建 pass。center传Vector2时用copyangle/scale是标量直接赋值// 放在渲染循环里逐帧改即可 dot.uniforms.angle.value 0.01; // 网点缓慢旋转 dot.uniforms.scale.value 0.6 0.3 * Math.sin( t * 0.001 ); // 网点呼吸式缩放完整 uniform 集合继承自DotScreenShadertDiffuse输入纹理每帧自动写入、tSize缓冲区像素尺寸每帧自动覆盖、center、angle、scale。前两个由 pass 自己在render()里维护你真正要调的就是后三个。原理三步看懂网点是怎么画出来的滤镜的视觉核心在片元着色器里思路可以拆成三步配一小段关键 GLSL 就够理解取亮度读入当前像素算 RGB 平均值average当灰度。算网点相位把 UV 换算到像素空间vUv * tSize减去center用angle的 sin/cos 做二维旋转再乘scale。这一步就是angle控旋转、scale控密度的数学来源vec2 tex vUv * tSize - center; vec2 point vec2( c * tex.x - s * tex.y, s * tex.x c * tex.y ) * scale;叠加点阵对旋转后的坐标分别取sin再相乘得到在 [-1, 1] 间振荡的周期性调制放大 4 倍后加到average * 10.0 - 5.0这个亮度基底上就得到明暗由网点疏密表示的半色调观感原图 alpha 原样保留。想改网点造型比如斜 45° 新闻纸排布、CMYK 分色照着这个pattern()结构重写fragmentShader再塞进自己的ShaderMaterial是把它变成业务定制滤镜的推荐路径。组合实战和伽马校正、渐晕、胶片级联DotScreenPass很少单独用通常串在一条后处理链里。下面这条场景 → 伽马校正 → 网点 → 渐晕是最常见的复古组合composer.addPass( new RenderPass( scene, camera ) ); composer.addPass( new ShaderPass( GammaCorrectionShader ) ); // 先校正色调 const dot new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 ); composer.addPass( dot ); const vig new ShaderPass( VignetteShader ); vig.uniforms[ offset ].value 1.6; // 取值参考官方示例 vig.uniforms[ darkness ].value 0.95; composer.addPass( vig );想模拟老电影质感再叠FilmPass胶片颗粒或SepiaShader怀旧偏黄即可官方示例里它正是和胶片、Sepia、Bloom、Bleach 一起同屏对比展示的。常见误区与踩坑把center当成屏幕坐标或 UV。它实际作用在vUv * tSize的像素空间里是网点相位的锚点。传( 0, 0 )表示相位从左上角展开传( 0.5, 0.5 )才是围绕画面中心。想以某个角为圆心向外扩散时直接给对应像素坐标即可。scale方向搞反。越大点越小。想要更细密的点要往大了调想要更粗的颗粒才往小调。忘了dispose()。切换场景、重建后处理链或页面卸载时对不再用的 pass 调用dot.dispose()它会释放material和内部的全屏四边形几何体避免 GPU 显存悄悄泄漏。期望它保留颜色细节。输出是三通道共用同一个灰度值原图色彩会被抹平想要彩色网点得自己改写着色器。何时不该用它 / 替代方案走 WebGPU TSL 管线的项目这条 Pass 只服务于WebGLRenderer的传统 EffectComposer 体系。新项目用 WebGPU 时应改用 node 体系里的对应节点DotScreenNode写法和面向对象的 Pass 不同以 TSL 侧文档为准。高清写实渲染网点滤镜本质是降精度的艺术效果会主动丢色彩和细节。产品级写实画面、需要清晰文字/纹理的场景不要加它否则只会显得画面发脏。只要静态一次的效果如果不需要逐帧动画构造时把参数调好即可不必为动态调参额外维护requestAnimationFrame。速查清单引入路径three/addons/postprocessing/DotScreenPass.js必须经EffectComposeraddPass()使用。三旋钮center/angle/scale分别管中心、旋转、密度scale越大点越小。动态改效果走pass.uniforms.center/angle/scale无需重建 pass。不再使用时调用pass.dispose()释放材质与全屏几何体。WebGPU 项目改用DotScreenNode写实高清场景别用网点滤镜。想定制造型从 DotScreenShader.js 的pattern()函数改起。参考实现DotScreenPass.jsDotScreenShader.jsAddons.js 第 187 行统一导出。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 three.js DotScreenPass 实战：3 个参数调出复古网点滤镜
three.js DotScreenPass 实战3 个参数调出复古网点滤镜【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsthree.js 的DotScreenPass是一条后处理通道它把渲染好的画面压成一层报纸印刷般的网点用点的疏密代替真实明暗再叠上偏色和暗角就是一张复古点阵海报。它适合做艺术化渲染、氛围背景、复古 UI 皮肤这类不追求写实、反而要有味道的场景。下面按先跑起来、再调参数、最后讲原理的顺序带你把它用起来。快速上手最小可跑接入代码DotScreenPass是 addon附加模块不会被打进核心包必须显式引入再挂进EffectComposer的通道链import * as THREE from three; import { EffectComposer } from three/addons/postprocessing/EffectComposer.js; import { RenderPass } from three/addons/postprocessing/RenderPass.js; import { DotScreenPass } from three/addons/postprocessing/DotScreenPass.js; const composer new EffectComposer( renderer ); composer.addPass( new RenderPass( scene, camera ) ); // 放在链尾会被自动渲染到屏幕画面立刻变成网点 composer.addPass( new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 ) );这段代码只做一件事先正常渲染场景再把上一通道的结果喂给DotScreenPass做全屏网点处理。仓库里的 webgl_postprocessing_advanced.html 第 166 行用的正是new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 )参数可以直接拿来参考。参数速览center / angle / scale 三个旋钮构造函数签名是new DotScreenPass( center, angle, scale )三个参数都可选——不传就沿用 DotScreenShader.js 里的默认值。参数类型含义默认值取值参考centerVector2网点相位围绕的中心点( 0.5, 0.5 )示例常用( 0, 0 )anglenumber网点排布的旋转角弧度1.57≈ π/20.5会得到轻微倾斜的网点scalenumber网点缩放越大点越小1.0示例常用0.8越小点越粗重点记住scale的反直觉数值越大采样网格越密点就越小越细密把它调小网点反而放大、颗粒感更粗。如果你调出来的效果和预期相反十有八九是把scale的方向搞反了。运行时调参用 uniforms 做动态网点pass.uniforms是运行时改效果的唯一入口它和material共享同一份引用改完下一次渲染立即生效不用重建 pass。center传Vector2时用copyangle/scale是标量直接赋值// 放在渲染循环里逐帧改即可 dot.uniforms.angle.value 0.01; // 网点缓慢旋转 dot.uniforms.scale.value 0.6 0.3 * Math.sin( t * 0.001 ); // 网点呼吸式缩放完整 uniform 集合继承自DotScreenShadertDiffuse输入纹理每帧自动写入、tSize缓冲区像素尺寸每帧自动覆盖、center、angle、scale。前两个由 pass 自己在render()里维护你真正要调的就是后三个。原理三步看懂网点是怎么画出来的滤镜的视觉核心在片元着色器里思路可以拆成三步配一小段关键 GLSL 就够理解取亮度读入当前像素算 RGB 平均值average当灰度。算网点相位把 UV 换算到像素空间vUv * tSize减去center用angle的 sin/cos 做二维旋转再乘scale。这一步就是angle控旋转、scale控密度的数学来源vec2 tex vUv * tSize - center; vec2 point vec2( c * tex.x - s * tex.y, s * tex.x c * tex.y ) * scale;叠加点阵对旋转后的坐标分别取sin再相乘得到在 [-1, 1] 间振荡的周期性调制放大 4 倍后加到average * 10.0 - 5.0这个亮度基底上就得到明暗由网点疏密表示的半色调观感原图 alpha 原样保留。想改网点造型比如斜 45° 新闻纸排布、CMYK 分色照着这个pattern()结构重写fragmentShader再塞进自己的ShaderMaterial是把它变成业务定制滤镜的推荐路径。组合实战和伽马校正、渐晕、胶片级联DotScreenPass很少单独用通常串在一条后处理链里。下面这条场景 → 伽马校正 → 网点 → 渐晕是最常见的复古组合composer.addPass( new RenderPass( scene, camera ) ); composer.addPass( new ShaderPass( GammaCorrectionShader ) ); // 先校正色调 const dot new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 ); composer.addPass( dot ); const vig new ShaderPass( VignetteShader ); vig.uniforms[ offset ].value 1.6; // 取值参考官方示例 vig.uniforms[ darkness ].value 0.95; composer.addPass( vig );想模拟老电影质感再叠FilmPass胶片颗粒或SepiaShader怀旧偏黄即可官方示例里它正是和胶片、Sepia、Bloom、Bleach 一起同屏对比展示的。常见误区与踩坑把center当成屏幕坐标或 UV。它实际作用在vUv * tSize的像素空间里是网点相位的锚点。传( 0, 0 )表示相位从左上角展开传( 0.5, 0.5 )才是围绕画面中心。想以某个角为圆心向外扩散时直接给对应像素坐标即可。scale方向搞反。越大点越小。想要更细密的点要往大了调想要更粗的颗粒才往小调。忘了dispose()。切换场景、重建后处理链或页面卸载时对不再用的 pass 调用dot.dispose()它会释放material和内部的全屏四边形几何体避免 GPU 显存悄悄泄漏。期望它保留颜色细节。输出是三通道共用同一个灰度值原图色彩会被抹平想要彩色网点得自己改写着色器。何时不该用它 / 替代方案走 WebGPU TSL 管线的项目这条 Pass 只服务于WebGLRenderer的传统 EffectComposer 体系。新项目用 WebGPU 时应改用 node 体系里的对应节点DotScreenNode写法和面向对象的 Pass 不同以 TSL 侧文档为准。高清写实渲染网点滤镜本质是降精度的艺术效果会主动丢色彩和细节。产品级写实画面、需要清晰文字/纹理的场景不要加它否则只会显得画面发脏。只要静态一次的效果如果不需要逐帧动画构造时把参数调好即可不必为动态调参额外维护requestAnimationFrame。速查清单引入路径three/addons/postprocessing/DotScreenPass.js必须经EffectComposeraddPass()使用。三旋钮center/angle/scale分别管中心、旋转、密度scale越大点越小。动态改效果走pass.uniforms.center/angle/scale无需重建 pass。不再使用时调用pass.dispose()释放材质与全屏几何体。WebGPU 项目改用DotScreenNode写实高清场景别用网点滤镜。想定制造型从 DotScreenShader.js 的pattern()函数改起。参考实现DotScreenPass.jsDotScreenShader.jsAddons.js 第 187 行统一导出。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考