Add Cursor control to Stencil mask (#534)

yashrajbharti · yashrajbharticybtekk · web-flow · commit 586b141f073e · 2025-07-20T02:22:42.000-07:00
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 <y.bharti@cybtekk.com>
diff --git a/sample/stencilMask/index.html b/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>
diff --git a/sample/stencilMask/main.ts b/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);

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@`
`29`	`29`	`height: 600px;`
`30`	`30`	`max-width: 100%;`
`31`	`31`	`display: block;`
	`32`	`+ touch-action: none;`
`32`	`33`	`}`
`33`	`34`	`</style>`
`34`	`35`	`<script defer src="main.js" type="module"></script>`