Is the vertex count of a Geometry in Three.js increased when it is converted to a BufferGeometry?

Question

Is the vertex count of a Geometry in Three.js increased when it is converted to a BufferGeometry?

Recently, I've been experimenting with the fromGeometry method to convert regular Geometry objects into BufferGeometry objects. To my surprise, I noticed that the number of vertices increases during this conversion process. For instance, consider the following code snippet:

var geometry = new THREE.BoxGeometry(80, 80, 80, 16, 16, 16);
var bGeometry = new THREE.BufferGeometry();
bGeometry.fromGeometry(geometry);
console.log(bGeometry.getAttribute('position'));
console.log(geometry.vertices.length);

Upon running this code, I observed a Float32Array[27648] as opposed to 9216 which is obtained by dividing it by 3. On the other hand, the original Geometry object has only 1538 vertices. This discrepancy made me wonder if BoxGeometry objects inherently have more vertices or if the compression in Three.js results in different vertex counts between the two types?

This uncertainty arose when I attempted to create a custom attribute based on the number of vertices in my Geometry object but found that my array was too short. It seems that assuming an equal amount of vertices in both Geometry objects may not be accurate due to possible vertex merging and GPU optimization.

javascript three.js

Answer 1

Answer №1

If you're looking for answers to these questions, the best approach is to dive into the three.js code itself. It's user-friendly and easy to understand.

Start by checking out the BufferGeometry.fromGeometry method:

fromGeometry: function ( geometry ) {

    geometry.__directGeometry = new THREE.DirectGeometry().fromGeometry( geometry );

    return this.fromDirectGeometry( geometry.__directGeometry );

}

This method references DirectGeometry.fromGeometry

fromGeometry: function ( geometry ) {
    // ...
    var vertices = geometry.vertices;
    // ...
    for ( var i = 0; i < faces.length; i ++ ) {
        // ...
        this.vertices.push( vertices[ face.a ], vertices[ face.b ], vertices[ face.c ] );
        // ...
    }
    // ...
}

As you can see, the code is extracting additional vertices from the geometry faces property. Check out gaitat's explanation for further insight!

Answer 2

If you're looking for answers to these questions, the best approach is to dive into the three.js code itself. It's user-friendly and easy to understand.

Start by checking out the BufferGeometry.fromGeometry method:

fromGeometry: function ( geometry ) {

    geometry.__directGeometry = new THREE.DirectGeometry().fromGeometry( geometry );

    return this.fromDirectGeometry( geometry.__directGeometry );

}

This method references DirectGeometry.fromGeometry

fromGeometry: function ( geometry ) {
    // ...
    var vertices = geometry.vertices;
    // ...
    for ( var i = 0; i < faces.length; i ++ ) {
        // ...
        this.vertices.push( vertices[ face.a ], vertices[ face.b ], vertices[ face.c ] );
        // ...
    }
    // ...
}

As you can see, the code is extracting additional vertices from the geometry faces property. Check out gaitat's explanation for further insight!

Answer 3

Answer №2

Let's explore a simple scenario with a BoxGeometry(80,80,80,1,1,1). When using a box BufferGeometry, we end up with 36 vertices, whereas with a box Geometry, we only have 8 vertices. How does this discrepancy occur? Let's break it down:

In order to define a box shape, you technically only need 8 vertices to construct the 12 triangles that form it. However, each vertex of the box is shared by 6 triangles. Remember that each face of the cube consists of 2 triangles.

If we were to lay out all the triangles from the box Geometry into a box BufferGeometry, the calculation would be:

6 faces x 2 triangles per face x 3 vertices per triangle x 3 floats per vertex

= 108 floats

Answer 4

Let's explore a simple scenario with a BoxGeometry(80,80,80,1,1,1). When using a box BufferGeometry, we end up with 36 vertices, whereas with a box Geometry, we only have 8 vertices. How does this discrepancy occur? Let's break it down:

In order to define a box shape, you technically only need 8 vertices to construct the 12 triangles that form it. However, each vertex of the box is shared by 6 triangles. Remember that each face of the cube consists of 2 triangles.

If we were to lay out all the triangles from the box Geometry into a box BufferGeometry, the calculation would be:

6 faces x 2 triangles per face x 3 vertices per triangle x 3 floats per vertex

= 108 floats

Is the vertex count of a Geometry in Three.js increased when it is converted to a BufferGeometry?

Answer №1

Answer №2

Similar questions

The constructor error in ng-serve signalizes an issue in

jquery unclean data, in need of the jquery ui popup dialog

What is the best approach to managing numerous files?

Consistently navigating back to the Home Page through AJAX

Unlocking the Power of Global Props in AlpineJS: A Step-by-Step Guide

AngularJS - Ensuring the <script> tag is included only after all directives have been rendered

Clicking the submit button in JavaScript will trigger a request to the Spring MVC backend,

A step-by-step guide on increasing native Time variables in JavaScript

Does the process of reading a `stream` consume resources in Node.js?

"Enhabling tablesorter pagination to ensure that buttons always stay in sync with

Creating tube-like geometry in intervals using three.js

Is there a way to export all images that have been imported into a React JS file with just one export command?

Using jQuery to move a div to a specific location on the page

The jQuery AJAX autocomplete result box is either too cramped or displaying numbers

Successful Mongoose query in Node.js, however the array remains empty even after using forEach loop. Issue with MongoDB integration

What is the best method to transfer information between main.js and a specific directory?

How can we make v-show reactive with each click of a checkbox or toggle in Vue.js 3?

MUI Autocomplete is failing to update the value when onChange event is triggered

Node.js can be used to easily set the values of HTML elements

Ionic: How come my image is not loading with HTTP.GET?