Adding u_time and u_mouse position in Fragment shader (Three.js)

Community Help
1

Hi All!

After seeing Shirley Wu’s observable for playing with fragment shaders, I really wanted to make my own, sort of like a diary mixing text and fragment shader samples, though I’m still a newbie at shaders. I wanted to show shader samples like the editor in the Book of Shaders.

The only in/out constants in Shirley’s fragment shaders is varying vec2 vUv;.
I wanted to add u_time (time in seconds since start) and u_mouse (pixel mouse pos within the shader) like in the Book of Shaders.

I got it to work here but:

  • the timer (for uniform float _time;) seems to be lagging the page. I read some Generator tutorials but I wasn’t able to create a single timer for the whole page that smoothly runs at 30 or 60fps, returning seconds (10.63242394 secs)
  • the strategy for tracking mouse position doesn’t seem great either, since using one of the last 2 shader examples on the page does indeed track the mouse, but it’s really slow.

Any tips on how to improve the timer or mouse tracking?

Thanks a million,

2

The reason your notebook is being slowed down is that timer is a separate cell on which other cells depend. This means:

  1. Whenever your timer cell produces a new value all other cells that depend on it get reevaluated.
  2. Because of this your WebGL contexts get reinstantiated on every tick.

You can use a shared state object to store and access both the timer and mouse position: https://beta.observablehq.com/compare/f06f632c29e9e0b1...955d1d841e163a83

Note that mutable doesn’t help in this scenario, because mutable only allows a cell value to be changed from other cells so that dependent cells are automatically reevaluated.
Edit: The above is not entirely true, as you can access cell values with the mutable keyword to avoid reevaluation: https://beta.observablehq.com/compare/f06f632c29e9e0b1...fe1f54600daced06

1 Like
3

Wow, thank you so much for the in-depth code review!
Your comments in the code are extremely helpful as well, this really helps me understand how cells/generators/etc work under the hood.
This just makes me more excited to keep diving into the platform.
Thanks again!

2 Likes