> 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/dynamic-wireframe-shader/quick-start.md).

# Quick Start

Dynamic wireframe shader is a modern approach that generates the wireframe effect entirely on the GPU.

* ![](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) The wireframe effect is fully calculated and rendered on the GPU. No mesh generation, preprocessing, or modification is required.
* ![](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**.
* ![](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) Doesn't support [**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 hardware support for tessellation.

{% hint style="info" %}
Dynamic wireframe shader doesn't use tessellation. It only requires hardware support for Hull and Domain shader stages that is part of the tessellation pipeline.
{% endhint %}

To use **Dynamic Wireframe Shader**, first create it. In **Shader Graph**, add the <mark style="color:blue;">**Amazing Assets**</mark> <mark style="color:blue;">→</mark> <mark style="color:blue;">**Wireframe Shader**</mark> <mark style="color:blue;">→</mark> <mark style="color:blue;">**Wireframe Renderer**</mark> node and connect its output to the Base Color or any other port:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2FnZKLAQDyCxluZZWICxUo%2F3.mp4?alt=media&token=1285e78d-4f04-454f-96b3-47903cfc19ef>" %}

<figure><img src="https://2216819203-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2Fh4C6EvXwc2qxflwZC1mZ%2F14.avif?alt=media&amp;token=125c3647-efb8-4f56-85e4-6845fc019ed7" alt="" width="340"><figcaption></figcaption></figure>

When the shader setup is ready, click the **Generate Dynamic Wireframe Shader** button. This creates an HLSL version of the graph and saves it in the same folder.

**Dynamic Wireframe Shader** is now ready to use. Use the generated HLSL file instead of the Shader Graph asset. Keep the original Shader Graph file, and if changes are needed, modify it and then generate the HLSL file again.

After generating the HLSL file, wireframe **Shape** and **Style** can be selected directly from the material editor:

<figure><img src="https://2216819203-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2FHIMMooHpxC745L3hQENc%2F34.png?alt=media&amp;token=a79ff36c-713b-4d02-b1c1-c5ab88114579" alt="" width="455"><figcaption></figcaption></figure>

{% hint style="info" %}
The **Dynamic Wireframe Shader** node doesn't use the **Render In Screen Space** or **Read From** properties. Those are used by the [**Classic Wireframe Rendering**](/wireframe-shader/classic-wireframe-rendering/quick-start.md) method.
{% endhint %}

**Wireframe Shape** - Rendered wireframe as **Triangle** or **Quad:**

<figure><img src="https://2216819203-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2FiExZSNVrBz5cuthCcKj7%2F7.png?alt=media&amp;token=12c682b0-d5c7-4278-9973-af510d1e64e0" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Note, quad wireframe rendering is a pure approximation by a shader, and its quality depends heavily on the vertex/triangle layout. Not all meshes can produce a *'good-looking'* quad wireframe.
{% endhint %}

**Wireframe Style** - Available 3 render styles:

* **Default** - This is fastest wireframe rendering method suitable when wireframe edge thickness is small (as on image above) or for meshes consisting of triangles & quads with similar surface area. For example Unity's built-in Plane, Cube and Sphere meshes.
* **Normalize Edges** - As wireframe effect is calculated per-surface and each triangle's surface area is usually different, wireframe edge thickness will vary between triangles. **Normalizing Edges** reduces those differences:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2FCM9Zs2PSAHdTMjJirllT%2F8.mp4?alt=media&token=17b9fbef-d2ec-4f18-b684-163b3471550e>" %}
**Default** vs **Normalized** edges of the triangle shaped wireframe
{% endembed %}

However for **Quad** wireframe rendering normalized edges may create unwanted *'distortion'* with a large **Thickness** value:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2FkQYkZ6RKbpFmtatjbHwo%2F9.mp4?alt=media&token=ad90cd93-fc4b-49e6-8070-c97708563e39>" %}
**Default** vs **Normalized** edges of the quad shaped wireframe
{% endembed %}

* **Screen Space** - Renders wireframe edges in constant screen space size.&#x20;

Beside wireframe value, **Wireframe Renderer** node can calculate **Barycentric UV** for sampling textures along wireframe edges:

<figure><img src="https://2216819203-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2FvQRldMVxPDZpZoJzuPjK%2F15.avif?alt=media&amp;token=5336ddd0-1293-4cd4-8913-49026f74ba51" alt=""><figcaption><p>Example of using <strong>Barycentric UV</strong></p></figcaption></figure>

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMdyfl1Bb9QTpdePM8tyr%2Fuploads%2F3NGrWR11ETAvZKsY1dX3%2F4.mp4?alt=media&token=676ffac5-9510-4720-ad90-16b064f28de7>" %}
Example of using **Barycentric UV**
{% endembed %}

***

{% hint style="info" %}
Clicking the **Generate Dynamic Wireframe Shader** button automatically saves the Shader Graph too.&#x20;
{% endhint %}

{% hint style="success" %}
**Dynamic Wireframe Shader** is a fully functional Shader Graph node. Its input and output values can be combined with other nodes and used in various calculations inside the shader.
{% endhint %}

{% hint style="warning" %}
**Dynamic Wireframe Shader** currently doesn't support subdivided tessellation, ray tracing, or motion blur.
{% endhint %}

The HLSL file is generated using the currently installed Unity Editor, render pipeline, and Shader Graph version. If you change or update the Unity Editor version, or move files to another project, HLSL files may become invalid and need to be regenerated. You can do this directly from the Shader Graph, or select HLSL shader file(s) in the Project window, then choose <mark style="color:blue;">**Amazing Assets**</mark> <mark style="color:blue;">→</mark> <mark style="color:blue;">**Wireframe Shader**</mark> <mark style="color:blue;">→</mark> <mark style="color:blue;">**Recompile**</mark> from 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%2FTAOzkoVeeRtVYwYFU3VO%2F59.avif?alt=media&amp;token=fdf20838-184f-4f57-a9e9-3fddf17a45a6" alt=""><figcaption></figcaption></figure>

Recompiling from the context menu is faster, supports selecting multiple files, and can also be used when a folder is selected.

If the source Shader Graph file is lost, it can be restored by using the same context menu and selecting **Restore Shader Graph**.
