net - UK (2020-02)

three.js

Fragment Shader effects

Fragment Shaders are blazingly fast for creating post-

processing effects and animations. They are complex to

write, using a language called GLSL, but the results can be

stunning. Shadertoy features thousands of examples you can

explore. One great example is by Sjeiti, featured here.

https://www.shadertoy.com/view/MlKSWm

Vertex Shader effects

To handle high volumes of particles, Vertex Shaders can be used

with instanced geometry to render out particles extremely

efficiently. Bruno Imbrizi has provided a fantastic walkthrough on

this technique that is well worth exploring if you are interested in

this approach.

https://tympanus.net/codrops/2019/01/17/interactive-particles-with-

three-js/

Particle libraries

There are numerous libraries in various stages of development.

These can rapidly speed up development timelines. Pixi.js, for

example, has several 2D particle libraries that work well. For

three.js, one excellent library is three.proton, which is based on the

Proton particle engine. It combines mesh, sprite, point and custom

renderers, along with a few emitters.

https://a-jie.github.io/three.proton/

BE INSPIRED

ESSENTIAL RESOURCES

geometry with this technique, which will hold our
particle positions.

geometry.addAttribute( ‘position’, new THREE.
Float32BufferAttribute( vertices, 3 ) );

STEP 10: LOAD A PARTICLE TEXTURE
You have lots of options here – you can load many
particle images to use. These will essentially work as
sprites that will be small and always face the camera.
So using a small square image that fades nicely
works well. The sprite asset is included in the source
code for this tutorial.

var texture = new THREE.TextureLoader().load(“assets/
images/sprite1.png”);

STEP 11: CREATE POINTS MATERIAL
Next, create a new PointsMaterial, which is a special
three.js material for our particles. You can define the
size of the points, the texture, blending mode and
opacity. Use an opacity of less than 1 to make our
particle more transparent. You can also set its colour.
For this example, we’re aiming for particles that look
like snow.

material = new THREE.PointsMaterial( { size: 1.0, map:
texture, blending: THREE.AdditiveBlending, depthTest:
false, transparent: true, opacity:.5} );
material.color.setRGB( .7, .7, .9 );

STEP 12: POINTS OBJECT
Create a new Points object, combining our geometry
and new material. You are creating a new type of
custom mesh using a PointsMaterial as our material
and our buffer geometry as the definition of the
mesh vertices.

Above You can now see your particles rendering to the screen. No animation

yet but it works!