Three.js Pixel Shader Update

Made the shader more heavily pixelated and made edge highlights only one pixel thick.
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/KodyJKing/hello-th...

[@t3ssel8r]

nice work! it's definitely an interesting problem. this new video shows off some pretty challenging cases that I think you handled well

[@jamesking2439]

Thanks! I'm pretty happy with my outlines now, but I still don't understand how you avoid jittering when translating.

[@Art-uz3fk]

@@jamesking2439 isn't that just part of the aesthetic.. that's what pixels do? Noita is a good example the crate graphic looks clean upright and then at an angle it gets all pixely since it was originally drawn as an upright graphic and the game renders each pixel individually

[@jamesking2439]

​@@Art-uz3fk That doesn't have to be the case with translation if you snap to a pixel grid. It's just that I haven't figured out how to do that in 3D.

[@PigJarHut]

@@jamesking2439 you need to be using an orthographic projection (looks like you are) and then do a lot of maths to convert world space distance into camera space pixels. If you start from a simple top down / side on camera angle you can build on it from there

[@Soyaa]

@@jamesking2439 Im following, avoiding jittering is a mystery to me too

[@racingindie2168]

Dude, amazing work, that looks really cute and amazing at the same time!

[@antoniobento6813]

I can't stress enough how cool this... I've been blown away with three.js for quite some time but this is so neat

[@LePichu]

I'd just like to say thank you so much, I've been looking for this for so long now, I had lost hope but I discovered your channel today. The fact that this is open sourced makes me happy on another level, me and my friends recently started open sourced game development and we wanted to recreate Dead Cells' animation and rendering system but school took a heavy tool and I couldn't get to learn GLSL or be involved in researching much, this saves us a lot of time, I can't thank you enough! and finally, another thank you!

[@jamesking2439]

Glad I could help. Best of luck on the game!

[@LePichu]

@@jamesking2439 Thanks again, I'll be checking progress time to time. :)

[@starbi]

That looks great. It really feels like there is a sub-community building around t3ssel8rs work, haha. Thank you for sharing the source! There are barely any pixel perfect edge detection implementations out there.

[@jamesking2439]

Thanks. Yeah, I think t3ssel8r proved that good looking procedural pixel art was possible.

[@SeanStClair-cr9jl]

This outcome looks really good

[@thomassynths]

I'm going to have to take a look at the source code sometime. Thanks! I love the look

[@LollyPoppi]

This is exactly what i looking for, but with Unity. This kind of white inner line, is so pretty!

[@nav9]

looks awesome

[@TheLucifurry]

Omg, it's perfect, thanks! I thought, its impossible to make a pixelart shader with hight quality

[@thatsmaik]

This is awesome! Thanks for sharing :)

[@ZimoNitrome]

This is awesome!

[@Staeufer]

woah unbelievable quality shader,

[@printfhelloworld9806]

outline from normal ！ it helps a lot ! thank you

[@NoiseFr3ak]

Wow this is awesome

[@PandaBazookaWarz]

Open source!?! Thats really cool of you :)

[@1ucasvb]

This looks so good it hurts.

[@jamesking2439]

Thank you!

[@Julesv13]

your the best thank you for being open source !

[@rehamb.o9534]

Amazing Channel thank you 🙏🏻

[@dailyfunnytv358]

ok this shader is much better than others

[@moofarms3474]

look awsome king

[@adip7060]

Great stuff man! Makes me want to make a game using this

[@jamesking2439]

That would be sick.

[@Snookicker]

@@jamesking2439 i am working on it

[@ChrisSmith-po3di]

@@Snookicker How did it go?

[@Snookicker]

@@ChrisSmith-po3di On my channel, but i need rework the shader. I m focusing on multiplayer now. :)

[@ChrisSmith-po3di]

@@Snookicker that's so cool!

[@sigitsatriap6505]

Beautifull

[@travisc8406]

wow thats crazy

[@judgsmith]

I like it.

[@dexterwest4944]

Giving a whole new meaning to pixel shader lmao. Srs though this looks great!

[@mrdoob]

Looks great!

[@jamesking2439]

Thanks!

[@mrdoob]

@@jamesking2439 Would you be interested in turning this into an official example?

[@jamesking2439]

@@mrdoob Yeah, I'd really like that. :D What do I need to do?

[@mrdoob]

@@jamesking2439 Excellent! Just create a Pull Request with the code in the repo and I can clean it up if needed 👍

[@mag1kpo0p81]

I've been trying to figure out how to simulate blender's cavity option in solid shading in Godot.... it's a pain 🥲 i'm talking about that highlight on your dodecahedron's edges and like the black shadows of the cubes

[@lemongummy7047]

Interesting!

[@pixelpanda5885]

How can i learn to make this style of shading? a mini tutorial video would be super helpful!

[@gungriffon220]

what exactly is this for? is this a unity shader structure or something else? I'm curious if this sort of thing could be implemented into say, Blender for use in creating animations or something like that.

[@cheesecake8423]

I dont know much about 3js, but i really love this shader, if i wanted to implement this in unity, how would I do it? is there a tutorial you know of or something, I'd really love to use this for games in the future

[@jamesking2439]

This post by t3ssel8r might help give you some direction imgur.io/gallery/qwhbHQq. You can check out my shader code (in the description) as well. Alternately, you could use ProPixelizer from the asset store.

[@agrestige7390]

may i know the legalwork behind this? i am really impressed and would love to utilise this in my projects, great work btw!

[@jamesking2439]

Use it however you like. The source is in the description.

[@SMVK]

I recently saw a fantasy pixel art GIF. And a warrior was drawn there, and in the background a small castle 🏰. But that GIF was flat and drawn. I would like to see the same (or similar) small scene only in 3D as in your video T-T that would be very cool💪T-T And if there was still a game, I would play it with great pleasure 🙈 (not complicated in terms of the plot, you can just wander around without it). I hope the translator translated correctly

[@Meowxdwild]

hi! how do we implement these shaders into unreal engine / blender / unity? i absolutely love it btw!

[@jamesking2439]

I don't know about Unreal or Blender, but for Unity, you could check out ProPixelizer. If you want to build something yourself, you can check my shader code (in the description) and look at this post by t3ssel8r imgur.io/gallery/qwhbHQq.

[@fahd2372]

Is there a difference between doing this and rendering to a low res texture and scaling it up?

[@jamesking2439]

Yeah, if you just rendered at low resolution you wouldn't get the highlighted edges between faces or the object outlines.

[@lemonke8132]

You see how the edges are really jaggedy, and the number of jags changes with the viewing angle? Is is possible to make a shader that has consistent pixelation?

[@jamesking2439]

It's probably possible, but I'm not sure my approach could easily be modified to do that.

[@johnjackson9767]

Not using this approach, unfortunately

[@MajatekYT]

Could be doable with this shader if you round the XYZ position of moving objects to the nearest integer relative to the 2D viewing frustum. The only reason why the jags changes shape is because the object is moving between the screen's pixels, so the shader accounts for that by rearranging the pixels so that there's a smooth transition. Basically you'd want to approach it like how a retro PS1 shader intentionally uses fixed-point math, except applied to an object's overall position, and not its vertices individually (as that's how you'd get the wobbly PS1 effect instead of the consistent pixelation effect you want).

[@HichemCode]

Hello, the output is amazing, and I'd like to use it in a mini game with R3F. However, I can't figure out how to make it work. Could you please provide me instructions?

[@jamesking2439]

I've never used R3F. Do they have a way of setting up post processing effects?

[@ben_turner]

Woah, how can I get this working on my own Three project??

[@jamesking2439]

I have a pull request with this effect for Three.js, but it's not merged. You could just copy this file into your project and update its imports to work outside of the Three.js package: github.com/KodyJKing/three.js/blob/outlined-pixel-example/examples/jsm/postprocessing/RenderPixelatedPass.js Here's a usage example: github.com/KodyJKing/three.js/blob/outlined-pixel-example/examples/webgl_postprocessing_pixel.html#L62 github.com/KodyJKing/three.js/blob/outlined-pixel-example/examples/webgl_postprocessing_pixel.html#L154

[@rickdelacruz7840]

Where to apply this?

[@kaitino]

can you use this in UE5?

[@jamesking2439]

No, but this post by t3ssel8r describes the general technique: imgur.io/gallery/qwhbHQq

[@stormshadowoffire]

How can I implement this into unity?

[@jamesking2439]

If you want a prebuilt package, I'd recommend ProPixelizer from the asset store. If you want to implement it yourself, check out this post by t3ssel8r imgur.io/gallery/qwhbHQq. You can also check out my shader code for reference. There's a link in the description.

[@shakibdewan7441]

Is this shaders compatible with unity 3d? Where can i download it or buy this amazing shader?

[@jamesking2439]

My shader isn't compatible with Unity, but there's a great pixel shader called ProPixelizer on the Unity asset store.

[@shakibdewan7441]

@@jamesking2439 Thanks for the reply! I’ll buy this one, looks good :)

[@warlockpaladin2261]

This has got to be used for something... where code at? 🤤

[@jamesking2439]

github.com/KodyJKing/hello-threejs

[@codered_dev]

bro my game uses something similar

[@thedrunkenknight]

Does the source code work in unity?

[@thedrunkenknight]

If not would someone be able to help me get this effect working in unity? I have no idea how to code shader stuff like this, i know its a depth pass + a normal pass but I have no clue how to achieve this

[@jamesking2439]

This technique is doable in Unity, but this code would not be usable. If you want something that works out of the box, there is ProPixelizer on the asset store.

[@thedrunkenknight]

@@jamesking2439 hey thanks man