• 運沙

Godot Engine: 3D Model To 2D Pixel(Potential Pipeline)

Updated: May 21

https://www.youtube.com/watch?v=DTExHmvfZhI


Following this tutorial, basic steps:


Place 3D model in viewport and viewport container(and also in front of a 3d camera);



Set viewport as render target of a texture and pixelate by using "Stretch" and "Stretch Shrink" on Viewport Container. Turn on Msaa if needed.


Assign texture onto a 2D sprite for render



Finally, apply another sprite overlay on top for color remapping/reduction using a 2d pixel color palette(I'm using this https://lospec.com/palette-list/odd-feeling )

Shader used:

shader_type canvas_item;

uniform vec4 color_1 = vec4(.0, .0, .0, 1.0);
uniform vec4 color_2 = vec4(.3, .3, .3, 1.0);
uniform vec4 color_3 = vec4(.6, .6, .6, 1.0);
uniform vec4 color_4 = vec4(0.9, 0.9, 0.9, 1.0);
uniform vec4 color_5 = vec4(.0, .0, .0, 1.0);
uniform vec4 color_6 = vec4(.3, .3, .3, 1.0);
uniform vec4 color_7 = vec4(.6, .6, .6, 1.0);
uniform vec4 color_8 = vec4(0.9, 0.9, 0.9, 1.0);

void fragment() {

	vec4 colors[8] = {color_1, color_2, color_3, color_4, color_5, color_6, color_7, color_8};
	//vec4 colors[4] = {color_1, color_2, color_3, color_4};
	float min_diff = -1.0;
	vec4 min_color = vec4(0.0, 0.0, 0.0, 1.0);

	vec2 uv = SCREEN_UV;

	vec4 temp = textureLod(SCREEN_TEXTURE, uv, 0.0);

	min_diff = 1000.0;
	for (int i = 0; i < colors.length(); i++) {
		float curr_dist = distance(colors[i], temp);
		if (curr_dist < min_diff) {
			min_diff = curr_dist;
			min_color = colors[i];
		}
	}

	COLOR.rgb = min_color.rgb;
}

Before color remapping vs. after

***Result***:


Reads on similar topic:

(Dead Cells' approach)

https://www.gamasutra.com/view/news/313026/Art_Design_Deep_Dive_Using_a_3D_pipeline_for_2D_animation_in_Dead_Cells.php


https://www.youtube.com/watch?v=vIKJ1AqfI0Q&t=0s