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

Boids Sprites: rotation and velocity behavior visualized with color #227

Merged
merged 2 commits into from
Feb 7, 2023

Conversation

hepp
Copy link
Contributor

@hepp hepp commented Feb 7, 2023

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

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

@hepp
Copy link
Contributor Author

hepp commented Feb 7, 2023

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 austinEng merged commit 069baa8 into webgpu:main Feb 7, 2023
@austinEng
Copy link
Collaborator

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
Copy link
Contributor Author

hepp commented Feb 10, 2023

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

austinEng commented Feb 10, 2023

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

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
Copy link
Contributor Author

hepp commented Feb 10, 2023

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.

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

Successfully merging this pull request may close these issues.

2 participants