Skip to content

Conversation

@ochafik
Copy link
Contributor

@ochafik ochafik commented Jan 17, 2026

Summary

This PR fixes and enhances mouse interaction in the Shadertoy example to match the official Shadertoy specification.

Changes

iMouse Uniform Behavior (Spec-compliant)

Component When Button Down After Release Never Clicked
iMouse.xy Current position Last position (0, 0)
iMouse.zw Click start (positive) Negated (-x, -y) (0, 0)

Previous behavior (incorrect):

  • iMouse.xy always updated on mousemove (should only update when button down)
  • iMouse.zw reset to 0 on mouseup (should negate to indicate release)

New behavior (spec-compliant):

  • iMouse.xy only updates while button/touch is held
  • iMouse.zw is positive when down, negative when released
  • iMouse.z > 0 reliably indicates button is pressed

Mobile Touch Support

Added touch event handlers for mobile devices:

  • touchstart / touchmove / touchend / touchcancel
  • Same behavior as mouse events with proper coordinate translation

Documentation

  • Updated tool description with mouse interaction guide
  • Enhanced README with iMouse behavior table and examples
  • Fixed Interactive Julia Set example to handle initial state

Research

iMouse is a core Shadertoy feature expected by the community. Most popular shaders use it:

  • Star Nest (camera rotation)
  • Raymarching templates (camera control)
  • Particle systems (attraction/repulsion)
  • Interactive fractals (parameter control)

All major Shadertoy clones/viewers implement mouse support:

  • VS Code shader-toy extension
  • shadertoy-react
  • desktop-shadertoy
  • pygfx/shadertoy

Testing

  • Built successfully
  • Unit tests pass
  • E2E tests have unrelated browser launch issues (pre-existing)

Fixes mouse interaction to match official Shadertoy specification.

- Fix iMouse uniform to match official Shadertoy specification:
  - iMouse.xy only updates while button/touch is held down
  - iMouse.zw uses positive values when down, negative when released
  - Enables proper click detection via iMouse.z > 0

- Add touch event support for mobile devices:
  - touchstart/touchmove/touchend/touchcancel handlers
  - Same behavior as mouse events

- Update tool description with mouse interaction documentation
- Update README with:
  - Mouse & Touch Interaction feature
  - Improved Julia Set example with click detection
  - iMouse specification table and usage examples

The iMouse uniform is a core Shadertoy feature used by popular shaders
like Star Nest, raymarching examples, and particle systems.
@ochafik ochafik marked this pull request as ready for review January 19, 2026 17:13
@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 19, 2026

Open in StackBlitz

@modelcontextprotocol/ext-apps

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/ext-apps@293

@modelcontextprotocol/server-basic-react

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-basic-react@293

@modelcontextprotocol/server-basic-vanillajs

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-basic-vanillajs@293

@modelcontextprotocol/server-budget-allocator

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-budget-allocator@293

@modelcontextprotocol/server-cohort-heatmap

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-cohort-heatmap@293

@modelcontextprotocol/server-customer-segmentation

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-customer-segmentation@293

@modelcontextprotocol/server-map

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-map@293

@modelcontextprotocol/server-pdf

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-pdf@293

@modelcontextprotocol/server-scenario-modeler

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-scenario-modeler@293

@modelcontextprotocol/server-shadertoy

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-shadertoy@293

@modelcontextprotocol/server-sheet-music

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-sheet-music@293

@modelcontextprotocol/server-system-monitor

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-system-monitor@293

@modelcontextprotocol/server-threejs

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-threejs@293

@modelcontextprotocol/server-transcript

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-transcript@293

@modelcontextprotocol/server-video-resource

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-video-resource@293

@modelcontextprotocol/server-wiki-explorer

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-wiki-explorer@293

commit: a331479

Copy link
Collaborator

@antonpk1 antonpk1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

@ochafik ochafik merged commit 6c5aa52 into main Jan 19, 2026
18 of 19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants