# How to mask the field of view using shadermaterial and GLSL

**URL:** <https://discourse.threejs.org/t/how-to-mask-the-field-of-view-using-shadermaterial-and-glsl/60490>\
**Category:** Questions\
**Tags:** vr, fov, shaders\
**Created:** [January 19, 2024, 6:04am UTC](https://discourse.threejs.org/t/how-to-mask-the-field-of-view-using-shadermaterial-and-glsl/60490 "2024-01-19T06:04:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kikdu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kikdu/32/43968_2.png) [@kikdu](https://discourse.threejs.org/u/kikdu)\
**Post date:** [January 19, 2024, 6:04am UTC](https://discourse.threejs.org/t/how-to-mask-the-field-of-view-using-shadermaterial-and-glsl/60490/1 "2024-01-19T06:04:01Z")

</div>

Hello,

I am trying to reduce the field of view on the right and on the left in VR using a shader material as a mask overlaying anything in the canvas (cf. the video that I uploaded).

It is almost working properly. As you may see in the video, when I rotate the camera (HMD) too much on the left/right/top/bottom, the mask disappears (and reappears when the camera comes back to the center).

Do you know why and how I could fix that ? I’d like the mask to be always present as it is at the beginning of the video.

Note: I am showing it in VR here because that’s my final goal but even if I try it in standard mode using Orbit Controls, the behavior is the same.

This is the code I made for the mask:

```javascript
const fovMaskGeometry = new THREE.PlaneGeometry(1, 2)
const fovMaskMaterialLeft = new THREE.ShaderMaterial({
    vertexShader: `
        
        uniform float size;
        void main()
        {
            vec3 newPos = vec3(position);
            newPos[0] = newPos[0] - 1.0 + size/2.0;
            gl_Position = vec4(newPos, 1.0);
        }
    `,
    fragmentShader: `
        void main()
        {
            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
        }
    `,
    uniforms: {
        size: { value: 1.0 }
    }
})

const fovMaskMaterialRight = new THREE.ShaderMaterial({
    vertexShader: `
        
        uniform float size;
        void main()
        {
            vec3 newPos = vec3(position);  
            newPos[0] = newPos[0] + 1.0 - size/2.0;
            gl_Position = vec4(newPos, 1.0);
        }
    `,
    fragmentShader: `
        void main()
        {
            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
        }
    `,
    uniforms: {
        size: { value: 1.0 }
    }
})

const fovMaskLeft = new THREE.Mesh(fovMaskGeometry, fovMaskMaterialLeft)
const fovMaskRight = new THREE.Mesh(fovMaskGeometry, fovMaskMaterialRight)
var scalingFactor = 0.5
fovMaskGeometry.scale(scalingFactor,1,1)
fovMaskMaterialLeft.uniforms.size.value = scalingFactor
fovMaskMaterialRight.uniforms.size.value = scalingFactor
scene.add(fovMaskLeft)
scene.add(fovMaskRight)

```

Thank you !

---

<div class="post-metadata">

**Author:** ![Arthur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arthur/32/22954_2.png) [@Arthur](https://discourse.threejs.org/u/Arthur)\
**Post date:** [January 19, 2024, 5:47pm UTC](https://discourse.threejs.org/t/how-to-mask-the-field-of-view-using-shadermaterial-and-glsl/60490/2 "2024-01-19T17:47:09Z")

</div>

Have you tried setting the material’'s side to `THREE.DoubleSide` ?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [January 19, 2024, 7:39pm UTC](https://discourse.threejs.org/t/how-to-mask-the-field-of-view-using-shadermaterial-and-glsl/60490/3 "2024-01-19T19:39:48Z")

</div>

It is hard to guess the rest of the code, but it could be as important as the code that is already posted.

A possible reason for a mesh to disappear at once is that it is frustum culled. Do the masks disappear when their [frustumCulled](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D.frustumCulled) property is set to `false`?

---

<div class="post-metadata">

**Author:** ![kikdu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kikdu/32/43968_2.png) [@kikdu](https://discourse.threejs.org/u/kikdu)\
**Post date:** [January 22, 2024, 2:09am UTC](https://discourse.threejs.org/t/how-to-mask-the-field-of-view-using-shadermaterial-and-glsl/60490/4 "2024-01-22T02:09:54Z")

</div>

> A possible reason for a mesh to disappear at once is that it is frustum culled. Do the masks disappear when their [frustumCulled](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D.frustumCulled) property is set to `false`?

Great thank you, that fixed the problem. Now, I have another problem but I will open a new topic, I guess it might be better for readability.