Raghavender Mylagary 2 Report post Posted March 16, 2017 Hi, Is it possible to draw video onto the canvas element of the dynamic texture? Thanks - Raghavender Mylagary Quote Share this post Link to post Share on other sites
Deltakosh 4315 Report post Posted March 16, 2017 hi! yep. You can call context.drawImage and provide the video element as source Quote Share this post Link to post Share on other sites
Raghavender Mylagary 2 Report post Posted March 16, 2017 <!DOCTYPE html> <html> <head> <title></title> <script src="scripts/babylon.js"></script> <script src="http://www.babylonjs.com/cannon.js"></script> <script src="http://www.babylonjs.com/oimo.js"></script> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <canvas id="c"></canvas> <video id="v" controls> <source src=video.mp4 type=video/mp4> </video> <script type="text/javascript"> window.addEventListener('DOMContentLoaded', function () { var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var scene = new BABYLON.Scene(engine); var v = document.getElementById('v'); // Setup environment var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 10, 50), scene); var light2 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 10, -20), scene); var camera = new BABYLON.ArcRotateCamera("Camera", -1, 0.8, 100, new BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas); // Video plane var videoPlane = BABYLON.Mesh.CreatePlane("Screen", 50, scene); videoPlane.position.y = 10; videoPlane.position.z = 30; // Video material var videoMat = new BABYLON.StandardMaterial("textVid", scene); videoMat.diffuseTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true); videoMat.backFaceCulling = false; var context = videoMat.diffuseTexture.getContext(); //Applying materials videoPlane.material = videoMat; context.drawImage(v, 0, 0); videoMat.diffuseTexture.update(); engine.runRenderLoop(function () { scene.render(); }); window.addEventListener('resize', function () { engine.resize(); }); }); </script> </body> </html> @Deltakosh I tried to implement it but it's not working. Can you please look into the above code? playground link http://www.babylonjs-playground.com/#1JQNK1#1 Quote Share this post Link to post Share on other sites
Deltakosh 4315 Report post Posted March 17, 2017 Hello if you just want to display a video, we provide the video texture object: http://www.babylonjs-playground.com/#140LZL#8 If you want to update your dynamictexture with a video: http://www.babylonjs-playground.com/#1JQNK1#3 1 bviale reacted to this Quote Share this post Link to post Share on other sites
Raghavender Mylagary 2 Report post Posted March 17, 2017 @Deltakosh I want to display the video with HTML5 Video controls. I tried with video texture but isn't working so I tried to draw video element with controls onto the dynamic texture canvas. It is also not working, is there any way we can display the video with controls?? Quote Share this post Link to post Share on other sites
Deltakosh 4315 Report post Posted March 20, 2017 What about asking the good question directly when starting the thread? You cannot render HTML element inside a texture. But you can use picking to simulate click on buttons. In this case you will have to draw your own buttons. Quote Share this post Link to post Share on other sites
