Pixelating a shader (SOLVED)

Questions
#1

I was wondering if any shader aficionados have any ideas as to whether it’s possible to get an existing shader, and ‘bolt on’ a pixelation effect?

For example, here’s one I’ve grabbed from Shader Toy and converted to Defold. It’s a simple plasma effect:

varying mediump vec2 var_texcoord0;
uniform lowp vec4 shaderTime;

void main()
{
	vec2 res = vec2(1.0, 1.0);
	vec2 uv = var_texcoord0.xy * res.xy - 0.5;

	float sTime = shaderTime.x * 0.5;

	float factA = 5.0;
	float factB = 7.5;

	float varA = (sin(uv.y * factB - sTime)) + sin(uv.x * factA - sTime * 2.0);
	float varB = (sin(uv.x * factB - sTime * 2.0)) + sin(uv.y * factA - sTime * 2.0);

	gl_FragColor = vec4(uv, uv.y, 1.0) + vec4(varA - 0.5, varA - 0.5, varA + 0.5, 1.0) * vec4(varB - 0.5, varB + 0.3, varB, 1.0) * 0.25;
}

Here’s how it looks:

1
1.jpg418×625 36.3 KB

Here’s how I would like it to look:

x
x.png418×626 4.93 KB

I have no idea if this is even possible to add to a shader as it were without modifying the main guts of it, or does the shader need to be rewritten?

Cheers everyone

1 Like
#2

In the case of pixelating this plasma shader, all you need to do is modify how it sets the uv.

2018-10-06%2001_01_57-PixelPlasma
2018-10-06 01_01_57-PixelPlasma.png962×672 7.87 KB

So it could be something like this

varying mediump vec4 var_position;
varying mediump vec3 var_normal;
varying mediump vec2 var_texcoord0;
varying mediump vec4 var_light;

uniform lowp sampler2D tex0;
uniform lowp vec4 shaderTime;
uniform lowp vec4 resolution;
uniform lowp vec4 pixelation;

void main()
{
    vec2 res = vec2(1.0, 1.0);
    vec2 uv = var_texcoord0.xy * res.xy - 0.5;

    float dx = pixelation.x;
    float dy = pixelation.x * (resolution.x / resolution.y);
    uv.x = dx * floor(uv.x / dx);
    uv.y = dy * floor(uv.y / dy);

    float sTime = shaderTime.x * 0.5;

    float factA = 5.0;
    float factB = 7.5;

    float varA = (sin(uv.y * factB - sTime)) + sin(uv.x * factA - sTime * 2.0);
    float varB = (sin(uv.x * factB - sTime * 2.0)) + sin(uv.y * factA - sTime * 2.0);

    gl_FragColor = vec4(uv, uv.y, 1.0) + vec4(varA - 0.5, varA - 0.5, varA + 0.5, 1.0) * vec4(varB - 0.5, varB + 0.3, varB, 1.0) * 0.25;    
}

PixelPlasma.zip (3.6 KB)

Or look at any pixelation shader that you like and adapt it so that your plasma uvs are modified the way it modifies the uvs in its version.

9 Likes
#3

Wow! Thanks @Pkeod

This is brilliant and exactly what I was looking for.

Very much appreciated!!

7 Likes
#4

I wanted to recreate such post-process effect, but the example provided by @Pkeod fails with an error I don’t know:

ERROR:GRAPHICS: gl error 1282: invalid operation

Assertion failed: 0, file ..\src\opengl\graphics_opengl.cpp, line 1561

Replacing pixelplasma.fp with a default sprite.fp and trying to add line by one failed at the very beginning, because I can’t supply any of the fragment uniforms from the script :confused:

#5

It did use to work…

It seems models are no longer allowed to use the tile render predicate tag? I’ll fix in a few mins hopefully. :slight_smile:

1 Like
#6

I couldn’t figure out how to make old shader work without changing it to model. Here is a pixelate shader you should be able to use with a render target with minor adaptations

3 Likes
#7

Thanks, I figured out what it is about with that kind of shader and managed it to work, though on the main render target it’s pixelating too much and it’s no longer neat:

pixelated_render_target
pixelated_render_target.PNG744×746 113 KB

So probably I would like to use it only on some other models, on which I would draw only e.g. particlefx - is this possible? If so, is this solution optimal or do you maybe have some other ideas to make kind of pixel perfect effects out of particlefx?

1 Like