title: How to declare a "mask" material using A-Frame.js
body: <p>I'm trying to make a scene where there's a "hole in the wall". 
  <a href="https://i.stack.imgur.com/Vh1ye.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vh1ye.png" alt="enter image description here"></a></p>
  
  <p>This requires a plane with square removed, and then a material applied to the plane with the following properties:</p>
  
  <ol>
  <li>Invisible to the camera</li>
  <li>Hides any other objects from being rendered that are behind it</li>
  </ol>
  
  <p>There's an example of this with three.js <a href="https://stemkoski.github.io/AR-Examples/" rel="nofollow noreferrer">here</a>, but how can I do it with the <a href="https://aframe.io/docs/0.9.0/components/material.html#sidebar" rel="nofollow noreferrer">a-frame material syntax</a>?</p>