如何在三个js中切换渲染目标的纹理？

Question

我需要根据纹理进行一些计算。

我有两个纹理：当前纹理和下一个纹理。下一个纹理的内容取决于当前纹理。

这是我的程序的流程

初始化当前贴图和下一张贴图

let array = new Float32Array(3 * amount);
array = init(array);
currentTexture= new THREE.DataTexture(array ,
    textureSize, textureSize,
    THREE.RGBFormat, THREE.FloatType);

let textureOptions = {
    format: THREE.RGBAFormat,
    type: THREE.FloatType
};
nextTexture= new THREE.WebGLRenderTarget(textureSize, textureSize, textureOptions);

渲染到下一个纹理并将当前纹理和下一个纹理交换为下一个渲染

renderer.render(scene, camera, nextTexture);
let temp = mesh.material.uniforms.currentTexture.value;
mesh.material.uniforms.currentTexture.value = nextTexture.texture;
mesh.material.needsUpdate = true;
nextTexture.texture = temp;

但是我的程序不行，浏览器控制台满是GL ERROR :GL_INVALID_OPERATION : glDrawArrays: Source and destination textures of the draw are the same。我认为这是因为当前纹理和下一个纹理没有成功交换。

我该如何解决？谢谢

Answer 1

您无法修改渲染目标的 texture 字段，因此您需要两个渲染纹理并将一个用作渲染目标，另一个用作网格纹理。您必须通过某种方式为初始渲染目标播种数据，例如首先将全屏四边形渲染到渲染目标。

下面是初始化的示例：

let array = new Float32Array(3 * amount);
array = init(array);

let dataTex = new THREE.DataTexture(array,
    textureSize, textureSize,
    THREE.RGBFormat, THREE.FloatType);

// Create the textures to swap
let textureOptions = {
    format: THREE.RGBAFormat,
    type: THREE.FloatType
};
let currentTexture = new THREE.WebGLRenderTarget(textureSize, textureSize, textureOptions);
let nextTexture = new THREE.WebGLRenderTarget(textureSize, textureSize, textureOptions);

// material with shader to render next frame based on the current texture
const material = /* custom material */; 

// ... init the current texture by rendering a quad with the data texture to seed the texture

然后在交换之前渲染纹理：

// render the animation step
material.uniforms.currentTexture.value = currentTexture.texture;
renderer.render(scene, camera, nextTexture);

// swap the textures
let temp = currentTexture;
currentTexture = nextTexture;
nextTexture = temp;

希望对您有所帮助！

如何在三个js中切换渲染目标的纹理？

how to switch the texture of render target in three js?

textures

three.js