How to preview/ iterate on full-screen post-processing shaders?

Question

I'm writing some post-processing effects using SCREEN_TEXTURE in 3.5. I tried to search about how I can preview my changes to such a shader in the editor, but I haven't found anything that works so far. I'd like to simulate the screen texture with maybe a static image or just the viewport of a camera in the editor. I know I could run the game and load the shader but that would increase the iteration time. I guess I could adjust it temporarily to just sample from an image but I was hoping that I could point a camera at some animated sprites & lighting and preview my screenspace shader. Maybe I'm just missing something simple since I'm a beginner with shaders

Edit: Temporarily working with another texture is a good solution. But just found this https://docs.godotengine.org/en/stable/tutorials/shaders/using_viewport_as_texture.html which I think would let me do what I wanted

Wartburg

Answer 1

I don't think the Rect should be parented to the ViewportContainer. It should be a sibling of it. The Viewport should be child of the ViewportContrainer. You currently have them switched.

Draw order follows scene tree, top of tree is closer to root, drawn first. The Rect therefore should be underneath the ViewportContainer - not a child of it but a sibling, second child of the Node2D there in your screenshot. And this Node2D should be changed to a Control I believe, the Rect can then be anchored as full rect. Otherwise it has nothing to anchor to, same for the VPContainer.

As for the camera, yeah I just tried 3.5.1 and for some reason it is not respecting the camera at all though I could have sworn in the past I've had it respect the camera just fine. I guess I must be misrecalling. The workaround I have to offer on this for now is to create a node2D under the Viewport and instance your scene under it. You can now change your instanced scenes position to pan around at least.

Remember there is a lot of empty space around your scene, which is why it probably looks like nothings rendering.

Data

Answer 2

Full screen shaders are just a quad that runs over the game. They are viewable by default in the editor, you don't have to do anything special.

Statue

Answer 3

Maybe I'm misunderstanding what you mean, but I'd like to be able to preview it without running the game (even via play button in the editor), because I want to see the changes I'm making to the shader reload. If I run the game and edit the shader, it doesn't reload, which makes sense, but I'd like to point a camera at an animated scene in the editor and then get a preview of what the post processing shader would look like by rendering it to a color rect, to avoid having to restart the game every time I want to tweak some shader code.

For example if I want to move the camera around this level in the editor and have the post processing shader render to the purple ColorRect

Wartburg

Answer 4

Create a placeholder scene with a viewport container and a viewport, then instance the scene with the camera and level under(as child of) the viewport.

The scene should be rendered in the editor to the viewport through the camera as you want and shown in the editor. You can now try appying your shader to the viewport or to a rect rendered over the whole canvas, located in the scenetree such that it would render over/in front of the viewport container/viewport.

Data

Answer 5

I thought you were talking about 3D. For 2D I don't think you can do it with a shader, viewport might work, but it causes other issues.

You can sort of hack it in Godot 4, like this on a ColorRect (set the color rect size to your monitor screen resolution).

shader_type canvas_item;
render_mode skip_vertex_transform;

void vertex() {
	VERTEX = (inverse(CANVAS_MATRIX) * vec4(VERTEX.x, VERTEX.y, 0.0f, 1.0f)).xy;
}

Statue

Answer 6

Thanks, I'd like to get this working but I'm missing something here. I've tried reparenting all these things in a lot of different combinations, but whatever I do, if I parent the level to the viewport, the level disappears, and the camera's view isn't rendered anywhere. What am I missing to get it to render something?

And cyberreality, seems cool for Godot 4. I've been attempting to update to Godot 4 every few months but it's not stable enough for me yet.

Wartburg

Answer 7

That would sort of work, but you cannot edit the scene as normal once it's a child of a viewport. It's basically unusable.

Statue

Answer 8

Isn't the purpose just to have something to preview while you work on your shader? It'll do for that.

Data

Answer 9

Yeah, I don't need to edit the scene itself, i just want to view some animated sprites, particles etc in scenes that i edited elsewhere while i work on my shader. your steps should help, I will try later on. Thank you

Wartburg

Answer 10

Awesome! Thanks both of you for your explanation. It's working just as I wanted. This will definitely help me iterate on the shader. I set up an AnimationPlayer in the scene too to move the level around so that I can preview it. Example video here

Wartburg