> For the complete documentation index, see [llms.txt](https://amazing-assets.gitbook.io/wireframe-shader/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://amazing-assets.gitbook.io/wireframe-shader/classic-wireframe-rendering/quick-start.md).

# Quick Start

The classic wireframe rendering method relies on vertex barycentric coordinates baked inside a mesh, which are later used by a shader to render the wireframe effect.

* ![](https://2216819203-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2Fsz0w5KGnjtXhLDwPGJ78%2Fpros.png?alt=media\&token=c62b47b6-10a6-49d0-8888-8e12e2c7bbc4) Supports all devices, including legacy mobile devices, WebGL, VR, consoles, and PC.
* ![](https://2216819203-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2Fsz0w5KGnjtXhLDwPGJ78%2Fpros.png?alt=media\&token=c62b47b6-10a6-49d0-8888-8e12e2c7bbc4) Compatible with **Shader Graph**, [**Amplify Shader Editor**](https://assetstore.unity.com/packages/tools/visual-scripting/amplify-shader-editor-68570?aid=1011lvgVb), and custom hand-written shaders.
* ![](https://2216819203-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2FfBRa1vM4dK0wIvyy1uiQ%2Fcons.png?alt=media\&token=da829613-0c73-4826-a37c-e99bc53fb362) Requires generating a new mesh with wireframe data baked inside it (using editor tool or run-time API).

To bake barycentric coordinates inside a mesh using the editor tool, open **Wireframe Mesh Generator** from the <mark style="color:blue;">**Main Toolbar**</mark> <mark style="color:blue;">→</mark> <mark style="color:blue;">**Window**</mark> <mark style="color:blue;">→</mark> <mark style="color:blue;">**Amazing Assets**</mark> <mark style="color:blue;">→</mark> <mark style="color:blue;">**Wireframe Shader**</mark> menu:

<figure><img src="https://2216819203-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2FnmnWp2hj5WD5PVjWGuTz%2F4.avif?alt=media&amp;token=bfc66f7e-536b-453d-9fcf-923d9a9baacc" alt="" width="563"><figcaption></figcaption></figure>

Before using **Wireframe Mesh Generator**, reset its settings using the mouse right-click context menu:

<figure><img src="https://2216819203-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2FNSA36vch6vD2BaS5i8B1%2F5.png?alt=media&amp;token=53fc1a35-3d9a-4158-aef9-9295559e01a6" alt="" width="189"><figcaption></figcaption></figure>

Drag & drop the required meshes from the **Hierarchy** or **Project** windows into this window and click the <mark style="background-color:orange;">**Generate**</mark> button. The tool calculates vertex barycentric coordinates and saves them inside the mesh, creates a prefab with this new mesh and a wireframe material, and instantiates it in the scene at the same position as the source object (if the source object exists in the currently open scene).

The prefab is ready to use. Wireframe visual properties can be changed from the material:

<figure><img src="https://2216819203-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2FGfq5toMcUTPz9BqENnXw%2F6.gif?alt=media&amp;token=7873f1ff-51a4-45e4-8831-1aa33a6ab312" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The package includes a collection of example wireframe shaders. If they are not enough, the wireframe rendering method can be easily integrated into any [custom shader](/wireframe-shader/classic-wireframe-rendering/custom-shaders.md).
{% endhint %}

Barycentric coordinates are generated per vertex, and the value of each one is unique. For this reason, triangles cannot share vertices and all of them need to use their own set of vertices. As a result, the generated mesh may have more vertices than the original mesh.

A mesh with baked barycentric coordinates always has exactly 3 times as many vertices as its triangle count. The editor window displays this information:

<figure><img src="https://2216819203-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2FStTqQASgC0EhzpPJl2ur%2F6.png?alt=media&amp;token=68605cc0-05cc-416a-932e-7cdee0246997" alt="" width="563"><figcaption></figcaption></figure>

In the image above, the source mesh has 4,817 vertices and 5,732 triangles. The generated wireframe mesh will have 3 times as many vertices as the source mesh triangle count: 5,732 x 3 = 17,196 (`x3.6` is the vertex count ratio between the wireframe mesh and the source mesh). The triangle count does not change.
