Nice Demo! Definitely agree with the lack of familiarity / tangential aspect comment. IMO your best bet is starting off with vanilla HTML + JS and then adding tooling as required / only if necessary.
E.g. Vite is handy for bootstrapping and hot reloading (don't really need it for build anymore given remote imports, etc). Do you really need typescript? If it saves you time in the long-term, sure add it in (it requires a build step). If you are building a big UI then OK - add a CSS / JS framework. But best bet is always to keep complexity down to a minimum. Last thing you want to be doing is debugging / working around peculiarities of other people's code.
I tend to demo in a single HTML file (you can even embed your shaders in the HTLML!), which can then be easily shared / hosted.
On the demo. Not sure if you referenced it, but I remember being wowed by a similar (official) demo back when Three was first rolling out WebGL2 support. The first commit I could find was 2018, but I'm sure it was actually earlier than that - might even have been a pre-release demo (I'm certain cross browser support wasn't there when I tried it).
They used the "NRRD" format, which I haven't heard of (but sounds pretty close to your 1x1x1 raw files ... x-array style thing). Did you look at this approach? Have things moved on since?
Edit: maybe the real tutorial here is around pre-processing of common volume data formats for use with e.g. three / webgl2
Comments
Nice Demo! Definitely agree with the lack of familiarity / tangential aspect comment. IMO your best bet is starting off with vanilla HTML + JS and then adding tooling as required / only if necessary.
E.g. Vite is handy for bootstrapping and hot reloading (don't really need it for build anymore given remote imports, etc). Do you really need typescript? If it saves you time in the long-term, sure add it in (it requires a build step). If you are building a big UI then OK - add a CSS / JS framework. But best bet is always to keep complexity down to a minimum. Last thing you want to be doing is debugging / working around peculiarities of other people's code.
I tend to demo in a single HTML file (you can even embed your shaders in the HTLML!), which can then be easily shared / hosted.
On the demo. Not sure if you referenced it, but I remember being wowed by a similar (official) demo back when Three was first rolling out WebGL2 support. The first commit I could find was 2018, but I'm sure it was actually earlier than that - might even have been a pre-release demo (I'm certain cross browser support wasn't there when I tried it).
https://threejs.org/examples/webgl2_materials_texture3d.html
They used the "NRRD" format, which I haven't heard of (but sounds pretty close to your 1x1x1 raw files ... x-array style thing). Did you look at this approach? Have things moved on since?
Edit: maybe the real tutorial here is around pre-processing of common volume data formats for use with e.g. three / webgl2