net - UK (2020-02)

PROJECTS
three.js

THREE.JS

accelerated experiences right in the browser.

Whether your goal is mobile or desktop, WebGL’s got

you covered.

UNDERSTANDING THREE.JS

Created by Ricardo Cabello and maintained by an

army of incredible devs, three.js is the world’s

most popular open-source 3D library for the web.

It’s blazingly fast, easy to learn with extensive

documentation and examples, making it an excellent

choice for WebGL development.

PARTICLE EFFECTS

Particle effects can be made in a variety of ways.

You can use fragment shaders directly to write

high-end animations in GLSL that integrate with

your scene. You can use vertex shaders as well

CREATE PARTICLE EFFECTS

WITH THREE.JS

Richard Mattka shows you how to create real-time, interactive particle

hļhfwv#lq#6G#xvlqj#wkh#srsxodu#wkuhh1mv#oleudu|

Particles can add incredible realism and interest

to a 3D scene. Whether it’s falling snow, red

glowing embers rising from the flames or ambient

dust to accentuate volumetric lighting, particles are

absolutely vital.

In this article, we’ll explore one technique for

adding real-time particles to a three.js scene using

WebGL. You’ll learn how to use the PointMaterial

and Points object to efficiently create thousands of

particles. You’ll have them moving and reacting to

the mouse as well.

UNDERSTANDING WEBGL

WebGL enables you to render incredible 3D scenes

combining graphics shaders and interactivity

all inside an HTML <canvas> element. WebGL is a

web standard, which means you can create GPU-

ABOUT THE AUTHOR

RICHARD MATTKA

w: richardmattka.com

t: @synergyseeker

job: Creative director,

designer, developer

areas of expertise:

Shaders, VFX, WebGL