Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using variables from JavaScript land? #15

Open
stereosteve opened this issue Oct 28, 2024 · 1 comment
Open

Using variables from JavaScript land? #15

stereosteve opened this issue Oct 28, 2024 · 1 comment

Comments

@stereosteve
Copy link

stereosteve commented Oct 28, 2024

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
Copy link
Owner

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...

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

No branches or pull requests

2 participants