#3d Pixel Art Outline

1 messages · Page 1 of 1 (latest)

keen fern
#

Hello! been trying to replicate the t3ssel8r 3d pixelart effect, Where it takes the 3d scene, pixelizes it, adds outlines, etc. (Universal Render Pipeline)
I've already pixelized the scene using a render texture - I'm just facing a tough problem with the outlines.
Basically, the outlines are supposed to be pixel-perfect, so my initial instinct was to use a post-processing effect that runs through every pixel in the depth buffer, checks its neighboring pixels and then puts a dark outline if the conditions are met, then the same thing with every pixel in the normal pass, then puts a light outline if conditions are met.
Problem is I don't know how to get the pixelated depth buffer and normal passes, and then apply a shader on them to create that overlay. There seems to be 2 solutions (I'm probably wrong about this):

  1. Use an overlay render texture that has a shader on it which magically somehow gets the downscaled depth & normal passes, and then creates an outline
  2. Replace the render texture pixelization with a shader pixelization, so that I could add another shader on top of it which adds the outlines

Problems I've encountered with solution 1 are not knowing how to get the depth & normal passes, and custom render textures being a bit glitchy. Problems with solution 2 is that the pixelization shader looks worse than the render texture for multiple reasons (blurry edges of objects despite there being no antialiasing, jagged pixels with camera movement or window resize, etc.

Here's a tutorial by t3ssler8r so you'll see what I'm trying to achieve: https://imgur.com/gallery/qwhbHQq

If anyone has a more solid solution to this outline problem I'm having that would be lovely! Been tryna do this for a week by now, Thanks!

image.png
Imgur
Creating a Pixel Art Scene in Realtime 3D
▶ Play video
mint rover
#

@keen fern what have you got so far?

keen fern
#

as for the scene i'm currently using a render texture to downscale the scene

mint rover
#

okay i guess work on edge detection first

keen fern
#

i think the step where i struggle with the most is making a per-pixel shader

#

since the whole scene is downscaled with an RT i would love to know how i can affect the dimensions of that downscaled RT instead of the entire screen

mint rover
#

wdym affect the dimensions?

#

you want a pixel shader that operates on the downscale dimensions?

keen fern
#

and on top of that, i need the depth buffer and normal pass (i use them both for edge detection) to also be pixelated the same way

#

just been really struggling with how to do that

mint rover
#

Seems like that should be simple

#

Those are accessible within shaders

keen fern
#

i thought of 3 render textures in the past but that just doesn't seem right to me

#

i don't really know where to start with the per-pixel shader, any ideas regarding that?

naive wyvern
#

i'm trying to do the exact same thing

hushed drift
#

I recommend you check out Cyanilux's resources on the URP. What you want to create is easiest to achieve with a custom render feature for the URP.
just create some temporary lower resolution RTs and blit the camera color texture into that temporary RT, then blit the result of that back into the full rez camera color texture.
the material you use for blitting can then also define some per pixel post processing effects. all post processing effects that use per pixel shaders do it this way. you take one texture and blit it into another texture, then copy back the result.
I also recommend this tutorial from t3ssel8r on scaling the low res RT back to full resolution https://youtu.be/d6tp43wZqps?si=G41ypwu9SWW0mSoq while avoiding pixel stretching

naive wyvern
#

i will check that out

#

personally, this is how far i've gotten

#

i just used a normal outline shader tho

naive wyvern
hushed drift
#

which part?

naive wyvern
#

sry im trying to formulate my words correctly lol

#

blitting is a new concept to me

hushed drift
#

oh ok, blitting is one of the fundamentals of image effects. you might want to read up on some of the basics then.
tl;dr it is calling a fragment shader for each pixel in a destination texture using some source texture as input.

#

its usually done by drawing one or two triangles that cover the entire screen, tho URP has utility methods for it

naive wyvern
#

also when you said color texture did you mean render texture?

hushed drift
#

the color texture is a render texture, but I meant a specific render texture.

naive wyvern
#

cuz im already outputting the pixel camera that way

hushed drift
#

its a bit more low level than what you see in the editor

naive wyvern
#

hm

#

ok

#

i cant find any info on the color texture anywhere

#

i understand blitting now

hushed drift
#

but try to look through the tutorials/blogposts first. they should contain everything you need to know

#

also looking into some general rasterization/GPU stuff might help you understand things.

RenderingPipeline.png
#

like the rasterization pipeline

#

also make sure you understand uniforms and buffers

naive wyvern
#

is it possible to do all this using shader graph btw?

hushed drift
#

no

naive wyvern
#

cuz thats what the cyanilux stuff is making it seem like

hushed drift
#

you can write the shaders using shadergraph

#

but you cannot write the renderfeature, thats C# code

naive wyvern
#

ok so one more question, how exactly do i blit all this back into the camera

#

do i use a c# script? a .hlsl file?

hushed drift
#

The blitting is initiated from the cpu so by C# in the case of Unity.
hlsl is used to define the shader that is then executed per fragment (pixel of your texture) on the GPU

#

Graphics programming is like a whole new world you need to get familiar with.
So take your time and make sure you understand the fundamentals.