Bedienungsanleitung

Aus Drogerie Waschmaschinenreiniger kaufen.

Weitere Tipps (z.B. Dichtungsring und Waschmittelfach säubern): Ökotest:

An bestimmten Stellen im Code – diejenigen, die den Kernablauf des Programms betreffen folgende Funktion aufrufen:

function printPerformanceDebugMessage() {
	if (!beginOfMeasurement) beginOfMeasurement = Date.now();
	
	var durationFromBeginning = Date.now() - beginOfMeasurement;

	console.println("Sekunden seit Messungsbeginn: " + durationFromBeginning/1000);
	console.trace();
	console.println();
}

Hintergrund

Erstaunlicherweise ist das Anzeigen von simplen Text in ThreeJS ein Problemfeld. So haben wir eine unterirdisch schlechte Performance bei der Anzeige von nicht sonderlich viel Text (1000 Zeichen?!) mit TextGeometry. Eventbrite wunderte sich in diesem Blogpost bereits 2015, dass das damals immer noch ein Problem war. Und fand eine etwas aufwändig anmutende Lösung für sich.

Lösung: troika-3d-text

Hier findet sich die Lösung. Uns hier kann man sehen, wie man das ganz einfach einbindet, nämlich so:

import { TextMesh } from 'https://unpkg.com/troika-3d-text@0.19.0/dist/textmesh-standalone.esm.js?module';

Offizielle Empfehlungen

In der offiziellen Doku steht nichts zu den Performanceproblemen und auch nichts davon, welcher der dort aufgeführten 5 Vorschläge solches am besten löst.

Vorschlag 2 ist nicht brauchbar:

Als Lösung wird folgendes Tutorial by Example (zum Quellcode betrachten einfach in Entwicklermodus des Browsers gehen) genannt, welches Text in ein Canvas schreibt und dieses Canvas dann als THREE.Texture einbindet. Ein bisschen rumprobiert erweist sich die Schrift als sehr pixelig und bei kleinen Schriftgrößen kaum noch zu erkennen.

Vorschlag 4 ist nicht brauchbar:

Dieser StackOverflow schildert ebenfalls 2015 genau das Performanceproblem von TextGeometry, leider ohne Lösung.

Weitere Ansätze

Auch in den dazu passenden offiziellen Examples findet sich erstmal kein Hinweis dazu. Aber aus einem einschlägigen Thread stammt die Empfehlung dieses Ansatzes als ein besonders performanter.

Dieser Artikel wurde als Problemlösung von mehreren Quellen (u.a. hier) empfohlen: Animating a Million Letters Using Three.js.

div element mit Text versehen und dann als THREE.CSS3DObject einbinden: Quelle. Auch dieses offizielle Example scheint diesen Weg als gangbar zu bestätigen. Jedoch ist mir schleierhaft, wie man das geschickt mit einer Anwendung kombinieren kann, die im normalen Renderer entwickelt wurde …

Vielen Dank abermals an Niklas und Markus.