Skip to content

MeshMatcapMaterial: Support wireframe #31917

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 18, 2025
Merged

MeshMatcapMaterial: Support wireframe #31917

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions docs/api/en/materials/MeshMatcapMaterial.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,22 @@ <h3>[property:Vector2 normalScale]</h3>
Default is a [page:Vector2] set to (1,1).
</p>

<h3>[property:Boolean wireframe]</h3>
<p>
Render geometry as wireframe. Default is false (i.e. render as smooth
shaded).
</p>

<h3>[property:Float wireframeLinewidth]</h3>
<p>
Controls wireframe thickness. Default is `1`.<br /><br />

Due to limitations of the
[link:https://www.khronos.org/registry/OpenGL/specs/gl/glspec46.core.pdf OpenGL Core Profile]
with the [page:WebGLRenderer WebGL] renderer on most
platforms linewidth will always be `1` regardless of the set value.
</p>

<h2>Methods</h2>
<p>See the base [page:Material] class for common methods.</p>

Expand Down
21 changes: 21 additions & 0 deletions src/materials/MeshMatcapMaterial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,24 @@ class MeshMatcapMaterial extends Material {
*/
this.alphaMap = null;

/**
* Renders the geometry as a wireframe.
*
* @type {boolean}
* @default false
*/
this.wireframe = false;

/**
* Controls the thickness of the wireframe.
*
* Can only be used with {@link SVGRenderer}.
*
* @type {number}
* @default 1
*/
this.wireframeLinewidth = 1;
Comment on lines +175 to +183
Copy link
Owner

@mrdoob mrdoob Sep 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I wonder what we should do with this property...

We're carrying it around because SVGRenderer supports it, yet SVGRenderer doesn't support most of the materials that have this property.

Ideally, WebGLRenderer and WebGPURenderer should be able to support this property too, but that would mean integrating MeshLine2 in the renderer somehow and I suspect it could be pretty problematic (skinning, morphs, instancing, ...)

Copy link
Collaborator

@Mugen87 Mugen87 Sep 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about removing this property? If users require wide lines with SVGRenderer, they can switch to LineBasicMaterial.

Like mentioned in the other thread, the wireframe material property is more a debug property to me. Not having the ability to define wide wireframes seems acceptable.

Copy link
Collaborator Author

@WestLangley WestLangley Sep 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, WebGLRenderer and WebGPURenderer should be able to support this property too ...

I think we can support wireframeLinewidth in any built-in material, we just haven't done it.

I suspect it could be pretty problematic (skinning, morphs, instancing, ...)

Supporting skinning, morphs, and instancing should not be a problem.

I'll provide a proof-of-concept.


/**
* Whether the material is rendered with flat shading or not.
*
Expand Down Expand Up @@ -210,6 +228,9 @@ class MeshMatcapMaterial extends Material {

this.alphaMap = source.alphaMap;

this.wireframe = source.wireframe;
this.wireframeLinewidth = source.wireframeLinewidth;

this.flatShading = source.flatShading;

this.fog = source.fog;
Expand Down
Loading