I have problem with the texture video

[Gamerazor]

I can't load a video texture. This is my code:

if(BABYLON.Engine.isSupported()){	var canvas = document.getElementById("renderCanvas");	var engine = new BABYLON.Engine(canvas,true);		var scene = new BABYLON.Scene(engine);		var camera = new BABYLON.ArcRotateCamera("Camara",0,0,10,BABYLON.Vector3.Zero(),scene);	var light = new BABYLON.PointLight("Luz", new BABYLON.Vector3(20,100,2),scene);	var cubo = new BABYLON.Mesh.CreateBox("cubo",1.0,scene);					camera.setPosition(new BABYLON.Vector3(0,1,3));	camera.attachControl(canvas);		material = new BABYLON.StandardMaterial("default",scene);	material.emissiveColor = new BABYLON.Color3(0.3,0.3,0.3);			var dynamicTexture = new BABYLON.DynamicTexture("dynamic texture",512,scene,true);	dynamicTexture.hasAlpha = true;	material.diffuseTexture = dynamicTexture;	cubo.material = material;	var ecran = scene.getMeshByName("Ecran");	ecran.material.diffuseTexture = new BABYLON.VideoTexture("video",["video/camera.avi"],256,scene,true);		var count = 0;	scene.beforeRender = function(){		var textureContext = dynamicTexture.getContext();		var size = dynamicTexture.getSize();		var text = count.toString();				textureContext.save();		textureContext.fillStyle = "red";		textureContext.fillRect(0,0,size.width,size.height);				textureContext.font = "bold 120px Calibri";		var textSize = textureContext.measureText(text);		textureContext.fillStyle = "white";		textureContext.fillText(text,(size.width - textSize.width)/2,(size.height - 120 )/2);				textureContext.restore();				dynamicTexture.update();		count++;	};		var renderLoop = function(){		engine.beginFrame();		scene.render();		engine.endFrame();		BABYLON.Tools.QueueNewFrame(renderLoop);	};	BABYLON.Tools.QueueNewFrame(renderLoop);}

I put this as tutorial says:

var ecran = scene.getMeshByName("Ecran");	ecran.material.diffuseTexture = new BABYLON.VideoTexture("video",["video/camera.avi"],256,scene,true);

but i get this error:

TypeError: 'null' is not an object (evaluating 'ecran.material') 

[Wingnut]

Hello Promodominus!  Welcome to the forum. 

 

I do not see where you have created 'ecran'.  I think... var ecran = scene.getMeshByName("Ecran"); is failing.

 

Just after that line, insert...  alert(ecran);

 

It should report [object].  But I do not see where ecran is being created.  I think alert(ecran) will fail.

 

Maybe your line should instead be...  var ecran = BABYLON.Mesh.CreatePlane("tv", 4, scene);

 

Remember that videoTexture needs to be lighted.  A good way to light videoTexture is:

 

ecran.material.emissiveColor = new BABYLON.Color3(1, 1, 1);

 

Maybe use (.7, .7, .7) to lower the brightness setting, as needed.    Here is a zipped videoTexture demo... that also uses mirror texture... maybe handy: 

 

http://urbanproductions.com/wingy/babylon/videotexture/vmirror05.zip

 

Good luck!  Experiment.  Tell us your findings.

[Gamerazor]

Thank you Wingnut for the example that you showed me. Now it run very well.

 

This is my code finaly:

if(BABYLON.Engine.isSupported()){	var canvas = document.getElementById("renderCanvas");	var engine = new BABYLON.Engine(canvas,true);		var scene = new BABYLON.Scene(engine);		var camera = new BABYLON.ArcRotateCamera("Camara",0,0,10,BABYLON.Vector3.Zero(),scene);	var light = new BABYLON.PointLight("Luz", new BABYLON.Vector3(20,100,2),scene);	var cubo = new BABYLON.Mesh.CreateBox("cubo",1.0,scene);	var tv = new BABYLON.Mesh.CreatePlane("tv",100,scene);	tv.position.y = -3;	tv.rotation.x = Math.PI / 2;	tv.material = new BABYLON.StandardMaterial("tv_mat",scene);	tv.material.emissiveColor = new BABYLON.Color3(1,1,1);	tv.material.backFaceCulling = 1;	tv.material.diffuseTexture = new BABYLON.VideoTexture("vid",["../video/camera.avi"],512,scene,false);		camera.setPosition(new BABYLON.Vector3(0,1,3));	camera.attachControl(canvas);		material = new BABYLON.StandardMaterial("default",scene);	material.emissiveColor = new BABYLON.Color3(0.3,0.3,0.3);			var dynamicTexture = new BABYLON.DynamicTexture("dynamic texture",512,scene,true);	dynamicTexture.hasAlpha = true;	material.diffuseTexture = dynamicTexture;	cubo.material = material;		var count = 0;	scene.beforeRender = function(){		var textureContext = dynamicTexture.getContext();		var size = dynamicTexture.getSize();		var text = count.toString();				textureContext.save();		textureContext.fillStyle = "red";		textureContext.fillRect(0,0,size.width,size.height);				textureContext.font = "bold 120px Calibri";		var textSize = textureContext.measureText(text);		textureContext.fillStyle = "white";		textureContext.fillText(text,(size.width - textSize.width)/2,(size.height - 120 )/2);				textureContext.restore();				dynamicTexture.update();		count++;	};		var renderLoop = function(){		engine.beginFrame();		scene.render();		engine.endFrame();		BABYLON.Tools.QueueNewFrame(renderLoop);	};	BABYLON.Tools.QueueNewFrame(renderLoop);}

[Dad72]

Vidéo format must be html5 format (.webm, .mp4, .ogv) .avi is not supported by html5

 

tv.material.diffuseTexture = new BABYLON.VideoTexture("vid", ["../video/camera.avi"], 512, scene, false);

[Gamerazor]

but I put camera.avi and it is supported. It work.

[Dad72]

Ah, I thought that only html5 format was supported.