Boids Sprites: rotation and velocity behavior visualized with color

[hepp]

Thanks for putting together these great samples!

Here is a small addition to help improve visualizing boids (subjective).
Solely aesthetic - and this change could be viewed subjectively if it’s an improvement or not.

To me, this greatly helps in visualizing the dense bird movements, making the cluster and movements appear more 3D.
Thought I would share, after implementing this here: https://www.wgsl.dev/editor?example=particles&canvas=webgpu
No worries if you don’t think it’s necessary to include here.

[austinEng]

checking: are you aware of #226 and that this repository will be transferred to a new org?

[hepp]

I wasn't aware. Looks like good news.
However you'd like to proceed.

I've made several improvements that might be of interest.
I could just wait on those until the transfer is completed.

[austinEng]

I've made several improvements that might be of interest.

Feel free to make PRs. There isn't a real difference between whether we do it now or after the transfer.

[hepp]

Sounds good. I certainly will have some more coming shortly.
Currently a bit busy, but once my current contract completes in a couple months I'll have lot more time again.

I'm curious -
Is there any interest in expanding the amount of examples?
Versus improving upon the current ones?

[austinEng]

More examples can be good if they teach new concepts. For example there are various issues in this repo asking for

• mipmap generation Add a mipmap generation example. #45
• text rendering Text rendering example (that uses canvas as texture) #82
• web workers Web Workers #41
• transparency [fr] transparent samples would be very helpful #157

We'll need to figure out how structuring the information will be most useful in the community.
currently the samples are a mix of super basic stuff - and then it jumps to "here's a cool demo!". Maybe that's fine, maybe not. Overall, I think we could have:

• some partition between "basics" and "demos", where the basics help showcase simple components used to make bigger demos
• more text to explain what is going on. Maybe this is better suited for a "WebGPU book"
• fix the various issues about the code editor being broken
• restructure things to use iframes
  • for some reason, I didn't want to use iframes in the past, but it would be admittedly much simpler than the way I'm extracting the code to display on the page
  • it would also make reloading the iframe on shader changes for live editing (and we can make the js editable too I suppose :o). I used to have some mechanism to do shader editing which is now broken after some spec changes

[hepp]

Ok, yes that is a great start of a list of new examples to aim for.

Also in response to the points you mentions in how the samples are structured.

• some partition between "basics" and "demos", where the basics help showcase simple components used to make bigger demos

Agreed, particularity examples utilizing compute shaders and deferred rendering techniques.

• more text to explain what is going on. Maybe this is better suited for a "WebGPU book"

That could certainly be helpful.
There is probably a better way to include that without lots of extraneous comments in the code.

The way that Svelte handles it's tutorial, has always seemed like a good format for including explanations alongside code samples.

• fix the various issues about the code editor being broken

Yes it appears current issues with the code editor might revolve around incorrectly nested dom elements, which are causing miss layering during vertical scrolling.
The elements that are assigned overflow-y class styles might need to be revised.

Also it might be helpful to enable the ability to edit the main file of each example,
(which doesn't seem like should directly include TypeScript or JSX code).

• restructure things to use iframes

Working with iframes so far has seemed to work out great.
Using Node server with React SSR, seems to result in nice performance between editor and iframe.

Injecting in additional meta and script tags, is one solution I came up with, for keeping extra code out of the examples in order to keep them short and succinct to the example demonstrated.