ianthehenry / bauble

a playground for making 3D art with lisp and math
https://bauble.studio
MIT License
410 stars 10 forks source link

Using variables from JavaScript land? #15

Open stereosteve opened 1 month ago

stereosteve commented 1 month ago

Was just watching the YouTube updates video and looks like some cool stuff. I'm not really using it on the regular, but glad to see it getting updates none the less!

One thing I was curious about is if there's a way to get external data from JavaScript-land into Bauble-land. This could be like the mouse coordinates, or key presses. Mainly I was thinking about making sound reactive something-something using the audio analysis API.

Also wondering if there's instructions anywhere about how to pre-compile a bauble creation to html + JS that you could embed in a webpage (perhaps without needing all the janet / bauble stuff to run when viewing).

Thanks!

ianthehenry commented 1 month ago

Hi! Okay so. It's not a... good answer. But. There is currently no nice way to do this. There are kind of two features here:

  1. custom uniforms

This is probably like an hour of work, and would let you reference arbitrary values in your Bauble shader. There are limits to what you can do with this -- you can't change the scene graph itself as that would require re-compiling the shader -- but it would work for audio-reactive visuals and mouse position and such. This is a small feature with a pretty big payoff, but I haven't added it because it's only useful with...

  1. standalone embedding

This is also easy, though not as easy. Probably... six hours or so. I want to do this, and I am working on a Bauble blog post that will have to include this for its demos... but I haven't actually gotten to it yet. The idea is that you can precompile the GLSL code and embed it along with a small JS lib that sets up the canvas and knows how to render it. So no Webassembly, no codemirror, none of that stuff -- just a few kilobytes of JS.

You can totally do this today if you do it kinda by hand... the Bauble CLI lets you get the fragment shader source, and then you just need to set up a webgl canvas that renders two triangles covering the whole screen -- basically half the code in https://github.com/ianthehenry/bauble/blob/master/studio/renderer.ts.

The "real" feature will generate slimmer shaders (don't need the debug view modes) and probably minify the fragment shader source for good measure, but that's just saving a few bytes. But I guess "doing it by hand" isn't very attractive without support for custom uniforms in the first place.

All of this adds up to like "a day of work," I think, but I have a baby and am out of parental leave so it may be a month before I accumulate a full day of work on Bauble again...