A new little shader i did (glsl)

DariusG · 15 July 2023 18:55

I will test it later on one of my rooted devices

DariusG · 15 July 2023 19:27

It loads now but I get this

hunterk · 15 July 2023 19:37

well shucks. that doesn’t look like the packing is taking effect. Oh well, I’ll try to debug it here when I get my Shield running again.

Thanks for the testing

DariusG · 17 July 2023 09:14

A gif comparison

Seems the difference is blargg’s filter artifacts go to the opposite direction (-x instead of x) and it creates some kind of ghosting instead

Cyber · 17 July 2023 13:15

…And this it why I still use Blargg sometimes. A picture paints a thousand words. I have highly customized Blargg filter presets some of which are available in the Video Filters section that you can also try. You can combine these with some simple scanline shaders to do some interesting stuff like blend the dithering in Sonic The Hedgehog and Shinobi III’s waterfall.

I crop a few pixels off the left and even less off the right of the screen in my presets in order to compensate for Blargg’s aspect ratio alteration that takes place when you use the filter.

DariusG · 17 July 2023 13:02

It is interesting, would have to investigate in the blargg code to see what is going on, which is a little messy and not so understandable as it’s C++ I think.

DariusG · 19 July 2023 17:18

Added ‘sawtooth’ and ‘color bleed’ effects to crt-consumer GLSL to make it look more like NTSC signal, as an option of course.

DariusG · 19 July 2023 20:10

And a new kind of simple ntsc look shader. Still needs some work but it’s usable.

Dogway · 20 July 2023 07:58

Looks very good! Does it work on GPU deprived platforms like the Wii, Chromecast, etc?

DariusG · 20 July 2023 08:01

I think Wii doesn’t have shaders? For chromecast you’ll have to test it, it’s already there if you do online update. I bet will not work that well on very weak GPUs as it has some ‘if’ statements there.

DariusG · 20 July 2023 08:09

I have an old HTC One m7 that has around 50 gflops, tested there and runs only 25 fps. I could try to remove things (scanlines-mask-gamma etc), make everything constants and see how it works.

Dogway · 20 July 2023 08:30

Ah well, don’t bother, the Chromecast (and Wii, Xbox, etc) are around 10-20Gflops) so it would be very difficult.

I’m kinda searching a way to do a NTSC like blur that fits into a 10Gflop, even if it’s hack. I think that adding some cheap x and y blur (a bit higher for x) and separately a bit higher for chroma will do for a cheap alternative.

DariusG · 20 July 2023 08:37

Try this and tell me

#version 110

/*
   Simple S-video like shader by DariusG 2023
   This program is free software; you can redistribute it and/or modify it
   under the terms of the GNU General Public License as published by the Free
   Software Foundation; either version 2 of the License, or (at your option)
   any later version.
*/
#if defined(VERTEX)

#if __VERSION__ >= 130
#define COMPAT_VARYING out
#define COMPAT_ATTRIBUTE in
#define COMPAT_TEXTURE texture
#else
#define COMPAT_VARYING varying 
#define COMPAT_ATTRIBUTE attribute 
#define COMPAT_TEXTURE texture2D
#endif

#ifdef GL_ES
#define COMPAT_PRECISION mediump
#else
#define COMPAT_PRECISION
#endif

COMPAT_ATTRIBUTE vec4 VertexCoord;
COMPAT_ATTRIBUTE vec4 COLOR;
COMPAT_ATTRIBUTE vec4 TexCoord;
COMPAT_VARYING vec4 COL0;
COMPAT_VARYING vec4 TEX0;

vec4 _oPosition1; 
uniform mat4 MVPMatrix;
uniform COMPAT_PRECISION int FrameDirection;
uniform COMPAT_PRECISION int FrameCount;
uniform COMPAT_PRECISION vec2 OutputSize;
uniform COMPAT_PRECISION vec2 TextureSize;
uniform COMPAT_PRECISION vec2 InputSize;

// compatibility #defines
#define vTexCoord TEX0.xy
#define SourceSize vec4(TextureSize, 1.0 / TextureSize) //either TextureSize or InputSize
#define OutSize vec4(OutputSize, 1.0 / OutputSize)

void main()
{
    gl_Position = MVPMatrix * VertexCoord;
    TEX0.xy = TexCoord.xy;
}

#elif defined(FRAGMENT)

#if __VERSION__ >= 130
#define COMPAT_VARYING in
#define COMPAT_TEXTURE texture
out vec4 FragColor;
#else
#define COMPAT_VARYING varying
#define FragColor gl_FragColor
#define COMPAT_TEXTURE texture2D
#endif

#ifdef GL_ES
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
#define COMPAT_PRECISION mediump
#else
#define COMPAT_PRECISION
#endif

uniform COMPAT_PRECISION int FrameDirection;
uniform COMPAT_PRECISION int FrameCount;
uniform COMPAT_PRECISION vec2 OutputSize;
uniform COMPAT_PRECISION vec2 TextureSize;
uniform COMPAT_PRECISION vec2 InputSize;
uniform sampler2D Texture;
COMPAT_VARYING vec4 TEX0;

// compatibility #defines
#define Source Texture
#define vTexCoord TEX0.xy

#define SourceSize vec4(TextureSize, 1.0 / TextureSize) //either TextureSize or InputSize
#define OutSize vec4(OutputSize, 1.0 / OutputSize)

#ifdef PARAMETER_UNIFORM
uniform COMPAT_PRECISION float bleeding;

#else
#define bleeding 0.5
#endif

#define PI 3.14159265
#define _Framecount float (FrameCount)


float RGB2Y(vec3 _rgb) {
    return dot(_rgb, vec3(0.29900, 0.58700, 0.11400));
}

float RGB2U(vec3 _rgb) {
   return dot(_rgb, vec3(-0.14713, -0.28886, 0.43600));
}

float RGB2V(vec3 _rgb) {
   return dot(_rgb, vec3(0.61500, -0.51499, -0.10001));
}

float YUV2R(vec3 _yuv) {
   return dot(_yuv, vec3(1, 0.00000, 1.13983));
}

float YUV2G(vec3 _yuv) {
   return dot(_yuv, vec3(1.0, -0.39465, -0.58060));
}

float YUV2B(vec3 _yuv) {
    return dot(_yuv, vec3(1.0, 2.03211, 0.00000));
}

vec3 YUV2RGB(vec3 _yuv) {
    vec3 _rgb;
    _rgb.r = YUV2R(_yuv);
    _rgb.g = YUV2G(_yuv);
    _rgb.b = YUV2B(_yuv);

   return _rgb;
}




void main() {
    float a_kernel[5];
    a_kernel[0] = 2.0; 
    a_kernel[1] = 4.0; 
    a_kernel[2] = 1.0; 
    a_kernel[3] = 4.0; 
    a_kernel[4] = 2.0; 
    
    vec2 pos = vTexCoord;
    float y = pos.y*SourceSize.y;
    float cent=floor(y)+0.5;
    y = cent*SourceSize.w;
    vec2 coords = vec2(pos.x,mix(pos.y,y,0.3));
    vec4 res;
    
//sawtooth effect
    if( mod( floor(coords.y*OutputSize.y), 2.0 ) == 0.0 ) {
        res = texture2D( Source, coords + vec2(OutSize.z*0.5, 0.0) );
    } else {
        res = texture2D( Source, coords - vec2(OutSize.z*0.5, 0.0) );
    }
//end of sawtooth
    
// blur image 
    vec2 fragCoord = coords*OutputSize.xy;
    float counter = 1.0;
    for (int i = -2; i <= 2; i++) {
            vec2 uv = vec2(fragCoord.x + float(i)*0.33, fragCoord.y ) / OutputSize.xy;
            res.rgb += texture2D(Source, uv).xyz;
            counter += 1.0;
    }
    res.rgb /= counter;
//blur end


    vec3 yuv = vec3(0.0);

//color bleed   
    float px = 0.0;
    for( int x = -1; x <= 1; x++ ) {
        px = float(x) * SourceSize.z - SourceSize.w * 0.5;
        yuv.g += RGB2U( texture2D( Source, coords + vec2(px, 0.0)).rgb ) * a_kernel[x + 2];
        yuv.b += RGB2V( texture2D( Source, coords + vec2(px, 0.0)).rgb ) * a_kernel[x + 2];
    }
    
    yuv.r = RGB2Y(res.rgb);
    yuv.g /= 10.0;
    yuv.b /= 10.0;

    res.rgb = (res.rgb * (1.0 - 0.5)) + (YUV2RGB(yuv) * 0.5);
//color bleed end    
    
    FragColor = res;
}
#endif

DariusG · 20 July 2023 08:48

Another solution, load ‘ntsc-cwgw-tm’ and append a very light shader like ‘fake-crt-geom-potato’. That runs 120 fps on HTC One m7.

Dogway · 20 July 2023 09:21

The shader looks great, but it has the same problem than other blurs, at the moment I add a scanline shader on top everything gets mangled. See pic (fake-crt-geom-potato here):

DariusG · 20 July 2023 09:27

Try this with fake-crt-geom-potato and tell me

#version 110

/*
   Simple S-video like shader by DariusG 2023
   This program is free software; you can redistribute it and/or modify it
   under the terms of the GNU General Public License as published by the Free
   Software Foundation; either version 2 of the License, or (at your option)
   any later version.
*/
#if defined(VERTEX)

#if __VERSION__ >= 130
#define COMPAT_VARYING out
#define COMPAT_ATTRIBUTE in
#define COMPAT_TEXTURE texture
#else
#define COMPAT_VARYING varying 
#define COMPAT_ATTRIBUTE attribute 
#define COMPAT_TEXTURE texture2D
#endif

#ifdef GL_ES
#define COMPAT_PRECISION mediump
#else
#define COMPAT_PRECISION
#endif

COMPAT_ATTRIBUTE vec4 VertexCoord;
COMPAT_ATTRIBUTE vec4 COLOR;
COMPAT_ATTRIBUTE vec4 TexCoord;
COMPAT_VARYING vec4 COL0;
COMPAT_VARYING vec4 TEX0;

vec4 _oPosition1; 
uniform mat4 MVPMatrix;
uniform COMPAT_PRECISION int FrameDirection;
uniform COMPAT_PRECISION int FrameCount;
uniform COMPAT_PRECISION vec2 OutputSize;
uniform COMPAT_PRECISION vec2 TextureSize;
uniform COMPAT_PRECISION vec2 InputSize;

// compatibility #defines
#define vTexCoord TEX0.xy
#define SourceSize vec4(TextureSize, 1.0 / TextureSize) //either TextureSize or InputSize
#define OutSize vec4(OutputSize, 1.0 / OutputSize)

void main()
{
    gl_Position = MVPMatrix * VertexCoord;
    TEX0.xy = TexCoord.xy;
}

#elif defined(FRAGMENT)

#if __VERSION__ >= 130
#define COMPAT_VARYING in
#define COMPAT_TEXTURE texture
out vec4 FragColor;
#else
#define COMPAT_VARYING varying
#define FragColor gl_FragColor
#define COMPAT_TEXTURE texture2D
#endif

#ifdef GL_ES
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
#define COMPAT_PRECISION mediump
#else
#define COMPAT_PRECISION
#endif

uniform COMPAT_PRECISION int FrameDirection;
uniform COMPAT_PRECISION int FrameCount;
uniform COMPAT_PRECISION vec2 OutputSize;
uniform COMPAT_PRECISION vec2 TextureSize;
uniform COMPAT_PRECISION vec2 InputSize;
uniform sampler2D Texture;
COMPAT_VARYING vec4 TEX0;

// compatibility #defines
#define Source Texture
#define vTexCoord TEX0.xy

#define SourceSize vec4(TextureSize, 1.0 / TextureSize) //either TextureSize or InputSize
#define OutSize vec4(OutputSize, 1.0 / OutputSize)

#ifdef PARAMETER_UNIFORM
uniform COMPAT_PRECISION float bleeding;

#else
#define bleeding 0.5
#endif

#define PI 3.14159265
#define _Framecount float (FrameCount)


float RGB2Y(vec3 _rgb) {
    return dot(_rgb, vec3(0.29900, 0.58700, 0.11400));
}

float RGB2U(vec3 _rgb) {
   return dot(_rgb, vec3(-0.14713, -0.28886, 0.43600));
}

float RGB2V(vec3 _rgb) {
   return dot(_rgb, vec3(0.61500, -0.51499, -0.10001));
}

float YUV2R(vec3 _yuv) {
   return dot(_yuv, vec3(1, 0.00000, 1.13983));
}

float YUV2G(vec3 _yuv) {
   return dot(_yuv, vec3(1.0, -0.39465, -0.58060));
}

float YUV2B(vec3 _yuv) {
    return dot(_yuv, vec3(1.0, 2.03211, 0.00000));
}

vec3 YUV2RGB(vec3 _yuv) {
    vec3 _rgb;
    _rgb.r = YUV2R(_yuv);
    _rgb.g = YUV2G(_yuv);
    _rgb.b = YUV2B(_yuv);

   return _rgb;
}




void main() {
    float a_kernel[5];
    a_kernel[0] = 2.0; 
    a_kernel[1] = 4.0; 
    a_kernel[2] = 1.0; 
    a_kernel[3] = 4.0; 
    a_kernel[4] = 2.0; 
    
    vec2 pos = vTexCoord;
    float y = pos.y*SourceSize.y;
    float cent=floor(y)+0.5;
    y = cent*SourceSize.w;
    vec2 coords = vec2(pos.x,mix(pos.y,y,0.3));
    vec4 res;
    
//sawtooth effect
    if( mod( floor(coords.y*OutputSize.y*4.0), 2.0 ) == 0.0 ) {
        res = texture2D( Source, coords + vec2(OutSize.z*0.1, 0.0) );
    } else {
        res = texture2D( Source, coords - vec2(OutSize.z*0.1, 0.0) );
    }
//end of sawtooth
    
// blur image 
    vec2 fragCoord = coords*OutputSize.xy;
    float counter = 1.0;
    for (int i = -2; i <= 2; i++) {
            vec2 uv = vec2(fragCoord.x + float(i)*0.11, fragCoord.y ) / OutputSize.xy;
            res.rgb += texture2D(Source, uv).xyz;
            counter += 1.0;
    }
    res.rgb /= counter;
//blur end


    vec3 yuv = vec3(0.0);

//color bleed   
    float px = 0.0;
    for( int x = -1; x <= 1; x++ ) {
        px = float(x) * SourceSize.z - SourceSize.w * 0.5;
        yuv.g += RGB2U( texture2D( Source, coords + vec2(px, 0.0)).rgb ) * a_kernel[x + 2];
        yuv.b += RGB2V( texture2D( Source, coords + vec2(px, 0.0)).rgb ) * a_kernel[x + 2];
    }
    
    yuv.r = RGB2Y(res.rgb);
    yuv.g /= 10.0;
    yuv.b /= 10.0;

    res.rgb = (res.rgb * (1.0 - 0.5)) + (YUV2RGB(yuv) * 0.5);
//color bleed end    
    
    FragColor = res;
}
#endif

Dogway · 20 July 2023 09:40

This is how it looks now. Chroma seems to blur but not luma. And when adding scanlines brightness drops:

DariusG · 20 July 2023 09:46

This is how it looks on my PC, filter linear, scale = 1 for 1st pass. But when i test on Android it looks different, that GPUs are a mess.

DariusG · 20 July 2023 10:10

Another test Looks ok on some cores, not ok on others.

#version 110

/*
   Simple S-video like shader by DariusG 2023
   This program is free software; you can redistribute it and/or modify it
   under the terms of the GNU General Public License as published by the Free
   Software Foundation; either version 2 of the License, or (at your option)
   any later version.
*/
#if defined(VERTEX)

#if __VERSION__ >= 130
#define COMPAT_VARYING out
#define COMPAT_ATTRIBUTE in
#define COMPAT_TEXTURE texture
#else
#define COMPAT_VARYING varying 
#define COMPAT_ATTRIBUTE attribute 
#define COMPAT_TEXTURE texture2D
#endif

#ifdef GL_ES
#define COMPAT_PRECISION mediump
#else
#define COMPAT_PRECISION
#endif

COMPAT_ATTRIBUTE vec4 VertexCoord;
COMPAT_ATTRIBUTE vec4 COLOR;
COMPAT_ATTRIBUTE vec4 TexCoord;
COMPAT_VARYING vec4 COL0;
COMPAT_VARYING vec4 TEX0;

vec4 _oPosition1; 
uniform mat4 MVPMatrix;
uniform COMPAT_PRECISION int FrameDirection;
uniform COMPAT_PRECISION int FrameCount;
uniform COMPAT_PRECISION vec2 OutputSize;
uniform COMPAT_PRECISION vec2 TextureSize;
uniform COMPAT_PRECISION vec2 InputSize;

// compatibility #defines
#define vTexCoord TEX0.xy
#define SourceSize vec4(TextureSize, 1.0 / TextureSize) //either TextureSize or InputSize
#define OutSize vec4(OutputSize, 1.0 / OutputSize)

void main()
{
    gl_Position = MVPMatrix * VertexCoord;
    TEX0.xy = TexCoord.xy;
}

#elif defined(FRAGMENT)

#if __VERSION__ >= 130
#define COMPAT_VARYING in
#define COMPAT_TEXTURE texture
out vec4 FragColor;
#else
#define COMPAT_VARYING varying
#define FragColor gl_FragColor
#define COMPAT_TEXTURE texture2D
#endif

#ifdef GL_ES
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
#define COMPAT_PRECISION mediump
#else
#define COMPAT_PRECISION
#endif

uniform COMPAT_PRECISION int FrameDirection;
uniform COMPAT_PRECISION int FrameCount;
uniform COMPAT_PRECISION vec2 OutputSize;
uniform COMPAT_PRECISION vec2 TextureSize;
uniform COMPAT_PRECISION vec2 InputSize;
uniform sampler2D Texture;
COMPAT_VARYING vec4 TEX0;

// compatibility #defines
#define Source Texture
#define vTexCoord TEX0.xy

#define SourceSize vec4(TextureSize, 1.0 / TextureSize) //either TextureSize or InputSize
#define OutSize vec4(OutputSize, 1.0 / OutputSize)

#ifdef PARAMETER_UNIFORM
uniform COMPAT_PRECISION float bleeding;

#else
#define bleeding 0.5
#endif

#define PI 3.14159265
#define _Framecount float (FrameCount)


float RGB2Y(vec3 _rgb) {
    return dot(_rgb, vec3(0.29900, 0.58700, 0.11400));
}

float RGB2U(vec3 _rgb) {
   return dot(_rgb, vec3(-0.14713, -0.28886, 0.43600));
}

float RGB2V(vec3 _rgb) {
   return dot(_rgb, vec3(0.61500, -0.51499, -0.10001));
}

float YUV2R(vec3 _yuv) {
   return dot(_yuv, vec3(1, 0.00000, 1.13983));
}

float YUV2G(vec3 _yuv) {
   return dot(_yuv, vec3(1.0, -0.39465, -0.58060));
}

float YUV2B(vec3 _yuv) {
    return dot(_yuv, vec3(1.0, 2.03211, 0.00000));
}

vec3 YUV2RGB(vec3 _yuv) {
    vec3 _rgb;
    _rgb.r = YUV2R(_yuv);
    _rgb.g = YUV2G(_yuv);
    _rgb.b = YUV2B(_yuv);

   return _rgb;
}




void main() {
    float a_kernel[5];
    a_kernel[0] = 2.0; 
    a_kernel[1] = 4.0; 
    a_kernel[2] = 1.0; 
    a_kernel[3] = 4.0; 
    a_kernel[4] = 2.0; 
    
    vec2 pos = vTexCoord;
    float y = pos.y*SourceSize.y;
    float cent=floor(y)+0.5;
    y = cent*SourceSize.w;
    vec2 coords = vec2(pos.x,mix(pos.y,y,0.3));
    vec4 res;
    float factor = InputSize.y/SourceSize.y;
//sawtooth effect
    if( mod( floor(coords.y*OutputSize.y/factor), 2.0 ) == 0.0 ) {
        res = texture2D( Source, coords + vec2(OutSize.z*0.5*factor, 0.0) );
    } else {
        res = texture2D( Source, coords - vec2(OutSize.z*0.5*factor, 0.0) );
    }
//end of sawtooth
    
// blur image 
    vec2 fragCoord = coords*OutputSize.xy;
    float counter = 1.0;
    for (int i = -2; i <= 2; i++) {
            vec2 uv = vec2(fragCoord.x + float(i)*0.5*factor, fragCoord.y ) / OutputSize.xy;
            res.rgb += texture2D(Source, uv).xyz;
            counter += 1.0;
    }
    res.rgb /= counter;
//blur end


    vec3 yuv = vec3(0.0);

//color bleed   
    float px = 0.0;
    for( int x = -1; x <= 1; x++ ) {
        px = float(x) * SourceSize.z - SourceSize.w * 0.5;
        yuv.g += RGB2U( texture2D( Source, coords + vec2(px*factor, 0.0)).rgb ) * a_kernel[x + 2];
        yuv.b += RGB2V( texture2D( Source, coords + vec2(px*factor, 0.0)).rgb ) * a_kernel[x + 2];
    }
    
    yuv.r = RGB2Y(res.rgb);
    yuv.g /= 10.0;
    yuv.b /= 10.0;

    res.rgb = (res.rgb * (1.0 - 0.5)) + (YUV2RGB(yuv) * 0.5);
//color bleed end    
    
    FragColor = res;
}
#endif

Dogway · 20 July 2023 10:08

Yeah, Android GPUs are a mess. I’m testing on snes9x which is fastest on Android. It still looks mangled with scanlines on. The blur on itself now shows ghosting, as if chroma was displaced several pixels towards the right.

Don’t worry, this is cumbersome so take your time. I thought this wasn’t that hard to implement.