{"id":648,"date":"2020-10-22T13:02:43","date_gmt":"2020-10-22T13:02:43","guid":{"rendered":"https:\/\/half4.xyz\/?p=648"},"modified":"2023-10-18T01:37:57","modified_gmt":"2023-10-18T01:37:57","slug":"character-clothing-tangent-1-bitmasks","status":"publish","type":"post","link":"https:\/\/half4.xyz\/index.php\/2020\/10\/22\/character-clothing-tangent-1-bitmasks\/","title":{"rendered":"Character Clothing Tangent #1 &#8211; Bitmasks"},"content":{"rendered":"<p>A typical computer will store an unsigned integer as a 32-bit value. This means we use 32 \u2018bits\u2019 to describe a value. <\/p>\n<p>A \u2018bit\u2019 is simply a value that can be \u201con\u201d or \u201coff\u201d, or as you may already be familiar: 0 or 1.<\/p>\n<p>Computers store numbers using these bits. We can make <em>any<\/em> number from a list 1s and 0s by using a simple technique:<\/p>\n<p><em>any<\/em><\/p>\n<p><em>1. We order our bits, remember the index of that bit in our list:<\/em><\/p>\n<p><em>1. We order our bits, remember the index of that bit in our list:<\/em><br \/>\n<a href=\"https:\/\/www.nafarescue.org\/\">weblink<\/a><\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" alt=\"\" class=\"wp-image-602\" decoding=\"async\" height=\"94\" loading=\"lazy\" sizes=\"(max-width: 741px) 100vw, 741px\" src=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-25.png\" srcset=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-25.png 741w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-25-300x38.png 300w\" width=\"741\"\/><\/figure>\n<p><img loading=\"lazy\" alt=\"\" class=\"wp-image-602\" decoding=\"async\" height=\"94\" loading=\"lazy\" sizes=\"(max-width: 741px) 100vw, 741px\" src=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-25.png\" srcset=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-25.png 741w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-25-300x38.png 300w\" width=\"741\"\/><\/p>\n<p>2. For any index (<em>i<\/em>) that is greater than 1, we perform the operation: 2<sup>i<\/sup>, which we\u2019ll call our \u201cbinary\u201d value:<\/p>\n<p><em>i<\/em><br \/>\n<sup>i<\/sup><\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" alt=\"\" class=\"wp-image-604\" decoding=\"async\" height=\"145\" loading=\"lazy\" sizes=\"(max-width: 787px) 100vw, 787px\" src=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-27.png\" srcset=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-27.png 787w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-27-300x55.png 300w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-27-768x141.png 768w\" width=\"787\"\/><\/figure>\n<p><img loading=\"lazy\" alt=\"\" class=\"wp-image-604\" decoding=\"async\" height=\"145\" loading=\"lazy\" sizes=\"(max-width: 787px) 100vw, 787px\" src=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-27.png\" srcset=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-27.png 787w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-27-300x55.png 300w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-27-768x141.png 768w\" width=\"787\"\/><\/p>\n<p>3. Wherever we have a \u201c1\u201d in our \u201cbit\u201d value column, we will add the \u201cbinary\u201d value to a total:<\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" alt=\"\" class=\"wp-image-605\" decoding=\"async\" height=\"300\" loading=\"lazy\" sizes=\"(max-width: 930px) 100vw, 930px\" src=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-28.png\" srcset=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-28.png 930w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-28-300x97.png 300w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-28-768x248.png 768w\" width=\"930\"\/><figcaption>001011 = 4+16+32 = 52<\/figcaption><\/figure>\n<p><img loading=\"lazy\" alt=\"\" class=\"wp-image-605\" decoding=\"async\" height=\"300\" loading=\"lazy\" sizes=\"(max-width: 930px) 100vw, 930px\" src=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-28.png\" srcset=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-28.png 930w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-28-300x97.png 300w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-28-768x248.png 768w\" width=\"930\"\/><figcaption>001011 = 4+16+32 = 52<\/figcaption><p>Bits are always stored right-to-left, so let\u2019s flip the bit-order to be correct and add in some more examples:<\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" alt=\"\" class=\"wp-image-606\" decoding=\"async\" height=\"242\" loading=\"lazy\" sizes=\"(max-width: 869px) 100vw, 869px\" src=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-29.png\" srcset=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-29.png 869w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-29-300x84.png 300w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-29-768x214.png 768w\" width=\"869\"\/><\/figure>\n<p><img loading=\"lazy\" alt=\"\" class=\"wp-image-606\" decoding=\"async\" height=\"242\" loading=\"lazy\" sizes=\"(max-width: 869px) 100vw, 869px\" src=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-29.png\" srcset=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-29.png 869w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-29-300x84.png 300w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-29-768x214.png 768w\" width=\"869\"\/><\/p>\n<p>If we extend this to 32  bits, we can make large numbers:<br \/>00000000000000000000000000000001 = 1<br \/>01101010010010001001001110101001 = 1,783,141,289<\/p>\n<p>That\u2019s how we <em><span style=\"text-decoration: underline;\">store <\/span><\/em>values \u2013 but we can also look at these a bits a different way\u2026<\/p>\n<p><em><span style=\"text-decoration: underline;\">store <\/span><\/em><br \/>\n<span style=\"text-decoration: underline;\">store <\/span><\/p>\n<p>Each bit can also be an entry in our list of \u201con\u201d and \u201coff\u201d values. For simplicity, we\u2019ll go down to using 4 bits.<\/p>\n<p>Let\u2019s take 4 things in an imaginary 3D scene.<\/p>\n<ul>\n<li>Cube<\/li>\n<li>Cylinder<\/li>\n<li>Sphere<\/li>\n<li>Torus<\/li>\n<\/ul>\n<li>Cube<\/li>\n<li>Cylinder<\/li>\n<li>Sphere<\/li>\n<li>Torus<\/li>\n<p>Let us now represent each entry in that list as either a 0 or 1, depending on whether we want to hide them:<\/p>\n<p>Hiding <em>just<\/em> the Sphere would give you a list of bits as <em>0010<\/em>, where the third bit value, \u201c1\u201d, tells us we want to hide the third item in the list: the sphere.<\/p>\n<p><em>just<\/em><br \/>\n<em>0010<\/em><\/p>\n<p>We can then store this bitmask as an integer \u2013 a single number. In this case, hiding just the sphere would be an integer value of \u201c4\u201d. If we hid just the Cube, it would be \u201c1\u201d. If we used an integer of \u201c5\u201d, we would hide the Cube <em>and<\/em> the Sphere!<\/p>\n<p><em>and<\/em><\/p>\n<p>This is useful as we can pass such an integer value into the shader and work out exactly what vertices to hide.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A typical computer will store an unsigned integer as a 32-bit value. This means we use 32 \u2018bits\u2019 to describe a value. A \u2018bit\u2019 is simply a value that can be \u201con\u201d or \u201coff\u201d, or as you may already be familiar: 0 or 1. Computers store numbers using these bits. We can make any number from a list 1s and 0s by using a simple technique: any 1. We order our bits, remember the index of that bit in our list: 1. We order our bits, remember the index of that bit in our list: weblink 2. For any index (i) that is greater than 1, we perform the operation: 2i, which we\u2019ll call our \u201cbinary\u201d value: i i 3. Wherever we have a \u201c1\u201d in our \u201cbit\u201d value column, we will add the \u201cbinary\u201d value to a total: 001011 = 4+16+32 = 52 001011 = 4+16+32 = 52Bits are always stored right-to-left, so let\u2019s flip the bit-order to be correct and add in some more examples: If we extend this to 32 bits, we can make large numbers:00000000000000000000000000000001 = 101101010010010001001001110101001 = 1,783,141,289 That\u2019s how we store values \u2013 but we can also look at these a bits a different way\u2026 store store Each bit can also be an entry in our list of \u201con\u201d and \u201coff\u201d values. For simplicity, we\u2019ll go down to using 4 bits. Let\u2019s take 4 things in an imaginary 3D scene. Cube Cylinder Sphere Torus Cube Cylinder Sphere Torus Let us now represent each entry in that list as either a 0 or 1, depending on whether we want to hide them: Hiding just the Sphere would give you a list of bits as 0010, where the third bit value, \u201c1\u201d, tells us we want to hide the third item in the list: the sphere. just 0010 We can then store this bitmask as an integer \u2013 a single number. In this case, hiding just the sphere would be an integer value of \u201c4\u201d. If we hid just the Cube, it would be \u201c1\u201d. If we used an integer of \u201c5\u201d, we would hide the Cube and the Sphere! and This is useful as we can pass such an integer value into the shader and work out exactly what vertices to hide.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-648","post","type-post","status-publish","format-standard","hentry","category-tangents"],"_links":{"self":[{"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/posts\/648"}],"collection":[{"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=648"}],"version-history":[{"count":2,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/posts\/648\/revisions"}],"predecessor-version":[{"id":688,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/posts\/648\/revisions\/688"}],"wp:attachment":[{"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}