Geeks3D Forums

GeeXLab => GeeXLab - english forum => Topic started by: Stefan on February 02, 2016, 11:05:54 PM

Title: How to use video texture in a GLSL Shader
Post by: Stefan on February 02, 2016, 11:05:54 PM
So i saw this nice Shadertoy demo Wrist Slitter (https://www.shadertoy.com/view/MsV3Dh) , which consists of a Mandelbrot with video in background.

Porting to GeeXLab is pretty simple, just copy the video texture code from demo_video_player_gles2_v2.xml and use it with iChannel

The demo is preset to Timelapse-1.m4v from code sample pack, try Big Buck Bunny (http://bbb3d.renderfarming.net/download.html) instead or whatever makes you happy.

As you can see i don't know how to vertical flip textures in GeeXLab  :P

Mandelbrot zooming was too fast so i patched the pixelshader

#define slowdown 20.0
    return zoomto(xy, DEST, iGlobalTime/slowdown);


change value dependent on length of video

(https://farm2.staticflickr.com/1714/24484681290_f5999bd4c7_o.png)
(https://farm2.staticflickr.com/1606/24686709991_9c15ff4a43_o.png)
Title: Re: How to use video texture in a GLSL Shader
Post by: JeGX on February 03, 2016, 02:59:15 PM
To flip the texture in the shader, you have to play with the vec2 texture coordinates. Try something like that to flip the texture around the horizontal axis (by inversing the Y coordinate):


vec4 getColor( in vec2 xy )
{

...

if (int(iter) >= ITER_MAX)
{
  vec2 uv = zxy*0.25 + 0.5;
  uv.y *= -1.0;
  return texture2D(iChannel0, uv);
}

...

vec2 uv = vec2(picx, dist);
uv.y *= -1.0;
vec4 color = texture2D(iChannel0, uv);

...

}



Title: Re: How to use video texture in a GLSL Shader
Post by: Stefan on February 03, 2016, 06:41:50 PM
I was hoping you already have a function in LUA (equivalent to the magic button at Shadertoy.com)

Anyway i found the sweet spot in the pixelshader: simply replace iResolution.y with -iResolution.y or -1*iResolution.y
But it's only that easy in this particular shader because iResolution is split into x and y

>>>download fixed version here<<< (https://drive.google.com/file/d/0BykQ4pHxfGQWZi1GUzRISmlUVWc/view)

(https://farm2.staticflickr.com/1486/24169902823_8fd589a8a9_o.png)
Title: Re: How to use video texture in a GLSL Shader
Post by: Stefan on February 03, 2016, 09:12:44 PM
OK,
here is a generic flip code:

replace
iResolution.xy
with
vec2(iResolution.x, -iResolution.y)

Tested in toon video shader (https://www.shadertoy.com/view/XdB3zV) and ascii art (https://www.shadertoy.com/view/lssGDj)

I'll upload the demos later with a non-commercial video
Title: Re: How to use video texture in a GLSL Shader
Post by: Stefan on February 05, 2016, 07:18:14 PM
>>>Here is a package with 13 demos<<< - d/l below

These demos use http://hwcdn.net/j9t9v3v5/cds/Suzie_H264.mp4 (http://hwcdn.net/j9t9v3v5/cds/Suzie_H264.mp4) from http://www.elementaltechnologies.com/resources/4k-test-sequences (http://www.elementaltechnologies.com/resources/4k-test-sequences)
It is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.

If this 4K video crashes GeeXLab on exit or reload, use the shrunk video in the package.

Some shaders use iChannelTime[0] - to calculate the length of the video i assume

In the demos it looks like this:

uniform float iChannelTime0;
...
float time = iChannelTime0;
 
gh_gpu_program.uniform1f(shadertoy_prog, "iChannelTime0", video_elapsed_time)

(https://farm2.staticflickr.com/1597/24743530041_53c4389fb9_o.png)
Title: Re: How to use video texture in a GLSL Shader
Post by: Stefan on February 07, 2016, 10:16:08 AM
>>>download updated package<<<

Note: i didn't get the 3 layers in  "Page curl effect" look right


"video heightfield" flipped via -pixel.y

"The Tender Cut [TV]" added - uses video and keyboard texture

(https://farm2.staticflickr.com/1533/24845598025_4bab2c9726_o.png)
Title: Re: How to use video texture in a GLSL Shader
Post by: Stefan on February 10, 2016, 05:42:30 PM
>>>Update 3 - download now<<< (https://drive.google.com/file/d/0BykQ4pHxfGQWMnZUNTlfUWh4dXc/view)

18 demos now in total

Following ports were a PITA  :P

"Page curl effect" fixed
return texture2D(iChannel0, vec2(p.x, -p.y));               // seethrough 1
vec4 color = texture2D(iChannel0, vec2(point.x, -point.y)); // seethrough 2
vec4 color = texture2D(iChannel0, vec2(point.x, -point.y)); // backside
bgColor = texture2D(iChannel0, vec2(uv.x, -uv.y)).rgga;     // background
color = texture2D(iChannel0, vec2(uv.x, -uv.y));            // rotation


"Overkill" contains 2 videos (!) - a real time clock and a cubemap ("Yokohama" is already in demo pack FEB 2016).
After 22 seconds "News" appears as billboard and "Suzie" in the tiles. Latter is hard to see, so maximise window.

(https://farm2.staticflickr.com/1611/24313086093_ef88dd5565_o.png)