最近，我很高兴从事有史以来最有趣的项目之一：The Bubble Figure。

泡沫数字是由Wunderdog的一组志愿者团队创建的Grand One 2023，这是在赫尔辛基举行的年度设计奖。我们的设计师created the visuals参加活动，并想做额外的事情。

在探索了各种想法，技术并记住了时间和资源限制之后，我们决定去寻找泡沫的人物。

泡沫数字是什么？

气泡图是一种在浏览器中运行的交互体验。当一个人通过网络摄像头识别一个人时，它们使他们看起来像是一个五颜六色的气泡人物。然后，他们可以通过击打上面的各种形状进行互动。简单而有趣，全部以2023年的视觉语言。

它是如何工作的？

气泡图使用TensorFlow.js姿势检测来识别一个人。然后将姿势关键点（例如左肩，右手腕）映射到Three.js场景中。

每次检测到新人时，图都是随机的。从上方掉落的形状也是随机的，同时使用某些几何形状和纹理。

为了模拟物理学，使用了cannon-es，是Cannon.js维护的叉子（我们发现Cannon.js不再维护的艰难方式）。形状坐标从物理世界映射到三个场景，而图形从场景映射到物理世界。

我们是怎么做的？

有趣的是，我们每个人都没有在这些图书馆方面有任何经验。我们以最好的方式学习了一切：有很多反复试验。

chatgpt可以从技术堆栈中了解一些概念并生成基本代码非常有用。但是，当然，这需要一些修复和修改才能使其正常工作。

从设计的角度来看，我们进行了很多修补，以确保泡泡图看起来还不错。这需要调整气泡的数量，大小，抵消其位置并添加随机性以创建各种有趣的结果。

我可以试试吗？

绝对！您可以查看最新的demo on GitHub pages。

请使用Google Chrome，其他浏览器不支持。允许浏览器使用相机。然后返回几步，以确保检测到您的姿势，然后敲一些形状。

您还可以在Windows上的Mac或Ctrl + K上点击命令 + K，以调整各种参数。单击“应用”将将参数保存在浏览器的本地存储中。

有限制吗？

当然，这不是一个没有限制的软件项目。

例如，气缸和锥体并不总是以平滑的方式与图形相撞。我们通过随机化图的气泡Z坐标来稍微改善它。尽管如此，可能会发生一些奇怪的碰撞。这不是乐趣的一部分吗？

我们还发现，无论该人与相机的距离如何，都很难使气泡图始终以相同的尺寸。也许有更多的时间我们会成功，但我们必须发布该项目。

一旦检测到姿势，帧速率也会改变。没有什么真的很糟糕，即使理想情况下它应该是一致的。

此外，由于某种原因，使用TensorFlow姿势检测作为NPM软件包引起了各种JavaScript错误。这就是为什么我们必须通过脚本标签加载它。

代码在哪里？

气泡图已在Wunderdog GitHub account中以开源释放。

由于我们的时间很短，因此我们进行了快速的原型制作，并且代码变得非常混乱。因此，在活动之后，我们花了大约一个星期的时间清理并添加打字稿。

我希望您喜欢这个小项目，并发现它很有用，以防您也想创造互动浏览器的体验，并具有姿势检测，3D图形和物理学。