CODEWITHSUNDEEP
three.jsshader
Thierry L.
Thierry L.

Reputation: 31

How to get Image (or Texture) generated by a fragmentShader

I'am using Three.js 3D library and I would like to use a fragmentShader to generate a THREE.Texture or THREE.Image, because its far faster in glsl than in typescript.

So I have a square Plane with a ShaderMaterial. My fragmentShader makes an image appear on the plane and I would like to get/extract this image as a Texture (or Image) so I can reuse it as a static Texture elsewhere. Is there a way to do this ?

const tileGeometry = new THREE.PlaneBufferGeometry( 500, 500 );
const tileUniforms = {};
const tileMaterial = new THREE.ShaderMaterial({
  uniforms:       tileUniforms,
  vertexShader:   this.shadersService.getCode('testVertShader'),
  fragmentShader: this.shadersService.getCode('testFragShader'),
  side:           THREE.FrontSide,
  blending:       THREE.NormalBlending,
  wireframe:      false,
  transparent:    true
});
const tileMesh = new THREE.Mesh( tileGeometry, tileMaterial );
this.scene.add( tileMesh );

I know that a possible solution was to use a WebGLRenderTarget but perhaps there is a more straitforward solution now ?

Upvotes: 2

Views: 60

Answers (1)

Mugen87
Mugen87

Reputation: 31026

I know that a possible solution was to use a WebGLRenderTarget but perhaps there is a more straitforward solution now ?

No, you have to render into a render target and then use its texture property with another material.

Upvotes: 2

Related Questions