Manipulating bufferGeometry with CSG operations

I have been utilizing the three.js geometry class to generate shapes and then applying multiple CSG operations on those shapes, resulting in constant redraws of the shape.

The process of performing these multiple CSG operations is quite sluggish, as I am relying on ray-casting to select the shape upon clicking and carry out CSG with a pre-defined shape (any type of shape or geometry).

As a result, I have the following inquiries:

  • Would switching to buffer geometry help accelerate my CSG calculations? And if so, are there any libraries available for carrying out CSG operations on instances of THREE.BufferGeometry?

  • Are there alternative methods that could potentially speed up this process?

This is the flow of my code:

var objects = [];

init();
render();

function init(){
 // Setup scene and camera ... etc
   var sphere =  new THREE.SphereGeometry(200, 32, 32);
   objects.push(sphere);
 // Set up raycasting
 // Bind mouse click and move events
 }
  function onMouseDown() {

   var intersects = raycaster.intersectObjects(objects);
   .....
   // Extract intersected shape ..
   // Perform CSG operation with pre-defined shape 
   // Includes steps for converting geometry to *CSG library geometry* 
      and back to Three.js geometry)..
   // Replace the shape with the updated one
   .....
    render();
 }

I have been using this library for CSG operations, and the overall procedure resembles this example in the three.js demo site.

Answer №1

Although I don't have an element specifically for performance comparison, a buffergeometry library can be found in the develop branch of ThreeCSG by Wilt. You can access it here: ThreeCSG develop

This library supports buffergeometry (as shown in examples):

var nonIndexedBoxMesh = new THREE.Mesh( nonIndexedBufferGeometry, material );
var bsp1 = new ThreeBSP( nonIndexedBoxMesh );
var indexedBoxMesh = new THREE.Mesh( indexedBufferGeometry, material );
var bsp2 = new ThreeBSP( indexedBoxMesh );
var geometry = bsp1.subtract( bsp2 ).toBufferGeometry();
var mesh = new THREE.Mesh( geometry, material );

It is compatible with version r75.

Answer №2

If you're looking to enhance CSG performance, I suggest checking out this uniqueCSGrepo repository! It incorporates a cutting-edge technique called Unique-Octree BSPs for a drastic 1000X speed boost (more information here)!

In my opinion, whether you're utilizing standard Geometry or BufferGeometry, the impact on performance is likely minimal. The key factor influencing performance is the underlying CSG algorithm.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with jQuery requests not working properly on the mobile application

Creating a mobile application for Android devices using Intel XDK has been a rewarding experience so far. I have been testing my PHP code on an emulator and local development server (127.0.0.1) through AJAX methods such as $.ajax(), $.post(), and $.get(). ...

Ways to retrieve a specific item from a constantly changing knockout observableArray without employing a foreach loop

Why can I only access one property ('member_A') of an Element in an observableArray using an HTML <input>? I am attempting to add a new object of type abc() to the observableArray "list_of_abc" when the button "ADD To List of abc" is click ...

Do we really need to implement ajax in this code snippet?

In my scenario, I have two JSP files named test1.jsp and test2.jsp. The flow of my program goes like this: I need to retrieve data from a textbox in test1.jsp, but the Ajax call is initiated from a different page. My objective is to receive the controller ...

Encountering a React.js issue when attempting to update data

When attempting to update fields with a given drugid, an error occurs. For example, selecting drugid as 1 and clicking the update button results in an error message stating 'localhost:8081/drug/1' not found. In the MongoDB database, there is also ...

What is the best way to link CSS files from libraries that are downloaded using npm?

For instance, let's say I installed a package: npm install --save package and it gets saved in ./node_modules/package/ Inside that folder, there might be a directory named styles and within that directory, you could find style.css. How can I link ...

The image is not appearing on mobile devices, but it is displaying correctly on desktop computers

Having trouble with my landing page on compare.comxa.com. When I try to view it on my Android device, only the form shows up and the background image is nowhere to be found. Can anyone help me troubleshoot this issue? Here is the code: ...

Unexpected database query result in Node.js

In my newuser.js file for a node.js environment with a mongodb database managed through mongoose, I have the following code: //newuser.js //This code is responsible for creating new user documents in the database and requires a GET parameter along with a ...

Discover the technique of accessing XML data through PHP and JQUERY AJAX POST without relying on XMLHTTP

Several months ago, I found some code in a tutorial which I am now modifying and implementing on my website. I have already invested a lot of time in coding so I do not want to take another route. Essentially, I need to fetch all posts from a database and ...

What is the best way to continuously compare two date variables every minute using Javascript?

In my script, I have two date variables - one representing the current time and the other two minutes later. My goal is to compare both values every minute and trigger a function when the current time is greater than or equal to the latter time. Unfortun ...

Having trouble with displaying a Bootstrap modal in HTML and CSS?

I am new to programming and facing a challenge with my modal not displaying as expected. Instead of appearing in a popup, it is showing on the page itself. I really need help finding a solution for this issue. Any assistance would be highly appreciated. Be ...

Executing Javascript dynamically in VueJS: Learn how to run code from a string efficiently

Currently, I am developing a website with VueJS that enables selected users to upload scripts for automatic execution upon page load. For instance, here is an example of the type of script a user may input: <script src="https://cdnjs.cloudflare.com/aja ...

Troubleshooting problems with headers in web scraping using NodeJS Express

While working on my web app, I encountered the error message Cant Set headers after they are sent. as I tried to scrape a fan site for character information. It seems like using promises in my request is causing confusion in my code execution. My main obj ...

Showcasing two sets of data from an array using chart.js within a node.js environment

I am currently working on a project where I need to display two elements from an array - one as the label (e.g. "name of certain type of crop") and the other as the data itself (e.g. "quantity of the crop"). However, I am facing an issue where if the same ...

Is there a way to extract the HTML source code of a website using jQuery or JavaScript similar to PHP's file_get_contents function?

Can this be achieved without a server? $.get("http://xxxxx.com", function (data) { alert(data); }); I have tried the above code but it seems to not display any output. ...

Developing an array-based multiple choice quiz

Being a complete novice, I am currently immersed in designing a multiple-choice quiz using arrays. The questions all follow a similar template: "Which word in the following has a similar meaning to '_________'." To implement this, I have created ...

Tips for obtaining the status code of a JavaScript automatic POST request to a different domain

Our team is currently developing a SAML solution that involves serving up an HTML form with pre-filled parameters, set to POST to a web service endpoint independent of our system. This form is then automatically submitted using JavaScript (SAML POST bindin ...

Employing a break statement after the default case within a switch statement even when the default is not

According to a tutorial from w3schools that discusses switch statements, it is advised: If the default case is not the last case in the switch block, it is important to remember to end it with a break statement. However, the same tutorial also explains ...

Child element performs a method following the componentDidMount lifecycle hook of the parent element

Question regarding React.js components: Parent and Child. import React, { Component, Children, cloneElement } from 'react' import {render} from 'react-dom' class Child extends Component { someMethod() { /* Some code... */ ...

What is the best way to detect a specific button press from an external component?

I need to integrate an external component written in Vue.js that contains multiple buttons. How can I specifically target and capture the click event of a particular button called firstButtonClick() within this external component? Here is how the External ...

Tips for preventing a span from disappearing when a hidden div is displayed during onmouseover

, there is a concern about the disappearing behavior of the span with ID "topnavbar" when the display property changes from none to block on a hidden div using onmouseover event. The query is how to ensure that the span remains visible at all times. Additi ...