Verwenden Sie die DOM-Hintergrundebene mit Keyframe-Animationen und der Canvas-Ebene für eine Physik-Engine

Ich habe mit dem gleichen Boot angefangen wie du und bin viele Wege von Webgl, Canvas und meinem neuen Go-to: Svg.

SVG bietet viel von dem, was Sie von Ihren Elementen erwarten, aber es befindet sich immer noch in einer grafischen Rendering-Engine. Sie können also eine Reihe von Filtern und Effekten hinzufügen, aber die Ebenen sind statischer, als Sie sagten. (nicht jeden Tick rendern).

In meiner aktuellen App wurde die three.js-Engine entfernt und es werden keine Bildtexturen mehr verwendet (das sind 3d-transformierte HTML-Elemente). Ich habe eine reine html + react Szene und eine three.js Szene, die perfekt zueinander passt (entweder perspektivische Kamera oder orthogonal). Es war ein sehr langer (lustiger) Prozess, um alle zusammenzubringen.

Wie auch immer, ich verwende nur three.js für einige 3D-Dekorationen (wie Griffe, um Elemente zu vergrößern). Es ist übrigens eine Animations-App, also wie ein 3D-Editor. Ich diskutiere darüber, ob ich das threejs-Rendering vollständig entfernen soll (ich werde three.js immer noch verwenden, um eine Szenenstruktur zu haben, localToWorld aufrufen und dann auf einem Svg-Overlay rendern - aber ich rufe die drei Szenen nicht auf [Ich muss updateMatrixWorld () für alles manuell aufrufen, aber es ist 20x schneller als das Rendern der Szene])

Wenn sich der Charakter für eine Weile bewegt, wenn er sich eine Weile bewegt, dann steht er still und du versuchst Zeit in jenen Momenten zu sparen, in denen sich der Hintergrund nicht bewegt, ich weiß nicht, ob das richtig ist. Willst du Verzögerung, wenn er sich weit genug bewegt, um den Hintergrund zu scrollen?

Abgesehen von den Vorbehalten könnte es schneller sein. Three.js muss große Texturen in den Speicher laden. Wenn Sie bestimmte Filter auf den Hintergrund anwenden, wäre das Ändern des Hintergrundbilds in und aus einem Texturpuffer ziemlich langsam, aber es gibt auch Webgl-Möglichkeiten, alles zu tun, ohne die Textur zu ändern.

Ich würde es wahrscheinlich nicht empfehlen, ein hybrides System zu entwickeln, wenn Sie Ihre Möglichkeiten nicht ausgeschöpft haben und nur versuchen, etwas Neues auszuprobieren.

Ich empfehle definitiv, Svg zu benutzen und zu lernen.

Ich bin mir ziemlich sicher, dass es Hacks in der Webl gibt, die sich auf lange Sicht wahrscheinlich als haltbarer erweisen würden (die Aufrechterhaltung von zwei Engines ist ein wenig mental anstrengend). Es ist nicht schrecklich, und ich mag meine html-Engine tatsächlich viel besser als meine three.js one .. aber hmm ..

Haben Sie eine HTML-3D-Engine in Betracht gezogen? Es hat lange gedauert, bis ich eine Hierarchie gefunden hatte, und bis ich mit einer Tonne HTML-Elementen komfortabel war (und nicht versuchte, sie zu konservieren - es ist schnell mit viel)

Meine HTML-Elemente sind 0-basiert (ich übersetze immer 50%, 50%, arbeite von der Mitte eines Elements aus, wie three.js, es ist viel einfacher für das Gehirn als die obere, linke Ausrichtung) %Code% Das ist, womit ich gegangen bin. Das Mesh ist normalerweise ein container anchor mesh children oder ein img . Eigentlich sind die meisten meiner Elemente jetzt 0x0. Nur Mesh hat normalerweise eine Breite. Ursprünglich habe ich seltsame Sachen gemacht, aber jetzt ist es fast wie eine three.js-Szene, außer mit HTML-Elementen, und ich benutzte ursprünglich den CSS3dRenderer, aber mein eigener ist genauso gut und mehr maintable (alles ist eine react-Komponente)

Jedes "Ding" ist eine Klasse und es erzeugt diese 4 html Elemente. Es erstellt auch three.js-Elemente (zum Ausführen von Mauskreuzungen, Raycasting, Konvertieren zwischen Koordinatensystemen usw.).

Es war auch interessant, alles in Redox rein und raus zu bekommen.

SVG-Meshes haben auch Kinder (die SVG-Elemente).

Sie könnten gerne ein Projekt mit reaction und verschachtelten HTML-Elementen, 3D-transformiert, und mit Svg für die Elemente + Animationen .. weil ich weiß, dass ich tun.

Sie könnten die Netze vorverarbeiten und ein gif anstelle eines Bildes oder eines Svg verwenden.

Ich weiß nicht. Du scheinst etwas Seltsames machen zu wollen, also imo, ein Spiel in Reaktion mit Svg zu machen, scheint komisch. Ich wette, du würdest freie Presse bekommen, weil die Leute mit etwas revozieren werden, was sie reagieren.

Eine andere Sache, die ich sagen werde ist, dass nach dem Lernen reagieren + redux + unveränderlich, mein ganzer Geist ist anders. Meine three.js-Engine zum Aktualisieren von Requisiten ist 10000% verschieden. Es ist viel fauler. Du wirst vielleicht feststellen, dass du nur durch das Erlernen eines neuen Systems zum Bearbeiten von Daten und Aktualisieren von Requisiten deinen Motor auf eine neue Art und Weise sehen wirst. Ich empfehle, react + redux + unveränderlich zu lernen und vielleicht sogar zu lernen, sie auf three.js anzuwenden.

Eine andere Sache, die Sie tun könnten, wäre mehrere Webgl-Szenen, und dann brauchen Sie nur die Hintergrundebene nicht zu rendern, es sei denn, es bewegt sich.

Beachten Sie auch, dass die Verwendung von CSS-Transformation anders ist als die Verwendung der Attributtransformation (für SVG-Elemente erstellt). Firefox und IE können nicht mit SVG-Elementen (wie svg , rect , path usw.) umgehen, die css-transformiert sind, aber es funktioniert, wenn Sie das Attribut verwenden.

Auch CSS-Animationen sind nicht schneller als Javascript-Animationen .. nicht wirklich.Mit einer 3D-Transformation oder Rotation oder was auch immer, brauchen Sie nur um die Grafikkarte zu aktivieren. Wenn Sie etwas wie circle machen, wird die Grafikkarte aktiviert. Sie müssen nicht CSS schreiben, Sie können Javascript verwenden, und die meisten Tween-Bibliotheken verwenden nur Javascript. Sie werden immer noch Leistungsaspekte haben, aber es ist auch gut, Ihre Übergänge in js zu machen, damit die Dinge nicht aus der Synchronisation geraten.

Wenn ich dir eine Visionssuche schicken würde, würde ich dir sagen, dass du ein 3D-Spiel in react + redux + unveränderlich schreiben sollst. Und Sie würden 1000 Upvotes auf Programmiererwebseiten bekommen.