Accurate FNAF Clickteam “Panorama”

*NOTE* Dont expect this to work with an actual panoramic image, you will be disapointed.

 

This is a port of the Clickteam shader used in FNAF 1-5 (specificaly the shader used in the new FNAF mobile ports) compatible with Godot 3 and Godot 4

This shader acts as a sort of lens. Just put it on a ColorRect and youre done!

UPDATE: The shader has been updated to include with a “Smoothed” option. Turning this off will give the “stairstepped” look that the clickteam panorama has. Also fixed the bug that made the zoom amount change depending on the aspect ratio of the window

Shader code
shader_type canvas_item;

uniform int zoom = 75;
uniform bool smoothed = true;
uniform bool vertical = false;
uniform bool noWrap = true;

//Diable this line for Godot 3.x//
uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;

void fragment() {
	lowp float fB;
	lowp float fC;

	//Change this if you want to make the stairstepping more/less intense//
	const float steps = 230.0;

	vec2 posTex;
	vec2 uv = SCREEN_UV;

  if(vertical == false){

    fB = 1.0 - (float(zoom) * .0015);
    fC = max(.02, 1.0 + (fB - 1.0) * 4.0 * pow((uv.x - 0.5), 2.0));
	if (!smoothed){
		fC = float(int(fC * steps)) / steps;
	}

    posTex = (uv * vec2(1.0, fC) + vec2(0.0, (1.0 - fC) / 2.0));

    if(noWrap == false || (posTex.y >= 0.0 && posTex.y <= 1.0)){
      COLOR.rgb = texture(SCREEN_TEXTURE, posTex).rgb;
    }

  } else {
    fB = 1.0 - (float(zoom) * .0015);
    fC = max(0.05, 1.0 + (fB - 1.0) * 4.0 * pow((uv.y - 0.5), 2.0));
	if (!smoothed){
		fC = float(int(fC * steps)) / steps;
	}

    posTex = uv * vec2(fC, 1.0) + vec2((1.0 - fC) / 2.0, 0.0);

    if(noWrap == false || (posTex.x >= 0.0 && posTex.x <= 1.0)){
      COLOR.rgb = textureLod(SCREEN_TEXTURE, posTex, 0.0).rgb;
    }
  }
}
Tags
clickteam, displacement, five nights at freddys, fnaf, perspective
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Fnaf / Clickteam perspective (displacement) – Godot 4.2

Sub-Pixel Accurate Pixel-Sprite Filtering

FNAF Faked 3D Displacement Shader

Subscribe
Notify of
guest

7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
The2AndOnly
The2AndOnly
1 year ago

There’s a problem, it changes depending on how big your screen is, and it looks super weird when it’s small.

The2AndOnly
The2AndOnly
1 year ago
Reply to  The2AndOnly

One solution is to change the project settings window resize mode to viewport.
Also, one question I have is how do you change the strength of it?

Dinocanid
Dinocanid
1 year ago

How would I use this in Godot 4? When I apply it to a TextureRect node it just makes it blank, even if I add

uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;
RealCupHasCup
10 months ago

Nice shader! It works well but there’s an important problem: Because the shader will change the shape of the origin image, so the UI collisions cant work with the processed image, and the offset of the collisions depends on the window size.I think PolygonShape2D can solve the problem but it was too hard to write a program to control the colliding shape.And Clickteam Fusion doesnt have this problem.Looking forward to your reply!