Frame Effect Library

Frame Effect Library

Created time
Apr 11, 2023 2:31 AM

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

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

Note: you can also use these Effects in your 3D environment models. Learn more.

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