Three.js Pixel Shader Update - Seamless Outlines

I fixed gaps in normal-edges around vertices and moved my code into a PR for Three.js.
Inspired by t3ssel8r's work: / @t3ssel8r
Thanks to Omar Shehata for his tutorial on writing an outline pass: / how-to-render-outlines...
Source: github.com/Kod...
github.com/Kod...
PR: github.com/mrd...
Demo: raw.githack.co...

[@monkeysfromvenus]

Looks beautiful, I'd love to see it on some more natural geometry with variations in edge "sharpness" like rocks or something. How is the brightness of the normal edges chosen? Is it just a flat increase? It might be cool to brighten the normal edges based on averaging the normals of the two connected faces or something.

[@krish-ut9de]

I watch this video every single day XD, it's so beautiful

[@HEOlASSASSIN]

i don't know what sort of shader sorcery this is, but i love it

[@gianluska.4255]

That is awesone! Great work

[@halo3kings88]

This is amazing! Great work!

[@elliotb_256]

It looks really great! Are you doing interior edge lines by using the normals to detect them, then lightening those pixels? I've also been keen to try an alternative method, which would be to sample the 'average' surrounding screen-space normal and then use that in a lighting calculation. This would allow someone to distinguish between interior/exterior edges, wondered if you had plans to try something similar?

[@jamesking2439]

Thank you! Yeah, that's how I'm getting the interior edges. It took some hacks to get that method to only detect on one side of an edge though. I was actually planning on trying a more direct method where I render interior/exterior edges in a separate pass and then combine everything in a final step. I haven't gotten around to trying that yet.

[@elliotb_256]

@@jamesking2439 I also found rendering object Ids to a separate buffer works really well for silhouette outlines, and if you do that stage before rendering the objects you can then sample it and do per-object color grading of the outlines (it would be more performant to be able to do it in the gbuffers but im on unity stuck with forward rendering)

[@jamesking2439]

​@@elliotb_256 That's clever. Not having per-object artistic control was the biggest problem I had with this effect. Thank you.

[@rocifier]

@@elliotb_256 you know you can change unity to use deferred rendering instead of forward right?

[@elliotb_256]

@@rocifier yes, but in doing so it becomes a lot more 'fixed pipeline', particularly around lighting calcs. And then you can only apply modifications after the lighting calcs to the entire screen, which prohibits things like per-object color grading and dither patterns

[@AndersonMancini]

Great work. Looks awesome.

[@hyl]

Is your camera using isometric or perspective projection? The shape of the plane looks strange at different angles.

[@jamesking2439]

It's isometric.

[@krish-ut9de]

happy new year bro!

[@jpthedio]

Awesome work! 🙌

[@printfhelloworld9806]

It‘s annoying to get single pixel edges, I read the code and in the line 173 there is “// Only the shallower pixel should detect the normal edge.”. I want to know is it the key to get single pixel edge? sorry for my bad English.

[@jamesking2439]

That's the key for the outer edges. The internal edges break the tie by determining which pixel's normal is more towards a fixed "bias direction" in screen space.

[@printfhelloworld9806]

@@jamesking2439 It works！Thank you so much，I've wasted a lot of time on the convolution kernel trying to get a single pixel edge and I would never think out such a clever trick.

[@HiphopBurny]

@@jamesking2439 This conversation helped me so much!!!!! Thanks. I am using Unreal Engine, please can you tell me what do you mean by fixed "bias direction" in screen space?

[@jamesking2439]

​@@HiphopBurny So when I do edge detection on the normal texture, I look for pixels whose normals are more towards the upper right of the screen than their neighbors. That "upper right" direction is the "bias direction" I'm talking about. You can see the relevant code here: github.com/KodyJKing/hello-threejs/blob/main/src/RenderPixelatedPass.ts#L99

[@bunyaponchaiongkarn8258]

Great work!

[@dontfrickhoes5904]

i bet this took you months to finish and i love you sharing your source code i really wanted to try out t3ssel8rs shaders for my game. do i do this in urp or hrp?

[@jamesking2439]

This is built for Three.js. If you want something like this in Unity, checkout ProPixelizer.

[@dontfrickhoes5904]

@@jamesking2439 oh damn but propixeler is paid i dont have money. is it possible for me to like mimic the shader like make my own in unity?

[@jamesking2439]

​@@dontfrickhoes5904 I don't know much about Unity, but if you can create a post-processing effect with access to your camera's depth and viewspace normal textures, I think you could translate my edge detection shader to Unity fairly easily. I don't know how hard it is to do post-processing effects in Unity. I do know Unity has a way to get depth and normal textures from your camera: docs.unity3d.com/Manual/SL-CameraDepthTexture.html

[@daveb7596]

omg please post more of this type of stuff.

[@joey475]

Very impressive! How does your technique compare to using an operator like Sobel or Roberts Cross?

[@777-h1n]

bro could you please do a tutorial? new to three.js and I really would love to understand how to do it on my own and how it works. And great job, it looks great 🙏

[@jamesking2439]

I don't have time to make a tutorial right now, but you can check out this tutorial which helped me: omar-shehata.medium.com/how-to-render-outlines-in-webgl-8253c14724f9 And you can check out my shader code: github.com/KodyJKing/three.js/blob/outlined-pixel-example/examples/jsm/postprocessing/RenderPixelatedPass.js The tutorial doesn't cover how to do pixel perfect outlines, but it gets you most of the way there. I'm doing a some extra tricks to get 1 pixel thick outlines (on lines 167 and 172).

[@777-h1n]

@@jamesking2439 I understand bro, thanks a lot for the ressources 🙏 I'm going to try it out ! Thank you very much ! Have a nice day 🙌

[@XxkevinGUYxX]

Any way to add this to react three fiber?

[@jamesking2439]

Maybe with this: github.com/pmndrs/react-postprocessing I'm not sure how easy it is to add custom effect components with this, but it's worth taking a look.

[@diligencehumility6971]

How to get pixel perfect out lines from 3D? 🤔🤔🤔🤔🤔

[@ropenrommuelle5241]

Thanks bro I've been searching for something like this. Do you think you can create a tutorial for the shader grass and leaves? just like t3ssel8r's shaders

[@krish-ut9de]

hi man, i am also looking for that. Can you please tell me if you found anything?

[@illumi1749]

can you make a tutorial on how to implement and use this?

[@itsafish4600]

cool

[@kombosabinho]

Hey was this done in Godot or Unity? Thank you so much for posting, very beautiful effect indeed :)

[@jamesking2439]

This was done for the web with Three.js. I have another demo I built for Godot: github.com/KodyJKing/PixelShader For Unity, there's an asset you can buy called "ProPixelizer".

[@Equilix_Doom]

@@jamesking2439Does the Godot demo have the ability to recreate this scene or is it more limited?

[@jamesking2439]

@@Equilix_Doom IIRC, it was more limited. The edge detection was implemented directly in each materials shader rather than a frame post processing step, so it was more of a pain to customize objects. It probably could still reproduce this scene though.

[@Equilix_Doom]

@@jamesking2439 Thanks for the quick response! Another question does three.js use GLSL and if so couldn't the code from the website be reverse engineered to use in Godot?

[@cholasimmons]

Looking at this just reminds me of my father, we used to take turns on Prince of Persia, 💓 Oh Dad

[@__BBRAGA__]

Amazing would you mind to share a tutorial about this?

[@WTZ.]

:O

[@raulcantu9784]

Hello bro, I loved what you did, did you do it in unity? I would love to learn how to do the same, could you make a video explaining how you did it?, Please.

[@jamesking2439]

I didn't make this in Unity. I made this with a JS library called Three.js. If you want this effect in Unity, you could use ProPixelizer from the asset store. kzbin.info/www/bejne/nnbKlWmOfryKZ6c

[@raulcantu9784]

@@jamesking2439thank you very much bro

[@woodsy4458]

Can this work in unity, would love to try it as a shader for a game project im going to work on

[@jamesking2439]

My shader wasn't written for Unity, but you could get ProPixelizer from the asset store. It's $25 though.

[@Alex-is-Procrastinating]

how can i use it? Can you make a tutorial?

[@jordanlately]

this is so gorgeous. would love to understand how I can use this. would you be open to sharing any tips on how to use this shader on 3d compositions I've made?

[@krish-ut9de]

how did you make this????

[@osmodivs]

Ok, how do I use this in Blender?

[@jamesking2439]

This is a post processing effect that samples from depth and normal textures to find edges in the image and highlight them. Blender's compositing system doesn't look powerful enough to do this. You'd probably have to render your scene in multiple passes and use an external program to do the edge detection.

[@jamesking2439]

You *could* use another scene and feed the rendered passes back into a shader to do the edge detection. Then render a full screen plane with that material.

[@sugimanjuara8195]

it is possible to be apply for Godot Engine ?

[@jamesking2439]

Definitely. The shader in this video is for Three.JS, but I did implement a demo of this in Godot a while ago. Feel free to use this however you want. github.com/KodyJKing/PixelShader

[@sugimanjuara8195]

@@jamesking2439 OMG Thank you so much !!

[@babbyboned]

@@jamesking2439 I'm an aspiring godot game dev looking to make something like this. I took a look at your scene and I am trying to figure out what your buffer node/script does. I can't seem to tell a difference with/without it. Thanks!

[@jamesking2439]

@@babbyboned That script/node is unused in the main branch. There is another branch where I use that to be able to have an arbitrary number of buffers. In the main branch, I use multiple pass materials. I render normals in the first pass and then in the second pass I render the final image, reading normals out of SCREEN_TEXTURE and depth information out of DEPTH_TEXTURE. BTW, I am a total Godot rookie, so my approach could be very hackish/bad practice.

[@corvus7535]

is there such a thing for Maya?

[@jamesking2439]

Not that I know of, but I don't know anything about Maya.

[@zion6570]

wow how did you do this?

[@jamesking2439]

Omar Shehata's article in the description explains how to use depth and normal buffers to find edges. I had to modify the technique a bit to get single pixel edges. For depth edges, I check to make sure that a fragment is shallower than its neighbors. For normal edges, I make sure that a fragment's normal is more in the direction of a fixed bias direction than its neighbors.

[@jerrygreenest]

Please add a link to PR

[@jamesking2439]

github.com/mrdoob/three.js/pull/22322

[@ibramkadyrov9734]

What app you use?

[@jamesking2439]

This was made with Three.js, a 3D graphics library for JavaScript.

[@krish-ut9de]

how did you make this???? OMG ITS OPEN SOURCED

[@jamesking2439]

The shader does edge detection on depth and normal buffers to get the outlines and seams between faces. To get single pixel seams, each pixel compares its normal to its neighbors' normals and to a constant "bias normal". The pixel that is more in the bias direction is rendered as an edge.

[@krish-ut9de]

@@jamesking2439 Thank you so much for your detailed reply, i really love your work. Its a piece of art, in fact i bave multiple screen shots of this video just to use as inspiration for aspiring future 3d pixel art projects. I really want to learn how it was done but all of the things that you said are foreign to me. Could you please recommend some starting points for a total beginner such as myself for learning the things that you do

[@krish-ut9de]

@@jamesking2439 thank you again good sir

[@jamesking2439]

​@@krish-ut9de My computer graphics knowledge is fairly limited, so I might not be the best advisor, but I can tell you what's been helpful to me. I learned how to write shaders by watching Inigo Quilez and The Art of Code, following along with their projects on Shadertoy. (Shadertoy is a great way to learn about fragment shaders, but it won't teach you how to about vertex shaders.) If you're already familiar with shaders, this article might be helpful. It's how I learned to use depth and normal buffers for edge detection in ThreeJS: omar-shehata.medium.com/how-to-render-outlines-in-webgl-8253c14724f9

[@krish-ut9de]

@@jamesking2439 THANK YOUU SO MUCH🙏🙏🙏🙏