.jpg&w=3840&q=80)
The Frame Effect Library is a collection of cool visual effects that you can quickly bring into Frame. These effects are either Shaders or Particles, two Frame asset types.
- Add Asset From Frame Effect Library to Frame
- Shaders and Particles Refresher
- Create Your Own Shaders
- Create Your Own Particles
Add Asset From Frame Effect Library to Frame
To bring an effect from the Frame Effect library into Frame, follow these steps (or see video below):
- Pick an effect from the Frame Effect Library and copy its ID with the COPY ID button
- Inside Frame, click the blue plus button in your toolbar and select “Effects”
- Pick either Particles or Shaders
- Pick one of the featured assets
- Turn on Edit Mode and select the asset
- Paste in the ID you copied in step 1 into the ID field
- Look in wonderment at the effect
Here’s a video that shows you how to bring a ready-made Shader into your Frame, then replace it with a Shader from the Frame Effect Library. It also shows you how to remix an existing shader to make it your own. For example, you could remix our flag shader and replace the Frame logo with your own logo:
Shaders and Particles Refresher
Shaders short version: Shaders can change the shape or color of a 3D model in mind-bending ways to create compelling visual effects.
Shaders longer version: At their core, shaders are small programs that run on your GPU and can manipulate the pixel fragments or vertices of an underlying mesh. Read more here
Particles short version: Fire, stars, smoke, stuff like that
Particles longer version: coming soon
Create Your Own Shaders
You can create your own Shaders using a powerful, no-code tool - the Babylon Node Material Editor.
You can start by :
- feeling ambitious and just going right into the NME (Node Material Editor) and learning the heck out of it (this is not recommended)
- remixing an existing shader and modifying it to see how the Node Material Editor works (this is done in the video above)
- diving into some YouTube videos where Frame artist Paul Kluka walks us through the setup of some simple but effective shaders. Babylon.js also makes a a fantastic tutorial series on the Node Material Editor. This path is recommended for artists and developers who know or want to know their way around materials and meshes)
- contributing back to the community by adding a shader or two to the library!
Create Your Own Particles
The last section of this article about particles is about creating your own particles systems using the no-code Babylon.js Particle Editor