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

@jamesking2439

2 жыл бұрын

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

@Art-uz3fk

2 жыл бұрын

@@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

2 жыл бұрын

​@@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.

@BooshyBrows

2 жыл бұрын

@@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

2 жыл бұрын

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

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

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

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

2 жыл бұрын

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

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

2 жыл бұрын

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

@LePichu

2 жыл бұрын

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

This outcome looks really good

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

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

This is awesome!

looks awesome

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

This is awesome! Thanks for sharing :)

Wow this is awesome

woah unbelievable quality shader,

outline from normal ！ it helps a lot ! thank you

your the best thank you for being open source !

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

ok this shader is much better than others

Amazing Channel thank you 🙏🏻

This looks so good it hurts.

@jamesking2439

Жыл бұрын

Thank you!

look awsome king

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

Beautifull

wow thats crazy

I like it.

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

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

@jamesking2439

2 жыл бұрын

That would be sick.

@Snookicker

2 жыл бұрын

@@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!

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

Interesting!

Looks great!

@jamesking2439

2 жыл бұрын

Thanks!

@mrdoob

2 жыл бұрын

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

@jamesking2439

2 жыл бұрын

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

@mrdoob

2 жыл бұрын

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

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.

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

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.

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.

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.

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

5 ай бұрын

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

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

2 жыл бұрын

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

@johnjackson9767

2 жыл бұрын

Not using this approach, unfortunately

@MajatekYT

2 жыл бұрын

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).

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

@jamesking2439

2 жыл бұрын

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

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

@jamesking2439

2 жыл бұрын

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

Where to apply this?

can you use this in UE5?

@jamesking2439

8 ай бұрын

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

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.

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

@jamesking2439

Ай бұрын

github.com/KodyJKing/hello-threejs

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 :)

bro my game uses something similar

Does the source code work in unity?

@thedrunkenknight

21 күн бұрын

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

20 күн бұрын

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

20 күн бұрын

@@jamesking2439 hey thanks man