canvas二维光照效果

Posted 2021-04-29 分子模拟之道

• 2018-03-16 08:06:04

2d canvas虽然效率不高, 但使用起来比webgl简单很多, 所以比较方便. 但在这种绘图模式下没有简单的方法来模拟光照效果, 目前的解决方法有三种:

1. 使用自带的径向梯度效果来模拟, 可以采用多个梯度, 如果你提前已经知道了每个梯度的数值大小, 使用多个梯度可以很好的模拟光照效果

2. 使用贴图. 也就是提前将渲染好的图片准备好, 使用的时候直接将图片变换后放到合适的位置. 这种方法只适合比较简单的物体, 且不能有复杂的场景, 否则, 很难处理.

3. 使用法向贴图, 根据法向实时计算. 这种算是最好的方法, 但计算起来有点吃力.

可以参考下面的资料说明:

• canvas 2d 贴图技术实践

• webgl性能优化初尝

• html5 Canvas 2D lighting and normal maps

• Multiple light sources on canvas