Three.js - is there a simple way to process a texture in a fragment shader and get it back in javascript code using GPUComputationRenderer?

Question

I need to generate proceduraly in a shader a texture and get it back in my javascript code in order to apply it to an object. As this texture is not meant to change over time, I want to process it only once.

I think that GPUComputationRenderer could do the trick but I don't figure out how and what is the minimal code that can achieve this.

Answer 1

I need to generate proceduraly in a shader a texture and get it back in my javascript code in order to apply it to an object.

Sounds like you just want to perform basic RTT. In this case, I suggest you use THREE.WebGLRenderTarget. The idea is to setup a simple scene with a full-screen quad and a custom instance of THREE.ShaderMaterial containing your shader code that produces the texture. Instead of rendering to the screen (or default framebuffer), you render to the render target. In the next step, you can use this render target as a texture in your actual scene.

Check out the following example that demonstrates this workflow.

https://threejs.org/examples/webgl_rtt

GPUComputationRenderer is actually intended for GPGPU which I don't think is necessary for your use case.