# Can I draw a background using a shader and then draw meshes on top of it?

**URL:** <https://forum.babylonjs.com/t/can-i-draw-a-background-using-a-shader-and-then-draw-meshes-on-top-of-it/52271>\
**Category:** Questions\
**Created:** [July 23, 2024, 3:50pm UTC](https://forum.babylonjs.com/t/can-i-draw-a-background-using-a-shader-and-then-draw-meshes-on-top-of-it/52271 "2024-07-23T15:50:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![XIYO](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xiyo/32/40159_2.png) [@XIYO](https://forum.babylonjs.com/u/XIYO)\
**Post date:** [July 23, 2024, 3:50pm UTC](https://forum.babylonjs.com/t/can-i-draw-a-background-using-a-shader-and-then-draw-meshes-on-top-of-it/52271/1 "2024-07-23T15:50:25Z")

</div>

Hello, I’m researching materials to realize an interesting idea that came to mind.

> **[Babylon.js Playground](https://playground.babylonjs.com/#PPPXW0%2313)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

This PG uses a shader as a post-process to create a CRT-like effect.

Instead of post-processing, is it possible to draw the background with shader code before drawing the mesh using pre-processing?  
Using a shader in scene.clear or…?

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [July 23, 2024, 4:01pm UTC](https://forum.babylonjs.com/t/can-i-draw-a-background-using-a-shader-and-then-draw-meshes-on-top-of-it/52271/2 "2024-07-23T16:01:10Z")

</div>

That’s an interesting question. For sure you can do it with a mesh rendered first, but I’ll be interested in other answers for a custom scene.clear with a shader 🙂

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [July 23, 2024, 4:37pm UTC](https://forum.babylonjs.com/t/can-i-draw-a-background-using-a-shader-and-then-draw-meshes-on-top-of-it/52271/3 "2024-07-23T16:37:56Z")

</div>

You could always have a plane take up the cameras full frustrum and then have a custom shader on that. then user rendering groups to put that in the back and everything else in front of it.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 23, 2024, 6:32pm UTC](https://forum.babylonjs.com/t/can-i-draw-a-background-using-a-shader-and-then-draw-meshes-on-top-of-it/52271/4 "2024-07-23T18:32:36Z")

</div>

Yes you can 🙂

Several options:

- Have 2 scenes
- Use a Layer object
- Use a fullscreen quad

---

<div class="post-metadata">

**Author:** ![XIYO](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xiyo/32/40159_2.png) [@XIYO](https://forum.babylonjs.com/u/XIYO)\
**Post date:** [July 23, 2024, 11:37pm UTC](https://forum.babylonjs.com/t/can-i-draw-a-background-using-a-shader-and-then-draw-meshes-on-top-of-it/52271/5 "2024-07-23T23:37:08Z")

</div>

I was able to achieve one of the desired effects. Thank you for your help.

However, I have a question regarding an area in the video that I couldn’t quite understand.

The position and scale values don’t seem to work at all. Is it possible for the vertex shader to directly modify the grid area of the mesh? If so, why does `size: 1` decrease the size?

`my.vertex.fx`

```auto
#version 300 es
precision highp float;

// Attributes
in vec3 position;
in vec2 uv;

// Varyings
out vec2 vUV;

void main(void) {
    vUV = uv;
    gl_Position = vec4(position, 1.0);
}

```

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 23, 2024, 11:38pm UTC](https://forum.babylonjs.com/t/can-i-draw-a-background-using-a-shader-and-then-draw-meshes-on-top-of-it/52271/6 "2024-07-23T23:38:54Z")

</div>

This is because your shader does not include the worldmatrix (which is build from position or size)