Jump to content

Newbie question : Video texture repeat ?


Recommended Posts



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 !

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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




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.

Link to comment
Share on other sites

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.


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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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  ;)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...