同时我也上一下我的最新实现的高性能方案,在线地址
第一次和朋友去看城市灯光秀,就在想灯光秀的实现原理。想过投影,但是细看即没有投影源,也没有投影路径,再就只能是灯光秀墙体安装灯光体设备,统一组织所有灯光体的发光,当然这种灯光体的灯光可以是各种颜色的。
电脑屏幕、手机屏幕中都有像素的概念,像素其实就是图像中的最小单元。在灯光秀整个场景中,最小的单元就是灯光体,而灯光秀的整个场景,则组成了一个大的“屏幕”。
以下是我使用three.js创建并模拟城市灯光秀的步骤:
一、创建随机的建筑
城市建筑可以用随机的Mesh来模拟,模拟了一下,感觉效果还不错。
二、创建灯光秀的灯光设备
灯光设备是贴在墙体的,这里我使用了一个个小的plane来模拟,每个plane都可以随意更改颜色,来达到灯光的效果。
三、灯光随着视频颜色联动
在html中播放mp4格式的视频,每个帧都是一个canvas,相当于原始的屏幕,而灯光秀中的每个灯光体,对应了这个原始屏幕中的一个位置,颜色联动时,我们只需要取出灯光体对应的原始屏幕位置的像素的颜色值,然后更改plane的颜色,达到颜色联动的视觉。
四、整体效果图