Full screen shader

Questions
1

Newb question here, but I’m trying to make my shaders full screen, I only know how to apply a material to a mesh. How do I make the shader applied to the whole scene, or camera?

This shader for example is full screen (but not Babylonjs) and its the kind of thing I want to achieve to effect the whole scene that I’m looking at.

https://glslsandbox.com/e#78007.0

But I am only able to apply it (sample code below)

How do I make the shader full screen? Am I missing something fundamental?

Screen Shot 2021-12-20 at 8.58.01 PM
Screen Shot 2021-12-20 at 8.58.01 PM1960×606 57.8 KB 

  const mesh: Mesh = selectMesh(3, scene)

            Effect.ShadersStore["customVertexShader"] = vertexShader
            Effect.ShadersStore["customFragmentShader"] = circleZip

            const shaderMaterial = new ShaderMaterial("shader", scene, {
                vertex: "custom",
                fragment: "custom",
            },
                {
                    attributes: ["position", "normal", "uv",],
                    uniforms: ["world", "worldView", "worldViewProjection", "view", "projection", "resolution"]
                });

            mesh.material = shaderMaterial;
2

Welcome abroad!
Sorry if I didn’t understand you clearly, but are you finding somthing like this?

2 Likes
3

Post processes are a good way to get full screen shaders. @Pryme8 also has some great work with full screen shaders: Render to smaller texture then take that to screen quad - #2 by Pryme8

3 Likes
4

Thanks! Post Process was able to achieve what I’m after.

1 Like