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中切换渲染目标的纹理？

1 个答案: