Introduction and Concepts
Welcome to VFX Editor, our new node-based visual effects engine in Lens Studio! With VFX Editor, you are in total control: from rain to magical powers to swarms of emojis, your imagination drives what’s possible.
VFX Editor builds upon similar ideas found in Material Editor, allowing you to create and share unique, customizable effects that have never been seen before. If you’re comfortable with Material Editor, you’ll find a lot of similarities here. If not, don’t worry: VFX Editor is its own powerful tool with a completely new set of capabilities to empower your creativity.
So let’s dive in!
VFX Asset & VFX Component
VFX Editor adds two new objects to Lens Studio:
VFX Asset and
VFX Assets are the actual effects systems that you create.
VFX Components are components which take the VFX Asset and render it in your scene.
Creating a VFX Asset
To create a VFX Asset, you have a couple options:
- In the Resources panel, click the
+button and type
VFX, then select a
Assetfrom the list.
- In the Objects panel, click the
+button and type
VFX, and select the
VFXobject from the list. This will add a
Simple Emitter VFX Assetand a
VFX Componentto your scene.
- Open the Asset Library, navigate to the
VFX section, and import a
Creating a VFX Component
The VFX Component can be created like any other component: on a
Scene Object, click the
+ Add Component button and search for
VFX Editor Panel
The VFX Editor Panel is where you author your
VFX Asset. This panel can be opened in two ways:
- Double click on a
VFX Assetin the
Window > Panels > VFX Editor
Built-In Assets, VFX Template Project, and Asset Library
Lens Studio comes with two built-in VFX Assets:
Empty VFX and
Simple Emitter VFX.
Empty VFX is a blank canvas to create your own custom asset from scratch, and is a great place to learn how the system works, one sub-graph at a time.
Simple Emitter VFX demonstrates a basic emitter with a few of the most commonly used sub-graphs. Both of these assets are meant to be modified to fit your particular effect.
The VFX Template Project is an educational tool for learning VFX Editor in a semi-structured way. Here, you’ll find many different approaches to creating all sorts of effects starting with very simple emitters and progressing up to advanced techniques. Open the VFX Template Project from the Home screen, or by selecting File > New Project From Template > World > VFX
You can find many more examples on the Asset Library. These assets are more complete effects that you can add to your project. All of them are completely open for you to edit, customize, and see how they work.
The primary difference between VFX Editor and Material Editor is that VFX Editor allows you to create and manipulate particle systems.
A particle is a piece of data that holds several
attributes. Attributes are used to describe the particle: position, velocity size, color, etc. In VFX Editor, we are interested in both manipulating these attributes over time, and using them to create a rendering material to draw it to the screen.
Particles in VFX Editor come with several attributes, many of which can be modified, and some of which are set by the system automatically at spawn.
- Position (vec3)
- Velocity (vec3)
- Life (float)
- Force (vec3)
- Mass (float)
- Color (rgba)
- Size (float)
- Matrix (mat4)
- Custom (set by the user)
- Delay (float)
- Seed (float)
- Index (int)
- Spawned (bool)
Getting and Setting Attributes
Particle attributes can be accessed from anywhere in the graph system by using the
Particle (Get Attribute) node. This node has a drop-down menu to select what particle attribute to get.
Modifiable particle attributes are set in the Spawn or Update containers using a
Particle (Modify Attribute) node. To add a Particle (Modify Attribute) node, open the container node list by either hovering over a container and pressing Tab on your keyboard, or click the Add button on that container. Then search for the word “modify”, and you’ll see the list filter down to show the node.
These nodes have drop-down menus to select what attribute to modify, as well as what operation to perform on that attribute:
Multiply. Set replaces the selected attribute’s value with the one provided on the node’s input, while Add and Multiply will take the current value of the selected attribute and either add or multiply it with the input value.
The Graph System
VFX Editor panel is a node graph system for authoring your own custom
VFX assets. The graph system shares a lot in common with Material Editor: many of the nodes are the same, but there are some important differences that we’ll look at here.
Vertical Stack and Containers
VFX Editor, logic flows both horizontally: left-to-right, as well as vertically: top-to-bottom. Individual nodes are connected horizontally like in Material Editor, but terminate in a vertical stack of
Modify Attribute nodes.
Containers also have their own sub-graphs that can be stacked vertically inside Containers. Inside these Container Sub-Graphs, you’ll find that they are simply setting
Modify Attribute nodes.
Stages: Spawn, Update, Output
There are three distinct stages where particles are modified.
The first two stages,
Update, can be thought of as, collectively, the simulation part of
VFX Editor. This is where particle movement and dynamics are defined. In the
Spawn stage, initial values are set on the particle the moment it is created. The
Update stage is processed every frame the particle is alive. These stages do not render anything to the screen.
The last stage,
Output, is essentially a material applied to a two dimensional square mesh, also referred to as a “quad”. This is where you define how the particle is drawn to the screen. Instead of
Modify Attribute nodes, you use a collection of Set nodes specific to the Output container to define the material. You’ll recognize these from the Shader node in Material Editor:
Vertex Position/Normal/Tangent, and Pixel Color.
Tip: When nothing is set in the
Output container, useful defaults are applied: the particle position, size, and matrix attributes are incorporated into the quad vertices to move, scale and rotate them, and the particle color attribute is used to set the pixel color. This behavior is overridden when a
Set Vertex Position or
Set Pixel Color node is added to the
VFX Editor adds a new kind of sub-graph: the Container Sub-Graph. Like regular sub-graphs found in Material Editor, Container Sub-Graphs are used to encapsulate node logic into higher level modular blocks, making the asset faster and more fun to create while making the graph easier to read. The difference with Container Sub-Graphs is that they have no Export nodes -- their purpose is to modify particle attributes.
Lens Studio comes with over 50 premade Container Sub-Graphs that you can mix and match to create amazing particle effects. The Container Sub-Graph list can be opened in two ways:
- Click the
Addbutton on a container
- Hover your mouse over a container and hit
To create an empty Container Sub-Graph, open the Container Sub-Graph list and start typing
Sub-Graph. The top result will be an entry called
Regular sub-graphs are also available in
VFX Editor, and include all the sub-graphs available in
Material Editor plus a few specific to
VFX Editor. To add a regular sub-graph, hover your mouse over an empty part of the graph and hit
Tab, or right click on an empty part of the graph and select
Add Node (from Library).
For more information and to see a description of all sub-graphs in VFX-Editor, check out our VFX Sub-Graphs page.
VFX Assets and
VFX Components can be accessed in Script to set input parameters, allowing for powerful interactions with the rest of Lens Studio. This is done in a similar way as Material Editor.
For example, to set a float input parameter on a VFX asset:
//@input Asset.VFXAsset myVFX script.myVFX.properties.myCustomFloat = 0.9;
For more information on scripting and VFX, check out the API reference for VFX Components and VFX Asset.
For more information, check out these helpful links:
Still Looking for help?Visit Support