Receive altered 3-dimensional points

I am currently working with a webgl shader in three.js that is responsible for generating a model using a skeleton and a SkinnedMesh (example image can be seen below).

https://i.sstatic.net/vZp8B.png

The issue I'm facing is that there doesn't seem to be a straightforward way in three.js to access the vertices produced by the shader computation. I need these vertices to save the output as a 3D object file on the client side, such as .obj or .stl formats.

Unfortunately, I am unable to share the source code, but I believe this is a common problem in webgl development. Is there any method or workaround to extract these vertices directly from the buffers used by webgl or through alternative means?

Answer №1

Obtaining the transformed vertices is not a straightforward task

One approach involves replicating the mathematical operations done by the shader in JavaScript. Refer to this response for more information

Alternatively, you can explore utilizing transform feedback to allow the GPU to output the calculated results back to a buffer. It's important to note that transform feedback is only supported in WebGL2 and not in WebGL1. Additionally, as of r123, three.js does not provide native support for this functionality. Modifying the source code of three.js would be necessary to incorporate transform feedback capabilities.

You may find a brief illustration of using transform feedback to write values in a non-three.js context here

Another consideration is the potential performance impact when retrieving vertex values from the GPU to JavaScript using gl.getBufferSubData, which is known to be slower. The feasibility of this method depends on your specific requirements.

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

Is your website's Google analytics event tracking not giving you the feedback you need

Here's what I'm trying to achieve in the code below: Set up Google Analytics on the page Add a jQuery click event based on specific query strings and domain characters Trigger a Google Analytics tracking event with the click event Implement cod ...

The onload function in jQuery is not functioning properly when the page is refreshed

I'm just starting out with jquery and I have a simple project in mind. The idea is to have two pictures stacked on top of each other, but I want the page to start showing the second picture first (at a specific scroll point). Then as the user scrolls ...

Encounter the following issue: Unable to access property '0' due to being undefined

After restructuring my entire Javascript code, I managed to solve the problem with asynchronous calls. However, an error occurs when editing a repair and the server prompts the client for repair information again. The error message displayed is "Uncaught ...

Utilize the identical function value within a Vue template

In my template, I am encountering a recurring situation where I need to retrieve a value from a function. This function takes parameters from the template (such as the index of a v-for loop) and returns a result that is then displayed on the template. The ...

The timestamp is currently displaying as 2014-11-02T05:00:00.000Z rather than the expected 2014-11-02 00:00:00

Issue: The SELECT * query is returning dates in the wrong format. I am using the mysql2 module to run connection.query() and pass data to a server-side variable, then accessing it on the client-side with AJAX. router.post('/applicants', functi ...

The jQuery code continues to loop endlessly

My current script includes a fadeIn effect on a div when the user scrolls 200px from the top, along with custom circle animations. While it works, I admit it's not the most elegant solution as I had to piece together different scripts to make it funct ...

Converting plain text to a JSON object using JavaScript: A step-by-step guide

Having trouble converting plain text into JSON value in Javascript. Need some assistance. Actual string obtained from a command line executed through Javascript: Net State: OFFLINE Net Err: Net Time: 0 Current Sample: 0 Sample #0 Sample Role: O ...

Continuous loop of Vue countdown timer

Hey there! I'm currently working on implementing a countdown timer, but I keep encountering a console error that says 'You may have an infinite update loop in a component render function.' It seems like something needs to be adjusted. expor ...

What could be causing this error in the jQuery AJAX post request, even though the post was actually successful?

I created a blogging platform using Laravel 8. Currently, I am focused on implementing comment submissions and replies using jQuery (v3.5.0) AJAX. This is the function for adding a comment: public function add_comment( Request $request ) { $rules = [ ...

using hover/click functionality with a group of DIV elements

I have a group of DIV elements that I want to apply an effect to when hovering over them with the mouse. Additionally, when one of the DIVs is clicked, it should maintain the hover effect until another DIV is clicked. <div class="items" id="item1"> ...

Function is not triggered in React component

When the LoginPage calls AuthForm, the structure is as follows: function mapDispatchToProps(dispatch: Redux.Dispatch<any>) { return { signUpWithEmail: function(email: string, password: string) { // bla bla }, }; } handleForm ...

What are some methods to make sure that functions in AngularJS do not run at the same time

I am new to the world of JavaScript and I have encountered a problem with one of my functions. The function is designed to retrieve cached resources, but if the resource is not found in the cache, it makes a call to the back-end. The issue arises when thi ...

What purpose does the 'shape' function serve within yup?

While many examples of Yup utilize the shape method, I have found the documentation to be somewhat unclear on why this approach is preferred and what exactly it accomplishes. Could someone clarify the distinction between a schema constructed with Yup.obje ...

The HTML view is unable to display the CSS style due to a MIME-type error

I have recently developed a very simple Express app that is supposed to display a single view called home.html from the view directory. Although the home.html file is being shown, none of the CSS styles I added seem to be loading. The console is throwing t ...

Execute function periodically using Vue.js

I have a requirement to update data periodically by calling a function in my Vue.js application. I am looking to call the 'listar()' method every 30 seconds and store the response in a property of vue js. If anyone can guide me on where to locat ...

Issue with wireframe display on video texture in three.js

Trying to apply a video texture onto a geometry in three.js using a video texture, but encountering an issue where it only displays correctly when the wireframe is set to true on the material (video shows with wireframes). When switching it to false, only ...

Sort an array of objects by matching string properties with elements from another array

If the array of objects is represented by rows and wantedBrands consists of an array of strings, how can I achieve a specific result? let rows = [ { name: "Russia", brands: ['XM1', 'XM2', 'XM3'] }, ...

Enhance user interactivity by incorporating dynamic checkboxes, radio buttons, checkbox groups, and radio button groups using Ext

Hello to all the amazing folks at Stack Overflow! I've tried searching for a solution to this issue on Stack Overflow, but I couldn't find anything helpful. Here is my model: Ext.define('soru', { extend: 'Ext.data.Model' ...

Implement a recursive approach to dynamically generate React components on-the-fly based on a JSON input

My goal is to develop a feature similar to Wix that allows users to drag and drop widgets while adjusting their properties to create unique layouts. To achieve this, I store the widgets as nested JSON documents which I intend to use in dynamically creating ...

Looking for an alternative method to compare strings in node.js without causing a call stack crash with if-else statements

I am encountering an issue with a large list of strings that need to be compared to set a variable if a match is found. I am attempting to do this within a node.js express app. However, when I try to run this comparison within an if/else statement in a f ...