Scanline/Tv Line shader effect

https://github.com/SaxonDouglass/pc-plod/blob/master/scanlines.glsl

https://github.com/tacoe/detroit/blob/master/arthur/scanlines.glsl

Anybody can try to work this shader? I can't. I want a simple scanline/tv line effect but all this shaders not working...

[ToxicBakery]

How did you try implementing it?

I tried the same the code, but not working. anybody can help in this?

[Davhed]

@lacasrac -- I got the shader from your 2nd link working. It doesn't look perfect, but that is probably because the parameters need some tweaking.

ScanlineMaterial.class --

package com.example;

import android.opengl.GLES20;
import rajawali.materials.SimpleMaterial;


public class ScanlineMaterial extends SimpleMaterial {

    protected static final String mFShader = 
        "precision highp float;\n" +

        "varying vec4 vColor;\n" +

        "uniform float uTime;\n" +
        "uniform vec2 uResolution;\n" +
        "uniform sampler2D uDiffuseTexture;\n" +

//TE scanline effect
//some code by iq, extended to make it look right
//ported to Rajawali by Davhed

        "float rand(vec2 co) {\n" +
        " return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);\n" +
        "}\n" +

        "void main() {\n" +
        " vec2 q = gl_FragCoord.xy / uResolution.xy;\n" + 

 // subtle zoom in/out 
        " vec2 uv = 0.5 + (q-0.5)*(0.98 + 0.006*sin(0.9*uTime));\n" +

        " vec3 oricol = texture2D(uDiffuseTexture,vec2(q.x,1.0-q.y)).xyz;\n" +
        " vec3 col;\n" +

 // start with the source texture and misalign the rays it a bit
 // TODO animate misalignment upon hit or similar event
        " col.r = texture2D(uDiffuseTexture,vec2(uv.x+0.003,-uv.y)).x;\n" +
        " col.g = texture2D(uDiffuseTexture,vec2(uv.x+0.000,-uv.y)).y;\n" +
        " col.b = texture2D(uDiffuseTexture,vec2(uv.x-0.003,-uv.y)).z;\n" +

 // contrast curve
        " col = clamp(col*0.5+0.5*col*col*1.2,0.0,1.0);\n" +

 //vignette
        " col *= 0.6 + 0.4*16.0*uv.x*uv.y*(1.0-uv.x)*(1.0-uv.y);\n" +

 //color tint
        " col *= vec3(0.9,1.0,0.7);\n" +

 //scanline (last 2 constants are crawl speed and size)
 //TODO make size dependent on viewport
        " col *= 0.8+0.2*sin(10.0*uTime+uv.y*900.0);\n" +

 //flickering (semi-randomized)
        " col *= 1.0-0.07*rand(vec2(uTime, tan(uTime)));\n" +

 //smoothen
        " float comp = smoothstep( 0.2, 0.7, sin(uTime) );\n" +
        " col = mix( col, oricol, clamp(-2.0+2.0*q.x+3.0*comp,0.0,1.0) );\n" +

        " gl_FragColor = vec4(col,1.0);\n" +

        "}\n";

    protected int muTimeHandle;
    protected int muResHandle;
    protected float mTime;
    protected float[] mRes;

    public ScanlineMaterial() {
        this(SimpleMaterial.mVShader, mFShader);
    }

    public ScanlineMaterial(String vertexShader, String fragmentShader) {
        super(vertexShader, fragmentShader);
        setShaders(vertexShader, fragmentShader);
    }

    public void setTime(float time) {
        mTime = time;
        GLES20.glUniform1f(muTimeHandle, mTime);
    }

    public void setTexRes(float width, float height){
        float [] res = new float[] {width, height};
        mRes = res;
        GLES20.glUniform2fv(muResHandle, 1, mRes, 0);
    }

    @Override
    public void useProgram() {
        super.useProgram();
    }

    @Override
    public void setShaders(String vertexShader, String fragmentShader)
    {
        super.setShaders(vertexShader, fragmentShader);
        muTimeHandle = getUniformLocation("uTime");
        muResHandle = getUniformLocation("uResolution");
    }
}

And here is an example renderer using this material --

    private Plane mPlane;
    private float tick;
    private Bitmap bg;
    private ScanlineMaterial material = new ScanlineMaterial();
...

    public void initScene() {
        bg = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.rajawali_tex);
        mPlane = new Plane(5,5,1,1,1, true);
        mPlane.setMaterial(material);
        mPlane.addTexture(mTextureManager.addTexture(bg));
        addChild(mPlane);  
    }

...

    public void onDrawFrame(GL10 glUnused) {
        super.onDrawFrame(glUnused);
        material.setTexRes(bg.getWidth()*2, bg.getHeight()*2); //The resolution at default size made the texture appear as tiles... not sure why but it is probably bad math in the shader
        material.setTime(tick);
        tick++;
    }

This is how it renders on my device... like I said, not perfect:

[Davhed]

Just did some quick testing and I have 2 recommendations for you...

Change " vec2 uv = 0.5 + (q-0.5)*(0.98 + 0.006*sin(0.9*uTime));\n" +
To " vec2 uv = 0.5 + (q-0.5)*(0.98 + 0.001*sin(0.95*uTime));\n" +

and remove these two lines:

        " float comp = smoothstep( 0.2, 0.7, sin(uTime) );\n" +
        " col = mix( col, oricol, clamp(-2.0+2.0*q.x+3.0*comp,0.0,1.0) );\n" +

At least on my Nexus 7 it provides a much better scanline effect, although the effect does seem to break down over time again probably because of poor mathematics in the original GLS.

Hey, very nice effect, thanks :) Can I use it in my products?

[Davhed]

Yea absolutely, you will need to tweak the parameters a bit to get it looking right, but it's a nice effect I agree.