diff --git a/content/getting_started/quickstart/index.md b/content/getting_started/quickstart/index.md index c32e0f5..b5f5368 100644 --- a/content/getting_started/quickstart/index.md +++ b/content/getting_started/quickstart/index.md @@ -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. diff --git a/content/technical/objectrendersnapable/index.md b/content/technical/objectrendersnapable/index.md index e973878..2509053 100644 --- a/content/technical/objectrendersnapable/index.md +++ b/content/technical/objectrendersnapable/index.md @@ -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. \ No newline at end of file diff --git a/content/usage/outlines/bevel_v_edge.png b/content/usage/outlines/bevel_v_edge.png new file mode 100644 index 0000000..99f85c7 Binary files /dev/null and b/content/usage/outlines/bevel_v_edge.png differ diff --git a/content/usage/outlines/depth_edges.png b/content/usage/outlines/depth_edges.png new file mode 100644 index 0000000..c078c65 Binary files /dev/null and b/content/usage/outlines/depth_edges.png differ diff --git a/content/usage/outlines/index.md b/content/usage/outlines/index.md index 6a33dc0..2dd55ce 100644 --- a/content/usage/outlines/index.md +++ b/content/usage/outlines/index.md @@ -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 (left) outlines, (middle) edge highlights, and (right) 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. \ No newline at end of file diff --git a/content/usage/outlines/outlines_and_edges.png b/content/usage/outlines/outlines_and_edges.png new file mode 100644 index 0000000..b0e603e Binary files /dev/null and b/content/usage/outlines/outlines_and_edges.png differ diff --git a/content/usage/outlines/overlap.png b/content/usage/outlines/overlap.png new file mode 100644 index 0000000..e0ff42f Binary files /dev/null and b/content/usage/outlines/overlap.png differ diff --git a/content/usage/overview/index.md b/content/usage/overview/index.md index 2b6f76a..47dac48 100644 --- a/content/usage/overview/index.md +++ b/content/usage/overview/index.md @@ -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! diff --git a/themes/zola_easydocs_theme b/themes/zola_easydocs_theme index 33b3d22..a21e73e 160000 --- a/themes/zola_easydocs_theme +++ b/themes/zola_easydocs_theme @@ -1 +1 @@ -Subproject commit 33b3d22743a4828dd8c31c16b4060a9a1a38c4f5 +Subproject commit a21e73eead5cc4e96a6e7309c80d2447bde74e75