THREE.js 渲染目标纹理不会在不同的场景中绘制 [英] THREE.js Render target texture will not draw in a different scene

问题描述

因此，如果任何 THREE.js 专业人士能够理解为什么我不能将 WebGLRenderTarget 用作另一个场景中飞机的材质，我会非常高兴.

So if any THREE.js pros can understand why I can't get the WebGLRenderTarget to be used as a material for a plane in another scene I'd be pretty happy.

现在的工作原理是我使用透视相机创建一个场景，该场景渲染一个简单的平面.这发生在 Application 对象中.

How it works right now is I create a scene with a perspective camera which renders a simple plane. This happens in the Application object.

我还有一个 WaveMap 对象，它使用另一个场景和正交相机，并使用片段着色器在另一个占据整个屏幕的四边形上绘制 cos(x) * sin(y) 函数.我将其渲染为纹理，然后创建使用该纹理的材质.

I also have a WaveMap object that uses another scene and an orthographic camera and using a fragment shader draws the cos(x) * sin(y) function on another quad that takes up the entire screen. I render this to a texture and then I create a material that uses this texture.

然后我传递要在 Application 对象中使用的 Material 以在我提到的第一个平面上绘制纹理.

I then pass that Material to be used in the Application object to draw the texture on the first plane I mentioned.

问题是由于某种原因，我可以在 WaveMap 对象中使用正交相机的场景中使用它，但在传递材质后无法在 Application 对象中使用透视相机的场景中使用它.:(

Problem is for some reason I could get this to work in the scene with the orthographic camera inside the WaveMap object but not in the scene with the perspective camera in the Application object after passing the material over. :(

我试过简单地传递一个带有纯色的简单材质，这可行，但是当我尝试传递使用 WebGLRenderTarget 作为纹理的材质时，它不再显示.

I've tried simply passing a simple material with a solid color and that works but when I try to pass over a material which uses a WebGLRenderTarget as a texture it doesn't show up anymore.

https://github.com/ArminTaheri/rendertotexture-threejs

推荐答案

您需要克隆要由两个不同渲染器渲染的任何材质/纹理.

You need to clone any material/texture that you want to render by two different renderers.

var materialOnOther = originalMaterial.clone();

在 r72 之前，您需要强制更新纹理的图像缓冲区，如下所示:

Prior to r72 you needed to force the image buffers for the textures to be updated like so:

materialOnOther.uniforms.exampleOfATexture.value.needsUpdate = true;

这篇关于THREE.js 渲染目标纹理不会在不同的场景中绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！