HTML5视频与WebGL结合可实现高性能视觉特效，关键在于将视频直接绑定为WebGL纹理而非经Canvas中转，通过着色器实时处理帧数据，并辅以FBO复用、多纹理协同及兼容性降级策略。
HTML5视频与WebGL结合，能绕过传统CSS或Canvas 2D的性能瓶颈，在GPU层面直接处理视频帧，实现粒子爆炸、色彩扭曲、实时滤镜、AR叠加等高性能视觉特效。关键在于不把视频当普通DOM元素，而是作为WebGL纹理数据源，由着色器（Shader）实时计算渲染。
视频作为WebGL纹理的高效加载
避免用<video>元素直接绘制到Canvas再读取像素——这会触发CPU-GPU数据拷贝，严重掉帧。正确做法是将<video>绑定为WebGL纹理对象，启用TEXTURE_2D和UNPACK_FLIP_Y_WEBGL，并设置NEAREST过滤以保持原始帧精度：
- 调用
texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video)直接上传视频帧，无需canvas.getContext('2d').drawImage() - 每帧仅需
gl.texSubImage2D更新（若尺寸不变），避免重复分配内存 - 启用
video.playbackRate = 0或requestVideoFrameCallback（Chrome 94+）精准控制采样时机，减少丢帧
着色器中对视频帧的实时处理
顶点着色器保持标准全屏四边形变换；片元着色器才是核心。通过sampler2D采样视频纹理，配合时间戳、鼠标坐标、噪声图等输入，实现动态效果：
- 基础滤镜：用
texture2D(u_video, v_texCoord)获取原始像素，再做亮度/对比度/色相偏移运算 - 运动模糊：在片元着色器中沿速度向量多次采样并加权平均（需传入前一帧纹理或速度场纹理）
- 光追模拟：结合深度纹理（如从RGB编码的Z-buffer）做简单光线步进，实现折射或边缘辉光
多纹理协同与性能优化技巧
复杂特效常需多个纹理协作，例如视频主纹理 + 噪声图 + 深度图 + 上一帧缓存。注意以下实践：
立即学习“前端免费学习笔记（深入）”；
- 复用FBO（帧缓冲对象）：将上一帧渲染结果保存到纹理，供下一帧着色器读取，避免
readPixels回读CPU - 噪声图使用
gl.LINEAR过滤+无缝重复（REPEAT），提升 procedural 效果自然度 - 移动端优先使用
OES_texture_float扩展（若支持），避免整数纹理截断导致 banding - 禁用
gl.DEPTH_TEST和gl.CULL_FACE，全屏特效无需深度/面剔除
兼容性与降级策略
并非所有设备都支持高阶WebGL特性。建议分层实现：
- 检测
webgl2上下文，支持则启用EXT_shader_texture_lod做各向异性采样 - 无WebGL时回退到
OffscreenCanvas + 2D context（Worker中处理），虽性能低但逻辑一致 - 对iOS Safari等限制
video纹理的环境，改用MediaStream+captureStream()转为可纹理化源 - 添加FPS监控（
performance.now()差值），自动降低特效复杂度或跳帧保流畅
