Implementing a Particle Shader Effect

[ixxie]

I'm quite new to postprocessing as well as lower-level WebGL stuff, so forgive the lack of nuance / precision in my question.

I'm interested in implementing a particle morph effect; I found two relevant examples using custom shaders:

• Colorver.se - demo // article (google trans.)
• Interactive Particles - demo // article // repo

I'm asking for advice on how such an effect could be implemented in postprocessing. I can try and port the interactive particles shader for example, but I am not sure where to put it (a ShaderPass?).

Even better would be an example of how this is done with postprocessing, or any other relevant examples, but I know this may be a hard-ask.

[vanruesc]

I'd suggest creating a new Pass for this. ShaderPass is better suited for quick testing or very simple fullscreen shader effects.

Then you could use two or three render targets to calculate the particle positions - two buffers for read/write (emulating transform feedback) and one buffer to copy the current result to so that it can be read by the particle vertex shader. This would keep all calculations and data on the GPU.

A simple GPGPU pass would just extend Pass, set up a few buffers and render a fullscreen material:

export class ParticlePositionPass extends Pass {

	constructor() {

		super("ParticlePass");

		this.fullscreenMaterial = new ParticlePositionMaterial();
		this.needsSwap = false;

		this.renderTarget = new WebGLRenderTarget(X, Y, {
			type: HalfFloatType,
			minFilter: NearestFilter,
			magFilter: NearestFilter,
			depthBuffer: false
		});

		...

	}

	get positionTexture() {

		return this.renderTarget.texture;

	}

	render(renderer, inputBuffer, outputBuffer, deltaTime, stencilTest) {

		renderer.setRenderTarget(this.renderTarget);
		renderer.render(this.scene, this.camera);

		...

	}

}

[ixxie]

Thank you for this outline @vanruesc; I'm a little bit out of my depth here since I'm new to this lower-level WebGL stuff. I'm struggling with concepts like buffer and render target.

Could you recommend some resources that would be suitable for me to grasp these basic concepts?