pythreejs icon indicating copy to clipboard operation
pythreejs copied to clipboard

Render to texture

Open zalavariandris opened this issue 6 years ago • 4 comments

With threejs is actually pretty simple way to render to a texture instead of the canvas.

Basically all you have to do is provide a render target to the render function: renderer.render(scene, camera, renderTarget)

this ink explains it in more detail: https://gamedevelopment.tutsplus.com/tutorials/quick-tip-how-to-render-to-a-texture-in-threejs--cms-25686

Unfortunately this is missing from the pythreejs api. I was trying to mess around with the send function, to send a WebGLRenderTarget along with the camera and the scene, but it did help. I don't really know what the send function exactly does to be honest, buy I guess its able to send python objects to javascript. here is my attempt:

bufferTexture = WebGLRenderTarget(width=100, height=100)
content = {
    "type": "render",
    "scene": to_json(scene, None),
    "camera": to_json(camera, None),
    "renderTarget": to_json(bufferTexture, None)
}
renderer.send(content)
renderer.render(scene, camera)
display(bufferTexture)

Is there a simple way to make this working? I would really love to use this feature along with jupyter notebook. Thanks for yout help!

zalavariandris avatar Nov 03 '18 17:11 zalavariandris

I don't think the logic for WebGLRenderTarget is implemented fully. However, it would be a nice feature to have. I think it would work well with the event driven nature of widgets as well. Putting it on the TODO list 👍

vidartf avatar Nov 05 '18 17:11 vidartf

seems like the config file unfortunately has no properties for WebGLRenderTarget at all. I am not sure how the autoconfig works, at least other classes have a todo attribute. I guess a lot is missing to include this feature, but I'm not sure. Do you have an idea where to start?

https://github.com/jupyter-widgets/pythreejs/blob/97753f479c56901743d53bd2836d8b0d5b08084b/js/scripts/three-class-config.js

zalavariandris avatar Nov 12 '18 14:11 zalavariandris

From looking quickly over the relevant parts, these are the main steps I see:

  • Specify the relevant properties of the WebGLRenderTarget class in the the three-class-config file.
  • Modify the render() function of WebGLRenderer. On the python side it needs to take an optional target parameter. It also needs to handle this in the onCustomMessage handler on the JS side.

vidartf avatar Nov 12 '18 14:11 vidartf

I'm guessing that the width, height and texture properties are the minimum needed properties for the WebGLRenderTarget class.

vidartf avatar Nov 12 '18 14:11 vidartf