在我的下一个游戏中，我打算将DOM背景图层与其上方的画布混合在一起。我想将非交互式背景动画移动到该DOM图层，并使用关键帧动画进行变换和不透明度变化，例如移动云，飞机等。
至于我，有2个专业人士：
简单的关键帧动画更容易创建。 IMHO
最有趣点 - 它应该可以提高效果：
transform和opacity动画可以通过GPU加速并在单独的线程上执行。或者我错了？也许浏览器需要更多的时间来制作这些图层的组合，还是有其他一些注意事项？
这种技术的最大相反之处在于，我们可以将它主要用于装饰动画，而不是用于我们的游戏，因为控制这些动画是一项艰巨的任务。
有没有人有这种分层的经验？
提前谢谢。
答案 0 :(得分：0)
我开始和你一样的船开始了，并且已经走过了很多途径，包括webgl，canvas和我的新游戏：svg。
SVG提供了你想要的大部分元素，但它仍然在图形渲染引擎中，所以你仍然可以添加一堆滤镜和效果，但是这些图层更加静态，就像你说的那样你自找的。 （不渲染每个刻度线）。
在我当前的应用程序中，three.js引擎已被剥离，不再是图像纹理（这些是3d转换的html元素）。我有一个纯粹的html + react场景，以及一个完美匹配的three.js场景（透视相机或正交）。这是一个非常漫长（有趣）的过程，让它们全部匹配。
无论如何，我只使用three.js来制作一些3d装饰（比如把手抓住来调整元素大小）。顺便说一下，它是一个动画应用程序，所以就像3D编辑器一样。我正在讨论是否完全删除threejs渲染（我仍然会使用three.js来创建一个场景结构，然后在东西上调用localToWorld，然后在svg覆盖上渲染它 - 但我不会在渲染上调用渲染三个场景[我必须在所有内容上手动调用updateMatrixWorld（），但它比渲染场景快20倍]）
对于实时渲染，如果角色移动了一段时间，然后静止不动，并且你正试图在背景不移动的那些时刻节省时间，我不知道如果那个＆ ＃39;正确的思考。当他移动得足够远以滚动背景时你想要滞后吗？
话虽如此，除了警告，它可能会更快。 Three.js必须将大纹理加载到内存中。如果您在背景上进行某些过滤，那么将纹理缓冲区中的背景图像更改为非常慢，但也有webgl方法可以在不更改纹理的情况下完成所有操作。
我可能不会推荐使用混合系统，除非你已经用尽了你的选择，并且只是想尝试新的东西。
我绝对建议使用和学习svg。
我非常确定webl中有黑客可能会在长期内更易于维护（维护两个引擎有点精神上的负担）。它并不可怕，我实际上喜欢我的html引擎比我的三个.js更好......但是嗯..
您是否考虑过所有HTML引擎？我花了很长时间才找到一个层次结构，直到我使用大量的html元素（而不是试图保存它们 - 它的速度很快）我很舒服
我的html元素基于0（我总是翻译50％，50％，从元素的中心开始工作，就像three.js一样，它在大脑上比做顶部，左方向更容易）
container
anchor
mesh
children
这就是我的用途。网格通常是img或svg。
实际上现在我的大部分元素都是0x0。通常，只有网格有宽度。最初我做了一些奇怪的事情，但现在它几乎就像一个three.js场景，除了html元素，我最初使用的是CSS3dRenderer，但我自己的同样优秀且更易于维护（一切都是反应成分）
每个＆＃34;＆＃34;是一个类，它创建了这4个html元素。它还创建了三个.js元素（用于进行鼠标交叉，光线投射，坐标系之间的转换等）。
以一种理智的方式将所有内容放入和卸出redux也很有趣。
SVG网格也有子节点（svg元素）。
你可能喜欢做一些带有反应和嵌套的html元素的项目，3d转换，并使用svg作为元素+动画..因为我知道我这样做。
您可以预处理网格并使用gif而不是图像或svg。
我不知道。你似乎想要做一些奇怪的事情，所以imo，制作一个与svg做出反应的游戏似乎很奇怪。我敢打赌，你可以获得新闻自由，因为人们会通过反应来投票。
我要说的另一件事是，在学习反应+ redux +不变之后，我的整个思想都是不同的。我用于更新道具的three.js引擎有10000％不同。它更加懒散。您可能会发现，只学习处理数据的新系统+更新道具将使您以全新的方式看到您的引擎。我建议学习react + redux + immutable，甚至可以学习将它们应用到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个赞成票。