Wireframe shader

A wireframe shader using barycentric coordinates from this article and this gist.

I extended it with more functions such as:

  • A wonky width parameter
  • Opacity for the model depending on if you want the wireframe only
  • Coloring of both the model and the wireframe
Shader code
shader_type spatial;

render_mode unshaded;

uniform vec4 modelColor : source_color;
uniform vec4 wireframeColor : source_color;

uniform float width : hint_range(0.0, 15.) = 1.;
uniform float modelOpacity : hint_range(0.0, 1.0) = 1.;

uniform bool filtered = false;

const vec3 vectors[3] = {
	vec3(1.0, 0.0 ,0.0),
	vec3(0.0, 1.0 ,0.0),
	vec3(0.0, 0.0 ,1.0)
};

varying vec3 baryCoord;

void vertex()
{
	baryCoord = vectors[VERTEX_ID % 3];
}

void fragment() {
	vec3 dBaryCoordX = dFdx(baryCoord);
	vec3 dBaryCoordY = dFdy(baryCoord);
	vec3 dBaryCoord  = sqrt(dBaryCoordX*dBaryCoordX + dBaryCoordY*dBaryCoordY);

	vec3 remap = smoothstep(
		vec3(0.0),
		dBaryCoord * width,
		baryCoord
	);
	
	remap = filtered ? remap : step(.5, remap);

	float closestEdge = min(min(remap.x, remap.y), remap.z);

	ALBEDO = mix(wireframeColor, modelColor, closestEdge).xyz;
	ALPHA = mix(1., modelOpacity, closestEdge);
}
Tags
3d, Spatial, wireframe
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from Melisek

Speed lines

Related shaders

Wireframe Shader (Godot 4.0)

Wireframe

GradientTexture Shader

Subscribe
Notify of
guest

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
ManuAlpa
2 months ago

It seems to work only for meshes created in godot but not with those imported from blender (in any format). Do you know why could it be?

Votron
1 month ago
Reply to  ManuAlpa

I changed the render mode to

render_mode wireframe, unshaded;

and it gave me the result I’ve been looking for.

Shykaro
Shykaro
1 month ago
Reply to  Votron

Wireframe render_mode doesnt work with gl_compatibility renderer sadly…

Calinou
10 hours ago
Reply to  Shykaro

The wireframe render mode will work in Compatibility if you call RenderingServer.<span style="color: rgb(206, 145, 120);">set_debug_generate_wireframes(true) before loading any meshes. You can put it in an autoload’s _init() function to achieve this.

wtrgw3tgw
wtrgw3tgw
1 month ago

If the shader works weirdly try exporting the model with the .obj format in Blender, then go to Godot and use a CSGMesh3D node and put that model .obj in the “Mesh” property and place the shader in “Material” or wherever it allows you. It worked for me