1
votes

I am using three.js hosted on node.js. I am using it with a camera that can generate opengl textures as output frames. I would like to use this live stream of textures within three.js. I have been able to create shared contexts between the camera and three.js, and i can confirm that the texture exists in both the camera context and the three.js context. I am not quite sure tho how to get three.js to respect an externally maintained texture. The existing videotexture object is not the right way, it copies over framedata from a browser dom object, and i would like to use the camera-generated texture directly.

Since this is akin to the threejs render-to-texture support, only with the rendering happening outside threejs, I tried to modify that code to support external textures, but it seems like a bit of a slog.

I'm currently thinking I should implement a variant of the shadermaterial object which understands how to work with an externally generated texture, but was wondering if there is a better path.

1

1 Answers

0
votes

OK I have figured this out. The steps that one needs tot ake

  • First, create your GL contexts prior to creating your threejs renderer, using GLFW calls or the equivalent on your target platform
  • Then, create a material with a mapped texture in threejs as part of your threejs scene creation. I am using MeshBasicMaterial with a mapped jpg file, but whatever.
  • Now create your webglrenderer using one of the gl contexts you created earlier as an argument
  • Perform one rendering pass. this will instantiate all the webgl textures and programs and attach them to your materials.
  • now look at the material you created earlier, the map attribute will contain a webgl texture index. you can pass this off to your GL code in the other context and have it render to this texture, and the rendered results will show up in your threejs material.