How to mask the field of view using shadermaterial and GLSL

Questions
, ,
1

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:

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 !

2

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

3

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 property is set to false?

4

A possible reason for a mesh to disappear at once is that it is frustum culled. Do the masks disappear when their 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.