在我的下一个游戏中，我计划将DOM背景图层与其顶部的画布混合在一起。我想移动非交互式的背景动画到DOM层，并使用关键帧动画的转换和不透明度的变化，像中移动的云，空中飞机等使用DOM背景层和关键帧动画以及Canvas图层为物理引擎
至于我有2个优点此：
简单的关键帧动画更容易打造。 恕我直言
的最有趣的点 - 它应该提高性能：
transform和opacity动画可以是GPU加速和单独的线程执行。还是我错了？也许浏览器需要更多时间来制作这些图层的组合，或者还有其他一些注意事项？
这种技术最大的是相反的，我们可以主要用它来装饰的动画，而不是为我们的游戏玩法，以控制这些动画是硬任务。
有没有人有这种分层的经验？
预先感谢您。
我在大致相同的船开始了你和已经走过的WebGL，帆布，和我的新选择的许多途径：SVG。
SVG提供了很多你想要的元素，但它仍然在图形渲染引擎中，所以你仍然可以添加一堆滤镜和效果，但是图层更加静态，就像你说的那样。 （不会呈现每个勾号）。
在我目前的应用程序，该three.js所引擎已被剥离下来，不再做图像的纹理（这些都是转换后的HTML元素3D）。我有一个纯粹的html +反应场景，以及完美匹配的three.js场景（无论是透视相机还是正交）。让他们全部匹配是一个非常漫长（有趣）的过程。
无论如何，我只使用three.js来处理一些3d装饰（比如抓取元素来调整大小）。顺便说一下，这是一款动画应用，就像3D编辑器一样。我正在辩论是否完全移除threejs渲染（我仍然会使用three.js来创建场景结构，并且调用localToWorld来渲染它，然后渲染它在svg覆盖层上 - 但我不会在三个场景中调用渲染[我必须手动调用updateMatrixWorld（），但是它的渲染速度要比渲染场景快20倍））
对于实时渲染，如果角色移动了一段时间，然后静止不动，而您尝试为了节省时间在背景不移动的时刻，我不知道如果这是正确的想法。当他移动足够远以滚动背景时，你想要延迟吗？
这就是说，除了注意事项，它可能会更快。 Three.js必须将大的纹理加载到内存中。如果你在背景上做某些过滤器，那么改变背景图像进出纹理缓冲区会相当慢，但也有webgl方法可以完成这一切，而不会改变纹理。
我可能不会推荐做一个混合动力系统，除非你已经用尽了你的选择，只是想尝试新的东西。
我绝对推荐使用和学习svg。
我很确定webl内部有黑客可能会证明从长远来看更易于维护（维护两个引擎有点精神上的负担）。这并不可怕，我真的很喜欢我的html引擎比我的three.js更好..但是嗯..
你有没有考虑过所有的HTML 3D引擎？我花了很长时间才弄清楚了这个问题，直到我使用大量的html元素（而不是试图保存它们 - 它的速度很快）来舒适化之后，我的html元素基于0（i总是翻译50％，50％，从一个元素的中心工作，就像three.js一样，在大脑上比在顶部，左侧定位更容易） container anchor mesh children 这就是我所用的。网格通常是img或svg。 其实现在我的大多数元素都是0x0。通常只有网格具有宽度。最初我做了一个奇怪的东西，但现在它几乎就像一个three.js场景，除了html元素，我最初使用CSS3dRenderer，但我自己的一样好，更可维护（所有东西都是反应组件）
每个“东西”是一个类，它创建这4个html元素。它还创建three.js元素（用于执行鼠标交点，光线投射，在坐标系之间转换等）。
以一种理智的方式让所有的事情进入和退出还有趣。
SVG网格也有孩子（svg元素）。
你可能喜欢做一些反应和嵌套html元素的项目，3d转换，并使用svg元素+动画..因为我知道我做的。
您可以预处理网格并使用gif代替图像或svg。
我不知道。你似乎想做一些奇怪的事情，所以imo，让游戏对svg产生反应似乎很奇怪。我敢打赌你会得到新闻自由，因为人们会投票反对任何事情。
我会说的另一件事是，学习反应+ redux +不可变，我的整个思想是不同的。我的three.js引擎更新道具是10000％不同的。它比较懒惰。你可能会发现，仅仅学习处理数据和更新道具的新系统将使你以新的方式看到你的引擎。我建议学习react + redux +不可变的，甚至可以学习将它们应用于three.js。
你可以做的另一件事情是多个webgl场景，然后只需要渲染背景层，除非它正在移动。另外，如果你看看svg路由，注意使用css变换不同于使用属性变换（为svg元素构建）。 Firefox和IE无法处理被css转换的svg元素（如rect，path,circle等），但如果使用该属性，则它可以工作。
此外，CSS动画不比JavaScript动画更快..不是真的。使用3D翻译或旋转或其他任何形式的变换，这就是所有你需要激活视频卡。如果你甚至做了类似transform: translateZ(0)的东西，它会激活视频卡。您不需要编写CSS，您可以使用JavaScript，而大多数补间库仅使用JavaScript。你仍然需要解决性能问题，但是在js中进行转换也是很好的，所以事情不会失去同步。
如果我要送你一个视觉任务，我会告诉你用react + redux + immutable编写一个3d游戏。你会在程序员网站上看到1000个upvotes。
这实际上取决于你要做什么动画......有些会导致整个页面在每一帧重绘，有些则不会。有些还会使你的可见画布的绘画比其表面上的绘画更加复杂。无论如何，这将取决于浏览器的实现，没有真正严格的答案，你可以得到。最好的做法是尝试两种方法，并根据不同的实现自行检查。还有三分之一的方法可以做为背景视频。 – Kaiido
当然，这取决于GPU加速动画，在我的情况下使用canvas绝对会更好。但我只是在问GPU加速动画：变换和不透明。 – tenbits
即使它们在GPU上执行，但这并不意味着它们不会采取某些CPU进程，也不会影响您的js：https://jsfiddle.net/phhpxbq6/另请注意，某些画布操作也在GPU上执行。 – Kaiido