Display one video on multiple objects with the VideoTexture

[Dinkelborg]

Hi,

I'm working on a little side project where I want to switch between two videos with a slider, now while there might be complex shader ways of doing this I was thinking: What if I had a hundred little planes which would build a mesh, on which video 1 was projected and another hundred little planes on which video 2 would be visible and I would just place them in front of each other and fade the planes to the left of my slider out...

So my question would be: Is it possible to display a video on a hundred little planes? 
What I'm looking for is pretty much EXACTLY this: http://threejs.org/examples/#webgl_materials_video

 

 

[Wingnut]

Hahaha.  Cool idea.  You're going to build a 3D video effects switcher, eh? 

 

Ok, here's my thoughts.  I know NOTHING about "submeshes" but they appear to be a way... to make a single plane... from many smaller planes... and the video could map-out across it as if it were a single plane.  Maybe.

 

Yeah, if you built two back-to-back large planes, each made-up of many subMesh, there should be further fun available.  One video in the back, one in the front, and when you want to switch videos, just rotate all the subMeshes (on both big-screens)... 180 degrees.  Yay!  And... fancy positioning and rotating will be within reach.  Be forewarned, though.  I believe subMesh require some unique code in order to rotate or position them individually.  I think you must "transform" the 4 points of each subMesh plane. 

 

If I may quote deltakosh, I think he called them "quads" once, when talking with me about the BJS particleSystem.  The speed of Babylon particles is probably the same speeds you can expect when rotating and/or translating YOUR subMesh (That's without the video playing. Video slows everything a bit). 

 

I suppose the BJS particleSystem could be called a quad manager, and there are coding techniques worth stealing, in there. 

 

Your "changing z-order" idea would work, I believe.  Also you could drop the .alpha on one video, while raising it on the other ("dissolve").  And... "wipes" such as when one screen slides-in from the side and has a physics collision with the other screen, which then skids-off the edge of the ground and falls forever via scene gravity!  FUN! 

 

Dissolves and wipes... some of the earliest and still best... video effects.  yuh yuh yuh.

 

I believe Fenomas made this playground demo which is one of the smoothest subMesh operations I have seen.  With very little code, he used CreateBox, grabbed its vertexData, disposed the box, and then used that data to make two subMesh boxes.  Two geometries on a single mesh, just that easy.  Pretty nice codin'.

 

Yeah, subMeshes, I think that might work.  I'm sure others will have suggestions.  Your idea sounds interesting and fun.  Keep us posted on your experiments, if you do some.  Be well.

[RaananW]

Well, the three js demo is actually changing the UV Vertex data of the geometries!

So, let's do that too :-)

 

http://www.babylonjs-playground.com/#DXCI8#2

[Dinkelborg]

Yes I was gonna try the same thing! Awesome RaananW!
Could you maybe explain a little more of the background behind these commands?

 

videoPlane.setVerticesData(BABYLON.VertexBuffer.UVKind, [0, 0, 0.5, 0, 0.5, 1, 0, 1]);

videoPlane2.setVerticesData(BABYLON.VertexBuffer.UVKind, [0.5, 0, 1, 0, 1, 1, 0.5, 1]);

It looks like the uv-array requires values inbetween 0 and 1 could you elaborate how those come to be?
Thanks in advance.

[RaananW]

Of course - 

a plane has 4 points, represented using the PositionKind vertex data. those 4 points have also their correlating UV coordinates, each with U and V coordinates. U = X axis of the texture, V = Y axis of the texture.

UV start at 0 (think 0% of the entire texture width/height) and end at 1 (100% of the texture's width and height):

 

 

A standard plane will have the following: (each color a different point

Positions : [-1,-1,0, 1, -1, 0,  1, 1, 0, -1, 1, 0]

UVs: [0, 0, 1, 0, 1, 1, 0 ,1]

 

What I did is say that the X (U) coordinates of the texture should start at 0 and end at 0.5 (for the first plane), and start at 0.5 and end at 1 (for the 2nd plane). Y should stay the same, as I only have two planes and they are on the X axis.

You can also do that with more than two planes, both vertical and horizontal. You could calculate the new size each axis will have for each plane ( uSize = 1/ number of planes on the X axis, vSize = 1/ number of planes on the Y axis) and then set the coordinates to each plane individually.

I am saying plane, as it is the simplest to explain with planes. BOX, Sphere or each other Mesh/Geometry have their own UV and Position coordinates, but eventually all work the same.

 

 

BTW - The best solution would actually be to use uOffset and vOffset at the texture level, BUT what you want to do cannot be done, as those are texture variables, you will have to set a new texture to each and every plane, which won't really work with a film.

[Dinkelborg]

Thanks a lot! 
That was a very good explanation