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,
The reason your notebook is being slowed down is that timer is a separate cell on which other cells depend. This means:
- Whenever your timer cell produces a new value all other cells that depend on it get reevaluated.
- 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
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.