Three.js Instantiierung gleichwertig

Question

Ich habe vor kurzem begonnen, mit three.js zu spielen. Bemerken Sie, dass sogar mit ein paar tausend einfachen Würfeln die Leistung beginnt zu fallen.

Das bringt meine Hauptfrage: Gibt es eine Möglichkeit, mit three.js zu instanziieren? Ich bin mir ziemlich sicher, dass dieser Leistungsabfall mit den Drawcalls zusammenhängt. Wenn also eine Instanziierung mit three.js irgendwie möglich ist, kann dies die Performance unterstützen.

Ich kenne Puffer, aber zu diesem Zeitpunkt ist es mir unmöglich, einen Geometriepuffer zu erstellen, der mir die Möglichkeit gibt, einzelne Objekte zur Laufzeit zu ändern. Wenn es eine Bibliothek gibt, um all dies zu handhaben, gilt dies auch als eine Lösung.

Kurz, ich bin auf der Suche nach einem Gegenstück Objekt Instanz in three.js. Irgendwelche Vorschläge werden geschätzt.

Answer 1

Ich hatte die gleiche Erfahrung beim Versuch, ein paar Tausend Kugeln zu zeichnen.

Nach einigen Untersuchungen erreichte ich eine bessere Leistung (bis zu einer Million von Artikeln) mit dem PointCloud Objekt. Im Grunde erstellen Sie das PointCloud-Objekt aus einer Geometrie (es kann in diesem Beispiel aus roh erstellt werden oder eines der in Three.js vorhandenen) und dem PointCloudMaterial, in dem Sie die Eigenschaften jedes Elements ändern können.

Ein Beispiel wie folgt sein könnte (10 Punkte Zugabe)

var geo = new THREE.Geometry(); 
var mat = new THREE.PointCloudMaterial({size: 1, color:0xff0000}); 

//assign different positions to the points 
for (var i=0 ; i<10 ; i++){ 
    var point = new THREE.Vector3(3*i,0,0); 
    geo.vertices.push(point); 
} 

system = new THREE.PointCloud(geo, mat); 
scene.add(system); 

das Aussehen zu verändern, kann man mit den PointCloudMaterial Eigenschaften spielen oder eine Textur laden, so dass jeder Punkt eine gewünschte Form (Würfel- bekommt wie in deinem Fall).

Wenn Sie weitere Informationen zu teilen (warum brauchen Sie Würfel, zum Beispiel) oder einen Code, vielleicht kann ich hilfreicher sein

Answer 2

Ich habe nur eine Lösung erdacht und habe es noch nicht ausprobiert. Ich möchte sehr komplexe Netze instanziieren und sie mit einem Skelett animieren lassen. Es scheint, dass der JSON-Lader nur als Geometrie G geladen wird. Ich möchte in BufferGeometry BG1 konvertieren, als einen weiteren BufferGeometry BG2. Dann weisen Referenzen von Vertex-Attribute, etc. von BG2

//load mesh 
... 
var mesh = loadMesh(); 

//convert to buffer geometry 
var BG1 = new BufferGeometry(); 
BG1.fromGeometry(mesh); 

var BG2 = new BufferGeometry(); 
BG2.addAttribute('position', G1.attributes['position']); 
BG2.addAttribute('normal', G1.attributes['normal']); 
BG2.addAttribute('uv', G1.attributes['uv']); 
BG2.addAttribute('color', G1.attributes['color']); 

BG2.drawcalls = BG1.drawcalls; 
BG2.boundingBox = BG1.boundingBox; 
BG2.boundingSphere = BG1.boundingSphere; 

Sein mein Verständnis BG1, die diese Puffer teilen sich WebGL und nicht duplizieren des Speichers in VRAM. Kommentare sind willkommen.

Answer 3

Ich habe verstanden, dass Instanziierung mit einem Shader emuliert/neu implementiert werden kann. Bin mir nicht sicher und habe es nicht versucht.

Diese alte Demo hat 150k individuell animierte Würfel auf der GPU btw, aber die Quelle ist minimiert, so war es schwer zu sehen, was vor sich geht. Vielleicht keine richtige Instanziierungslösung, die für irgendein Netz funktionieren würde, bin ich mir nicht sicher, könnte sogar sein. http://alteredqualia.com/three/examples/webgl_cubes.html

Wird ein Auge für diese offen halten, wie wir auch brauchen würde es ich denke .. (hinzugefügt haben Bäume vizicities in einer Demo jetzt) ​​