Is it possible to bypass the standard syntax and manipulate geometry buffers directly in three.js in order to achieve improved performance?

Embarking on a creative journey into the realm of geometry generation and manipulation, I am eager to explore intricate and large-scale projects. While I am familiar with the conventional methods of achieving this, as demonstrated in the informative response to this query, my background lies in image manipulation using typed array buffers on the GPU.

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);

geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();

var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );

object.position.z = -100;
object.rotation.y = -Math.PI * .5;

scene.add(object);

Given my experience in working with typed arrays for fast image processing, it would be intriguing to access the three.js geometry directly as a typed array buffer. Imagine the possibilities if I can utilize gpu.js to leverage the GPU for performance enhancements instead of relying solely on the CPU.

Is there an equivalent method within three.js akin to canvas's getImageData that allows direct manipulation of geometry through typed arrays? This could revolutionize my approach to geometric transformations!

Answer №1

According to ThJim01's suggestion, utilizing THREE.BufferGeometry is the optimal approach. However, if you are insistent on employing THREE.Geometry for initializing your triangle list, you can utilize the BufferGeometry.fromGeometry function to convert the Geometry into BufferGeometry.

var geometry = new THREE.Geometry();
// ... initialize verts and faces ...

// Initialize the BufferGeometry
var buffGeom = new THREE.BufferGeometry();
buffGeom.fromGeometry(geometry);    

// Print the typed array for the position of the vertices
console.log(buffGeom.getAttribute('position').array);

It's important to note that the resulting geometry will not include an index array and will simply consist of individual triangles (as initially represented).

I hope this explanation proves helpful!

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

Resizing the background while scrolling on a mobile web browser

My website background looks great on desktop, but on mobile (using Chrome) the background starts to resize when I scroll, mainly due to the browser search bar hiding and reappearing upon scroll. Is there a way to prevent my background from resizing? Check ...

Discord bot in Node.js, Remove old embed message upon receiving a slash command

My bot is programmed to send an embed message whenever it receives a /xyz command, and the code looks something like this: client.on("interactionCreate", async (interaction) => { if (!interaction.isCommand()) return; const ...

Deploying an Azure Blob Trigger in TypeScript does not initiate the trigger

After successfully testing my Azure function locally, I deployed it only to find that it fails to trigger when a file is uploaded to the video-temp container. { "bindings": [ { "name": "myBlob", "type&qu ...

The PHP on server could not be loaded by Ajax

Trying to establish a PHP connection, encountering an error and seeking assistance. The error message displayed is as follows: { "readyState": 0, "status": 0, "statusText": "NetworkError: Failed to execute 'send' on 'XMLHttpReq ...

Unable to establish connection with Uploadthing due to a timeout error

I am facing timeout errors while setting up the upload feature. app/api/uploadthing/core.ts import { createUploadthing, type FileRouter } from "uploadthing/next"; import { auth } from "@clerk/nextjs"; const handleAuth = () => { c ...

Facing issues using Angular 5 for PUT requests due to 401 errors

When attempting to update data using the PUT Method in my angular service and express routes, I encountered a 401 error. Here is my service code: //401 makeAdmin(_id) { this.loadToken() let headers = new Headers() headers.append('Authorization& ...

It is more beneficial to utilize jQuery instead of directly accessing form element values using document.formname

Just a quick question. Currently, I am working on some JavaScript for pre or frontend validation. I have a question about which line of code is more effective. I usually use this method: document.formname.forminput.value Instead of: $(& ...

Displaying a date picker within a fragment nested inside another fragment

Encountering a slight issue with implementing a Date picker using a fragment into another fragment. Upon clicking the button to load the Date picker, an error message is logged: java.lang.ClassCastException: com.example.buzzamaid.HomeActivity cannot be ca ...

Adding animation to the initial loading process of a Vue application

I want to include an animation when the application's modules are loading for the first time. I have attempted to use an image, but I am unable to add an animation to it. Adding a CSS file did not always work as expected. I then tried utilizi ...

Sending ng-model as an argument to a function along with another parameter, followed by resetting ng-model

This is an example of my HTML code: <input type="text" name="message" ng-model="senderMessage"> <button type="submit" ng-click="sendSenderMessage(1,5,senderMessage)"> Click Me </button> Here is my JavaScript controller function: $sc ...

Avoiding the repetition of event handlers being initialized after an ajax page load in jQuery

Using a combination of jQuery and PHP, I was able to create a dynamic table featuring real-time searching, column sorting, and pagination. The process involves event handlers in jQuery that trigger ajax calls to reload the table within a specified div elem ...

Utilizing jQuery to Bind AJAX Events without a DOM Element

The documentation for jQuery AJAX Events provides examples that all involve using a jQuery DOM Element to declare a binding, like so: $('.log').ajaxSend( hander ); I am interested in capturing jQuery AJAX Events without the need for a DOM Eleme ...

Can I insert JavaScript code in any location within an HTML file?

Typically, Javascript code is placed in the header section of HTML code. <head> <script type="text/javascript" language="javascript" src="core.js"></script> ... </head> However, I've tested putting Javascript code in the body ...

Dynamically changing the date format within the item-text of v-autocomplete in Vuetify

My current v-autocomplete component is fetching an array of items from GrowthTasks.edges to display. <v-autocomplete label="Start Week" :items="GrowthTasks.edges" item-text="node.growthStartDate" item-value="node.grow ...

Please be patient until setInterval() completes its task

In order to add a dice-rolling effect to my Javascript code, I am considering using the setInterval() method. To test this out, I have come up with the following code: function rollDice() { var i = Math.floor((Math.random() * 25) + 5); var j = i; ...

Developing dynamic 3D cubes

In my latest project, I am attempting to construct a unique structure composed of 3D cubes arranged in a stacked formation. Each of the individual cubes within this structure is designed to be interactive for users. When a user hovers over a cube, it trigg ...

Displaying the focus icon on the active tab using Angular Material

I am currently utilizing Angular material to dynamically generate tabs in my HTML code. I'm trying to display a drop arrow icon on the active or selected tabs, but I am facing some challenges with the implementation. Below is the code snippet I have ...

Adding a line break using the character in a JavaScript template string that is conditionally rendered within a React Bootstrap Button component does not work

One of the React components I've created includes a React Bootstrap Button component. Inside this component, I conditionally render a string based on its toggled state, shown in the code snippet below: <Button size="sm" ...

Preventing an iframe from reloading when transferring it to a new parent using appendChild

I'm looking to relocate an iframe to a different parent element while maintaining the iframe's current state (including scroll position and any entered form data). Unfortunately, when I use appendChild() to move the iframe, it reloads and resets ...

Creating a fresh dataset using a 2D array in node-gdal-async

I'm facing a challenge in JavaScript where I need to create a new dataset from a 2D array. Despite my efforts, I can't seem to figure out the necessary steps from the documentation. It seems that in order to create this new dataset, I must utili ...