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!

Getting Started

VFX Asset & VFX Component

VFX Editor adds two new objects to Lens Studio: VFX Asset and VFX Component.

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:

1. In the Resources panel, click the + button and type VFX, then select a VFX Asset from the list.

   

2. In the Objects panel, click the + button and type VFX, and select the VFX object from the list. This will add a Simple Emitter VFX Asset and a VFX Component to your scene.

   

3. Open the Asset Library, navigate to the VFX section, and import a VFX Asset.

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.

VFX Editor Panel

The VFX Editor Panel is where you author your VFX Asset. This panel can be opened in two ways:

1. Double click on a VFX Asset in the Resources panel

   

2. Select 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.

Particles

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.

Attributes

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.

Modifiable Attributes

• Position (vec3)
• Velocity (vec3)
• Life (float)
• Force (vec3)
• Mass (float)
• Color (rgba)
• Size (float)
• Matrix (mat4)
• Custom (set by the user)

Locked Attributes

• 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: Set (default), Add, or 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

The 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

In 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, Spawn and 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.

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 Output container.

Sub-Graphs

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:

1. Click the Add button on a container

2. Hover your mouse over a container and hit Tab

   

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 Sub-Graph.

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.

Scripting

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.

More Resources

For more information, check out these helpful links:

• VFX Graph Optimization
• VFX Sub-Graphs
• VFX Template Guide
• VFX vs Legacy Particle