1. Home
  2. Docs
  3. PopcornFX v2
  4. Concepts
  5. Templates
  6. Examples

Examples

This page lists a few examples of templates, spanning a wide range of uses and complexity.

Understanding some of them requires reading the LayerGraph page.

 

Simple math template

Here is a simple math template that tells if the distance between two positions is smaller than a given threshold.

This template behaves like a “function“: it takes inputs, does some computations, and returns a result.

It exposes the two positions and the threshold as inputs. It outputs a ‘bool’ value, which will be ‘true’ when the distance is lower than or equal to the threshold, and ‘false’ otherwise.

Simple math template

Simple math template

You can see the three input export nodes on the left, and the output export node on the right. These nodes cause the template node to display three input pins and an output pin.

 

Shape sampling template

The core template library contains various sampling nodes for the different type of samplers.

These nodes take as input a sampler resource (shape, image, curve …), and a sampling location. They output a pin for each property that can be sampled. This abstracts away parametric-coordinates of shape samplers and allows to easily fetch all data from a single node.

 

The shape sampling node is a template, and uses the “sampler.sampleXXX()” script functions.

Here is an example of a graph where the template is used to sample a mesh geometry, from the effect “Particles/Tutorials/015_Templates.pkfx” of the “Tutorialsonline package :

Shape sampler node

 

Breakdown

The shape sampling template contains the following graph & scripts:

Shape sampler node: template contents

This template provides a default shape (unit sphere) if the user doesn’t plug anything.

The first script node samples a new random parametric-coordinate on the shape using “Sampler.samplePCoords();”. The value is then wired as a default value to the “PCoords” input pin. If something is plugged in the “PCoords” pin, it will use that value instead of the default value returned by the script.

 

The final PCoord is then wired into the “SampleAll” script. This script takes care of the heavy lifting, and calls all possible sampling functions. Their results are then routed to the output nodes.

The template also has a ‘Scale’ property, used to easily scale the shape.

 

The interesting thing to note here is that the nodegraph optimizer will entirely remove from the final graph the sampling function calls whose results are unused. So if the parent graph only uses the “Position” output pin, and manually inputs a Pcoord, it will only produce: “OutPosition = Sampler.samplePosition(Pcoord);

 

Even better: If no PCoord is wired-in and you only use the output position, without using the output PCoord, the optimizer will be able to transform this:

 

    PCoords = Sampler.samplePCoords();
    OutPosition = Sampler.SamplePosition(PCoords);

 

Into this:

 

    OutPosition = Sampler.SamplePosition();

 

Which is the fully-random sampling function call. This ends up being faster than pulling the parametric coords out when they only get used once.

 

Butterfly renderer template

The effect “Particles/Butterfly.pkfx” of the “Samplesonline package shows a simple state-machine where each butterfly particle has two states: “Flying”, and “Idle”. Both of these states are actual layers, and need to draw the butterfly with a wing-flapping logic.

Butterfly template

Each layer draws the wings with two planar-aligned billboard renderers. Their orientations depends on the wing angle. Each state computes the wing angle differently, but the billboard orientation logic based on the wing angle stays the same between the two layers.

 

To avoid duplicating nodes, and encapsulate all that into a single “wings renderer” node, we’ve made a local template in the effect, to take care of all the details, and hide the complexity away and make it easily re-usable across different effects that need to perform some “wing-flapping”.

 

Breakdown

Here is the “Idle” layer. It draws the butterfly with a single “Wings” node, whose inputs are the position, direction, wing angle, size, color, and wing-type:

Butterfly template: parent layer

Here are the contents of the “Wings” renderer template, and the script performing the wing billboards axis and position computations:

Butterfly template

 

As a result, this allows the template user to very easily draw particles with a wing-flapping behavior, without worrying about the actual maths involved.

 

Geosphere placement template

The globe effects in the “Samplesonline package use a layer template to spawn particles on a regular geosphere.

This “GeosphereSpawner” template allows to abstract away spawn placement from the layers representing the actual particles.

The effect “Particles/Globe_01.pkfx” uses that template to spawn particles on a regular ordered grid and form a texture-driven earth-globe layout:

Geosphere template

The template exposes a “Resolution” property, which allows to easily change the resolution between the different instances of the node. Much like the event multiplier node exposes a “Count” property to allow the user to specify the emission rate.

 

Here are the results produced for various settings of the “Resolution” property: 250, 125, 62, and 31.

Geosphere template: variations

The template transforms a single input event into many output events: one for each final particle. The exact number depends on the input “Resolution” property. It will add a float2 payload to the outgoing events. This payload contains the polar angles of the location on the sphere where the event was pulsed, and allows whatever layer that is triggered to fetch those coordinates.

 

Note that we could also have made that template so that it totally abstracts the notion of spawning on a sphere, and instead of appending a float2 polar-coordinates payload to the outgoing events, it could have simply computed a regular transform and sent that along allowing any layer to hook onto it, without needing any specific knowledge about the parent event.

 

Breakdown

Here is a breakdown of the geosphere template and its sub-layers:

Geosphere template, and its sub-layers.

It contains 3 nodes:

  1. An event multiplier node. This is the initial expansion of the original event. It will produce one particle per horizontal line on the sphere.
  2. A “Vertical Seed” layer. This is a “horizontal line” particle. Each of those particles will compute the circumference of the sphere at the vertical position they’re at. Consequently, based on that radius and the “Resolution” property, they will emit as many output events as there should be particles on that horizontal circle.
  3. An “Horizontal Seed” layer. There will be as many of these particles as there are final events going out of the template. Its sole purpose is to compute the float2 polar-angle payload, and pass it along to the final event. The final particles can use this payload to compute the UV on the sphere, and perform a texture lookup like in the above earth globe example.

 

Note that you could probably remove the final layer by using a more clever payload interpolation in the “Vertical Seed” layer.

 

Fireworks rocket template

The effect “Particles/Fireworks_MTL_Philippines.pkfx” of the online packageSamples” contains various high-level templates to control and produce different more complex compound fireworks jets:

Fireworks jets

The following template handles the main jets:

Templates: auto-exporting pins & properties

It consists of a tree of 5 interconnected layers, and handles the entire jet’s behavior.

The template exposes 15 properties. Each one controls a different property of the jets and produces different types of jets from a single node. The overall fireworks effect uses that template in various places:

Fireworks jets

 

Unity shuriken-like template

At the far end of the spectrum, you can find extremely configurable templates.

For instance, here is a “Shuriken” layer template, which exposes controls similar to Unity’s “shuriken” particle system:

Shuriken template

Contents of the template subgraph:

Shuriken template

Contents of the template’s main layer handling all the different properties:

Shuriken template

This is the kind of template where the power of the nodegraph optimizer really stands out.

 

When all options are active and the behavior is the most complex, the entire graph will range into the hundreds of instructions.

With a basic setup, the optimizer is able to simplify and compile this down to less than 15 instructions.

 

Was this article helpful to you? Yes No

How can we help?