如何获取片段着色器生成的图像（或纹理）答案

【问题标题】：How to get Image (or Texture) generated by a fragmentShader如何获取片段着色器生成的图像（或纹理）
【发布时间】：2021-08-02 20:17:26
【问题描述】：

我正在使用 Three.js 3D 库，我想使用 fragmentShader 来生成 THREE.Texture 或 THREE.Image，因为它在 glsl 中比在 typescript 中快得多。

所以我有一个带有 ShaderMaterial 的方形平面。我的 fragmentShader 使图像出现在平面上，我想将此图像作为纹理（或图像）获取/提取，以便我可以在其他地方将其作为静态纹理重用。有没有办法做到这一点？

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 );

我知道可能的解决方案是使用 WebGLRenderTarget，但现在也许有更严格的解决方案？

【问题讨论】：

标签： three.js shader

【解决方案1】：

我知道可能的解决方案是使用 WebGLRenderTarget，但现在也许有更严格的解决方案？

不，您必须渲染到渲染目标中，然后将其texture 属性与另一种材质一起使用。

【讨论】：