three.js DotScreenPass 完整指南三行代码给画面套上复古网点【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsthree.js DotScreenPass 是一个后处理网点滤镜场景照常渲染它负责把整幅画面改写成密集圆点重建的半色调影像复古点阵、报纸印刷、老电视质感一次到位。做复古游戏 UI、作品集视觉或滤镜站的同学可以直接抄作业。跑起来只要三行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 ) );贴进项目就能跑。最后一行就是滤镜本体官方示例 webgl_postprocessing_advanced.html 里用的也是这组参数跑起来看看右下角那格。三个旋钮怎么拧构造参数全部收在pass.uniforms里运行时随便拧。旋钮拧大 / 拧小的画面变化直觉比喻center网点阵列的锚点跟着平移整体纹理滑动拿放大镜在照片上挪位置angle阵列整体旋转点排跟着歪把点阵贴纸转一个角度scale越大点越小越密越小点越大越粗拧越大网点越细别被名字骗了注意scale是反着走的数值越大单个点越小、排布越密想要粗颗粒就把调小。center不传默认屏幕中央 (0.5, 0.5)angle默认 1.57 弧度。让它动起来 ✨把改参数的动作塞进渲染循环画面立刻活过来pass 本身不用重建const dot composer.passes[ 2 ]; renderer.setAnimationLoop( () { dot.uniforms.angle.value 0.01; dot.uniforms.scale.value 0.6 0.3 * Math.sin( Date.now() * 0.001 ); composer.render(); } );每帧改写angle网点持续旋转scale用正弦驱动则呈现呼吸脉动。材质和 uniforms 共享同一份引用改了下一帧就生效。GPU 每一帧在算什么每个像素干三件事。第一步提取亮度把 RGB 三通道平均成一个灰度。第二步旋转坐标以center为原点用angle的 sin/cos 把像素坐标转个向再乘scale。第三步正弦调制旋转后的坐标两个方向各过一个sin相乘得到周期性网点纹理最后叠在放大的亮度基底上。核心逻辑不到五行float average ( color.r color.g color.b ) / 3.0; vec2 tex vUv * tSize - center; vec2 point vec2( c * tex.x - s * tex.y, s * tex.x c * tex.y ) * scale; float pattern sin( point.x ) * sin( point.y ) * 4.0; gl_FragColor vec4( vec3( average * 10.0 - 5.0 pattern ), color.a );细节可以翻 DotScreenShader.js实现本体在 DotScreenPass.js。塞进你的后处理链网点滤镜很少单独出场下面这条 渲染 → 伽马 → 网点 → 渐晕 的组合最常用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 );顺序换了画面就不一样先网点后渐晕是暗角压住点阵反过来则边缘网点依旧刺眼。别忘关灯pass 退出使用时记得dot.dispose()。切场景、重建后处理链、离开页面这三类时机一个都别漏否则 GPU 资源就一直挂着不释放。想改网点造型直接照着pattern()换个函数就能玩出斜纹、菱形等新花样。如果项目已经切到 WebGPU同效果可以换 TSL 的 DotScreenNode 走节点管线官方文档页 DotScreenPass.html.md 有完整 API 对照。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 three.js DotScreenPass 完整指南：三行代码给画面套上复古网点
three.js DotScreenPass 完整指南三行代码给画面套上复古网点【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsthree.js DotScreenPass 是一个后处理网点滤镜场景照常渲染它负责把整幅画面改写成密集圆点重建的半色调影像复古点阵、报纸印刷、老电视质感一次到位。做复古游戏 UI、作品集视觉或滤镜站的同学可以直接抄作业。跑起来只要三行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 ) );贴进项目就能跑。最后一行就是滤镜本体官方示例 webgl_postprocessing_advanced.html 里用的也是这组参数跑起来看看右下角那格。三个旋钮怎么拧构造参数全部收在pass.uniforms里运行时随便拧。旋钮拧大 / 拧小的画面变化直觉比喻center网点阵列的锚点跟着平移整体纹理滑动拿放大镜在照片上挪位置angle阵列整体旋转点排跟着歪把点阵贴纸转一个角度scale越大点越小越密越小点越大越粗拧越大网点越细别被名字骗了注意scale是反着走的数值越大单个点越小、排布越密想要粗颗粒就把调小。center不传默认屏幕中央 (0.5, 0.5)angle默认 1.57 弧度。让它动起来 ✨把改参数的动作塞进渲染循环画面立刻活过来pass 本身不用重建const dot composer.passes[ 2 ]; renderer.setAnimationLoop( () { dot.uniforms.angle.value 0.01; dot.uniforms.scale.value 0.6 0.3 * Math.sin( Date.now() * 0.001 ); composer.render(); } );每帧改写angle网点持续旋转scale用正弦驱动则呈现呼吸脉动。材质和 uniforms 共享同一份引用改了下一帧就生效。GPU 每一帧在算什么每个像素干三件事。第一步提取亮度把 RGB 三通道平均成一个灰度。第二步旋转坐标以center为原点用angle的 sin/cos 把像素坐标转个向再乘scale。第三步正弦调制旋转后的坐标两个方向各过一个sin相乘得到周期性网点纹理最后叠在放大的亮度基底上。核心逻辑不到五行float average ( color.r color.g color.b ) / 3.0; vec2 tex vUv * tSize - center; vec2 point vec2( c * tex.x - s * tex.y, s * tex.x c * tex.y ) * scale; float pattern sin( point.x ) * sin( point.y ) * 4.0; gl_FragColor vec4( vec3( average * 10.0 - 5.0 pattern ), color.a );细节可以翻 DotScreenShader.js实现本体在 DotScreenPass.js。塞进你的后处理链网点滤镜很少单独出场下面这条 渲染 → 伽马 → 网点 → 渐晕 的组合最常用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 );顺序换了画面就不一样先网点后渐晕是暗角压住点阵反过来则边缘网点依旧刺眼。别忘关灯pass 退出使用时记得dot.dispose()。切场景、重建后处理链、离开页面这三类时机一个都别漏否则 GPU 资源就一直挂着不释放。想改网点造型直接照着pattern()换个函数就能玩出斜纹、菱形等新花样。如果项目已经切到 WebGPU同效果可以换 TSL 的 DotScreenNode 走节点管线官方文档页 DotScreenPass.html.md 有完整 API 对照。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考