在 THREE.js 中的顶点着色器之后获得变换的顶点位置 [英] get transformed vertices positions after vertex shader in THREE.js

问题描述

我正在更改顶点着色器中某些顶点的位置，但我找不到将这些新更新的顶点位置放回到 js 中的方法(我目前正在使用 THREE.js:网格顶点的顶点位置)始终保持不变).我找到了这个链接 Retrieve Vertices Data in THREE.js，但 glGetTexImage 没有t 存在于 webgl 中(我也对这种浮点纹理方法持怀疑态度).感谢您的帮助！

I am changing the positions of some vertices inside a vertex shader but i can't find a way to get those new updated vertices positions back inside js (i'm currently using THREE.js : the vertex position of my mesh's vertices always remains the same). I found this link Retrieve Vertices Data in THREE.js, but glGetTexImage doesn't exist in webgl (and i'm quite skeptical about this floating-point texture method as well). Thanks for your help !

推荐答案

如果从缓冲区读取数据是唯一的问题，你可以这样做:

If reading the data from the buffer is the only problem, you can do that like this:

//render the pass into the buffer
renderer.render( rttScene, rttCamera, rttTexture, true );

// ...


//allocate an array to take the data from the buffer
var width = rttTexture.width;
var height = rttTexture.height;
var pixels = new Uint8Array(4 * width * height); 


//get gl context bind buffers, read pixels
var gl = renderer.context; 
var framebuffer = rttTexture.__webglFramebuffer;
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);        
gl.viewport(0, 0, width, height);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

WebGL - 从渲染缓冲区读取像素数据

但是设置起来很复杂，读取纹理可能很慢，为什么不在 cpu 上做呢?

But setting all this up is complicated, and reading the texture might be slow, why not do this on the cpu?

这篇关于在 THREE.js 中的顶点着色器之后获得变换的顶点位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！