Vertex shader in post effects. Increase vertex quantity

dadiaar · March 24, 2022, 1:09pm

Good morning everybody.

I’ve noticed that for custom post effects we have only 4 vertices, which makes sense, but it’s limited.

I achieved the effect I need by using Fragment shaders, but it’s a waste or resources and the phone gets hot, which forces Chrome to shut down after a while…

Is there any way to increase the number of vertices?

Thanks.

Leonidas · March 24, 2022, 1:49pm

Hi @dadiaar,

That’s interesting, I never thought using more vertices on a post effect. The primitive for the screen quad is definite here, without patching the engine I am not sure you can change it:

github.com

playcanvas/engine/blob/9a0697c6b2cd521db510df49f90028f414006696/src/graphics/post-effect.js#L11

    
      
          import { CULLFACE_NONE, PRIMITIVE_TRISTRIP, SEMANTIC_POSITION, TYPE_FLOAT32 } from './constants.js';

          import { VertexBuffer } from './vertex-buffer.js';

          import { VertexFormat } from './vertex-format.js';

          import { VertexIterator } from './vertex-iterator.js';

          

          /** @typedef {import('../math/vec4.js').Vec4} Vec4 */

          /** @typedef {import('./graphics-device.js').GraphicsDevice} GraphicsDevice */

          /** @typedef {import('./render-target.js').RenderTarget} RenderTarget */

          /** @typedef {import('./shader.js').Shader} Shader */

          

          // Primitive for drawFullscreenQuad

          const primitive = {

              type: PRIMITIVE_TRISTRIP,

              base: 0,

              count: 4,

              indexed: false

          };

          

          /**

           * Base class for all post effects. Post effects take a a render target as input apply effects to

           * it and then render the result to an output render target or the screen if no output is

@mvaligursky may have a point of view in that.

dadiaar · March 24, 2022, 1:56pm

Hi Leonidas

Thanks for your reply. I’ll give a try to that.

As example, have you seen a wave effect? I saw an example here, I don’t recall the URL, but basically, it was a fragment shader. 2M operations each frame when a vertex shader could do a few dozens/hundreds only.

Have a nice day.

Leonidas · March 24, 2022, 2:01pm

A wave effect usually won’t be a post process effect but a shader applied to a regular model. There you have full control over what model that is.

If you would like to render it on screen space, you can potentially scale it to fill the whole viewport.

dadiaar · March 24, 2022, 2:53pm

This would work. Use another ortogonal camera with a plane in front of it, a material, etc. It’s just not optimal.

Interestingly enough, the example I was talking about was in a question you asked: wave effect

I’m looking for a fast way to test your idea using the editor, but if I can’t find it soon, I’ll have to do as you said and compile my own thing.

Thanks.