THREE.JS glDrawElements: versuchen, außerhalb der Reichweite Vertices in Attribut 1

Question

Ich habe diesen Fehler beim Hinzufügen meiner eigenen Geometrie Attribut. Ich habe bereits gelesen WebGL GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1, und ich verstehe, was das Problem ist, aber ich kann nicht herausfinden, warum.

Ich baue eine BufferGeometry, einen Baum, ausgehend von 1000 Objekt. 300 Objekte verwenden eine LeafGeometry, 700 Objekte verwenden eine BoxGeometry.

Ich möchte einen Puffer erfüllen, der einen Wert enthält, der angibt, ob ein Scheitelpunkt zum Stamm oder zum Laubwerk gehört. Was ich mache, ist folgendes:

1) Zuerst berechne ich die Dimension des Puffers (und hier denke ich mache ich falsch) Aufruf: getTotNumVertices (LeafGeometry.new (Optionen), BoxGeometry.new (Optionen), 1000, 3000)

function getTotNumVertices(foliage_geometry, trunk_geometry, tot_objects, foliage_start_at){ 
    let n_vertices_in_leaf = foliage_geometry.vertices.length * 3; 
    let n_vertices_in_trunk = trunk_geometry.vertices.length * 3; 
    let n_vertices_in_leafs = foliage_start_at * n_vertices_in_leaf; 
    let n_vertices_in_stam = (tot_objects - foliage_start_at) * n_vertices_in_trunk; 
    return{ 
     tot_vertices: (n_vertices_in_stam + n_vertices_in_leafs), 
     n_vertices_leaf: n_vertices_in_leaf, 
     n_vertices_trunk: n_vertices_in_trunk 
    }; 
} 

2) Sobald ich die Gesamtzahl der Vertex habe, erstelle ich den Puffer

function createBuffers(n_vert){ 
    // I'm returnin an array becuase in my real code I'm returning 
    // more than one buffer 
    return { 
     isLeafBuffer: new Float32Array(n_vert) 
    }; 
} 

3) Verschmelzung ich meine BufferGeometry bauen, dann zusammen die 1000 Objekte:

let hash_vertex_info = getTotNumVertices(leafGeom, geometries["box"], 1000, 300); 
let buffers = createBuffers(hash_vertex_info.tot_vertices); 
let geometry = new THREE.Geometry(); 
let objs = buildTheTree(1000, 300); 
for (let i = 0; i < objs.length; i++){ 
    // here code that fullfills the buffers 
    let mesh = objs[i]; 
    mesh.updateMatrix(); 
    geometry.merge(mesh.geometry, mesh.matrix); 
} 
let bufGeometry = new THREE.BufferGeometry().fromGeometry(geometry); 
console.log(bufGeometry.attributes.position.count); 
console.log(hash_vertex_info.tot_vertices); 

Und hier das Problem, der Wert ist bufGeometry.attributes.position.count 623.616 ist, ist der Wert von hash_vertex_info.tot_vertices 308940.

Beim Zeichnen versucht, Zugriff tun WebGL den Fehler einen Wert größer als 308.940 und dann. Was mache ich falsch?

/////////// EDIT nach einer Weile

Grundsätzlich bin ich mit dem gleichen Problem in dieser Frage erklärt Does converting a Geometry to a BufferGeometry in Three.js increase the number of vertices?

I die Gesamtzahl zu berechnen brauchen von Scheitelpunkten, um einen Puffer zu erstellen, der Werte für meinen Shader enthält. Das ist mein Code, die Anzahl der Scheitelpunkte, die es zwischen der zusammengeführten Geometrie und der daraus erhaltenen Puffergeometrie immer noch gibt.

let tot_objects = 100; 
let material = new THREE.MeshStandardMaterial({color: 0x00ff00}); 
let geometry = new THREE.BoxGeometry(5, 5, 5, 4, 4, 4); 
let objs = populateGroup(geometry, material, tot_objects); 

//let's merge all the objects in one geometry 
let mergedGeometry = new THREE.Geometry(); 
for (let i = 0; i < objs.length; i++){ 
    let mesh = objs[i]; 
    mesh.updateMatrix(); 
    mergedGeometry.merge(mesh.geometry, mesh.matrix); 
} 

let bufGeometry = new THREE.BufferGeometry().fromGeometry(mergedGeometry); 

let totVerticesMergedGeometry = (mergedGeometry.vertices.length) + (mergedGeometry.faces.length * 3); 
console.log(bufGeometry.attributes.position.count); // 57600 
console.log(totVerticesMergedGeometry); // 67400 !!! 
scene.add(new THREE.Mesh(bufGeometry, material)); 

function populateGroup(selected_geometry, selected_material, tot_objects) { 
    let objects = []; 
    for (var i = 0; i< tot_objects; i++) { 
     let coord = {x:i, y:i, z:i}; 
     let object = new THREE.Mesh(selected_geometry, selected_material); 
     object.position.set(coord.x, coord.y, coord.z); 
     object.rotateY((90 + 40 + i * 100/tot_objects) * -Math.PI/180.0); 
     objects.push(object); 
    } 
    return objects; 
} 

Die Anzahl der totVerticesMergedGeometry und bufGeometry.attributes.position.count sollten gleich sein, ist aber immer noch anders aus.

Ist meine Art, Scheitelpunkte zu zählen falsch? tatsächlich ist es das gleiche hier https://github.com/mrdoob/three.js/blob/master/src/core/DirectGeometry.js#L166, was bedeutet (geometry.vertices.length) + (geometry.faces.length * 3).

Answer 1

Was ich falsch gemacht habe, war die Art und Weise, die Anzahl der Ecken zu berechnen. Die Anzahl von Eckpunkten für den Puffer verwendet wird, ist mit MyObjectGeometry.faces.lenght berechnen * 3 * NumberOfObjectThatWillBeMerged Eine ausführlichere Antwort hier ist Why the number of vertices in a merged Geometry differs from the number of vertices in the BufferedGeometry obtained from it?

Answer 2

ich diesen Fehler hatte, weil ich den Konstruktor mit den Werten anstelle eines anrief Array von Werten:

- var colors = new Float32Array(
+ var colors = new Float32Array([ 
     1.0, 0.0, 0.0, 
     0.0, 1.0, 0.0, 
     0.0, 0.0, 1.0, 
     1.0, 0.0, 1.0, 
     0.0, 1.0, 1.0, 
     1.0, 1.0, 1.0, 
- ); 
+ ]);