Create WebGL Shader implementation for use in HTML5 browsers

[mdale]

Implementation in wasm or webgl shader that worked with video tag / canvas would be very interesting and would let foulks pop this into web anime players as an option. Would the runtime be fast enough for real-time in web context ?

[stefnotch]

It should be quite doable to take a video, render it to a canvas and apply WebGL effects. The GLSL shader seems simple enough. It would potentially lag behind 1-3 frames, but that's not an issue since it's a video and not a realtime game.

Ideally, that would be turned into a browser plugin so that it could be used on most websites.

[stefnotch]

@mdale If you're interested in implementing this, I'd be willing to help out.

[mdale]

@stefnotch sound great. I or someone on my team may take a look in the coming weeks.

[NeuroWhAI]

Hi, I am also interested in that implementation. Here is a gist based on GLSL code. I don't know much about the MPV pipeline and custom shaders so the code is probably wrong. But it seems to work nonetheless. Can anyone verify this code? 😃

[stefnotch]

On a quick inspection, it doesn't seem to have any obvious flaws. It'd be great if you could put it on a GitHub repository. Then, I could take a closer look at it and submit PRs with improvements.

[Tsubajashi]

Just a quick question: Would it be also possible to have it inside an userscript, which runs on certain sites/Webplayers? that would be the best way for endusers i think.

[stefnotch]

Of course that would be possible. Although, it might run into issues on the various websites that use a custom video player.

[Tsubajashi]

@stefnotch that would be nice, i would work on such a thing if someone gives me starting directions. Custom Video Player are a problem, but i know enough sites i would use which have Standard player

[stefnotch]

Anime4k already has a web implementation https://github.com/bloc97/Anime4K/blob/master/web

In the onLoad function, the important setup stuff happens https://github.com/bloc97/Anime4K/blob/333aca5d5760ae58bdea7033d2f25d5bf244ccc8/web/main.js#L662

I'm not the author of it, but I think a userscript would approximately do this

• Find the correct (or first) video tag instead of using a hardcoded one
• Add a canvas with the correct size and put it over the video
• Do pretty much whatever the onLoad function does

[Juszoe]

@stefnotch hello, this is Anime4K v2.1 WebGL implement, but it can't be work. Would you help me to fix it?