Gamerazor

I have problem with the texture video

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

53389f02c1316.jpg

 

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

Share this post


Link to post
Share on other sites

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"], 512scenefalse);

Share this post


Link to post
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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.