如何通过 three.js 使用外部生成的纹理

Question

我正在使用托管在 node.js 上的 three.js。我将它与可以生成opengl纹理作为输出帧的相机一起使用。我想在 three.js 中使用这个实时纹理流。我已经能够在相机和three.js 之间创建共享上下文，并且我可以确认纹理存在于相机上下文和three.js 上下文中。我不太确定如何让 three.js 尊重外部维护的纹理。现有的 videotexture 对象不是正确的方法，它从浏览器 dom 对象复制帧数据，我想直接使用相机生成的纹理。

由于这类似于threejs 渲染到纹理支持，只有在threejs 外部进行渲染，所以我尝试修改该代码以支持外部纹理，但这似乎有点困难。

我目前正在考虑我应该实现 shadermaterial 对象的变体，它了解如何使用外部生成的纹理，但想知道是否有更好的路径。

Answer 1

好的，我已经想通了。需要采取的步骤

• 首先，在创建 threejs 渲染器之前创建 GL 上下文，使用 GLFW 调用或目标平台上的等效项
• 然后，在threejs 中创建一个带有贴图纹理的材质，作为您的threejs 场景创建的一部分。我正在使用 MeshBasicMaterial 和映射的 jpg 文件，但无论如何。
• 现在使用您之前创建的 gl 上下文之一作为参数创建您的 webglrenderer
• 执行一个渲染通道。这将实例化所有 webgl 纹理和程序并将它们附加到您的材料中。
• 现在看看你之前创建的材质，贴图属性将包含一个 webgl 纹理索引。您可以将其传递给其他上下文中的 GL 代码，并将其渲染到此纹理，渲染结果将显示在您的 threejs 材质中。