Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion content/getting_started/quickstart/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,6 @@ ProPixelizer uses the same `.meta` files for all assets and source files between
You have now configured your project for ProPixelizer.
The [example scenes](../examples) show you lots of interesting things you can do with ProPixelizer, and showcase various features of the plugin, so I recommend taking a look!

I hope you enjoy using ProPixelizer. If you have any issues, please do email me (elliot.bentine@gmail.com) or add me on Discord (elliotb256) and I will do my best to help.
I hope you enjoy using ProPixelizer. If you have any issues, please do email me (elliot.bentine@gmail.com), add me on Discord (elliotb256), or contact via the Discord server (see icon in the nav bar) and I will do my best to help.


6 changes: 6 additions & 0 deletions content/technical/objectrendersnapable/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,9 @@ The `Object Render Snapable` MonoBehavior allows the position of objects to be s

### Pixel Alignment

- `Align Pixel Grid`: whether to align an object's macropixels to the given `Pixel Grid Reference` when applying snapping. This can be used to prevent sub-pixel relative motion between two objects (for more detail on aligning pixel grids, see [here](@/usage/eliminate_pixel_creep/index.md)). This setting is only required if you are using [pixel expansion](@/usage/pixelization/index.md)
- `Alignment Pixel Size`: The size of the macropixel used when snapping an object's position with respect to the given `Pixel Grid Reference`. Normally, you want this property to be equal to your ProPixelizer material pixel size. When `Get Pixel Size From Material` is enabled, this property will be set automatically by getting the `Pixel size` property from a ProPixelizer material on the object.

### Materials

- `Configure Children`: When true, sets the material keywords required for snapping on all child meshes of this transform.
Binary file added content/usage/outlines/bevel_v_edge.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/usage/outlines/depth_edges.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 37 additions & 5 deletions content/usage/outlines/index.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,51 @@
+++
title = "Edges and Outlines (Todo)"
title = "Edges and Outlines"
weight = 4
+++

Good edges and outlines are a key ingredient of pixel art; they help accentuate small details, and bring depth that mitigates against featureless 'flat' shading.
Good edges and outlines are a key ingredient of pixel art; they help accentuate small details and can be used to bring depth to areas of otherwise featureless 'flat' shading.ProPixelizer supports three different types of lines as described here.

ProPixelizer supports three different types of lines, as below:
{% article_image(image="outlines_and_edges.png", title="Outline and edge types") %}
The three line types are (<i>left</i>) outlines, (<i>middle</i>) edge highlights, and (<i>right</i>) bevels.
{% end %}

## Silhouette Outlines

In ProPixelizer, outlines are drawn around the silhouette of objects where the material has the same `ID` and (for [pixel expansion](@/usage/pixelization/index.md)) where the pixels are [aligned](@/usage/eliminate_pixel_creep/index.md). If you have an object with multiple mesh components - for example a character with equipment - then you may wish to assign the same `ID` to each material and align the meshes to ensure a silhouette is drawn around the entire character.

When two objects overlap, ProPixelizer performs additional depth testing of the ID-based outlines to make sure that outlines are only drawn for foreground objects; this prevents incorrect outlines from appearing on visible edge of the background object.

## Edge Highlighting
{% article_image(image="overlap.png", title="Depth tested outlines") %}
ProPixelizer performs depth-testing of silhouette outlines to ensure correct outlines when objects overlap.
{% end %}

The [Uber Shader](@/technical/ubershader/index.md) contains an `OutlineColor` property for silhouette outline control, where the alpha value controls the silhouette outline strength (and can be set to 0 to disable the outline entirely). The [ProPixelizer SubTarget](@/usage/shadergraph/index.md) for shader graph provides the `ProPixelizer Outline` color input node, which grants per-pixel outline control and can be used to create custom outline styles and animated outline effects.

## Edges

## Bevel Edges
ProPixelizer provides two methods for drawing edge lines on your models.
These methods work by analysing the normals rendered to the screen to identify ridges and folds in the mesh.
The `Normal Edge Detection Threshold` on the [ProPixelizer Render Feature](@/technical/render_feature/index.md) adjusts how sensitive the edge detection algorithm is, and the value can be tuned to detect more or less edges across the scene.

Additionally, ProPixelizer can perform edge detection by testing the scene depth in addition to screen normals, as shown in the image, when `Use Depth Testing For Edge Outlines` is enabled on the Render Feature.

{% article_image(image="depth_edges.png", title="Depth tested edges") %}
Edges are detected through analysis of both scene normals and depth. For example, the edges within the circle on the top surface all have the same surface normals (directly up), but edges are detected due to changes in the scene depth.
{% end %}

{% article_image(image="bevel_v_edge.png") %}
A comparison of bevel and edge highlights.
{% end %}

### Bevel Edges

_Bevel edges_ create 1 pixel wide edges where the normals are the average of the faces surrounding the edge. The result is a line which is light reactive, responding to illumination as if the edge were bevelled. For edges on the rear side of an object, ProPixelizer will also fold the edge normals away from the camera, allowing the rear edges to interact with light sources behind the object to create a rim light effect.

In the [Uber Shader](@/technical/ubershader/index.md) the normal blending for edge bevelling is controlled by the `Edge Bevel Weight` property, while in the [ProPixelizer SubTarget](@/usage/shadergraph/index.md) for ShaderGraph the corresponding input node is `ProPixelizer Bevel Weight`.

### Edge Highlights

The edge highlight adds or subtracts a constant color to an object's detected edges to brighten or darken them.
In the [Uber Shader](@/technical/ubershader/index.md) the color is controlled by the `Edge Highlight Color` property, and in the [ProPixelizer SubTarget](@/usage/shadergraph/index.md) for ShaderGraph the corresponding input node is `ProPixelizer Edge Highlight`.
Color values less than 0.5 will darken edges, color values above 0.5 will lighten edges, and values of 0.5 will make no difference.
The alpha value can be used to control the edge highlight strength.
Binary file added content/usage/outlines/outlines_and_edges.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/usage/outlines/overlap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion content/usage/overview/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ The ProPixelizer package includes a number of things to achieve perfect pixelisa

If you need help please do contact me for support:
- via email, elliot.bentine@gmail.com
- via discord DMs (username: elliotb256) or via the ProPixelizer server.
- via discord DMs (username: elliotb256)
- via the ProPixelizer server (click the icon in the nav bar to join).

I hope you enjoy using ProPixelizer, and I'm always very pleased to hear what you make with it!

Expand Down
2 changes: 1 addition & 1 deletion themes/zola_easydocs_theme