网页版量子纠缠？这个全网围观千万次的小视频到底怎么回事

一个被称作是“网页版量子纠缠”的视频在短短4天内就有将近1000万的播放量，这个视频仅有35秒，内容为：绿色小球在左侧浏览器中，红色小球在右侧浏览器中，两个浏览器相互独立。当两个浏览器贴紧时，两颗小球之间会出现一条红绿相间的线，跨越两个浏览器相连在一起。而将两个浏览器重叠后，两颗小球也会重叠。

网页版量子纠缠

这个视频来自于voidtm创意设计工作室前创意总监@nonfigurativ。之所以被称为量子纠缠，是因为假若对于两个相互纠缠的基础粒子分别测量其物理性质，像位置、动量、自旋、偏振等，则会发现量子关联现象。视频中明明处于不同浏览器的两颗小球，却出现了关联现象。

虽然看起来很酷炫，抛开3D渲染不谈，实际上这里只应用了一些并不复杂的前端技术。主要有两个，第一个是多窗口同步3D场景（Multi-Window 3D Scene），像其名字一样，让多个不同的窗口时间轴同步，保证多个窗口的3D动画效果一致，比如当出现红绿两个球连接时，绿色的球里面会有红色效果。第二个是localStorage的动态窗口管理和状态同步，这个主要是获取窗口的位置等信息，以表现出连线、重叠等效果。

不算上3D渲染，实现这个效果所创建的js文件，甚至都没有《硅星人》本篇文章数据量大，而这正是代码本身的魅力。

其实多窗口技术已经诞生了，比如下面这张图。这是利用了多窗口技术实现两个窗口交互，右侧窗口中的箭头可以拖拽到左侧窗口中，指向左侧窗口的方块。主要应用于不同类型，但是具有关联性的内容。

多窗口交互

那这样带跨窗口交互的技术能不能也像“网页版量子纠缠”一样，做个3D升级呢？当然可以，实际上2019年就有应用了。

多窗口交互技术外加VR功能

这张图片是魏玛包豪斯大学的安德烈·库尔特在2019年时开发的操作系统，不仅包含多窗口3D交互，甚至还加入了VR功能。图片中左侧用户可以从天花板视角与窗口进行交互，而右方两位用户则是以水平地面的视角与窗口进行交互。可以从图片里看到，左侧用户的窗口里包含了右侧用户的窗口，右侧用户也可以转动VR设备的方向，观测到左侧用户的窗口。

两组用户的窗口之间也可以进行交互，比如左侧用户可以把天花板视角才能观察到的信息传递给右侧用户，以便后者更全面地观测。

有些时候代码就像变戏法一样。一些比较常见的桌面魔术，本身的原理并不复杂，甚至不需要魔术师高超的手法，只要明白其中的道理，谁都可以轻易还原。代码也是一样的，刨去3D渲染部分，“网页版量子纠缠”中所应用的都是基础的前端知识，正如上文提到的。短短几行就可以提取出窗口的位置，以及让窗口之间同步播放。

@nonfigurativ甚至在11月28号还在Github上放出了方块版“网页版量子纠缠”，将绿色和红色小球变成了小方块。和一开始预料的差不多，其中用来让多个窗口同步的代码非常简短，却又在粒子效果的配合下表现出了极为惊艳的效果。

我的建议是这种活儿多来点，太有意思了！

欢迎加入这个星球，见证硅基时代发展

点个“在看”，再走吧