Apply vertex shader to custom PostProcess

Hi guys,

I’m experimenting with PostProcesses, and I wanted to apply a vertex shader to a custom PostProcess, but when I try to add it to the PostProcess instance, everything disappears.

Here’s is the PG’s link -> https://playground.babylonjs.com/#0CIA63#2

Could please someone give me a hand understanding what I’m doing wrong? :thinking:
Thanks in advance!

HI fmichelini,

tl;dr: Post-processing should probably only use pixel shaders.

I don’t think you can apply a vertex shader to the post-process – or, rather, I don’t think you’re supposed to. According to the docs, the post-process constructor specifically requests fragmentUrl, indicating it wants a fragment (or pixel) shader. The reason for this is that post-processing manipulates the pixels that have already been rendered to the screen. Vertex shaders manipulate vertices; so in the case of post-processes, where we’ve already rendered everything to the screen and everything’s already where it should be, we actually don’t want a vertex shader to do anything at all.

Since the screen (at the point of post-processing) is effectively a quad right in front of a camera, and because vertex shaders move vertices, if you did manage to put a vertex shader on the post-process, it would probably actually move the screen away from the camera – causing everything to disappear. Note that I don’t think this is how it currently works: I get shader compilation errors (see below) when trying to run the case in your Playground, presumably because the constructor is specifically looking for a fragment shader, as mentioned above. Nevertheless, it is an interesting thought experiment. :slight_smile: Hope this helps!


(The shader compilation errors I get in the Chromium console when running your Playground scenario.)

a post process only really applies to screen space.

You need a CustomShader Material

@syntheticmagus it wasn’t working because I haven’t declared the vUV uniform in the vertex shader; it now compiles without errors (but still don’t see anything).

But the PostProcess class accepts vertexUrl as its 11th parameter; I’m wondering what’s its purpose :thinking:

You need a CustomShader Material

@Pryme8 I have to apply the shader to the whole scene, I don’t think I can use a ShaderMaterial in this case (unless there’s something I don’t know, which is probable).

When you say whole scene, do you mean every object or the screen space?

What are you trying to do? I mean technically if you don’t change anything with a bjs scenes materials then the whole scene is just the standard shader if that helps clear things up.

If you are looking to deform meshes on the fly you will need to assign the mesh a custom shader which will handle that stuff.

Things that are like filters that are applied to the whole screen are post effects

In my head I thought that I could treat the scene as a plane which I could modify its vertices with a vertex shader (since it has that vertexUrl), that’s why I said “the whole scene”.

I was trying to apply a vertex shader with a fisheye effect (instead of a fragment shader), it seemed the simplest way to do that.

Yeah I know, I’ve already done that :upside_down_face:

Already done that too :slightly_smiling_face:

A fisheye would be on the fragment of a posteffect, not on a vertex shader.

https://www.babylonjs-playground.com/#DLZQXL

3 Likes

Yeah, that’s what I did in the end, like in this pen.

The vertexUrl parameter tricked me :grin:

1 Like