Pixelation filter to make 3d models appear like 2d sprites

Questions
1

I’d like to apply a filter to my camera to make it look like the game is made with 2d sprites, when in actuality it is a 3d game world. The aesthetic I’m going for is like Diablo 1:

Diablo-rogue-big-pixels
Diablo-rogue-big-pixels725×448 35.5 KB

You can see the pixels are very well defined. I tried to just lower the resolution of the canvas but it looks blurry.

blurry canvas
blurry canvas867×685 74 KB

How can I achieve the effect of showing my 3d world in a lower resolution with well defined, large pixels?

2

You need to apply some postprocess like here - https://playground.babylonjs.com/#WB27SW#304

1 Like
3

Looks like it does exactly what I need, but I’m not sure how it works. Can you help me understand some of the code? I put comments where I have questions

// where is "1IHPPF" coming from? Is that a snippet of shader code that does the pixelation?
BABYLON.NodeMaterial.ParseFromSnippetAsync("1IHPPF", scene).then((nodeMaterial) => {
    const postProcess = nodeMaterial.createPostProcess(camera, 1.0, BABYLON.Constants.TEXTURE_LINEAR_LINEAR);

    postProcess.samples = 4; // what does this do exactly?

    // what are blocks and how do we know blocks by these names exist?
    const pixelateX = nodeMaterial.getBlockByName("pixelateSizeX");
    const pixelateY = nodeMaterial.getBlockByName("pixelateSizeY");

    // {...}
    });
});
4

If you open the Inspector you’ll see Node Material Editor button

image
image854×771 24.5 KB

Click on it and you’re be able to see and edit the Node material - Babylon.js Node Material Editor
You can give any names to the input blocks of the material, and then find these blocks when biulding the material.
Here it is used as postprocess, that is why is has samples parameter. You may notice, that 4 samples give better result than 1. Shortly speaking, in postprocesses samples improves the rendering of lines and edges by using several color and depth samples per pixel.
image
image459×586 13.8 KB

1 Like
5

Awesome, thank you for helping me understand it!

1 Like
6

Note that for Node material you may either use a snippet or save it to JSON.
Here is the example of how to load Node material from JSON - Babylon.js Playground

1 Like
7

Ok, nice. I was wondering about how to get it from the material editor UI you linked into my actual code. That makes sense. I suppose the official Babylon YouTube tutorials about the Node Material Editor would be a good place to start getting a more complete understanding.

2 Likes