brianchirls / Seriously.js

A real-time, node-based video effects compositor for the web built with HTML5, Javascript and WebGL
MIT License
3.87k stars 354 forks source link

Three.js Source Broken #178

Closed eulphean closed 1 year ago

eulphean commented 1 year ago

Hi @brianchirls - thanks a tonne for making this library. I'm using this for building a real-time av system for an art performance. I see you haven't been very active on this for a while. I really hope somebody could give some help on this question. I have been trying to get the three-source.js example to work. But since three.js has been updated, the old seriously.three.js source is broken.

I have added a fix for it and the source is now created successfully. In the options parameter, I send the renderer that helps extract the webgl texture, which was causing the source to be broken before.

Line 31 in seriously.three.js

var texProps; 
if (source) {
  texProps = options.properties.get(source.texture);
}
var texture = texProps.__webglTexture,

I also had to change the way we setRenderTarget in three-source.html example, since the render() doesn't support the renderTarget anymore.

renderer.setRenderTarget(rtTexture);
renderer.render(scene, camera); 
renderer.setRenderTarget(null);

However, I see buffer overflows in the console. And the renderer eventually crashes. I'm not sure what is the root cause here. if somebody can give any hints or directions, I'd really be thankful.

Screen Shot 2022-12-02 at 12 13 56 AM

eulphean commented 1 year ago

I referred to the three-target.js example and got a hint from there. We need to reset the state of renderer before we re-render the three.js scene. This is the order in which I do rendering and this fixed it.

    renderer.setRenderTarget(targetTexture);
    renderer.clear();
    renderer.render(scene, camera); 
    renderer.setRenderTarget(null);

    // Reset state to avoid buffer corruption.
    renderer.resetState();
    source.update();

The critical fix was in seriously.three.js, which I mentioned above. That allows us to extract the texture from the renderTarget and hand it off to seriously to do its magic.