How to play Webm videos on a texture

0. Before

EDIT [4/16] : There’s a tutorial (Playing Videos Ingame) by @Riddick posted at December 26 2020 presenting the same thing and I missed this tutorial due to my lack of searching skill, so for people who came here for the tutorial, I reckon you’d get more info there.

Old

I’m not sure if anyone would need this but I’m posting here since there might be someone like me struggling as there’s barely any info about this out there.
Since this is literally the first thing I tried as I learn ModelDoc and Material Editor, there might be
some mistakes that could’ve been done better.
Webm file you want to play must be muted. I’m not sure why but videos with sound won’t work.

1. Display Mesh / UV

First, prepare your mesh that will be used as a display

and make sure it’s UV map is filling the whole texture.

Then import your display model through ModelDoc.

2. Display Mesh Material

Now in Material Editor, create new material ( or existing one that can be edited ).
(I just used default shader ‘Vr Simple’)

MatEditorArrow

And on the texture you want to display Webm video on, press the highlighted arrow in the picture
and click Edit Dynamic Expression

DynamicExpression

In the followed window, enter a string value that you want.

Now, set the material of the display model you imported as the one we just made.

3. Setting Up Entities ( Display prop / info_offscreen_movie_texture ) and Webm file

Spawn prop_dynamic entity with the model we imported
and set the name to however you want to call it

Spawn info_offscreen_movie_texture and set it’s target to display model entity.
And Target Render Attribute to Dynamic Expression we added on the material.
( in this picture, it’s different because I made a mistake )

filePath

Source Movie path should be
file://{resources}/[path to the Webm file from your addon’s panorama file]
Webm file MUST be in the panorama file as source movie path’s {resource} is set to panorama file
In case panorama folder is not in the addon folder you’ll have to create one
And don’t forget to put file format (.webm) too.

Res

Set Texture Resolution X and Y to the X and Y size of the Webm file’s resolution.

you can use trigger entity to play/pause/togglePlayPause the video.

4. Result

5. Others

As I said, this is the first attempt of me trying to import custom mesh and texture so there might’ve been some mistakes in few places. And texture resolution X / Y in info_offscreen_movie_texture doesn’t have to be same as video resolution but it’d be better to keep the ratio similar.
If you want to add sound then you’ll have to import it separately as movie texture entity doesn’t take Webm files with sound.
Since you’ll have to create mesh for display separately, it might be tedious. And I didn’t test it with a mesh that is not a quad.
Also I tried working with vr monitor shader instead of vr simple at first, but the texture won’t be centered so I just used vr simple. Does anyone know why that happens and how can I fix it?

10 Likes

You should’ve used the ultimate 4k 60 fps version

4 Likes

Game hasn’t even come out yet and we already have a way to rickroll

2 Likes

Nice! I didn’t know but I love that webm is supported in Source / Source 2, this will further speed up loading time!

2 Likes

“If you want to add sound then you’ll have to import it separately as movie texture entity doesn’t take Webm files with sound.” just use ghost_speaker. Source 2 also supports mp4
*incidentally, you can use func_brush instead of prop_dynamic

2 Likes

that’s what that was for, I just kinda ignored that thing when looking into alyx maps, thanks for the info!
Func_brush looks much better, gotta try that now

1 Like

Nice guide! You should consider adding it to the wiki Welcome - S&box Wiki

2 Likes

This doesn’t look like there’s much a difference between this and the tutorial @Riddick posted some months ago: Playing Videos Ingame

I’m not a mapper and I’m willing to look stupid here if I’m wrong but the base steps are the same, only difference is demonstrated a key value

1 Like

You’re right, I REALLY should learn how to search for info. More info people can get here would be DARVIN’s comment. Thanks for notifying me. Maybe I can add something about explain bit more about how DARVIN did it with func_brush?

Application examples would be really big. Sure we know HOW to do it, but show us WHAT we can do with it

1 Like

It is enough to apply to the func_brush “video texture”. You also need to give the name func_brush :d

Yeah, I figured that out while trying to figure out how you did it and sorting it out, it’s much better than the way I did it. Where did you learn to do that? Was it done in similar way in source 1 hammer? Or it was just me missing out all the info?

5 months ago, by trial and error, I made a cinema addon for hl alyx . That’s how I learned XD

1 Like

That’s amazing.

I hope people would see your comment and learn how you did it. Few people going through some shits and make it easier for others to learn is an awesome thing.

Yeah, that’s how they did the TV screen in the beginning of Half-Life: Alyx. I believe it uses panorama.

Addendum: It’s also why there was hundreds of videos of people turning on that screen and some random obligatory funny plays.

1 Like