solved Passing Video to a Shader?

[igitz]

Is there a way to pass a video texture to a shader using a similar way as the one used to pass an image texture?

shaderMaterial.setTexture("textureSampler", new BABYLON.Texture(imgTexture, scene));

i'm wondering if there are more ways to use video textures in babylon, i have seen that i can set a BABYLON.VideoTexture as a diffuseTexture of a material, but that seems limiting. What if i want to manipulate an object which has a material with a video texture, in the vertex + fragment shaders?

[RaananW]

Hi @igitz,

You could do what the video texture is doing - create a video-element, read the next frame and send it to a self-created shader. You could also use the videotexture itself, as it creates a webgl texture (using the following function - https://github.com/BabylonJS/Babylon.js/blob/master/src/Engine/babylon.engine.ts#L3366), which you can use wherever you want.

[igitz]

hi @RaananW, thanks for the quick reply.

would you have time for a short example of how this would work?

[RaananW]

Would that be of help? http://doc.babylonjs.com/how_to/shader_material

I will try finding the time later, but - video texture IS a texture, so you can use it with the shader material

[Sebavan]

There is no difference in the shader code, the shader is not aware of the video it only sees a sampler filled with each frame of the video one at a time, so you can directly use a videoTexture in your case.

[igitz]

thanks for the replies,

i might be doing something wrong, but passing the video texture instead of a texture is something i tried and got a red/black grid instead. so i thought that either my method or the videotexture constructor is not correct.

example:

var shaderMaterial = new BABYLON.ShaderMaterial("material", scene, "./shaders/s00", { attributes: ["position", "uv"], uniforms: ["worldViewProjection"] });

 

var texImage = new BABYLON.Texture("textures/img00.jpg");

shaderMaterial.setTexture("textureSampler", new BABYLON.Texture(texImage, scene));

works, but

var texVideo = new BABYLON.VideoTexture("video", ["textures/video00.mp4"], scene);

shaderMaterial.setTexture("textureSampler", new BABYLON.Texture(texVideo, scene));

doesn't.

[Sebavan]

A videoTexture is a texture as we said, code should be:

var texVideo = new BABYLON.VideoTexture("video", ["textures/video00.mp4"], scene);

shaderMaterial.setTexture("textureSampler", texVideo);

[igitz]

thanks! still need some time to get familiar with the babylon documentation + class constructors.