{"id":6769,"date":"2023-01-24T11:01:40","date_gmt":"2023-01-24T11:01:40","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=6769"},"modified":"2023-09-07T15:49:27","modified_gmt":"2023-09-07T14:49:27","slug":"water-caustics-affinity","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/water-caustics-affinity\/","title":{"rendered":"Water Caustics using Voronoi Affinity Photo"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f203eee737b\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f203eee737b\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.katsbits.com\/codex\/water-caustics-affinity\/#caustics-using-voronoi\" >Caustics using Voronoi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.katsbits.com\/codex\/water-caustics-affinity\/#voronoi-offset-blur-tiling\" >Voronoi Offset &#038; Blur (Tiling)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.katsbits.com\/codex\/water-caustics-affinity\/#maximumminimum-sharpen\" >Maximum\/Minimum Sharpen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.katsbits.com\/codex\/water-caustics-affinity\/#invert\" >Invert<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.katsbits.com\/codex\/water-caustics-affinity\/#coloured-colored-caustics\" >Coloured (Colored) Caustics<\/a><\/li><\/ul><\/nav><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/SrhyhgW0HYk?rel=0\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<p>As with most image editors, <b>Affinity Photo<\/b> does not have a dedicated &#8216;caustics&#8217; tool or filter so the effect has to be approximated using the tools that are available, for example using a <b>Voronoi<\/b> pattern along with the <b>Maximum<\/b>\/<b>Minimum<\/b> filters to transform an image into a game ready water caustic.<\/p>\n<blockquote style=\"background-color: #ddecf3; color: #000;\"><p><b>Download<\/b>: Affinity Photo example<br \/>\n&#8211; <a href=\"https:\/\/www.katsbits.com\/files\/misc\/katsbits - affinity caustics example.zip\">KatsBits &#8211; Affinity Caustics Example<\/a> (c. 600KB | *.afphoto, *.tga).<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"caustics-using-voronoi\"><\/span>Caustics using Voronoi<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>An alternative approach to generating a more typical caustics image is to use the <b>Voronoi<\/b> filter along with the <b>Maximum<\/b> or <b>Minimum<\/b> blurring tools. To do this, start a new project (<b>File \u00bb New<\/b>) and set the size appropriately, e.g. 512 x 512. Add a layer and flood fill it white. From the <b>Filters<\/b> menu [1] select <b>Colours<\/b> (Colors) then <b>Voronoi&#8230;<\/b> [2] &#8211; <b><i>Filters \u00bb Colours \u00bb Voronoi&#8230;<\/i><\/b>. The Voronoi filter dialogue pop-up will appear along with a pattern; change <b>Cell Size<\/b> to scale the pattern larger or smaller; <b>Line Width<\/b> to increase or decrease the pattern outline [3]. Click <b>Apply<\/b> to fix the image in place [4].<\/p>\n<blockquote><p><b>Design note<\/b>: the pattern outline should be reasonably thick for the caustics creation process to work well.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-voronoi.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-voronoi.jpg\" alt=\"Affinity Photo Voronoi filter\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Adding the <b>Voronoi<\/b> filter [2] to an image to use as the basis of a caustics texture image [4].<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"voronoi-offset-blur-tiling\"><\/span>Voronoi Offset &#038; Blur (Tiling)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The pattern next needs to be edited so it tiles correctly. First it will be offset, then manually edited to fix-up or correct any gaps or mis-alignments this might cause. From the <b>Filters<\/b> menu again, select <b>Distort<\/b> and then <b>Affine&#8230;<\/b> [5] &#8211; <b><i>Filters \u00bb Distort \u00bb Affine&#8230;<\/i><\/b>. In the <b>Affine<\/b> properties pop-up change both the <b>Offset X<\/b> and <b>Offset Y<\/b> [6] values to <b>50 %<\/b>, e.g. <b>Offset X 50 %<\/b>. This offsets the pattern by 50% top-to-bottom, side-to-side [7]. Click <b>Apply<\/b> to confirm.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-affine.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-affine.jpg\" alt=\"Affinity Affine offset\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Typically caustics textures need to tile. In Affinity this can be done using <b>Affine<\/b> [5] with an X\/Y <b>Offset<\/b> set to 50% [6].<\/i><\/p>\n<p>The nature of the Voronoi pattern likely means offsetting highlights where the pattern isn&#8217;t tiling. Using the <b>Paint Brush Tool<\/b> fix the gaps and misalignments so everything links up correctly while rounding off the patterns corners so they are less angular. Use Affine to &#8216;revert&#8217; the image, offsetting again by 50% on X and Y, checking tiling irregularities have been corrected. Repeat until image tiles\/offsets without issue.<\/p>\n<blockquote><p><b>Design note<\/b>: precision is not necessary when rounding cell corners except where addressing full tiling\/repetition.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-offset.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-offset.jpg\" alt=\"Image offset for tiling\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Game textures need to tile so using Affine with an Offset on the XY, the image can be edited using the Paint Brush Tool [8] to fix any disparities &#8211; and pattern corners roughly rounded\/filled [9].<\/i><\/p>\n<p>Once the pattern is prepped, add blur. From the <b>Filters<\/b> menu click <b>Blur<\/b> then <b>Gaussian Blur&#8230;<\/b> [10] &#8211; <b><i>Filters \u00bb Blur \u00bb Gaussian Blur&#8230;<\/i><\/b>. In the <b>Gaussian Blur<\/b> properties pop-up change the <b>Radius<\/b> [11] so the patterns outline is blurred so the edges are not discernible [12] &#8211; for a 512 x 512 image with a Voronoi pattern Line Width of 15 px, a blur Radius value might be 7 px.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: adding blur will likely cause tiling issues [i] so (re)use <b>Affine<\/b> to offset the image and use the <b>Paint Brush Tool<\/b> or the <b>Smudge Brush Tool<\/b> [ii] &#8211; click-hold tool group to select from fly-out if not visible [iii] &#8211; to correct disparities [iv].<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-smudge.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-smudge.jpg\" alt=\"Using Smudge to clean tiling artefacts\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Blurring the image will cause issues so use the Smudge Tool [ii] to address any disparities [iv].<\/i>\n<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-blur.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-blur.jpg\" alt=\"Adding Blur to the Voronoi pattern\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>To unify the pattern, using the <b>Gaussian Blur<\/b> [10] tool, it needs to be blurred, enough [11] so the lines are no longer easily discernible [12].<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"maximumminimum-sharpen\"><\/span>Maximum\/Minimum Sharpen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>With blur set, the final step is to use the Maximum\/Minimum filter to &#8216;thin&#8217; the effect and create the caustics look. To do this, from the <b>Filters<\/b> menu select <b>Blur<\/b> then <b>Maximum<\/b> [13] &#8211; <b><i>Filters \u00bb Blur \u00bb Maximum<\/i><\/b>. In the <b>Maximum Blur<\/b> dialogue pop-up [14] adjust the <b>Radius<\/b> value to alter the appearance of the pattern [15]. Click <b>Apply<\/b> to confirm.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: this step may similarly cause issues with full image tiling so again, <b>Affine<\/b> and additional image clean-up may be necessary.<\/p><\/blockquote>\n<blockquote><p><b>Design note<\/b>: depending on the outcome use <b>Sharpen \u00bb Unsharp Mask<\/b> to clarify the image, and\/or <b>Colours \u00bb Auto Levels<\/b> to increase basic contrast. Alternatively use a layer <b>Adjustment<\/b> filter, e.g. <b>Brightness\/Contrast<\/b>.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-maximum.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-maximum.jpg\" alt=\"Using Maximum filter in Affinity\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once the pattern is blurred, the caustic &#8216;style&#8217; is achieved using the <b>Maximum<\/b> filter [13], set to an appropriate level [14], to &#8216;thin&#8217; the image [15] for the right look..<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"invert\"><\/span>Invert<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the caustics image is finalised it likely needs to be inverted for use in-game. If any layers have been used, flatten with <b>Merge Down<\/b> or <b>Merge Visible<\/b> by right-clicking the layer stack and selecting either\/or option from the context menu. Highlight any version this might make then in the <b>Adjustment<\/b> panel [16] (double) click <b>Invert<\/b> [17] to flip to tonal palette for game use and defining <a href=\"https:\/\/www.katsbits.com\/codex\/tag\/transparency\/\">transparency<\/a>. With this done the image can be exported ready for use.<\/p>\n<blockquote style=\"background-color: #fc0; color: #000;\"><p><b>Important<\/b>: by default the Voronoi pattern is black, which necessitates the base layer be white. As there isn&#8217;t an option to invert or set the Voronoi colour, any image generated using the described process will need to be inverted for standard in-game transparent caustics.<\/p><\/blockquote>\n<blockquote><p><b>Design note<\/b>: if the <b>Adjustment<\/b> panel isn&#8217;t visible, from the main application <b>View<\/b> menu select <b>Studio<\/b>, then <b>Adjustment<\/b> (Affinity version 1.x) &#8211; <b><i>View \u00bb Studio \u00bb Adjustment<\/i><\/b>. Alternatively <b>Window<\/b> then <b>Adjustment<\/b> (version 2.x) &#8211; <b><i>Window \u00bb Adjustment<\/i><\/b>.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-invert.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-invert.jpg\" alt=\"Using Invert to correct tonal palette\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Inverting the final image, using Adjustment [16] and Invert [17], to make it game ready as an opacity map.<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-distort.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-distort.jpg\" alt=\"Twist and Ripple filters\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Additional light <b>Twist<\/b> and <b>Ripple<\/b> filters (<b>Filters \u00bb Distort \u00bb [option]<\/b>) applied (with image clean-up to address tiling issues).<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"coloured-colored-caustics\"><\/span>Coloured (Colored) Caustics<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To create a caustics image using Voronoi the base layer should be white so the black pattern can be easily discerned and edited. Once established, to then colour the effect add a new layer &#8211; click the <b>Add Pixel Layer<\/b> button [18] &#8211; and using Colour (Color) panel set a colour for the layer [19]. Activate the <b>Flood-Fill Tool<\/b> [20] and flood the layer with the selected colour then change the <b>Blend Mode<\/b> for this same layer to mix together, for example setting <b>Screen<\/b> [21] to maintain highlights while darker tones take on the fill colour.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-colour.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 100%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/caustics\/affinity-caustics-colour.jpg\" alt=\"Colouring caustics\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>It&#8217;s best to colour caustics after the pattern has been established to make it easier to modify. Do this by flood-filling a new layer with a colour selection [19] and changing the Blend Mode [21] to maintain highlights.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":6794,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32,230],"tags":[939,941,942,156,220,940,943,933],"class_list":["post-6769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-texturing","category-tutorials","tag-affinity-photo","tag-maximum","tag-minimum","tag-textures","tag-transparency","tag-voronoi","tag-water","tag-water-caustics"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/6769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/comments?post=6769"}],"version-history":[{"count":28,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/6769\/revisions"}],"predecessor-version":[{"id":6805,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/6769\/revisions\/6805"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/6794"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=6769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=6769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=6769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}