Get transformed 3D Vertices

Question

I've got a webgl shader which generates a model for me based on three.js using a skeleton and a SkinnedMesh (see example image below).

The problem with that is that three.js does not to my knowledge provide any option to get the vertices resulting from the shader computation used. Is there any way of getting these vertices directly from the buffers used by webgl or through any other means as I need them to save the result as a 3d object file on the client side (e.g. as an .obj or .stl).

I unfortunately cannot provide the source code but I hope as this is a fairly general question regarding webgl this might be enough information to help me?

Answer 1

There is no "easy" way to get the transformed vertices

One method is just to run the same math in JavaScript that the shader itself is doing. See this answer

The other would be to try to use transform feedback to get the GPU to write the results of doing the math back to a buffer. Transform feedback only works in WebGL2 not WebGL1 and further, three.js, at least as of r123 has no built in support to help you. Adding support will require modifying the source of three.js as in order to use transform feedback you must call some functions when compiling and linking shaders and AFAIK there are no hooks in three.js to do that so you'd have to modify the source. In particular you need to call gl. transformFeedbackVaryings before calling gl.linkProgram in order to tell WebGL which varyings you want it to write out.

There's a short non-three.js example of writing out values using transform feedback here

One more caveat is that if you need to read the vertex values back to JavaScript you'll need to call gl.getBufferSubData which is considered slow. Whether it's too slow depends on your needs.