flickering neon light effect

[Van Halen]

Hi,

For my website i created a neon effect with PixiJS v4 and i'm not happy with the results i was wondering if anyone could improve upon or has a better idea how create a neon effect which works across multiple desktop/mobile devices.

The neon light is a simple transparent png image overlaid on top of static background image. It works for time been 'good enough' for desktop browsers, but i had to disabled it for iPad, etc. because of the slow performance combined with rain (pixi-particles) and fog (custom particle effect).

Live version:
http://5701.nl

Code:

//PIXI
var PIXI;

var Container = PIXI.Container,
	autoDetectRenderer = PIXI.autoDetectRenderer,
	loader = PIXI.loader,
	resources = PIXI.loader.resources,
	Sprite = PIXI.Sprite,
	ParticleContainer = PIXI.particles.ParticleContainer,
	extras = PIXI.extras;

var street = new Container();
var weatherType = new Container();

var renderer = new autoDetectRenderer(3600, 720, {antialias: false, transparent: true, resolution: 1});

document.getElementById('street').appendChild(renderer.view);

//View
renderer.view.style.display = 'block';
renderer.autoResize = true;

//Variables
var neonSign,
neonFilter,
colorMatrix,
count = 1;

function animateScene() {

	//Animate neonSign
	neonSign.alpha = 0.1;
	count += 2;
	var bright = 2 + Math.sin(count);
	neonFilter.brightness(bright, false);
	
	requestAnimationFrame(animateScene);

	renderer.render(street);

}

function setup() {

	//Setup neonSign

	neonSign = new Sprite(resources['images/one-stop-copy-shop_glow.png'].texture);
	neonSign.width = 1200;
	neonSign.height = 300;
	neonSign.position.set(1200,0);		

	colorMatrix = [
		1, 0, 0, 0,
		0, 1, 0, 0,
		0, 0, 1, 0,
		0, 0, 0, 1
	];

	neonFilter = new PIXI.filters.ColorMatrixFilter();
	neonFilter.matrix = colorMatrix;
	neonSign.filters = [neonFilter];

	//Add neonSign		
	street.addChild(neonSign);

	//Start
	animateScene();

}

//Setup
loader
	.add('images/one-stop-copy-shop_glow.png')
	.load(setup);

 

[alex_h]

You could achieve much the same effect without using filters. Just have a png of the glow state layered in front of the main text image. Then on a short randomised interval of milliseconds set it to a random alpha, possibly tweening between the alpha values. That would be a much less expensive operation and should only look quite subtly different.

[Van Halen]

Ok thank you Alex,

Started out with Alpha, but it had a lower frame rate then the filter above.

I will check out the docs again.

 

[Fatalist]

4 hours ago, Van Halen said:

new autoDetectRenderer(3600, 720

Why do you need such a wide renderer?

[Van Halen]

Fatalist,

the header image displays rain (pixi-particles) when it rains here in my hometown and that image is 3600 pixels wide cut up into 3 pieces of 1200px.

[Fatalist]

So you are moving your canvas element to simulate looking around? That's a wrong approach, renderer size should not be larger than the screen, invisible pixels still eat up performance. You should just move your sprites instead.

[Van Halen]

Yes, the header is moved around by dragging with a jQuery Slider script, and when it rains or when there is a fog/mist the whole canvas is loaded at 3600 px.

First time ever i used something like PixiJS or Particles effects.

Thanks for the tip, Fatalist.
 

[Van Halen]

Note: The canvas element itself is transparent, the background images are not loaded by Pixi.
But when rain or fog is displayed, it wil also rain outside of the viewport.

So i need to update, improve that part of the code.