Mouse interaction in Background layout mode

[renato-minuar]

Hey! Nice project, found it on twitter/X!

I noticed that in Background layout mode on the website (https://radiant-shaders.com/shader/topographic), mouse interaction doesn't reach the shaders since the overlay div sits on top and captures all events. Is that intentional?

If not, something like this could be default: the shaders already listen for postMessage for parameter updates, so the same mechanism could forward mouse coordinates from the overlay to the iframe, and the user can still click/select/interact with the content on top:

overlay.addEventListener('mousemove', (e) => {
  iframe.contentWindow.postMessage({
    type: 'mouse',
    x: e.clientX,
    y: e.clientY
  }, '*');
});

overlay.addEventListener('mouseleave', () => {
  iframe.contentWindow.postMessage({ type: 'mouse', x: -1, y: -1 }, '*');
});

With a small listener addition in the shaders:

window.addEventListener('message', function(e) {
  if (e.data && e.data.type === 'mouse') {
    // update mouse position variables
  }
});

[pbakaus]

Good catch! I just fixed this with some CSS instead.