Multiple problems using VideoTexture

[V!nc3r]

So i try to bypass this 3dsmax issue, doing an export from Blender with just the plane for the tv screen.

For this, is use ImportMesh :

BABYLON.SceneLoader.Load('', 'mainScene.babylon', engine, function (scene) {
	BABYLON.SceneLoader.ImportMesh('','','tvScreen.babylon', scene, function(){});

My object is in the right place, with its default texture correctly mapped :

With the debug layer and Clickable labels checked, i see its name, which is tv01.ecran_001. If i edit with notepad++ tvScreen.babylon, its the right name here too.

But ! When i write :

console.log(scene.getMeshByName("tv01.ecran_001"));

it returns null.

Of course, if i do this

scene.getMeshByName("tv01.ecran_001").material.diffuseTexture = new BABYLON.VideoTexture("videoTV", ["assets/videos/clip_01.mp4"], scene, false);

nothing appends.

Where i'm wrong ?

 

[V!nc3r]

Ok i have the solution !

I have to assign the video texture in the ImportMesh on Success function :

BABYLON.SceneLoader.ImportMesh('','','videos.babylon', scene, function(meshArray){
	meshArray[0].material.diffuseTexture = new BABYLON.VideoTexture("videoTV", ["assets/videos/clip_01.mp4"], scene, false);
});

 

[V!nc3r]

@dbawel, you say earlier in this thread that you have spent some times on video codec issues. Do you have a
favorite codec that you use in many case ?

[dbawel]

Hi @V!nc3r -

Although your question appears simple, the vast differences between devices, platforms, and especially browsers complicates video playback dramatically; especially if you're looking for a single format to support all these factors - as well as legacy. There are a couple of file issues at play here - primarily video codec and video format - and both need to be considered for playback compatability accross multiple platforms, browsers, and devices. So I'll just pass on some of my own personal preferences based on experience - and assuming that WebGL is the target API.

FYI - the following video and audio formats and codecs, as well as a few conversion applications and settings, are what I've personally found to be the most compatible and efficient for use in WebGL; and very dependant on your scene, your target device and display, rendering resolution, CPU speed and bandwidth, etc. However latency, Major GC, and other dependencies should also be considered and handled on a case by case basis.

So these days on most any new device, I would say that the mp4 file format is likely the most compatible for both video and audio media convergance and playback; at least with all things considered. And these "things" to consider are video quality, audio quality, file size and compression, and optimization(s). Whereas performance is a completely different issue due to the potential for high compression, and there can often be considerable latency (delay) in playback due to the time required to decompress and play, memory management, processing time, and file header definitions and header meta data. In addition, there are many video and audio codecs you can use to compress and decompress mp4 files such as DIVX, NERO, Quicktime, Xvid, and many others (including X264). But this can already be very confusing, so I'll just stick to what I recommend - which is to use the X264 encoder which is standardly known as HEVC or High Efficiency Video Coding and listed as H.264.

Keep in mind that H.264 is primarily used today for high quality / high compression of 2D video (and audio.) However, one of the newest HEVC video standards is listed as H.265 and was created as a standard to handle high quality / high compression 3D video (and audio) files. But the reason why the H.265 compression standard is so very useful, is that in recent versioning of this format, this standard was expanded to support 4K and above video (and HQ audio), where this wasn't specifically supported in the past. So now with the release of 4K and above displays, I recommend that you should consider using the H.265 standard for the compression / de-compression of 4K and above video as well as high quality audio.

So for Windows as well as the support of IOS I recommend the MP4 file format using the H.264 compression standard for HD video and HQ audio, and using the MP4 file format using the H.265 compression standard for 4K video and HQ audio.

This is not the case for the Android Tablet, Ipad, Iphone, Android Smartphone, and other tablets and smartphones including Samsung, Sony, Nvidia, and most all others. For these devices, MP4 video/audio files will almost always slow loading performance to add a substancial latency of several or many seconds in loading the MP4 file - and then usually requires additional long periods of time once Play/Autoplay is initialized - resulting in the delay of playback of the video/audio file of many seconds and often minutes - if the file plays at all. So for these devices, I recommend using both the .OGV (.ogg) and the .WEBM (.webm) formats. There are many web posts to find the best video and audio compression types and settings for your scene and device support, but if you have any issues with this, I might be able to help and post some answers here on the forum.

So I generally I'll use similar code to the following example for the best compatability (including legacy) of video in my scenes across most all platforms, OS, devices, displays, etc.:

Quote

var myVideoTexture = new BABYLON.VideoTexture("name", ["videoFileName.ogv", "videoFileName.webm", "videoFileName.mp4"], scene, true, true,{ streaming: true, autoplay: true });

I generally use the above code listing the video formats in the same order as above for the fastest loading on most every device, as well as beginning with the .ogv file format to solve for legacy issues on many older devices.

 

And as there are many, many video converters available, I have discovered the least number of compatability issues using the following:

MP4 - "Handbrake",    

OGV and WEBM - "Firefogg Online Video and Audio Encoder" ( https://firefogg.org/ ) - this requires the Firefox browser installed and the Firefogg encoder installed in the browser.

There's certainly much more info I could provide in this post such as the specific settings I use in configuring the compression and formatting of both the video and audio in each application and for each specific file format. However, I believe it's best to discover these for yourselves, and to become intimately familiar with what each setting represents; as each setting is equally important, and can cause substancial change in file size, compression ratio, playback performance, video quality, audio quality, and many other properties and attributes.

 

Cheers,

DB

 

 

 

 

[V!nc3r]

Wow, thanks for this great answer

I just try firefogg, it works very fine. Usually i use adobe media encoder, which have many good presets, but firefogg is more simple and do the job ; so, adopted !

[dbawel]

Hi @V!nc3r -

I should add one key aspect which is very valuable if you are adopting this pipeline. This relates directly to Handbrake, which can provide you with much greater compatability as well as more efficiency in decompression and playback. And the method to ensure this is to convert any AV media you are using (especially MP4) to an MP4 file in Handbrake and checking the box labelled "Web Optimized". What this feature does is add more information to the file header so that compatible browsers and applications have much more property data prior to loading and playback of the video/audio file. 

An example of this would be in converting a video which has any variations in it such as a change in frame rate, which adding this meta data to the header allows the player to prepare for this change prior to loading the video, and can often result in more efficient memory management as well as playback. This can also contain color and compression information for more efficient decompression - especially for larger file sizes. And if you use the "Web Optimized" feature prior to converting to other file formats, depending on your converter, this additional header information can often be carried through to the new and different format - though not always the case, but valuable in some browser playback.

There are other "keys" to generating efficient and optimized AV media files, so if you have any other questions, I'm happy to relate what I know about these.

Cheers,

DB

EDIT - Although not necessay, but I highly recommend that you use the custom video and audio settings in Firefogg for conversion - as these can dramatically improve Babylon.js scene efficiency, playback, memory usage, and overall scene optimization especially seen with improvements in Garbage Collection.

[vegasgroup]

help I have a problem with the exporter Babylons 3ds max 2016: how do I put the textures video MP4 video if 3ds max only accepts video AVI?

[V!nc3r]

The best way is to not assign video texture via 3dsmax, but directly via BJS.

This is an example code :

scene.getMeshByName("nameOfYourMesh").material.diffuseTexture = new BABYLON.VideoTexture("name", ["videoFileName.ogv", "videoFileName.webm", "videoFileName.mp4"], scene, true, true,{ streaming: true, autoplay: true });

 

[vegasgroup]

sorry I'm new ... I do not understand: where to put the code? in the file that I export with 3ds max babylon or in babylons.js javaScript? if I can explain ... thanks

[V!nc3r]

Here an example template, which is the index.html file :

http://nothing-is-3d.com/paste/?435ec29eeb2ba886#/4Whnj9pmfVy1X7Rht8mRV3f2DCSOM8VcyFLZchTXcI=

Here, the .babylon file (scene.babylon) is on the same folder than the index.html, idem for videoFileName.mp4.

[vegasgroup]

freezes all, it continues to load the page .... here is the code that I entered:

 

<SCRIPT type="text/javascript">
        var canvas = document.getElementById('canvas');
        var engine = new BABYLON.Engine(canvas, true);
       
        BABYLON.SceneLoader.Load('', 'streaming.babylon', engine, function (newScene) {
            newScene.activeCamera.attachControl(canvas);
scene.getMeshByName("box508").material.diffuseTexture = new BABYLON.VideoTexture("small", ["small.ogv", "small.webm", "small.mp4"], scene, true, true,{ streaming: true, autoplay: true });
            engine.runRenderLoop(function() {
                newScene.render();
            });

            window.addEventListener('resize', function () {
                engine.resize();
            });

            document.getElementById('debugLayerButton').addEventListener('click', function () {
                if (newScene.debugLayer.isVisible()) {
                    newScene.debugLayer.hide();
                } else {
                    newScene.debugLayer.show();
                }
            });
        });
    </SCRIPT>

help me

[V!nc3r]

On your web browser, press F12, and check the console (it works for firefox or chrome, don't know for other browsers). If their is an error, tell us.

I think that the bug come from

scene.getMeshByName

which must be

newscene.getMeshByName

If you don't have ogv or webm version, write just "small.mp4" rather than ["small.ogv", "small.webm", "small.mp4"].

Do not hesitate to do BJS tutorials http://doc.babylonjs.com/tutorials

[vegasgroup]

continues to load the page ... here is the code that I entered:

newScene.getMeshByName("box508").material.diffuseTexture = new BABYLON.VideoTexture("small", ["small.ogv", "small.webm", "small.mp4"], scene, true, true,{ streaming: true, autoplay: true }); 

as soon as I remove the code works everything but the box 508 remains without texture

 

 

[vegasgroup]

this is the error that gives me on chrome:

babylon.js:2 XMLHttpRequest cannot load file:///C:/Users/Desktop/streaming.babylon.manifest?1468853505434. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

babylon.js:2 XMLHttpRequest cannot load file:///C:/Users/Desktop/streaming.babylon.manifest. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

babylon.js:3 XMLHttpRequest cannot load file:///C:/Users/Desktop/streaming.babylon. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

babylon.js:3 Uncaught Error: Error status: 0 - Unable to load streaming.babylon

[Nabroski]

@vegasgroup

Try to make a small Playground, most of the errors are easier to solve then.
 http://www.babylonjs-playground.com/#BUWYF#1

[dbawel]

I don't believe this is your problem based upon what I've read above, however there are definately problems using videoTextures in babylon.js v2.3 and v2.4. So I switched back to v2.2 and everything works fine again. 

DB

[V!nc3r]

I know where your errors come from, it's due to chrome security when you try to load local files.

Just put this on the chrome target shortcut :  --allow-file-access-from-files

[vegasgroup]

Thank you all for the help, but the problem is not google crome or firefox ... without the video works fine ... I also tried with http://www.babylonjs-playground.com/#BUWYF#1 but blocks all and remains locked to load...

[V!nc3r]

The playground scene works fine here

http://i.imgur.com/MTzFwMp.mp4

 

[vegasgroup]

The playground scene works fine... just add my babylon file export from 3ds max 2016 crashes all and loads indefinitely .... 

but my babylon file export from 3ds max 2016 works fine ...

[Nabroski]

@vegasgroup

Press F12 on your Browser. And copy paste the red/yellow text in this forum.

Thank you
 

[vegasgroup]

After many trials might solve  tx

 

1) I removed to code in http://www.babylonjs-playground.com/#BUWYF#1 :

  // Mouse Click pause the video
         scene.onPointerObservable.add ((d, s) => {

2) I changed box508 with Plane023

Now the scene works, but the video only audio works...the screen is brown, play and pause not works

 

why???

 

sceen firefox:

[Nabroski]

Get a still frame from you video, import it in 3dmax unwrap your plane and use the still frame to align the uv to the mesh, as texure, as defaulttexure, - export it.

When you now run your scetch, the first thing loading is the defaulttexture, - the stillframe. than, when the video is ready, the video will replace the "defaulttexture"! Just for get started, later, when everything is fine, you can remove the "defaulttexture - stillframe"

Also you have to add lights to your scene, near the "videoplane"

You can do it in 3dmax, or in babylon

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

Good Luck


 

[vegasgroup]

thanks to all of you, finally works
I had to work with 3ds max UVMap I will have done 100 tests to center the video .. thanks;)
Now how can I fix PLAYPAUSE problem because the video is always in the loop ... // Mouse Click pause the video
          scene.onPointerObservable.add ((d, s) => {
It runs rough

[GameMonetize]

just use videoTexture.video.pause()