How my 3D PIXEL ART Camera Works

[@asteranx]

It's also worth noting that these techniques are useful in 2d as well as 3d to get a more 'authentic' retro presentation. It will ensure that your world and characters are always pixel aligned visually to one another while allowing their physics bodies to exist in a more continuous space. Especially useful if you make sure to keep your texel density consistent and everything scaled to the correct size.

[@zarblitz]

This is one of those things that seems so simple and clever once it’s demonstrated, and yet I wouldn’t have thought of it :)

[@Emnesium]

Very nice stuff. This can allow for lots of interesting applications, especially since it can allow for elements that would be nightmarish to be hand-sprited to come to life without sticking out like a sore thumb

[@denovodavid]

Yeah true. Even if your pixel art game is not fully 3D, you could take advantage of 3D elements for certain models. It's great for geometric stuff, and rotating things at lower frame rates can make it feel hand animated.

[@niuage]

This is gonna become a popular video, I can already tell :)

[@denovodavid]

Thank you for the vote of confidence 😎

[@ersatztutor]

Man I've been waiting on this for quiet some time. Can't wait to try it out. Thanks for the work you put into this!

[@sw97058]

This works fantastically, and with some careful tweaks (3d sprite pixel size .0037m, camera size 22.5m, final sprite offset y 0.5px), I was able to line up perfectly with our pixel art for 540p. Now we can mix 2d sprites with 3d backgrounds and it looks seamless.

[@OctagonalSquare]

This is dope! My game is all 2D with a static camera so I’m not going to need it now, but definitely saving this for later in case I make a new game that needs it

[@VojtaSiman]

Thanks for the video, been waiting for this one! I've been messing around with Godot and pixel outlines recently but I was struggling with a camera setup, so this is definitely very helpful!

[@starbi]

Nice, the idea is also applicable to any engine you're working with. My first iteration was doing exactly this in Unity.

[@denovodavid]

Hey I remember watching your video! And yeah, the snapping and smoothing only requires the most basic of 3D pipelines :)

[@MrUlipi]

Could you make a tutorial on how to do this in Unity? I really like the 3D pixel art style but I don't know how to do it

[@dmaz123]

Awesome! I was just messing with this the last few days but got stuck on snapping independent objects! thanks for solving all this! can't wait for work to be over!

[@_pipok]

Really well explained!

[@denovodavid]

Glad it was understandable :) I tried to get the core texel grid derivation explained so it could be applied to any orthogonal camera setup, regardless of engine. I skimmed a lot of details after that, as it's not quite a tutorial. I considered trying manim or motion canvas for graphics, but decided to keep things lofi with the humble screen drawing.

[@_pipok]

@@denovodavid I think it's in good balance between simplicity and understandability. I'm working with GameMaker, and besides few technical matters this approach is perfectly applicable. And, to be honest, your solution is way better than what I coded before lol.

[@justabeep431]

Omg i needed this exact effect

[@denovodavid]

and you can have it 🙌

[@windtp2292]

nice video, waitting for next.

[@mykaru3553]

Wow great tutorial, its so nice finally being able to see one. Looking forward to more!

[@havidarou]

Awesome!

[@BeyCuber]

Absolute legend, thank you for the video!

[@0xkeez]

So good man, so so good

[@jamjam.100]

It's nice to put a voice to the amazing work, we are honoured to be with you. Btw are from UK you sound like it lol

[@denovodavid]

thank you for watching! My dad is from England haha, but I live in Melbourne :)

[@kieunghiaduong4848]

Thank you

[@ratone1238]

Hopefully the pixel perfect outline video is still coming!

[@myates9529]

Its cool to see the actual impl now, I had given it a whirl a while back after seeing your reddit posts. I think I was pretty spot on, only exception being the hook on the rendering server and snapping individual objects :D. Thanks for sharing this info! Did you ever have any luck (or try) using this approach while using 3D Sprites mixed in? I had issues getting the 3D sprites to feel consistent with the output resolution, no matter how much tinkering I did with the orthographic size + pixel size of the Sprite3D... either way, good stuff

[@denovodavid]

I don't see a reason why it shouldn't work with 3D sprites. I would make them always face the camera (billboard), and scale the sprite size to match the same texel size as the output. The sprite origin might also play a role, making sure it's not snapping to the centre of a texel or something.

[@dmsys6516]

Amazing

[@killerbadsad]

This helps a lot, thanks! Any eta on the next vid? :) Thanks!

[@daliborgarza5244]

My implementation is almost identical to yours, if only i had found this video before.

[@DevDoge_]

Cool effect

[@denovodavid]

cool name

[@NeriQward]

Hi, can you please make a tutorial how to make something like this but in 2D?

[@JudahCaruso]

Super cool and I really love the format! Hope to see more videos soon. Also, what’s the screen drawing software you’re using? Looks like Milton but uses a screenshot as the canvas

[@denovodavid]

Thank you! It's a sysinternals tool, ZoomIt: learn.microsoft.com/en-us/sysinternals/downloads/zoomit

[@erabeus]

This is great. I had created my own version but this is way more elegant. The only issue I'm getting is when objects move diagonally, because of the snapping they will eg. snap left, then up, then left, etc. which creates a rapid jitter effect that noticeably blurs the edges of the object, even at 60fps but especially at higher framerates. You can see it a bit in your blue cube as it turns quickly, but it's not as bad because it's moving relatively slowly. Any ideas besides keeping everything in the game at a low speed or capping fps to 30? Edit: I just realized too it probably also has to do with the fact that I’m targeting 640x360 rather than 320x180 so the jitter is more rapid.

[@erabeus]

Experimenting more it looks like it's actually the object moving too little (~1 pixel) per frame, so bumping up the speed or capping the framerate at 60 so the object moves more than one "staircase step" per frame helps alleviate the issue. I wish there was a way to render individual objects from the same angle to avoid the temporal aliasing, but not restrict them to the pixel-snapped basis of the world. But the only way I can think of doing that is having a camera-subviewport setup for every single moving entity which seems super jank.

[@denovodavid]

Unfortunately the snapping is kinda the point. Having unaligned objects requires rendering them outside the scene as you said, but then you have the trouble of compositing it back together. You could probably to it in a performant way if you have full control of the render pipeline, but within Godot seems difficult. Pixel perfect diagonal movement at less than sqrt(2) pixels per frame is basically flawed, something has to be compromised. Perhaps you could make an educated guess and snap to perfect diagonals if the object's velocity is that direction.

[@Kosro]

Thank you so much for this! I'm also loving your Editor Theme, is it available anywhere?

[@denovodavid]

In editor settings I just set base color to #2d2e2f and accent color to #ffc500, that's it :)

[@Kosro]

@@denovodavid Huh, I appear to be blind.. Appreciate it, thanks! And please keep the t3ssel-imit8or tutorials coming.. I feel like there's a bunch of awesome looking indie games just around the corner ;)

[@americoperez810]

Does this take screen resolution changes / window resizing into consideration?

[@denovodavid]

Yes, I didn’t show that version of the code specifically, but it works just fine in the final scene.

[@ddsds95]

Fantastic work! I was just wondering how did you manage to update the scene config at run time? I remember this not being possible in Godoy unlike Unity. I suppose I am missing something.

[@denovodavid]

Thanking you! Godot does transfer certain scene changes to the running game process. If you open the "remote" scene tree then you can inspect the currently running values as well. It's just a bit limited because the game runs in an entirely separate process and has to use IPC. The main trick I use is to make the game window always on top, so I can change properties in the editor without losing focus :)

[@marcuslola]

Great video, just what I was looking for! Is there any way to apply the texel snapping to 3D animated objects though? Snapping moving objects is straightforward enough, but I'm not sure if the same principle can be applied to 3D models with imported animations.

[@denovodavid]

Animated skinned meshes would require different techniques for that 2D feel. In addition to snapping, I would throttle the framerate of animation and rotation.

[@Koniotaur]

Thanks for sharing. I've been wondering how to get similar result although now I'm not entirely sure if I will be able to use that method. Probably need something else as my camera is attached to a moving body

[@denovodavid]

If your camera is hard attached to a moving body, then all you can really do is snap the moving body and do nothing special with the camera. It will be stable and pixel perfect, but it won't be as smooth. If your camera has a reasonable amount of softness or springiness to the follow logic, then snapping both can still work.

[@Fullstackdesign]

Does the pixelated look come from the camera? If so would the camera try to pixelate 2D HUD components? How would you avoid objects getting pixelated?

[@denovodavid]

By the end, the pixelation happens within a SubViewport, of which the texture is displayed on a 2D node at the standard resolution of the window. So, if you put 2D/UI elements in the SubViewport, they will be pixelated, and if you place them outside, they will be at full resolution.

[@Fullstackdesign]

@@denovodavid Excuse the questions, I am new to Godot, To clarify, any objects(2D or 3D) placed outside of the pixelated SubViewport will not get pixelated right? I like the pixelated art style however, I am conflated if whether its best to pixelate objects via a shader or by camera.

[@denovodavid]

@@Fullstackdesign yes, objects inside the subviewport are rendered separately to a smaller texture, thus pixelated when scaled up. (Just note, with this setup you cannot mix 3D pixelated and 3D non-pixelated objects together with correct depth sorting.)

[@jsonchin]

Great explanation. What do you use to write on the screen while you explain?

[@denovodavid]

Cheers! I use ZoomIt: learn.microsoft.com/en-us/sysinternals/downloads/zoomit

[@iamahtic]

Tutorial anytime soon?

[@Wanfanel]

Only blue box shadow don't work

[@thygrrr]

Ive been looking for something like this, very inspiring. I want to do a more anime Style Look but had ruled out pixels because I didn't think of unsnapping stuff after rendering. Why can't you snap only in the shader, though?

[@denovodavid]

You likely can snap using only a shader, as long as you pass the appropriate "snap space" to it. I just didn't want to add custom shaders to everything.

[@fransbstrom1666]

Something I've been trying to solve using this method is having a camera smoothly follow a moving snapped object without any jittering that works with large pixel sizes (say 6 pixels per world unit for an example). If I understand it correctly the problem is when the applying the snapping error offset from the camera the moving object will be visually offset by the snapping error and thus appear jittery. Have you tried anything to fix this issue?

[@denovodavid]

Yeah it's an awkward issue that affects 2D pixel art games as well, it only has partial solutions with trade-offs: - If you have an animated 3D character with a soft attached camera, it may be better to *not* snap them at all, as pixel creep from animation and movement will be far less noticeable than jittering. - If you soft attach to a consistently moving snapped static mesh it's basically impossible to avoid jittering. You will have to snap the object and hard attach the camera with no snapping to avoid the jitter, but you won't have sub-texel smooth movement. (My main project is at 640x360, so even hard attached movement is still pretty smooth.) - The only other way I can think is to render the object separately and insert it into the scene at a sub-texel level. That's a whole other pipeline to manage, but might be worth it if you really want those chunky texels. There's probably a way to mitigate the jitter by selectively snapping/unsnapping things based on speed and follow logic, but I haven't explored that yet.

[@TheFlawlessFinale]

Cheers for the great video, I implemented this on small project to fix pixel creep on terriain objects. After the changes, the terrain is working a charm but now the character object that the camera follows has the pixel creep, do you know of an easy fix for this whilst retaining control over the character?

[@selkie6341]

I had a similar issue, but I had some luck with camera following by limiting the game max FPS to 30. (Character in the snap group of course)

[@gutzimmumdo4910]

can u do a tutorial on how to do this in unity? i understood everything but i dont see a x offset nor y offsets in unity camera, u know what equivalent is?

[@denovodavid]

You should be able to use a parent object with the camera as a child, then offsetting the camera's transform. I originally did this in Godot, then realised x/y offset was simpler. Since the parent is now the "true" transform of the camera, you'll probably want to use that for all the relevant calculations. I don't use Unity anymore, so maybe Cinemachine has something that can make it simpler...

[@gutzimmumdo4910]

@@denovodavid hey thenk you! il try

[@thoughtseer2139]

Would it be possible to get this working with a Perspective Projection camera?

[@GiseudoOliveira]

nice question, does this approach supports also perspective projection?

[@ghostradiodelete]

Does this still work if you say...rotate the camera around a hooked up path and also rotate a spotlight around that same path? Asking for a friend....named me. I have a pretty neat pixel shader now, which if you look at the code it's ridiculously complex, but it looks super neat, it throws an outline on everything too. But what it doesn't do is prevent the blurry movement like you've done here. Only I wonder if you moved you turned the camera would it still stay so nice? Because that's what I'd like on my game. No luck getting it to work so far, but, i'm not very smart soooo.

[@denovodavid]

Rotating the camera will always cause some form of pixel creep; it's a whole new "perspective" on the scene. There's no real way to snap if the camera rotated in the current frame. That being said, the solution here will continue snapping correctly once rotating has stopped.

[@ghostradiodelete]

@@denovodavid ah..in that case my dungeon crawler will just have some blur when turning, and that's okay, it's pretty quick. thanks!

[@Phrate]

Might be a silly unrelated question, but how did you get your Godot to look like that? I can't seem to find any themes or whatnot online.

[@denovodavid]

In editor settings I just set base color to #2d2e2f and accent color to #ffc500, that's it :)

[@iadoptedanalien]

How do you handle interpolation in Godot when the monitor's refresh rate, FPS, and physics tick rate are not synchronized? For example, when I increased the monitor's refresh rate to 75Hz, I lost smoothness in movement, and it only returned when I adjusted the physics tick rate to 75 and enabled VSync to lock it at 75 FPS. Is there a way to maintain smoothness without having to make this adjustment manually

[@iadoptedanalien]

btw, your video is amazing and is helping me a lot

[@denovodavid]

hmm... from my understanding, it should be smooth if all updates are run in _process (every frame), which they are in my scene. I only have a 60hz monitor, but I've tried all vsync modes and it's smooth in all of them. If you're doing work in _physics_process, then you're dependent on the physics tick rate and will need interpolation to smooth out the physics movement betwixt rendered frames. Unfortunately, automatic 3D physics interpolation has only just been merged upstream and will be in Godot 4.4, but there's likely a workaround or manual way to do it.

[@iadoptedanalien]

​@@denovodavid Thanks for the response! THAT WAS EXACTLY IT. For some unknown reason, I put the camera_rig in _physics_process, and moving it to _process() resolved the smoothness issue. I'm using 4.4, but I disabled the physics interpolation on the camera because it was bringing back the "pixel creep." For my case, it seems better to keep the interpolation disabled.

[@ermilburn02]

Wouldn't it make more sense to only calculate p1 and p2 if snap is true? Otherwise you're calculating it just to do nothing with it, potentially wasting some processing time.

[@denovodavid]

Yes, the snap toggle is mainly for showcase/debug though; I always have it enabled in my main project.

[@havidarou]

I'm trying part 2 and 3 in the latest Godot version (4.2.1 I believe) and it only renders the blue background, do you know what might be the issue?

[@denovodavid]

`README.md` explains how to override the project settings for part 2/3 to work :)

[@havidarou]

@@denovodavid didn't see that, thank you :)

[@Tymon0000]

How can you do pixel perfect shadows?

[@denovodavid]

hmm... maybe you would have to texel snap the object in view space and in light space. During the light space depth pass, it should be possible to snap vertices to texels, but I don't think that translates one-to-one with view space texels when sampling the attenuation. This requires further investigation.