胶片颗粒需模拟成簇、亮度相关、带色偏的噪声：Canvas方案用正态分布+低分辨率噪声图缩放；SVG方案用feTurbulence调baseFrequency≈0.001–0.005；WebGL方案用预生成噪声纹理+NEAREST过滤；低端设备应降级为反差调整。
Canvas 2D 上用 getImageData 模拟胶片颗粒
HTML5 本身不提供「胶片颗粒」这类风格化滤镜，必须手动实现。核心思路是：在 canvas 上绘制图像后，用 getImageData 读取像素，对每个像素叠加随机偏移的 RGB 噪声（非纯灰度噪点，要保留色彩倾向和明暗层次）。
常见错误是直接用 Math.random() 给每个通道加 ±10 的值——这会产生刺眼的数码噪点，而非胶片那种微小、成簇、略带暖/青偏色的颗粒感。
- 建议用正态分布随机数（如 Box-Muller 变换）控制噪声幅度，让多数颗粒偏小，少数略大
- 颗粒强度应随原始像素亮度变化：暗部颗粒更明显，亮部抑制，模拟胶片的 gamma 响应
- 避免逐像素独立扰动；可先生成低分辨率噪声图（如 64×64），再双线性缩放到原图尺寸，模拟颗粒的“成簇”物理特性
CSS filter: url(#grain) 配合 SVG feTurbulence
这是性能更好、可硬件加速的方案，但控制粒度较粗。关键在于 SVG 滤镜中用 feTurbulence 生成自然噪声，再用 feColorMatrix 调整色调和对比度，最后混合到原图上。
容易踩的坑：baseFrequency 设为 0.05 0.05 看似合理，实际会导致颗粒过大；胶片颗粒对应真实尺寸约 2–8μm，映射到屏幕需设为 0.001–0.005（且两个值略有差异，制造各向异性）。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
type="turbulence"，numOctaves="2"比默认 1 更有层次 - 用
feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0"实现线性叠加，比 multiply 混合更可控 - 滤镜需挂载在
内并设width/height="0"隐藏，否则可能触发意外布局重排
WebGL 方案里 gl_FragColor 中加噪声采样
若已有 WebGL 渲染管线（比如用 Three.js 展示图片），在 fragment shader 里采样噪声纹理最高效。噪声纹理不是 PNG，而是运行时用 gl.texImage2D 传入 JS 生成的 Uint8Array 数据，尺寸建议 128×128 或 256×256。
注意：直接在 shader 里用 fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453) 这类哈希函数生成噪声，虽省纹理内存，但会在移动端出现明显 tile 边界——因为精度丢失导致相邻像素 hash 值突变。
- 噪声纹理应含 3 个通道：R 控制亮度扰动，G/B 模拟轻微色偏（如 R+2, G−1, B−1 表现暖粒）
- 采样坐标要用
uv + noise.rg * grainScale，其中grainScale是 uniform，控制整体强度（典型值 0.002–0.008） - 务必启用
gl.NEAREST纹理过滤，避免线性插值模糊掉颗粒细节
兼容性与性能取舍：何时该放弃「真实颗粒」
在低端 Android 或 iOS Safari 上，getImageData 处理 1080p 图像可能卡顿 200ms 以上；SVG 滤镜在 Chrome 115+ 有显著优化，但 Safari 对 feTurbulence 的渲染仍走 CPU 路径；WebGL 则要求用户设备支持 OES_texture_float 扩展才能做高质量浮点噪声。
真正实用的做法是检测 navigator.hardwareConcurrency 和 devicePixelRatio，动态降级：
-
hardwareConcurrency ≤ 2→ 改用 CSSfilter: contrast(1.1) brightness(0.95)模拟胶片反差，跳过颗粒 -
devicePixelRatio ≥ 3→ 启用高密度噪声纹理（256×256），否则用 128×128 - 首次加载时用
requestIdleCallback异步生成噪声纹理，避免阻塞主线程
颗粒效果最容易被忽略的，其实是时间维度——真实胶片在扫描或放映时，颗粒会随画面运动产生微弱拖影。静态图像加颗粒只是第一步，后续动效中是否同步更新噪声相位，才是区分「像」和「是」的关键。
