solved Changing alpha of certain colors post process

[Raitch]

I've been trying to find a way to remove a specific color and make it alpha after scene.render(); however I've been out of luck.

The reason I want to is to basically have a ugly green color changed to alpha so that I can have something behind the canvas visible.

I tried doing something like this, but I have no idea what works and doesn't

		let framebuffer = this._gl.createFramebuffer(),
			texture = this._gl.createTexture();

		this._gl.activeTexture(this._gl.TEXTURE0);
		this._gl.bindFramebuffer(this._gl.FRAMEBUFFER, framebuffer);
		this._gl.framebufferTexture2D(this._gl.FRAMEBUFFER, this._gl.COLOR_ATTACHMENT0, this._gl.TEXTURE_2D, texture, 0);			

		if (this._gl.checkFramebufferStatus(this._gl.FRAMEBUFFER) == this._gl.FRAMEBUFFER_COMPLETE) {
			let pixels = new Uint8Array(this._gl.drawingBufferWidth * this._gl.drawingBufferHeight * 4);

			this._gl.readPixels(0, 0, this._gl.drawingBufferWidth, this._gl.drawingBufferHeight, this._gl.RGBA, this._gl.UNSIGNED_BYTE, pixels);

			for (let i = 0; i < pixels.length; i += 4) {
				let red = pixels[i],
					green = pixels[i + 1],
					blue = pixels[i + 2];
				if (red == 0 && green == 0 && blue == 2) {
					pixels[i + 3] = 0;
				}
			}
			
			this._gl.bindTexture(this._gl.TEXTURE_2D, texture);
			this._gl.texImage2D(this._gl.TEXTURE_2D, 0, this._gl.RGBA, this._gl.RGBA, this._gl.UNSIGNED_BYTE, pixels);
		}
		this._gl.deleteFramebuffer(framebuffer);

 

Looking around in the post process part of Babylon.js I can't really find anything similar there either. Another solution would be if it was possible to have a texture that "true" transparent in the way that it removes everything behind it as well. Anyone with any ideas?

[brianzinn]

Can you not get away with an scene.clearColor with alpha of zero?

here is a PG from Temechon: http://www.babylonjs-playground.com/#1MOTR8#1

Another problem with post-process is anti-aliasing will probably be pretty bad...

.

[Sebavan]

You could create your own Post Process that replaces your color by a transparent pixel ?

[Sebavan]

@Raitch, smthg like this: https://www.babylonjs-playground.com/#1DVN04#1

[Pryme8]

if Color == vec3(0., 1., 0.){discard;}

?

[Sebavan]

need can not discard as the clear color is different from the transparent one but this gives the idea :-)

 

[Raitch]

Your solutions worked perfectly!  thanks a bunch