Directional 3D Sprite

[Lasthy]

So, I was working with 3D sprites with the intention to make a Doom like approach, where the sprites change according to the user angle of view, like, when you look from the right it's one sprite, and when you look from the front is another, and so on. Although you can do it with script, there is no convenient way to preview the sprites in editor, which makes it hard to animate and test the animations.

A side view from a test character (with the incorrect direction of the sprites).

Now I can't be sure if it's the back or the front without another node to use as reference.

It is easy to change now because there is only 4 3D Sprites, but if I was working in a scene with multiple characters and objects trying to make a cutscene, for example, it would be hard to change each sprite individually just to preview from a single point of view.

There is no need to make a new node, just an option that you select on Sprite 3D (and AnimatedSprite 3D if possible) node, with options to 4 or 8 directions, and choose between vertical frames or horizontal frames to be the direction references, and a way to select like: (vertical or horizontal, according with what the user chooses) frame 0 is the right, frame 1 is the back, and so on.

Sorry if I made any grammar mistakes, english is not my first language.

[mieldepoche]

This can be done with a shader.

recording-2022-08-06_20.03.29.mp4

Here's the one I'm using in my project currently.
It's hacky (I'm still learning shaders) and breaks if you rotate the camera up and down, but it's a starting point and is enough if you don't see those sprites at an angle.

shader_type spatial;
render_mode unshaded;


uniform sampler2D views : filter_nearest, source_color;
uniform float view_count = 8;
uniform float grow = 0.0;


void vertex() {
	// billboard mode from the default material
	MODELVIEW_MATRIX = VIEW_MATRIX * mat4(vec4(normalize(cross(vec3(0.0, 1.0, 0.0), INV_VIEW_MATRIX[2].xyz)), 0.0), vec4(0.0, 1.0, 0.0, 0.0), vec4(normalize(cross(INV_VIEW_MATRIX[0].xyz, vec3(0.0, 1.0, 0.0))), 0.0), MODEL_MATRIX[3]);
	VERTEX += grow * NORMAL;
}


void fragment() {
	float d = dot(NORMAL.zx, vec2(-1, 0));
	float angle = -acos(NORMAL.z) + TAU/2.0;
	float current_view = NORMAL.x > 0.0 ? angle/TAU : 1.0 - angle/TAU;
	float x = 0.0; // UV horizontal start for the view in the atlas
	x = round(current_view * view_count) / view_count;
	
	float view_width = 1.0 / view_count; // UV width of the view in the atlas
	vec4 tex = texture(views, vec2(x + view_width * UV.x, UV.y));
	ALBEDO = tex.rgb;
	ALPHA = round(tex.a);
}

I'm using this texture in the video:

Also note I'm using 4.0, some shader keywords might be different I don't know.

[mieldepoche]

@Zireael07 Not until it works 😄 Right now, panning vertically "rotates" the view even though it should not.
I need it to support both horizontal and vertical views for my project so I will fix it eventually, but I don't know when. I hadn't thought about publishing it, I've noted it down in my TODO list 🙂

[Calinou]

I've tried this shader on 4.0.beta13 (Forward Plus), but the sprite's currently displayed view never actually changes when rotating the camera around it. It only changes when looking up and down, and sometimes flickers a lot between views when doing so.

(For context, I need directional 2D sprites for a demo project I'm working on.)

[mieldepoche]

mhm, I hacked my way through this, and could never improve it.
It works as usual on beta 14 forward+ on my end 🤔.
This mrp works on my end: billboard.zip

[mieldepoche]

@Calinou looking at the demo, it seems comenting that line fixes the issue. (not sure what it does as I'm not knowledgeable in 3d shaders)

void vertex() {
	// Y-billboard.
	MODELVIEW_MATRIX = VIEW_MATRIX * mat4(vec4(normalize(cross(vec3(0.0, 1.0, 0.0), INV_VIEW_MATRIX[2].xyz)), 0.0), vec4(0.0, 1.0, 0.0, 0.0), vec4(normalize(cross(INV_VIEW_MATRIX[0].xyz, vec3(0.0, 1.0, 0.0))), 0.0), MODEL_MATRIX[3]);
	// MODELVIEW_NORMAL_MATRIX = mat3(MODELVIEW_MATRIX); // this one
}

also, note that the shader expects a full 360° description of the views, so redundant information (views that are the same from the left/right) have to be duplicated in the sheet.

[Calinou]

also, note that the shader expects a full 360° description of the views, so redundant information (views that are the same from the left/right) have to be duplicated in the sheet.

I'll look into mirroring horizontal UV scale for front-side/side/back-side sprites when needed, as done in original Doom for most enemy sprites (including the player).