Add Cursor control to Stencil mask (#534)

Add Cursor control directly to Stencil mask example

Related to #527 

![ScreenRecording2025-07-20at1 17 05PM-ezgif
com-video-to-gif-converter](https://github.com/user-attachments/assets/7ce36937-4f21-4b15-b916-0fe4517700e8)

Added:
<img width="306" height="102" alt="Screenshot 2025-07-20 at 2 06 24 PM"
src="https://github.com/user-attachments/assets/6bc573fb-c059-4758-ae6b-2091c60880a7"
/>



https://github.com/user-attachments/assets/e8bb1138-57c5-4675-a422-9b266ea1c994

---------

Co-authored-by: yashrajbharticybtekk <[email protected]>

Author: yashrajbharti

sample/stencilMask/index.html

@@ -29,6 +29,7 @@
         height: 600px;
         max-width: 100%;
         display: block;
+        touch-action: none;
       }
     </style>
     <script defer src="main.js" type="module"></script>

sample/stencilMask/main.ts

@@ -31,6 +31,14 @@ context.configure({
   format: presentationFormat,
 });
 
+let mousePos = { x: 0, y: 0 };
+canvas.addEventListener('pointermove', (e) => {
+  const rect = canvas.getBoundingClientRect();
+  const x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+  const y = -(((e.clientY - rect.top) / rect.height) * 2 - 1);
+  mousePos = { x, y };
+});
+
 // Creates a buffer and puts data in it.
 function createBufferWithData(
   device: GPUDevice,
@@ -334,6 +342,9 @@ function updateMask(
 
   objectInfos.forEach(({ uniformBuffer, uniformValues, worldMatrix }) => {
     mat4.identity(worldMatrix);
+    const worldX = mousePos.x * 10;
+    const worldY = mousePos.y * 10;
+    mat4.translate(worldMatrix, [worldX, worldY, 0], worldMatrix);
     mat4.rotateX(worldMatrix, time * 0.25, worldMatrix);
     mat4.rotateY(worldMatrix, time * 0.15, worldMatrix);
     mat4.rotateX(worldMatrix, rotation[0] * Math.PI, worldMatrix);