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

[Merged by Bors] - Add animate shaders example #1765

Closed
wants to merge 4 commits into from

Conversation

wilk10
Copy link
Contributor

@wilk10 wilk10 commented Mar 26, 2021

This PR adds an example on how to animate a shader by passing the global time.seconds_since_startup() to a component, and accessing that component inside the shader.

Hopefully this is the current proper solution, please let me know if it should be solved in another way.


// Spawn a camera
commands.spawn_bundle(PerspectiveCameraBundle {
transform: Transform::from_xyz(0.0, 0.0, -8.0).looking_at(Vec3::ZERO, -Vec3::Y),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regarding: -Vec3::Y, without the minus, the colours are flipped.

I was expecting to have red on the left and blue on right, but it's the opposite. The same happened to me when just drawing the UVs in the fragment shader directly ( gl_FragColor = vec4(v_Uv, 0.0, 1.0); ). You get black ( 0,0 coords ) on the top right corner instead of bottom left.

Where in my code in this example i should fix it, if not via this -Vec3::Y? Thanks a lot

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using a 2d camera fixed it (and i increase the Quad size).

With .looking_at(Vec3::ZERO, Vec3::Y) and a 3d camera it's definitely upside down. flip: true / false on the Quad doesn't fix it. Is it worth an issue or is there another bug in the example?

In my opinion the current example is correct, but please let me have your feedback.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the last commit i have reverted it to using a 3D camera, with Transform::from_xyz(0.0, 0.0, 8.0).looking_at(Vec3::ZERO, Vec3::Y). So positive Z and Quad::new without flipping works.

In my opinion this should be clear enough for users.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alice-i-cecile alice-i-cecile added C-Examples An addition or correction to our examples A-Rendering Drawing game state to the screen labels Mar 26, 2021
@wilk10 wilk10 force-pushed the animate_shader_example branch from 7ce6fcb to 8510ff6 Compare March 30, 2021 11:53
@wilk10 wilk10 force-pushed the animate_shader_example branch from 8510ff6 to c6171a4 Compare April 3, 2021 16:52
@wilk10
Copy link
Contributor Author

wilk10 commented Apr 3, 2021

This is how the shader looks:

ezgif com-gif-maker (2)

Copy link
Contributor

@inodentry inodentry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very good example! Very clear and teaches something very commonly desired (such as when people want to do Shadertoy-like things in Bevy).

@alice-i-cecile alice-i-cecile added the S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it label Apr 11, 2021
@cart
Copy link
Member

cart commented Apr 15, 2021

Added single_mut because this doesn't make sense with more than one query result (or zero results). Additionally, I renamed TimeComponent to TimeUniform because I don't want to encourage the XComponent naming convention.

@cart
Copy link
Member

cart commented Apr 15, 2021

Nice work! I agree that this is super useful. Long term we'll want Bevy to provide built in time support for shaders, but this is a good stop gap measure (and is also just generally educational).

@cart
Copy link
Member

cart commented Apr 15, 2021

bors r+

bors bot pushed a commit that referenced this pull request Apr 15, 2021
This PR adds an example on how to animate a shader by passing the global `time.seconds_since_startup()` to a component, and accessing that component inside the shader.

Hopefully this is the current proper solution, please let me know if it should be solved in another way.

Co-authored-by: Carter Anderson <[email protected]>
@bors bors bot changed the title Add animate shaders example [Merged by Bors] - Add animate shaders example Apr 15, 2021
@bors bors bot closed this Apr 15, 2021
ostwilkens pushed a commit to ostwilkens/bevy that referenced this pull request Jul 27, 2021
This PR adds an example on how to animate a shader by passing the global `time.seconds_since_startup()` to a component, and accessing that component inside the shader.

Hopefully this is the current proper solution, please let me know if it should be solved in another way.

Co-authored-by: Carter Anderson <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Rendering Drawing game state to the screen C-Examples An addition or correction to our examples S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants