上一篇
光影js
光影效果是前端视觉设计中的重要组成部分，通过JavaScript结合HTML5 Canvas、WebGL等技术，可以实现动态阴影、光照模拟、粒子光效等效果，本文将围绕“光影JS”展开，介绍其核心技术、实现思路及应用场景。
核心技术
| 技术类别 | 说明 |
|---|---|
| Canvas API | 2D绘图接口，适合实现基础阴影、渐变光效。 |
| WebGL | 3D图形渲染，支持复杂光照模型（如Phong、Blinn-Phong）。 |
| 着色器（Shader） | 通过GLSL编写顶点/片元着色器，自定义光照计算逻辑。 |
| CSS混合模式 | 结合mix-blend-mode属性，实现图层间的光影叠加效果。 |
| Three.js/Babylon.js | 第三方3D引擎，简化光影场景搭建（如环境光、点光源、材质反射）。 |
实现步骤
环境搭建
- 使用
<canvas>元素或初始化WebGL上下文。 - 引入三方库（如Three.js）加速开发。
基础光影效果
- 阴影：通过
Canvas的shadowBlur、shadowColor属性绘制模糊阴影。 - 光照：在WebGL中编写着色器，计算光线与物体表面的夹角，生成高低频光区。
动态交互
- 监听鼠标/触摸事件，动态调整光源位置或强度。
- 使用
requestAnimationFrame实现流畅动画。
性能优化
- 减少Canvas清除频率，复用离屏画布。
- 对WebGL纹理进行缓存，避免重复加载。
应用场景
| 场景类型 | 示例功能 | 技术选型 |
|---|---|---|
| 游戏开发 | 角色动态阴影、场景光照变化 | WebGL + 着色器 |
| 数据可视化 | 图表投影、粒子光线流动 | Canvas + CSS 混合模式 |
| UI组件 | 按钮悬浮发光、卡片阴影过渡 | CSS + JS 动态样式 |
性能优化策略
- 离屏渲染：将静态背景绘制到离屏画布，减少重复渲染。
- 资源管理：合并小纹理为大图集，降低GPU加载压力。
- 算法优化：使用预计算表存储光照参数，替代实时计算。
问题与解答
问题1：如何兼容低版本浏览器的光影效果？
解答：
- 对不支持WebGL的浏览器，降级为Canvas 2D实现基础阴影。
- 使用Polyfill填充
mix-blend-mode等CSS特性。 - 提供简化视觉效果（如纯色阴影）作为备选方案。
问题2：如何将Three.js的光影效果与手写WebGL结合？
解答：
- 利用Three.js的
ShaderMaterial或RawShaderMaterial自定义着色器。 - 提取Three.js相机、光源参数，在手写WebGL中复用同一渲染逻辑。
- 通过
renderer.domElement获取Three.js画布，叠加额外光影层
