Newbie question : Video texture repeat ?

[meteoritool]

Hi,

 

That question might sound 'newbie' to you but I can't seem to find a way to repeat a video texture :

 

Standard material usually repeat themselves in this example :

 

var box = BABYLON.Mesh.CreateBox("boxGeometry", 4, scene, true);

box.material = new BABYLON.StandardMaterial("boxMat", scene);

box.material.diffuseTexture = new BABYLON.Texture("textures/texture.jpg", scene);

box.material.diffuseTexture.uScale = box.material.diffuseTexture.vScale = 5;

 

in this example, 'texture.jpg' is repeated.

 

Now when I use a video texture, the 'video.mp4' is repeated only once, and I can't find the way to have it repeated :///

 

Anyone knows ???

 

Thx a lot !

[Wingnut]

Hi M!  I have no solution, but I made a playground that shows the situation.  http://playground.babylonjs.com/#1ZLFXJ

I may have more information, later.  But there are nearby people who are much more experienced than I, and they might already know what the story is.  Stay tuned. 

PS: I had a little problem getting the video to load when I first visited our videoTexture playground demo, found in our Advanced Textures tutorial.  (It is the playground demo that I modified to make my test demo).  Maybe the load time was a little slow and I got impatient.  It eventually worked.    Would everyone please report any problems with the video loading in these demos?  Thanks.

[meteoritool]

Here is the BABYLON Playground example with a video texture :

http://playground.babylonjs.com/#EKFLA#13

And here what happens when trying to repeat the video material with .uScale and .vScale :

http://playground.babylonjs.com/#EKFLA#52

[Wingnut]

Well M, I've been looking this over... and I have discovered nothing.

 

http://www.babylonjs-playground.com/#1F1POH

 

As you can see by the above demo,  DynamicTextures also have this anomaly.

 

Both kinds of textures call scene.getEngine().createDynamicTexture()  [approx the same].

 

Maybe it is not possible.  I have been known to be wrong quite often, though.  I have seen many playground demos, but I can't remember ever seeing a tiled (u/v/w scaled) dynamicTexture or videoTexture. 

 

One option is to use video processing software such as Adobe After Effects or Premiere... to tile the video before using it in webGL.

 

Hopefully, smarter people than I will have some comments, soon.

[meteoritool]

Oh sorry for repeating I should've read more carrefully ;-)

 

I guess videoTexture repeating is not possible then :-/

 

Kudos to all contributors ! I hope this becomes possible in the future ! (I wish I could help but I'm not a developer alas ...)

[Wingnut]

Hi again!

   Well, there's another way to do this, using createInstance().  It's not uScale or vScale, but it gets the job done, I guess.

http://playground.babylonjs.com/#1FPL2Y#5

And, it's not one mesh anymore, it's 25 meshes (amount adjustable).

Tile size is set in line 34.  Lines 26-28 are also very important, of course.

If you would like to treat this video wall as a single object, you can parent all the video planes to an invisible "gizmo" and then rotate, position, and scale that invisible gizmo... and the video wall will follow.  (similar to "grouping")  http://playground.babylonjs.com/#1FPL2Y#6

Merging the meshes (into a single mesh) might also work, but I don't know much about that activity.

Party on!

[GameMonetize]

This is because the texture is not power of 2 so if you use a square video texture , this should work

[dbawel]

I have had power of 2 textures repeat - depending on the browser.  However, there is no video standard for power of two resolution.  I would go to the babylon feature request to ask if this is possible.  Probably not at this time due to the constraints of WebGL.

[Wingnut]

Thanks guys! 

http://www.katsbits.com/tutorials/textures/make-better-textures-correct-size-and-power-of-two.php  (great little tutorial about power of two textures)

For those who enjoy pain (like me), I present a PG from hell... http://playground.babylonjs.com/#1ZLFXJ#10

I "hijacked" the framework's VideoTexture class (lines 4-74) and the engine's createDynamicTexture function (lines 76-205)... putting both into the playground code.

Then I tried a bunch of forcing in lines 26-36 area.  I tried to set _this.video.videoWidth/Height, so that the createDynamicTexture() in line 46 had some forced values, but the alert told me that the values weren't holding (or I was screwing-up the testing).

Then I tried line 47... forcing some power-of-two numbers into the first two parameters, and setting the final parameter (called forceExponantOfTwo) to true, and that failed.

In lines 36-44, I removed the conditional, and tried forcing BABYLON.Texture.WRAP_ADDRESSMODE (as opposed to CLAMPMODE) and that didn't appear to do anything.

This was all before the professionals showed-up.    Doing demented torture tests like these... is how I learn, sometimes.  So, I thought I would provide this messy playground and tell of the things I didn't learn by working with it.  heh.  This way, others can share in my enjoyable pain, if they wish. 

Originally, I was only going to provide a test playground, and then get out of the way, because this issue was/is WAY over my head.  But then I said "Heck, the water is well over my head, I might as well inhale a lung-full, and go for the full drowning" ... and so I did.  But we all know that "over my head" and "drowning" is just a temporary condition, and quite changeable (time being a factor).  A person has to WANT IT!   We have to SEEK air.  That's how the pros became pros.

The framework code is amazing.  Our core coders dance-around the webGL limitations and make it look easy, but it's not.  They check for this, check for that, SO MUCH compensating for webGL limitations... trying to make it all "just work", no matter what.  Amazing!  I don't know how the BJS super-coders do it... I really don't.  So, I must keep learning until I do.

I agree 100%, Meteor.  Kudos to all contributors!  Someday Meteor, you and I will be qualified to do framework contributions... and maybe it starts with hijacking framework code into playgrounds, turning knobs, and watching what happens.  I crashed my FF browser about 10 times while testing tweaks and forced settings, yesterday.  So... save often, and have fun.

Thanks again for the power-of-two advice/tips, guys.  Party on!

[meteoritool]

Okay so I tried with a square video, didn't work, then formatted the same video to a power of 8 size (1024 x 1024) and IT WORKED !!!!

 

The problem is officially solved !!!   (for me at least)

 

Thanks for your help, a lot !

 

This was useful : http://www.katsbits.com/tutorials/textures/make-better-textures-correct-size-and-power-of-two.php

 

@Wingnut I don't enjoy pain that much, and I enjoy BABYLON.js a lot for that matter 

[dbawel]

The most efficient textures should be true power of 2 textures such as 64X64, 128X128, 256X256, etc.  As for video looping on a plane, I generally use 512X512 or 1024X1024 - since you don't generally need any higher resolution for todays devices - yet.