three.js DotScreenPass 后处理完整指南：3 个参数调出复古网点效果

three.js DotScreenPass 后处理完整指南3 个参数调出复古网点效果【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.jsDotScreenPass 是 three.js 的屏幕空间后处理通道把三维场景渲染成报纸网点、老式点阵显示器那样的复古影像。只需三行代码即可挂进 EffectComposer适合做复古滤镜、艺术化演示和风格化 Web 项目。快速接入把 DotScreenPass 挂进渲染管线导入路径只有一条three/addons/postprocessing/DotScreenPass.js。它属于 addon不会打进 three 核心包需借助 importmap 或打包器配置好three/addons/别名。最小可运行示例如下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 renderer new THREE.WebGLRenderer(); const composer new EffectComposer( renderer ); composer.addPass( new RenderPass( scene, camera ) ); const dotPass new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 ); composer.addPass( dotPass ); // 通道链末尾自动渲染到屏幕 renderer.setAnimationLoop( () composer.render() );官方示例 webgl_postprocessing_advanced.html 第 166 行用了同样的构造参数把该滤镜与 Sepia、Bloom、Film 等滤镜分屏对比展示截图如下参数调优指南构造参数与运行时动态调参构造函数签名是new DotScreenPass( center, angle, scale )三个参数全部可选不传就沿用 DotScreenShader.js 中的默认值。参数类型默认值含义直觉化调法centerVector2( 0.5, 0.5 )网点相位坐标系的原点数值偏离中心越远 → 点阵越偏离画面中心anglenumber1.57弧度网点网格的旋转角数值越大 → 点阵旋转角度越大scalenumber1.0网点密度系数数值越大 → 网点越小越细密tDiffusesampler2Dnull上一通道输出纹理每帧由 render() 自动写入无需手动设置tSizeVector2( 256, 256 )输入缓冲像素尺寸决定网点分辨率基准每帧自动同步为 readBuffer 宽高运行时改参在动画循环里直接写 uniforms 即可function animate( t ) { dotPass.uniforms.angle.value t * 0.001; // 网点持续旋转 dotPass.uniforms.scale.value 0.6 0.3 * Math.sin( t * 0.001 ); // 呼吸脉动 composer.render(); }material与uniforms在构造时共享同一份引用改动无需任何同步下一帧即生效也不必重建实例。幕后原理半色调网点算法的三步拆解全部逻辑都在 DotScreenShader.js 的片元着色器里拆成三步亮度提取采样上一通道纹理RGB 三通道求平均得到一个灰度值average作为网点调制的基底。float average ( color.r color.g color.b ) / 3.0;相位网格vUv * tSize把 UV 换算到像素空间减去center后按angle做二维旋转再乘scale。vec2 point vec2( c * tex.x - s * tex.y, s * tex.x c * tex.y ) * scale;angle与scale的作用都来自这一步旋转改变排布方向缩放改变密度。网点调制sin( point.x ) * sin( point.y )生成 [-1, 1] 振荡的周期值乘 4 放大后叠加到average * 10.0 - 5.0的亮度基底上输出保持原图 alpha。明暗最终由网点疏密承载这就是半色调观感的来源。进阶玩法与 FilmPass、渐晕通道级联把网点滤镜嵌进通道链通常放在伽马校正之后、渐晕之前import { ShaderPass } from three/addons/postprocessing/ShaderPass.js; import { FilmPass } from three/addons/postprocessing/FilmPass.js; import { DotScreenPass } from three/addons/postprocessing/DotScreenPass.js; import { GammaCorrectionShader } from three/addons/shaders/GammaCorrectionShader.js; import { VignetteShader } from three/addons/shaders/VignetteShader.js; const composer new EffectComposer( renderer ); composer.addPass( new RenderPass( scene, camera ) ); composer.addPass( new ShaderPass( GammaCorrectionShader ) ); const dotScreen new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 ); composer.addPass( dotScreen ); const vignette new ShaderPass( VignetteShader ); vignette.uniforms[ offset ].value 1.6; // 官方示例同款取值 vignette.uniforms[ darkness ].value 0.95; composer.addPass( vignette ); composer.addPass( new FilmPass( 0.35 ) ); renderer.setAnimationLoop( () { dotScreen.uniforms.angle.value 0.005; // 动态旋转网点 composer.render(); } );搭配建议加FilmPass( 0.35 )颗粒叠网点报纸印刷 老电影质感更浓调低scale、固定angle网点放大变粗接近新闻纸放大特写先挂伽马校正再上网点亮暗过渡更稳定暗部不易糊死常见坑与资源管理FAQ忘记调用 dispose 会泄漏 GPU 资源吗会。dispose()释放材质与全屏三角形几何体DotScreenPass.js 第 104-110 行。切换场景、动态增删通道或销毁 composer 前对每个不再使用的 pass 调用一次。tDiffuse 和 tSize 需要自己维护吗不需要。render()每帧把readBuffer.texture与 readBuffer 实际宽高写入这两个 uniform手动赋值会被覆盖。真正可自由调的只有center、angle、scale。这个 Pass 能用在 WebGPU 或 TSL 管线吗不能。它基于PassFullScreenQuad体系面向WebGLRenderer的 EffectComposer 传统管线。走 WebGPU TSL 的项目应改用节点体系的网点实现docs 索引中的 DotScreenNode参数与写法不同。想换一种网点造型怎么办material是公开属性可整体替换为你自己的 ShaderMaterial。最小改动是仿照着色器里的pattern()结构改写片元逻辑例如让网点斜 45° 排布或改成彩色分色网点。速查清单导入three/addons/postprocessing/DotScreenPass.js构造三参数全可选center / angle / scale数值越大 → scale 网点越小越细密运行时改pass.uniforms即时生效tDiffuse、tSize每帧自动覆盖不用时调用pass.dispose()释放资源参考资料examples/jsm/postprocessing/DotScreenPass.jsexamples/jsm/shaders/DotScreenShader.jsdocs/pages/DotScreenPass.html.mdexamples/jsm/Addons.jsexamples/webgl_postprocessing_advanced.html【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考