pouët.net

Animated Outline Shader

category: gfx [glöplog]
 
Howdy!

I made an animated outline shader:

BB Image

I'm using MRT to achieve the effect. I was wondering if you guys know of a way to achieve this without using MRT?

Reason I'm asking is that I'd like to make a mobile phone demo of this, but due to hardware restrictions Unity doesn't support deferred rendering on mobile. Any thoughts on some techniques I could use?

I have a post about it here, if you're interested in reading a bit more about what I did: Animated Outline Shader
added on the 2017-09-29 12:46:38 by jabudcha jabudcha
It's interesting how you answer yourself in the blog. You explain exactly how to do this without MRT (and instead use multiple render passes). Quoting you:

"
1. Render your target geometry, but make sure its only 1 color that you pick
2. Blur the flood filled image a few times to give it some additional width
3. Apply a distorted texture to the blurred render target, which is scrolled over time (and try to make the scrolling non-repetitive)
4. Combine this with the back buffer that has your already rendered scene
5. Apply bloom!
"
added on the 2017-09-29 13:24:00 by JackAsser JackAsser
Yeah, multiple passes does it. Also, instead of using a blur to "widen" up the image a bit, you could also use a Sobel filter instead of/in addition to the blur.
added on the 2017-09-29 13:56:46 by Preacher Preacher
To widen the image you can render the geometry with front face culling on, and scale it a bit in the vertex shader.
added on the 2017-09-29 13:59:44 by xTr1m xTr1m
Quote:
It's interesting how you answer yourself in the blog. You explain exactly how to do this without MRT (and instead use multiple render passes). Quoting you:

"
1. Render your target geometry, but make sure its only 1 color that you pick
2. Blur the flood filled image a few times to give it some additional width
3. Apply a distorted texture to the blurred render target, which is scrolled over time (and try to make the scrolling non-repetitive)
4. Combine this with the back buffer that has your already rendered scene
5. Apply bloom!
"


Thanks. I didn't know I could do multiple passes to have the same effect as putting it on multiple render targets and then combining it. I don't have those particular fundamentals in place just yet.

Just out of curiosity, would having one multi-pass shader be cheaper or more expensive than using MRT?
added on the 2017-09-29 14:33:57 by jabudcha jabudcha
I've got nothing useful to add but I do deeply appreciate the title of this thread :)
added on the 2017-09-29 22:07:07 by havoc havoc
the particle-y look of it looks nicer than ye-average 2-pass outline though ;)
Outline shader or not, I'd really like to have that axe to chop my firewood.
added on the 2017-09-30 00:02:55 by Emod Emod
I did a few experiments scaling the vertices and using the distance to the original a few years back. It had tons of problems, depending on what geometry was used considering that you want to use additive blending. Maybe the stencil/depthbuffer migth be used to overcome these issues.

Anyways great thread.
added on the 2017-09-30 00:39:57 by quisten quisten
Quote:
Quote:
It's interesting how you answer yourself in the blog. You explain exactly how to do this without MRT (and instead use multiple render passes). Quoting you:

"
1. Render your target geometry, but make sure its only 1 color that you pick
2. Blur the flood filled image a few times to give it some additional width
3. Apply a distorted texture to the blurred render target, which is scrolled over time (and try to make the scrolling non-repetitive)
4. Combine this with the back buffer that has your already rendered scene
5. Apply bloom!
"


Thanks. I didn't know I could do multiple passes to have the same effect as putting it on multiple render targets and then combining it. I don't have those particular fundamentals in place just yet.

Just out of curiosity, would having one multi-pass shader be cheaper or more expensive than using MRT?

MRT have the benefit of only processing the geometry once, hence faster. Other than that it’s conceptually the same.

MRT: One geometry pass -> multiple buffer.
Single pass: one geometry pass -> one buffer.
Multi pass: (big bada boom). X*(one geometry pass -> one buffer) == x geometry passes -> multiple buffers
added on the 2017-09-30 21:06:59 by JackAsser JackAsser
jeez, it's 2017, man, you can just link a WebM instead of this colossal highly-dithered GIF.
added on the 2017-09-30 22:16:35 by BDJul BDJul

login