GreasedLine advanced examples

GreasedLine advanced examples

This page contains some ideas for using GreasedLine.

Audio analyzer

Shows how you can use widths and offsets to create a simple audio analyzer. There are two horizontal lines. The larger analyzer's widths and the smaller analyzer's offsets are changed according to the music's frequency data. It also shows how you can manually create a RawTexture for the colors option. The colors are animated simply by modifying the UV offset of the color texture.

Please unmute the audio after the PG starts.

Circular audio analyzer

A cool circular audio analyzer using one line. It uses GreasedLineTools.GetCircleLinePoints to get the points. Setting it to dash mode creates the sections. Adding calm colors and animating the color texture's UV in the opposite direction of the circle's rotation results in static colors on the circle. Modify the widths of the line according to the audio frequencies, and you get the audio analyzer. Finally, add some particles to make it cooler.

Please unmute the audio after the PG starts.

Light speed

Shows how to create a light speed effect using widths, visibility, and scaling the lines along the z axis. There are several lines drawn in lazy mode and joined into one mesh when the updateLazy() method is called.

Visibility is set to a very low value so the lines appear as dots at the beginning (stars). Widths are also kept low at startup. Simply by increasing the visibility, widths, and scaling of the lines, the effect comes alive. Adjusting the glow value also helps make the effect more attractive.

If you want a longer effect you can create more instances of the line mesh and start animating them just at the right time. You could also use only two instances and reuse them. Animate one, prepare the other, animate the second and prepare the first one. Repeat and you will get an infinite light speed effect.

Flower power

Slowly revealing beautiful text drawn by flowers.

Uses the GreasedLineTools.GetPointsFromText function to get the point coordinates of the drawn text. The text is then hidden, and only its line coordinates are used. GreasedLineTools.GetPositionOnLineByVisibility steps through the drawn text by incrementing the visibility value and adds animated Sprites of flowers to slowly reveal the whole text.

If your text is not complete and flowers are missing you have to increase the capacity of the SpriteManager or lower the density of the flowers by lowering the value at line 47. You can also alter the target size of the flowers in the addFlower function.

Lighting bolts

These lightning bolts will make even Thor envious. It calculates the positions and widths of the bolts using a simple recursive algorithm and draws the lines. Add a bit of glow, and you get cool lightning.

Sparks

GreasedLine can be used to create sparks.

First generate the path the sparks will follow. Create GreasedLines, each with a random color from a predefined color palette and with different widths based on these paths.

Now set to dash mode and set a dashRatio close to 1 so only a small part of the line will be visible in dash mode. Set the number of sparks along the line to an appropriate value.

useDash: true,
dashRatio: 0.98,
dashCount: 10

Now start to animate the dashOffset property of the line.greasedLineMaterial. Add a glow effect as well.

scene.onBeforeRenderObservable.add(() => {
    const animRatio = scene.getAnimationRatio()
    for (let i = 0; i < sparkCount; i++) {
        sparks[i].line.greasedLineMaterial.dashOffset += sparks[i].speed * animRatio
    }
})

All we need to do now is add the UFO and some particles.

Revealing text

Shows how you can create revealing text using the visibility property. If the text appears already visible, just run the PG again by clicking the Play button.

Supernova

A supernova like star using GreasedLine. It draws the main star, applies volumetric light scattering to it and adds two more outer regions to the star using a glow effect. All greased line meshes are then parented to a TransformNode which is rotated around the Z axis.

Trees

Just some vegetation drawn using GreasedLines.

You will probably want to tweak the parameters to get a low-poly version of the tree, grass, or bush. Otherwise, this technique is not recommended for production because it generates a lot of geometry. The visual appearance is not always quite satisfying, but you can achieve good results by generating grass or bushes (remove the trunk of the tree). Instancing is highly recommended.

Press PLAY to generate a new one.

Recycle logo

Simply by drawing a circle and setting the widths of the line in the right places to the right values we can create a recycle logo very easily.

Navigation path line or displaying wind/ocean currents

Shows how you can draw navigation path lines or display currents in the air or water. This PG shows only one line, but you can of course draw as many as needed.

The line uses an alpha texture that is animated by modifying the uOffset of the texture.