three.js DotScreenPass 实战3 个参数玩转复古网点滤镜【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js往渲染循环里加一个 Pass三维场景就被啃成一片密集的圆点阵列——three.js 的DotScreenPass就是这么干的后处理滤镜一行代码把屏幕变成复古半色调halftone质感。先看效果点阵从哪来截图右下角那块就是DotScreenPass的输出同一组人物模型里其他三格还是常规光影它却把色彩全部替换成圆点阵列明暗随亮度变化越看越像车站出发板上从文字切换到点阵显示的灯箱——这就是该滤镜卖点的复古感。对照这张高饱和物体它是仓库里另一个网点通道HalftonePass的输出网点按 RGB 三通道分色。DotScreenPass则输出灰度单网点两者是仓库半色调效果的两种形态。最小可跑路径import 路径决定它走不走 addons 入口这个模块不在核心包里必须用three/addons/别名引入统一导出在 Addons.js#L187。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 ) ); // 三个参数全部可选漏传的部分会自动落在 Shader 默认值上 composer.addPass( new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 ) );跑起来后composer.render()循环里整屏色块会被旋转的圆点阵列取代。最后一行addPass就是这个滤镜的全部配置参数语义下一节拆开讲。3 个参数 3 个问构造函数三参皆可选源码只在参数不为undefined时才写入对应 uniformDotScreenPass.js#L28-L47漏传就沿用DotScreenShader声明的默认值。center : Vector2— 点阵中心默认(0.5, 0.5)即屏幕中心。官方示例传(0, 0)把网点相位原点挪到左上角点阵看起来像锚定在画面角落。源码用.copy()拷贝你构造后无需再留这个 Vector2 的引用。angle : number— 点阵旋转角弧度默认 1.57≈π/2。它改的不是单个点的倾斜而是整片点格旋转传 0.5 会得到轻微斜向的排布动态改它时差异最直观。scale : number— 反直觉点数值越大网点越小。直觉里放大应该变大但这里它其实是采样网格的频率越大点越细密越小点越粗颗粒。示例里的 0.8 属于中等设置。剩下的tDiffuse与tSize两个 uniform 是输入纹理和缓冲区尺寸每次render()开头就被覆盖DotScreenPass.js#L82-L83你不用管。让它动起来运行时动态调参pass.uniforms与material共享同一份引用——构造时this.uniforms直接传进了 ShaderMaterialDotScreenPass.js#L54-L61——所以改值下一帧生效不必重建 passconst dot new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 ); composer.addPass( dot ); function animate() { requestAnimationFrame( animate ); dot.uniforms.angle.value 0.01; // 角度持续累加点阵会缓慢转 dot.uniforms.scale.value 0.6 0.3 * Math.sin( performance.now() * 0.001 ); // 密度沿正弦起伏产生呼吸脉动 composer.render(); }参数与画面行为一一对应angle管旋转scale管密度center管相位原点——移动它相当于把整片点阵屏幕滑动。前两者一起动就是复古滤镜的经典形态。片元着色器三步算完整套算法就是DotScreenShader里的三步DotScreenShader.js#L52-L71取亮度float average ( color.r color.g color.b ) / 3.0;——RGB 平均颜色信息从这里起被扔掉这就是输出呈灰度点阵的原因。旋坐标vec2 point vec2( c * tex.x - s * tex.y, s * tex.x c * tex.y ) * scale;——像素坐标先按center平移、按angle旋转再乘scale。angle 管旋转、scale 管点疏密的数学出处就在这里。乘调制return ( sin( point.x ) * sin( point.y ) ) * 4.0;——两组正弦波像两把梳子交错相乘得到周期性的明暗斑最后加上average * 10.0 - 5.0这个放大 10 倍的亮度基底即亮处点稀疏、暗处点密集的半色调观感。想要 45° 新闻纸排布或 CMYK 分色改pattern()函数、自制 ShaderMaterial 再交给 pass 即可。放进管线里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 vignette new ShaderPass( VignetteShader ); vignette.uniforms[ offset ].value 1.6; // 官方示例的取值暗角强度 vignette.uniforms[ darkness ].value 0.95; composer.addPass( vignette );webgl_postprocessing_advanced.html#L166 就是同一套组合思路DotScreenPass与 Film、Sepia、Bloom、Bleach 并排对比。实践中再叠FilmPass胶片颗粒和SepiaShader怀旧色调老放映机的质感就齐了。⚠️ 容易踩的坑scale方向必错默认1.0数值越大点越小。想要更大的点去调小它。原色不可逆片元输出的是单通道灰度vec3( average * 10.0 - 5.0 pattern() )。想保留场景色彩得换HalftonePassexamples/jsm/postprocessing/HalftonePass.js网点按 RGB 分通道两者同屏叠加也换不出彩色点阵。dispose()不能省DotScreenPass.js#L104-L110 会释放材质与全屏四边形。动态重建后处理链时不释放旧 passGPU 资源就漏了。适用范围基类Pass的注释明确只服务于 WebGLRenderer 管线项目已迁 WebGPU 的话仓库里另有基于 node 体系的实现用法不共享本 pass 的 API。 一句话速查从three/addons/postprocessing/DotScreenPass.js引入挂在EffectComposer上构造 3 参center / angle / scale全部可选记住 scale 越大点越小运行时直接改pass.uniforms.center / angle / scale下一帧生效不用了调用pass.dispose()释放材质与全屏几何体。DotScreenPass.jsDotScreenShader.jsPass.js官方文档运行示例【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考