multiple video texture in Three.js geometries - workflow?

[cindyloo]

how do we go from having a canvas seriously.target to wrapping a geometry with that canvas and/or multiple canvases (as in videoTextures)?

for any geometry, am guessing I could create a Three.canvasTexture from Seriously. I assume that playing the Seriously.source that the canvas would update...

It seems to get a little difficult if I want to have multiple video textures on one cube. Does that mean for every video face of the cube, I would need to have a corresponding canvas (ostensibly hidden elsewhere on the page)?

[cindyloo]

answered my own question. so, create a canvas for every modified video, and pass that as a texture into the material mapping. I need to do something to keep track of the source video to tell it to play, but other than that, works great!

[brianchirls]

That will work, but it's not the optimal solution. You don't need to create separate canvases or separate instances of Seriously. Instead, refer to this example to see how you can have Seriously render to a target node that wraps around a THREE.WebGLRenderTarget object. That way, three.js and Seriously will share a single canvas with one WebGL context. It'll use less memory and you won't have to risk unnecessary frame copies back and forth between GPU and CPU.

http://brianchirls.github.io/Seriously.js/examples/demo/threejs-target.html

[cindyloo]

okay... much better solution. To understand better, Seriously is 'piggy-backing' off of Three's webglrenderer - (creating a target node that is the previous renderTarget but with the new/modified vertex/frag buffers from the effects)- in essence sharing the pipeline down to the graphics card? will dig deeper but let me know if there's any awesome tute/explanation I should be checking out. tx!