{"componentChunkName":"component---node-modules-narative-gatsby-theme-novela-src-templates-article-template-tsx","path":"/ray-marching-over-a-react-three-fiber-(r3f)-scene","result":{"pageContext":{"article":{"id":"9a62f242-89dc-5ec0-91df-6a3da028a0ff","slug":"/ray-marching-over-a-react-three-fiber-(r3f)-scene","secret":false,"title":"Ray Marching Over a React Three Fiber (R3F) Scene","author":"Rick","date":"November 14th, 2021","dateForSEO":"2021-11-14T00:00:00.000Z","timeToRead":2,"excerpt":"Raymarching on top of a three.js or react-three-fiber scene, leading to more advanced effects.","canonical_url":null,"subscription":true,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Ray Marching Over a React Three Fiber (R3F) Scene\",\n  \"author\": \"Rick\",\n  \"date\": \"2021-11-14T00:00:00.000Z\",\n  \"hero\": \"./images/ray-marching-three-scene-hero.png\",\n  \"excerpt\": \"Raymarching on top of a three.js or react-three-fiber scene, leading to more advanced effects.\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"A-little disclaimer - Im still learning so don\\u2019t take everything i say as gospel. But its a good way to overlay a raymarched scene on top of a three.js scene.\"), mdx(\"p\", null, \"A while back I wanted to get some fundamentals about raymarching and it crossed my mind\\u2026 its all well and good raymarching but how can you overlay this onto a three.js or R3F scene??\"), mdx(\"p\", null, \"Have a play around with the codeSandBox below \\uD83D\\uDE42\"), mdx(\"iframe\", {\n    src: \"https://codesandbox.io/embed/misty-hooks-yury3?fontsize=14&hidenavigation=1&theme=dark&view=preview\",\n    style: {\n      \"width\": \"50%\",\n      \"height\": \"300px\",\n      \"border\": \"0\",\n      \"borderRadius\": \"4px\",\n      \"overflow\": \"hidden\"\n    },\n    title: \"misty-hooks-yury3\",\n    allow: \"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\",\n    sandbox: \"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n  }), mdx(\"p\", null, \"This is a very simple sand box, its a POC of a white raymarched sphere onto a three.js scene.\"), mdx(\"p\", null, \"Its very cool raymarching a sphere with postprocessing but what you soon realise, is that a simple raymarched sphere wont rotate with the camera if you don\\u2019t account for certain things.\"), mdx(\"p\", null, \"I hear ya, why would you raymarch a sphere. Its boring and useless..\"), mdx(\"p\", null, \"Well sort of \\uD83D\\uDE1B\"), mdx(\"p\", null, \"The thing is Im starting to learn the basics of implementing 3D scenes or effects without meshes and and laying the fundamentals to do more complex cool things.\"), mdx(\"p\", null, \"Heres a very high level over view of what we are doing with raymarching:\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"781px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"33.41869398207427%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAACHUlEQVQozz2RSWgTARSGX5eDoBGsF7ELgp56sOC1BxWvPSl48Oih3gQPnvQmKIiCGrGiFmyhKRTNqtkk20wykyaZmSyTyYyZTJJpmjZptqnZaJVnEtDDxzu8x/d474cO4kx9wP4RzubqOAcAk78OtZWW1tAjIsBtgGFd9T07OeiBoKh31b2GLEjFc98p8Y6XkXcDicr1QLwClFCbhHefjZqLErVI5kDj1V5308EuNrXOj7rW8Q1FHiZ72RkWrhhRm8A6ApNSHielEuZ2fk8bEcbDqu9mQAxBIo+QKPYBXn/YRKuXRSfJo1DqI8EVr7HinjnC5907LIKTFvX2UGbtS/DjVIvyrebYdDL+s+TzR+UnRKq8aEvrT1tYq45RWheTan8eHCR/zMnNo1Sxfcxmm2jxcleZTMlKx7OuUBBH56rsH6BN76d70XCfiUq4bqMbdoJHIl5+Ea6/OUMroWUHxa96IooDLB4G7UQKv/njSHJF/OpmbihlzSSXGo6hzMrFpuyJ2FlwXxoXTZ8WCrL6tFQ9pJnM/hKzW5/zSuYLpOweLR79fFuohHi1GxwQkqu4/dbgX+j1umS706aHAy5a0tuDwjpRZk5hGYFK5h5xGRUTUmvWLb3URQvhe4b4c6giMTYSLs/Df/s/arXaw+pB5cEoXZvx/CvD2sxGbOXEIOQxQcouFdTyViFN6bY84n1TQEITodwyk3kwBnITfwGIgYiQOCjGuQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/d7bc2e2f95776700e51e4e759c7baf52/99bcc/raymarch-diagram.webp 781w\"],\n    \"sizes\": \"(max-width: 781px) 100vw, 781px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/d7bc2e2f95776700e51e4e759c7baf52/dcede/raymarch-diagram.png 781w\"],\n    \"sizes\": \"(max-width: 781px) 100vw, 781px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/d7bc2e2f95776700e51e4e759c7baf52/dcede/raymarch-diagram.png\",\n    \"alt\": \"Ray marching diagram\",\n    \"title\": \"Ray marching diagram\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"The first thing to understand is the range of\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-glsl\"\n  }, \"vec2 screenPos = gl_FragCoord.xy\\n\")), mdx(\"p\", null, \"for example:\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"361px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"83.37950138504155%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsTAAALEwEAmpwYAAACRElEQVQ4y62UP2wSURzHn0Y3jItDIzj4J9FdR00MaeLg0sHEwTg6OboYtSZqSk1c0HRxQF0caGOjVkMhacVCCi3/pdwBHsLxOChQ7goW7oDe/Xx3QOoAzUX7Tb75/XLv5XO/+93vPeTyM+DwUuAOY2XRx8BanHWUOPwY48I0xtgyzHmMpyubhclggv34xZOCBXdc8cQKsLSeAeT0Z2advvRcNF1u/mCqUN1uAYACsizva1W1ugihZBHCNCcuh9h5dzhvR2/ti4g8RL8b9Sz01NVjZS8nL9jlSEC2958RSnDdw5cuXzvCCwKrLiqKIvfC/urv0UoVRbF05er4cRWKTCYTIjokCEJuAFT367QGlCSpZDQaDWazeThw0KcDAaotAf0aDeT5HrDCN2VPiIGVQBI2ftUgzTW1mMQNUKeATIMWKbZBJkLq93AIsMbzGpDOcPL9py/h3qPnMOtYgw/OIDx4ZoUnL17Dw6lXMGmZAYv1DUxZ30EyW9aArZY4+pPrzY7MVkTIV0Uo1NqAt9oklyC7uQO5cou4CflKS8uFnc7oCvd6qPzVQ6Xvf+jhgY1NXyqQ/R/gmbPnjl04PYbQ+Zu2YRXqVR8olk6dPGEYv3EXIVBx14H85e0BUD2fu3pMitTOstTulo6OXTTcUVkrkXxwOcAEYz8r7UiqDGVe/22zRW6mdaoIgQTu+DaKEW8MB9H8NxrmXFFY8DKymjtXk7ZMOjFBUfRtmqZvDXOCrOUYamLJn5qxu+Jgd0blr6sZ+PSdhj/33FWcpcqqogAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/4f6936e5d7d2e245e25217ff11f042c9/e4461/gl_FragCoord-diagram.webp 361w\"],\n    \"sizes\": \"(max-width: 361px) 100vw, 361px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/4f6936e5d7d2e245e25217ff11f042c9/bdb07/gl_FragCoord-diagram.png 361w\"],\n    \"sizes\": \"(max-width: 361px) 100vw, 361px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/4f6936e5d7d2e245e25217ff11f042c9/bdb07/gl_FragCoord-diagram.png\",\n    \"alt\": \"gl_FragCoord diagram\",\n    \"title\": \"gl_FragCoord diagram\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"Now to explain these two lines:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-glsl\"\n  }, \"vec2 uv =( gl_FragCoord.xy * 2.0 - uResolution ) / uResolution;\\nvec2 p = gl_FragCoord.xy / uResolution.xy;\\n\")), mdx(\"p\", null, \"sudo code for the first line:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-glsl\"\n  }, \"vec2 topLeft = (vec2(0.0,0.0) * 2.0 - vec2(8.0, 8.0)) / vec2(8.0, 8.0);\\nvec2 topLeft = vec2(-1.0, -1.0)\\n\\nvec2 topRight = (vec2(8.0,0.0) * 2.0 - vec2(8.0, 8.0)) / vec2(8.0, 8.0);\\nvec2 topRight = vec2(1.0, -1.0)\\n\\nvec2 bottomRight = vec2(1.0, 1.0)\\n\\nvec2 bottomLeft = vec2(-1.0, 1.0)\\n\\n\")), mdx(\"p\", null, \"Essentially we are putting the screen coordinates in the range -1.0 - 1.0.\"), mdx(\"p\", null, \"And the second line is getting coordinates taking into account screen resolution, for acquiring the background texture - NOT the rayMarched scene.\"), mdx(\"p\", null, \"Once you have the ray we want to rotate the rays and this is how you would achieve this:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-glsl\"\n  }, \" vec3 ray = (cameraWorldMatrix * cameraProjectionMatrixInverse * vec4( screenPos.xy, 1.0, 1.0 )).xyz;\\n\")), mdx(\"p\", null, \"When you can rotate the ray around the scene with camera movements, you can do a simple raycasting algorithm:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-glsl\"\n  }, \"// Ray Marching Variables\\nvec3 rayOrigin = cameraPosition;\\nvec3 rayDirection =ray;\\nvec3 sphereOirgin =  vec3(0.30);\\n\\n// This is the R3F scene texture passed to\\n// this pass in the effect composer tDiffuse\\n// uniform.\\nvec3 sum = texture(tDiffuse, p).xyz;\\nfloat rayDistance = 0.0;\\nfloat MAX_DISTANCE = 2000.0;\\n\\nfor (int i = 0; i< 1000;i ++) {\\n    vec3 currentStep = rayOrigin + rayDirection * rayDistance ;\\n\\n    float dist = sphereSDF(currentStep,sphereOirgin, .10);\\n\\n    if (dist < 0.00001 ) {\\n        sum = vec3(1.0);\\n    }\\n    if (rayDistance > MAX_DISTANCE) {\\n        break;\\n    }\\n    rayDistance += 0.09;\\n}\\n\\ngl_FragColor = vec4(sum.xyz, 1.0);\\n\\n\")), mdx(\"p\", null, \"For the keen eyed among you if you position the camera so that the white raymarched sphere is behind the R3F cube it still appears as if its in front of the cube.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"956px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"64.01673640167364%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA7UlEQVQ4y9WTu0oDURCGz5z77kKiaYJiYyHYW8ViOxvtLEQSrCxC2BhiIfgC9r6J9r6IvS+h1efJbuEFLyEsiMUPwxnmO/8wM0opRcv6/0B5pzaAViFZUkyxWxnYuOl0tjk+v+Nkfs/o+oHyYPwh/y3QGoO3Du8czlqMtnWy3x8wncDlBcxncFTeNkVilgHaRgmah4yQWt3aHDAZvzCbPlNVcFjeELSiyAryGN8UYs34teXe+i7D00fORk9Uyen+3lX9Lp8cigha65+Hsvgx+kgIPYp8g253B+/XVhuK0QuYb28PtcgXe6j/5lJeAYftHxKBkrdjAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/ee057a82f86840e51d48879295e23849/dbaa2/sphere-infront-of-cube.webp 956w\"],\n    \"sizes\": \"(max-width: 956px) 100vw, 956px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/ee057a82f86840e51d48879295e23849/ab07e/sphere-infront-of-cube.png 956w\"],\n    \"sizes\": \"(max-width: 956px) 100vw, 956px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/ee057a82f86840e51d48879295e23849/ab07e/sphere-infront-of-cube.png\",\n    \"alt\": \"Raymarched sphere infront of cube\",\n    \"title\": \"Raymarched sphere infront of cube\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"To fix this you would need a depth texture and another if block - so that if a fragment has a depth then you would not raymarch that particular ray/fragment and just show the colour from tDiffuse.\"), mdx(\"p\", null, \"As i said at the start this is a really basic example with a few artefacts but gives you the basic idea of how to raymarch on top or onto a R3F or three.js scene.\"), mdx(\"h2\", {\n    \"id\": \"final-thoughts\"\n  }, \"Final Thoughts\"), mdx(\"p\", null, \"Hope you enjoyed this little tutorial and if you do anything more advanced than this let me know! would love to see it \\uD83D\\uDE42\"));\n}\n;\nMDXContent.isMDXComponent = true;","hero":{"full":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAtUlEQVQ4y2NgYGD4T2U8WAxkZBxELmQEuoYJyUVMrEz/xQ2k/3NLcuI3EKSJjYUVjJmZmCBiQBrEh6iBGMorof4/ruf2f7/yRYRdyAg1mIWZGWyQAC/ff25OTogrmZjBavhFzP47Wt7/ryrfDNXHRJyXQYYyQtmsLCz/2VhZ4T5gY+f+z8LCTlwYMjKAvM6CPTyhYcrCzAi0hBkeDHi8zAh2DVVimQqGoRpIBcMQBjJCMaUGAgBrHgsSNYEprQAAAABJRU5ErkJggg==","aspectRatio":1.5629139072847682,"src":"/static/efcc74735f0bbc967b36130da51edc74/a1946/ray-marching-three-scene-hero.png","srcSet":"/static/efcc74735f0bbc967b36130da51edc74/5b37e/ray-marching-three-scene-hero.png 236w,\n/static/efcc74735f0bbc967b36130da51edc74/49058/ray-marching-three-scene-hero.png 472w,\n/static/efcc74735f0bbc967b36130da51edc74/a1946/ray-marching-three-scene-hero.png 944w,\n/static/efcc74735f0bbc967b36130da51edc74/030f1/ray-marching-three-scene-hero.png 1416w,\n/static/efcc74735f0bbc967b36130da51edc74/1f983/ray-marching-three-scene-hero.png 1426w","srcWebp":"/static/efcc74735f0bbc967b36130da51edc74/99fbb/ray-marching-three-scene-hero.webp","srcSetWebp":"/static/efcc74735f0bbc967b36130da51edc74/77392/ray-marching-three-scene-hero.webp 236w,\n/static/efcc74735f0bbc967b36130da51edc74/1f177/ray-marching-three-scene-hero.webp 472w,\n/static/efcc74735f0bbc967b36130da51edc74/99fbb/ray-marching-three-scene-hero.webp 944w,\n/static/efcc74735f0bbc967b36130da51edc74/4a492/ray-marching-three-scene-hero.webp 1416w,\n/static/efcc74735f0bbc967b36130da51edc74/c1a2d/ray-marching-three-scene-hero.webp 1426w","sizes":"(max-width: 944px) 100vw, 944px"},"regular":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAtUlEQVQ4y2NgYGD4T2U8WAxkZBxELmQEuoYJyUVMrEz/xQ2k/3NLcuI3EKSJjYUVjJmZmCBiQBrEh6iBGMorof4/ruf2f7/yRYRdyAg1mIWZGWyQAC/ff25OTogrmZjBavhFzP47Wt7/ryrfDNXHRJyXQYYyQtmsLCz/2VhZ4T5gY+f+z8LCTlwYMjKAvM6CPTyhYcrCzAi0hBkeDHi8zAh2DVVimQqGoRpIBcMQBjJCMaUGAgBrHgsSNYEprQAAAABJRU5ErkJggg==","aspectRatio":1.5673076923076923,"src":"/static/efcc74735f0bbc967b36130da51edc74/3ddd4/ray-marching-three-scene-hero.png","srcSet":"/static/efcc74735f0bbc967b36130da51edc74/078a8/ray-marching-three-scene-hero.png 163w,\n/static/efcc74735f0bbc967b36130da51edc74/e56da/ray-marching-three-scene-hero.png 327w,\n/static/efcc74735f0bbc967b36130da51edc74/3ddd4/ray-marching-three-scene-hero.png 653w,\n/static/efcc74735f0bbc967b36130da51edc74/c5cc7/ray-marching-three-scene-hero.png 980w,\n/static/efcc74735f0bbc967b36130da51edc74/eebd2/ray-marching-three-scene-hero.png 1306w,\n/static/efcc74735f0bbc967b36130da51edc74/1f983/ray-marching-three-scene-hero.png 1426w","srcWebp":"/static/efcc74735f0bbc967b36130da51edc74/0acdf/ray-marching-three-scene-hero.webp","srcSetWebp":"/static/efcc74735f0bbc967b36130da51edc74/ac59e/ray-marching-three-scene-hero.webp 163w,\n/static/efcc74735f0bbc967b36130da51edc74/7660b/ray-marching-three-scene-hero.webp 327w,\n/static/efcc74735f0bbc967b36130da51edc74/0acdf/ray-marching-three-scene-hero.webp 653w,\n/static/efcc74735f0bbc967b36130da51edc74/75470/ray-marching-three-scene-hero.webp 980w,\n/static/efcc74735f0bbc967b36130da51edc74/68d47/ray-marching-three-scene-hero.webp 1306w,\n/static/efcc74735f0bbc967b36130da51edc74/c1a2d/ray-marching-three-scene-hero.webp 1426w","sizes":"(max-width: 653px) 100vw, 653px"},"narrow":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAtUlEQVQ4y2NgYGD4T2U8WAxkZBxELmQEuoYJyUVMrEz/xQ2k/3NLcuI3EKSJjYUVjJmZmCBiQBrEh6iBGMorof4/ruf2f7/yRYRdyAg1mIWZGWyQAC/ff25OTogrmZjBavhFzP47Wt7/ryrfDNXHRJyXQYYyQtmsLCz/2VhZ4T5gY+f+z8LCTlwYMjKAvM6CPTyhYcrCzAi0hBkeDHi8zAh2DVVimQqGoRpIBcMQBjJCMaUGAgBrHgsSNYEprQAAAABJRU5ErkJggg==","aspectRatio":1.5616438356164384,"src":"/static/efcc74735f0bbc967b36130da51edc74/502b1/ray-marching-three-scene-hero.png","srcSet":"/static/efcc74735f0bbc967b36130da51edc74/f2e6d/ray-marching-three-scene-hero.png 114w,\n/static/efcc74735f0bbc967b36130da51edc74/4ddba/ray-marching-three-scene-hero.png 229w,\n/static/efcc74735f0bbc967b36130da51edc74/502b1/ray-marching-three-scene-hero.png 457w,\n/static/efcc74735f0bbc967b36130da51edc74/7ddc2/ray-marching-three-scene-hero.png 686w,\n/static/efcc74735f0bbc967b36130da51edc74/435bf/ray-marching-three-scene-hero.png 914w,\n/static/efcc74735f0bbc967b36130da51edc74/1f983/ray-marching-three-scene-hero.png 1426w","srcWebp":"/static/efcc74735f0bbc967b36130da51edc74/15384/ray-marching-three-scene-hero.webp","srcSetWebp":"/static/efcc74735f0bbc967b36130da51edc74/31fce/ray-marching-three-scene-hero.webp 114w,\n/static/efcc74735f0bbc967b36130da51edc74/e3e25/ray-marching-three-scene-hero.webp 229w,\n/static/efcc74735f0bbc967b36130da51edc74/15384/ray-marching-three-scene-hero.webp 457w,\n/static/efcc74735f0bbc967b36130da51edc74/0258d/ray-marching-three-scene-hero.webp 686w,\n/static/efcc74735f0bbc967b36130da51edc74/64ea2/ray-marching-three-scene-hero.webp 914w,\n/static/efcc74735f0bbc967b36130da51edc74/c1a2d/ray-marching-three-scene-hero.webp 1426w","sizes":"(max-width: 457px) 100vw, 457px"},"seo":{"src":"/static/efcc74735f0bbc967b36130da51edc74/6050d/ray-marching-three-scene-hero.png"}}},"authors":[{"authorsPage":true,"bio":"I am a creative frontend developer, I specialise in React, GLSL, postprocessing and R3F. I love to experiment with code and deal with complex topics.\n","id":"a2f54938-ce4a-58e3-a14f-42c21df2482a","name":"Rick","featured":true,"social":[{"url":"https://twitter.com/TheFrontDev"},{"url":"https://github.com/Richard-Thompson"}],"slug":"/authors/rick","avatar":{"small":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAaABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAIBAwQF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABRlsKyA51mANxhD//xAAcEAACAgIDAAAAAAAAAAAAAAABAgMSAAQREyD/2gAIAQEAAQUCCLCqVkRYwROt5aDCak7DFn2Dx3+P/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHBAAAgMAAwEAAAAAAAAAAAAAAAECESEQIDEy/9oACAEBAAY/AnuH1fEU/KIuMUtQ0WyoYedP/8QAGxABAAIDAQEAAAAAAAAAAAAAAQARITFBUSD/2gAIAQEAAT8hv6qbzGnBGvZesblRLKajqgyHnSZETPIHoo4SmR6uJW1r7fx//9oADAMBAAIAAwAAABCQyAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAeEAEAAgICAwEAAAAAAAAAAAABABEhMUFhIFGRsf/aAAgBAQABPxDOQFt9a7gbWsLru1ycRUEAjJbBWGActkvYxwhbwlRCKSwoC5sGwsd/kpeSkMZPRL0ptbPzw//Z","aspectRatio":0.7647058823529411,"src":"/static/80e6d82107a1db055d4e32d8c709c04c/fa1ea/Rick.jpg","srcSet":"/static/80e6d82107a1db055d4e32d8c709c04c/afb2b/Rick.jpg 13w,\n/static/80e6d82107a1db055d4e32d8c709c04c/7c20e/Rick.jpg 25w,\n/static/80e6d82107a1db055d4e32d8c709c04c/fa1ea/Rick.jpg 50w,\n/static/80e6d82107a1db055d4e32d8c709c04c/03612/Rick.jpg 75w,\n/static/80e6d82107a1db055d4e32d8c709c04c/61cdf/Rick.jpg 100w,\n/static/80e6d82107a1db055d4e32d8c709c04c/0ff54/Rick.jpg 1200w","srcWebp":"/static/80e6d82107a1db055d4e32d8c709c04c/e7b2c/Rick.webp","srcSetWebp":"/static/80e6d82107a1db055d4e32d8c709c04c/58718/Rick.webp 13w,\n/static/80e6d82107a1db055d4e32d8c709c04c/74aad/Rick.webp 25w,\n/static/80e6d82107a1db055d4e32d8c709c04c/e7b2c/Rick.webp 50w,\n/static/80e6d82107a1db055d4e32d8c709c04c/ed320/Rick.webp 75w,\n/static/80e6d82107a1db055d4e32d8c709c04c/66016/Rick.webp 100w,\n/static/80e6d82107a1db055d4e32d8c709c04c/9000d/Rick.webp 1200w","sizes":"(max-width: 50px) 100vw, 50px"},"medium":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAaABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAIBAwQF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABRlsKyA51mANxhD//xAAcEAACAgIDAAAAAAAAAAAAAAABAgMSAAQREyD/2gAIAQEAAQUCCLCqVkRYwROt5aDCak7DFn2Dx3+P/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHBAAAgMAAwEAAAAAAAAAAAAAAAECESEQIDEy/9oACAEBAAY/AnuH1fEU/KIuMUtQ0WyoYedP/8QAGxABAAIDAQEAAAAAAAAAAAAAAQARITFBUSD/2gAIAQEAAT8hv6qbzGnBGvZesblRLKajqgyHnSZETPIHoo4SmR6uJW1r7fx//9oADAMBAAIAAwAAABCQyAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAeEAEAAgICAwEAAAAAAAAAAAABABEhMUFhIFGRsf/aAAgBAQABPxDOQFt9a7gbWsLru1ycRUEAjJbBWGActkvYxwhbwlRCKSwoC5sGwsd/kpeSkMZPRL0ptbPzw//Z","aspectRatio":0.7575757575757576,"src":"/static/80e6d82107a1db055d4e32d8c709c04c/61cdf/Rick.jpg","srcSet":"/static/80e6d82107a1db055d4e32d8c709c04c/7c20e/Rick.jpg 25w,\n/static/80e6d82107a1db055d4e32d8c709c04c/fa1ea/Rick.jpg 50w,\n/static/80e6d82107a1db055d4e32d8c709c04c/61cdf/Rick.jpg 100w,\n/static/80e6d82107a1db055d4e32d8c709c04c/59538/Rick.jpg 150w,\n/static/80e6d82107a1db055d4e32d8c709c04c/fd013/Rick.jpg 200w,\n/static/80e6d82107a1db055d4e32d8c709c04c/0ff54/Rick.jpg 1200w","srcWebp":"/static/80e6d82107a1db055d4e32d8c709c04c/66016/Rick.webp","srcSetWebp":"/static/80e6d82107a1db055d4e32d8c709c04c/74aad/Rick.webp 25w,\n/static/80e6d82107a1db055d4e32d8c709c04c/e7b2c/Rick.webp 50w,\n/static/80e6d82107a1db055d4e32d8c709c04c/66016/Rick.webp 100w,\n/static/80e6d82107a1db055d4e32d8c709c04c/d9b14/Rick.webp 150w,\n/static/80e6d82107a1db055d4e32d8c709c04c/6b183/Rick.webp 200w,\n/static/80e6d82107a1db055d4e32d8c709c04c/9000d/Rick.webp 1200w","sizes":"(max-width: 100px) 100vw, 100px"},"large":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAbABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAECAwQF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABg1aVCDnTzVmwxB//xAAcEAACAgMBAQAAAAAAAAAAAAABAgADBBESEzH/2gAIAQEAAQUCCLSqFbEWsEXr3aUEJ5JyGLPkHXvKxsn7P//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABsQAAICAwEAAAAAAAAAAAAAAAABAiEQETEy/9oACAEBAAY/AndHreIp8IuKStDRtmoUcLz/AP/EABwQAQACAgMBAAAAAAAAAAAAAAEAESFBEFFhMf/aAAgBAQABPyG/qJvMalEGO5aivuyVEsi17FYkyHWyJlDOoGoo0Sks2uN21r3cGsTBHvH/2gAMAwEAAgADAAAAEOAFMP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8QH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8QH//EAB4QAQACAwACAwAAAAAAAAAAAAEAESExQRBhUXGR/9oACAEBAAE/EOgIHnWvcZWNF17tdORkgCmxgpDIO2JkNMCFprBCQ1LCqA/mCCCO4l8SkMZPgh3MbW7+TJQfdQg2hB4//9k=","aspectRatio":0.7522935779816514,"src":"/static/80e6d82107a1db055d4e32d8c709c04c/ec46e/Rick.jpg","srcSet":"/static/80e6d82107a1db055d4e32d8c709c04c/a2637/Rick.jpg 82w,\n/static/80e6d82107a1db055d4e32d8c709c04c/15203/Rick.jpg 164w,\n/static/80e6d82107a1db055d4e32d8c709c04c/ec46e/Rick.jpg 328w,\n/static/80e6d82107a1db055d4e32d8c709c04c/b69a5/Rick.jpg 492w,\n/static/80e6d82107a1db055d4e32d8c709c04c/23a36/Rick.jpg 656w,\n/static/80e6d82107a1db055d4e32d8c709c04c/0ff54/Rick.jpg 1200w","srcWebp":"/static/80e6d82107a1db055d4e32d8c709c04c/5a48e/Rick.webp","srcSetWebp":"/static/80e6d82107a1db055d4e32d8c709c04c/2d087/Rick.webp 82w,\n/static/80e6d82107a1db055d4e32d8c709c04c/29d87/Rick.webp 164w,\n/static/80e6d82107a1db055d4e32d8c709c04c/5a48e/Rick.webp 328w,\n/static/80e6d82107a1db055d4e32d8c709c04c/42f2e/Rick.webp 492w,\n/static/80e6d82107a1db055d4e32d8c709c04c/dec03/Rick.webp 656w,\n/static/80e6d82107a1db055d4e32d8c709c04c/9000d/Rick.webp 1200w","sizes":"(max-width: 328px) 100vw, 328px"}}}],"basePath":"/","permalink":"https://www.thefrontdev.co.uk/ray-marching-over-a-react-three-fiber-(r3f)-scene/","slug":"/ray-marching-over-a-react-three-fiber-(r3f)-scene","id":"9a62f242-89dc-5ec0-91df-6a3da028a0ff","title":"Ray Marching Over a React Three Fiber (R3F) Scene","canonicalUrl":null,"mailchimp":"","next":[{"id":"5f1fd368-7a3c-535e-99e3-a9d59b29fd99","slug":"/how-to-create-gpu-particles-in-react-three-fiber-(r3f)","secret":false,"title":"How to create GPU particles in React Three Fiber (R3F)","author":"Rick","date":"November 11th, 2021","dateForSEO":"2021-11-11T00:00:00.000Z","timeToRead":3,"excerpt":"Generating GPU particles using floatType textures, a simulation and render shader material in React Three Fiber. Using noise to add movement and changing gl_PointSize.","canonical_url":null,"subscription":true,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"How to create GPU particles in React Three Fiber (R3F)\",\n  \"author\": \"Rick\",\n  \"date\": \"2021-11-11T00:00:00.000Z\",\n  \"hero\": \"./images/gpu-particles-hero.png\",\n  \"excerpt\": \"Generating GPU particles using floatType textures, a simulation and render shader material in React Three Fiber. Using noise to add movement and changing gl_PointSize.\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, mdx(\"undefined\", {\n    parentName: \"p\"\n  }, \"\\n        \", mdx(\"div\", {\n    \"className\": \"embedVideo-container\"\n  }, \"\\n            \", mdx(\"iframe\", {\n    parentName: \"div\",\n    \"width\": 680,\n    \"height\": 400,\n    \"src\": \"https://player.vimeo.com/video/644925382\",\n    \"className\": \"embedVideo-iframe\",\n    \"style\": {\n      \"border\": \"0\"\n    },\n    \"allowFullScreen\": true\n  }), \"\\n        \"))), mdx(\"p\", null, \"Recently I wanted to implement a particle system in react-three-fiber. After some extensive reading around, I turned to GPU particles. One critical thing I wanted to understand is how to do this in a react three fiber setting! There are some amazing articles but not in R3F\\u2026\"), mdx(\"p\", null, \"Let\\u2019s start from the beginning.\"), mdx(\"p\", null, \"If we try to generate a large number of particles in a normal R3F project, without using shaders it will very quickly become apparent that the FPS drops. This is because in javascript you have one thread, everything happens in sequence, with the render loop being responsible for this.\"), mdx(\"p\", null, \"A perfect use case for GPUs is highly parallelised commutations. So imagine instead of looping through 262,144 particles objects in the CPU side in javascript and updating positions, rotations and colours every frame\\u2026 multiple times a second, we move all these calculations to a shader which runs on the GPU.\"), mdx(\"p\", null, \"Here is a diagram I created to explain the general approach:\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"531px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.335216572504706%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAC7UlEQVQoz31TSUxTURS9vx8RFwyR2IXEhSZujFvXxkSDMcatiYlxgSAEE2NMNLELIw4LEyUuaHRJYgoFigjI8Gl/h98W6Mhgh9/awZYWWvidoEAL4XlfCQs23OTmvuS+e849578PbW1t0NraCo9bWmHKPs7MRQUwB/nzroT9oWvF3uJK2K6a49P1uoWZpM6tJfyClggB/p5ZNILJq5fR+WNBCJEd5eZeoXrUPArTrol3OvcM4RGAc04KB8TDWkTTa4vfpLKIQo/1r/GSSdSB3ssxSMr8NAyzGn6ItUdnGQp4LIvlLbAEDQ040CwE9HeNPu3F7K4EJVKq9Hex7pM96H2jAqPDCO6EA4Z5DQxwarBH5wDW19eHs9nsb8xfmIZEMnHfH18GcnBI4AzMwerqamcmkzGmN1Iz2VyWx5nvepO+xuDSg+2f5cqYdeT5pG38xVxEuAaFQoFsbGyQlZUVsrOzQ+LxuJICPXn56Nyzt21yeo7FYjoEJKFQmKTTaZLP5/e+dHc30Z4tMtvLOabJ1PwkQfkzlP0jMn7Gi5+w9uDwjb3yPpAcYUiJQGmnTAFvp1Kp98lkUrG2ttaFtb1vrLcaHgA74VVf6Nf+uKXWqZpnI8YmQDbY3t6Gzc3NSkXgQz+nCYjxZcbr80IgELiMm9+RMtLNdCrdvOxfuN410t7w1fTqlFf6A0P8AGj4QbDHrAC5XI5FILZYLFYqbslQwHK5DFtbW2ypVAKUO4z3KrZQ6WhTfn52vt7mF2BJXGI13GCVhhuqMrh1MohEIoDsVFalBoNBagOgNMCPJKOb49YfJElKRaNRP0qPI6lO1aeq7ex4CgqFAhYXF0GtVlfOJ4bD4QBBEIDjuNM+n68Rtz6LZI1arbYO22fkcnmdUqms9Xg8tf39/XUdHR01JwI6nU6wWq2AAIBDVDokEomjHwLC4fBHfBlSCAMtiaFC8URAagfKBFEUaWVo4hBD/aaAaMM33Jj4/X6CPXxWIfIfnY1McCMOBRUAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/00753bf76b0eae6898e91f1f10268b31/2829c/particle-diagram.webp 531w\"],\n    \"sizes\": \"(max-width: 531px) 100vw, 531px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/00753bf76b0eae6898e91f1f10268b31/16b8c/particle-diagram.png 531w\"],\n    \"sizes\": \"(max-width: 531px) 100vw, 531px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/00753bf76b0eae6898e91f1f10268b31/16b8c/particle-diagram.png\",\n    \"alt\": \"Architectural Diagram\",\n    \"title\": \"Architectural Diagram\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"The reason I quoted 262,144 particles is because this is 512\", \"*\", \"512. This would be the texture you could use to generate particles.\\nHeres the general gist of what\\u2019s going to happen:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"we create a simple sphere\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"we then sample the surface of this sphere\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"generate a dataTexture with initial positions\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"create a simulation shader\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"create a render shader which will render what we see\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"pass a render target between both shaders to update positions\"))), mdx(\"p\", null, \"End code:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"import React, { useRef, useMemo, useEffect } from \\\"react\\\";\\nimport * as THREE from \\\"three\\\";\\nimport { extend, useFrame, useThree } from \\\"@react-three/fiber\\\";\\nimport { OrbitControls } from \\\"three/examples/jsm/controls/OrbitControls\\\";\\nimport { MeshSurfaceSampler } from \\\"three/examples/jsm/math/MeshSurfaceSampler\\\";\\n\\nextend({ OrbitControls, MeshSurfaceSampler });\\n\\nfunction sampleMesh(width, height, size, sphere) {\\n  var len = width * height * 4;\\n  var data = new Float32Array(len);\\n  const sampler = new MeshSurfaceSampler(sphere).build();\\n  for (let i = 0; i < len; i += 4) {\\n    const tempPosition = new THREE.Vector3();\\n    sampler.sample(tempPosition);\\n    data[i] = tempPosition.x;\\n    data[i + 1] = tempPosition.y;\\n    data[i + 2] = tempPosition.z;\\n    data[i + 3] = Math.random() * 10.0;\\n  }\\n  return data;\\n}\\n\\nconst simulationVertexShader = `\\nvarying vec2 vUv;\\nvoid main() {\\n    vUv = uv;\\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\\n}\\n`;\\nconst simulationFragmentShader = `\\nuniform sampler2D positions;//DATA Texture containing original positions\\nvarying vec2 vUv;\\nuniform float uTime;\\n\\nvec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}\\nvec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}\\nvec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}\\n\\nfloat cnoise(vec3 P){\\n  vec3 Pi0 = floor(P); // Integer part for indexing\\n  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\\n  Pi0 = mod(Pi0, 289.0);\\n  Pi1 = mod(Pi1, 289.0);\\n  vec3 Pf0 = fract(P); // Fractional part for interpolation\\n  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\\n  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\\n  vec4 iy = vec4(Pi0.yy, Pi1.yy);\\n  vec4 iz0 = Pi0.zzzz;\\n  vec4 iz1 = Pi1.zzzz;\\n\\n  vec4 ixy = permute(permute(ix) + iy);\\n  vec4 ixy0 = permute(ixy + iz0);\\n  vec4 ixy1 = permute(ixy + iz1);\\n\\n  vec4 gx0 = ixy0 / 7.0;\\n  vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;\\n  gx0 = fract(gx0);\\n  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\\n  vec4 sz0 = step(gz0, vec4(0.0));\\n  gx0 -= sz0 * (step(0.0, gx0) - 0.5);\\n  gy0 -= sz0 * (step(0.0, gy0) - 0.5);\\n\\n  vec4 gx1 = ixy1 / 7.0;\\n  vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;\\n  gx1 = fract(gx1);\\n  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\\n  vec4 sz1 = step(gz1, vec4(0.0));\\n  gx1 -= sz1 * (step(0.0, gx1) - 0.5);\\n  gy1 -= sz1 * (step(0.0, gy1) - 0.5);\\n\\n  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\\n  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\\n  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\\n  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\\n  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\\n  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\\n  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\\n  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\\n\\n  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\\n  g000 *= norm0.x;\\n  g010 *= norm0.y;\\n  g100 *= norm0.z;\\n  g110 *= norm0.w;\\n  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\\n  g001 *= norm1.x;\\n  g011 *= norm1.y;\\n  g101 *= norm1.z;\\n  g111 *= norm1.w;\\n\\n  float n000 = dot(g000, Pf0);\\n  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\\n  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\\n  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\\n  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\\n  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\\n  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\\n  float n111 = dot(g111, Pf1);\\n\\n  vec3 fade_xyz = fade(Pf0);\\n  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\\n  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\\n  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); \\n  return 2.2 * n_xyz;\\n}\\n\\nconst vec4 magic = vec4(1111.1111, 3141.5926, 2718.2818, 0);\\n\\nvoid main() {\\n    vec3 pos = texture2D( positions, vUv ).rgb;\\n\\n        // Some initial random numbers being \\n        // generated        \\n        vec2 tc = vUv * magic.xy;\\n    vec3 skewed_seed = vec3(0.7856 * magic.z + tc.y - tc.x) + magic.yzw;\\n\\n        // Generating noise using these random \\n        // initial numbers. And generating a new \\n        //noise every frame using uTime.\\n    vec3 velocity;\\n    velocity.x = cnoise(vec3(tc.x, tc.y, skewed_seed.x) + uTime);\\n    velocity.y = cnoise(vec3(tc.y, skewed_seed.y, tc.x) + uTime);\\n    velocity.z = cnoise(vec3(skewed_seed.z, tc.x, tc.y) + uTime);\\n\\n        // divide the veolcity by 10.0 to slow it // down alot.\\n    velocity = normalize(velocity) / 10.0;\\n\\n\\n    gl_FragColor = vec4( pos + velocity,1.0 );\\n}\\n`;\\n\\nconst renderVertexShader = `\\nuniform sampler2D positions;//RenderTarget containing the transformed positions\\nuniform float pointSize;\\nuniform float uTime;\\n\\nvec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}\\nvec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}\\nvec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}\\n\\nfloat cnoise(vec3 P){\\n  vec3 Pi0 = floor(P); // Integer part for indexing\\n  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\\n  Pi0 = mod(Pi0, 289.0);\\n  Pi1 = mod(Pi1, 289.0);\\n  vec3 Pf0 = fract(P); // Fractional part for interpolation\\n  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\\n  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\\n  vec4 iy = vec4(Pi0.yy, Pi1.yy);\\n  vec4 iz0 = Pi0.zzzz;\\n  vec4 iz1 = Pi1.zzzz;\\n\\n  vec4 ixy = permute(permute(ix) + iy);\\n  vec4 ixy0 = permute(ixy + iz0);\\n  vec4 ixy1 = permute(ixy + iz1);\\n\\n  vec4 gx0 = ixy0 / 7.0;\\n  vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;\\n  gx0 = fract(gx0);\\n  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\\n  vec4 sz0 = step(gz0, vec4(0.0));\\n  gx0 -= sz0 * (step(0.0, gx0) - 0.5);\\n  gy0 -= sz0 * (step(0.0, gy0) - 0.5);\\n\\n  vec4 gx1 = ixy1 / 7.0;\\n  vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;\\n  gx1 = fract(gx1);\\n  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\\n  vec4 sz1 = step(gz1, vec4(0.0));\\n  gx1 -= sz1 * (step(0.0, gx1) - 0.5);\\n  gy1 -= sz1 * (step(0.0, gy1) - 0.5);\\n\\n  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\\n  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\\n  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\\n  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\\n  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\\n  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\\n  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\\n  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\\n\\n  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\\n  g000 *= norm0.x;\\n  g010 *= norm0.y;\\n  g100 *= norm0.z;\\n  g110 *= norm0.w;\\n  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\\n  g001 *= norm1.x;\\n  g011 *= norm1.y;\\n  g101 *= norm1.z;\\n  g111 *= norm1.w;\\n\\n  float n000 = dot(g000, Pf0);\\n  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\\n  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\\n  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\\n  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\\n  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\\n  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\\n  float n111 = dot(g111, Pf1);\\n\\n  vec3 fade_xyz = fade(Pf0);\\n  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\\n  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\\n  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); \\n  return 2.2 * n_xyz;\\n}\\n\\nvoid main() {\\n    vec4 pos = texture2D( positions, position.xy ).xyzw;\\n\\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( pos.xyz, 1.0 );\\n\\n    float noiseV = cnoise(pos.xyz + uTime);\\n    \\n    gl_PointSize = pointSize * noiseV;\\n}\\n`;\\n\\nconst renderFragmentShader = `\\nuniform sampler2D textureCircle;\\nvoid main() {\\n    vec4 customTextureColor = texture2D( textureCircle, gl_PointCoord );\\n\\n    if (customTextureColor.a < 0.5) discard;\\n\\n    gl_FragColor = vec4( vec3(0.1, 0.1, 0.1), 0.13 );\\n}\\n`;\\n\\nconst Particles = () => {\\n  const {\\n    scene,\\n    gl,\\n    camera,\\n    gl: { domElement },\\n  } = useThree();\\n\\n  const renderRef = useRef();\\n  //width / height of the FBO\\n  var width = 512;\\n  var height = 512;\\n\\n  const sphereGeom = new THREE.SphereBufferGeometry(2);\\n  const material = new THREE.MeshStandardMaterial();\\n  const sphere = new THREE.Mesh(sphereGeom, material);\\n\\n  var data = sampleMesh(width, height, 256, sphere);\\n\\n  const positions = useMemo(\\n    () =>\\n      new THREE.DataTexture(\\n        data,\\n        width,\\n        height,\\n        THREE.RGBAFormat,\\n        THREE.FloatType\\n      ),\\n    [data, height, width]\\n  );\\n\\n  useEffect(() => {\\n    positions.magFilter = THREE.NearestFilter;\\n    positions.minFilter = THREE.NearestFilter;\\n    positions.needsUpdate = true;\\n  }, [positions]);\\n\\n  const textureLoader = new THREE.TextureLoader();\\n  const particleTexture = \\\"/circle.png\\\";\\n\\n  var simulationUniforms = {\\n    positions: { value: positions },\\n    uTime: { value: 0 },\\n  };\\n\\n  var renderUniforms = {\\n    positions: { value: null },\\n    pointSize: { value: 6.0 },\\n    camPos: { value: camera.position },\\n    textureCircle: {\\n      value: textureLoader.load(particleTexture),\\n    },\\n  };\\n\\n  const [renderTarget] = React.useMemo(() => {\\n    const target = new THREE.WebGLRenderTarget(\\n      window.innerWidth,\\n      window.innerHeight,\\n      {\\n        minFilter: THREE.NearestFilter,\\n        magFilter: THREE.NearestFilter,\\n        format: THREE.RGBAFormat,\\n        stencilBuffer: false,\\n\\n        type: THREE.FloatType,\\n      }\\n    );\\n    return [target];\\n  }, []);\\n\\n  const orthoCamera = new THREE.OrthographicCamera(\\n    -1,\\n    1,\\n    1,\\n    -1,\\n    1 / Math.pow(2, 53),\\n    1\\n  );\\n\\n  const sceneRtt = new THREE.Scene();\\n\\n  const [geometry] = React.useMemo(() => {\\n    const geometry = new THREE.BufferGeometry();\\n\\n    geometry.setAttribute(\\n      \\\"position\\\",\\n      new THREE.BufferAttribute(\\n        new Float32Array([\\n          -1,\\n          -1,\\n          0,\\n          1,\\n          -1,\\n          0,\\n          1,\\n          1,\\n          0,\\n          -1,\\n          -1,\\n          0,\\n          1,\\n          1,\\n          0,\\n          -1,\\n          1,\\n          0,\\n        ]),\\n        3\\n      )\\n    );\\n    geometry.setAttribute(\\n      \\\"uv\\\",\\n      new THREE.BufferAttribute(\\n        new Float32Array([0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0]),\\n        2\\n      )\\n    );\\n\\n    return [geometry];\\n  }, []);\\n\\n  const shaderMaterial = new THREE.ShaderMaterial({\\n    vertexShader: simulationVertexShader,\\n    fragmentShader: simulationFragmentShader,\\n    uniforms: simulationUniforms,\\n  });\\n\\n  sceneRtt.add(new THREE.Mesh(geometry, shaderMaterial));\\n  sceneRtt.add(orthoCamera);\\n\\n  useFrame((state) => {\\n    state.gl.setRenderTarget(renderTarget);\\n    state.gl.render(sceneRtt, orthoCamera);\\n    renderRef.current.uniforms.positions.value = renderTarget.texture;\\n    state.gl.setRenderTarget(null);\\n    state.gl.render(scene, camera);\\n\\n    shaderMaterial.uniforms.uTime.value = state.clock.getElapsedTime();\\n    renderRef.current.uniforms.camPos.value = camera.position;\\n  });\\n\\n  return (\\n    <>\\n      <color attach=\\\"background\\\" args={[\\\"black\\\"]} />\\n      <orbitControls args={[camera, domElement]} />\\n      <points>\\n        <bufferGeometry attach=\\\"geometry\\\">\\n          <bufferAttribute\\n            attachObject={[\\\"attributes\\\", \\\"position\\\"]}\\n            count={data.length / 4}\\n            itemSize={4}\\n            array={data}\\n          />\\n        </bufferGeometry>\\n        <shaderMaterial\\n          attach=\\\"material\\\"\\n          ref={renderRef}\\n          vertexShader={renderVertexShader}\\n          fragmentShader={renderFragmentShader}\\n          uniforms={renderUniforms}\\n          blending={THREE.MultiplyBlending}\\n        />\\n      </points>\\n    </>\\n  );\\n};\\n\\nexport default Particles;\\n\")), mdx(\"p\", null, \"So we create a simple sphere:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"const sphereGeom = new THREE.SphereBufferGeometry(2);\\n\\nconst material = new THREE.MeshStandardMaterial();\\n\\nconst sphere = new THREE.Mesh(sphereGeom, material);\\n\")), mdx(\"p\", null, \"For our initial positions we will randomly sample the sphere 262,144 times. We can do this like so:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"var data = sampleMesh(width, height, 256, sphere);\\n\\nfunction sampleMesh(width, height, size, sphere) {\\n  var len = width * height * 4;\\n  var data = new Float32Array(len);\\n  const sampler = new MeshSurfaceSampler(sphere).build();\\n  for (let i = 0; i < len; i += 4) {\\n    const tempPosition = new THREE.Vector3();\\n    sampler.sample(tempPosition);\\n    data[i] = tempPosition.x;\\n    data[i + 1] = tempPosition.y;\\n    data[i + 2] = tempPosition.z;\\n    data[i + 3] = Math.random() * 10.0;\\n  }\\n  return data;\\n}\\n\")), mdx(\"p\", null, \"We can create a dataTexture like so:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"const positions = useMemo(\\n  () =>\\n    new THREE.DataTexture(\\n      data,\\n      width,\\n      height,\\n      THREE.RGBAFormat,\\n      THREE.FloatType\\n    ),\\n  [data, height, width]\\n);\\n\\nuseEffect(() => {\\n  positions.magFilter = THREE.NearestFilter;\\n  positions.minFilter = THREE.NearestFilter;\\n  positions.needsUpdate = true;\\n}, [positions]);\\n\")), mdx(\"h2\", {\n    \"id\": \"simulationshader\"\n  }, \"SimulationShader:\"), mdx(\"p\", null, \"This Initial positions dataTexture then gets passed to the simulation shader uniforms as positions:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"var simulationUniforms = {\\n  positions: { value: positions },\\n  uTime: { value: 0 },\\n};\\n\")), mdx(\"p\", null, \"The simulation shader is where we move the particles.\"), mdx(\"p\", null, \"The simulation is done in a separate scene using the old style of Three.js classes. We set a mesh to be a quad and add a custom shaderMaterial.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"const orthoCamera = new THREE.OrthographicCamera(\\n  -1,\\n  1,\\n  1,\\n  -1,\\n  1 / Math.pow(2, 53),\\n  1\\n);\\n\\nconst sceneRtt = new THREE.Scene();\\n\\nconst [geometry] = React.useMemo(() => {\\n  const geometry = new THREE.BufferGeometry();\\n\\n  geometry.setAttribute(\\n    \\\"position\\\",\\n    new THREE.BufferAttribute(\\n      new Float32Array([\\n        -1,\\n        -1,\\n        0,\\n        1,\\n        -1,\\n        0,\\n        1,\\n        1,\\n        0,\\n        -1,\\n        -1,\\n        0,\\n        1,\\n        1,\\n        0,\\n        -1,\\n        1,\\n        0,\\n      ]),\\n      3\\n    )\\n  );\\n  geometry.setAttribute(\\n    \\\"uv\\\",\\n    new THREE.BufferAttribute(\\n      new Float32Array([0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0]),\\n      2\\n    )\\n  );\\n\\n  return [geometry];\\n}, []);\\n\\nconst shaderMaterial = new THREE.ShaderMaterial({\\n  vertexShader: simulationVertexShader,\\n  fragmentShader: simulationFragmentShader,\\n  uniforms: simulationUniforms,\\n});\\n\\nsceneRtt.add(new THREE.Mesh(geometry, shaderMaterial));\\nsceneRtt.add(orthoCamera);\\n\")), mdx(\"p\", null, \"We do this so that we can; attach a render target, then render this scene, then swap out the render target and render the particle renderer, which is defined in R3F way. We do all this in the useFrame:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"useFrame((state) => {\\n  state.gl.setRenderTarget(renderTarget);\\n  state.gl.render(sceneRtt, orthoCamera);\\n  renderRef.current.uniforms.positions.value = renderTarget.texture;\\n  state.gl.setRenderTarget(null);\\n  state.gl.render(scene, camera);\\n\\n  shaderMaterial.uniforms.uTime.value = state.clock.getElapsedTime();\\n});\\n\")), mdx(\"p\", null, \"The render target needs to use THREE.RGBAType and THREE.FloatType. RGBA as we want to store 4 floats in the render target texture R, G, B and Alpha corresponding to \", \"[x, y, z, gl_PointSize]\", \". The texture generated from this render target will be passed between the simulation and render shaders. It will store the updated positions and gl_PointSize.\"), mdx(\"p\", null, \"One way to think about it is we have divided a texture into 262,144 squares or parts, each part or square on this texture represents a particle and will have a uniformly colour or RGBA floats, which represents the position and gl_PointSize.\"), mdx(\"p\", null, \"For example a simple way to think of this is if we have the initial position texture of 8x8, then we will have 64 squares that the screen would be divided into, each pixel or fragment in one of these squares would have the same position or colour data being passed to the render target and consecutive squares would have uniformly same different RGBA values\\xA0. And each squares\\u2019 pixels would move together as one particle. This is probably not the right way to think about it but it cleared everything up in my mind!\"), mdx(\"p\", null, \"In the simulation shader we grab the initial position from the dataTexture and create a random velocity and direction vector using some noise and then we add this to the initial position in gl_FragColor. When this shader now runs because we are using a render target all these colour squares or RGBA squares will be saved to this texture and now we can pass to the render shader. Storing positional info in a texture.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-glsl\"\n  }, \"void main() {\\n    vec3 pos = texture2D( positions, vUv ).rgb;\\n\\n    // Some initial random numbers being\\n    // generated\\n    vec2 tc = vUv * magic.xy;\\n    vec3 skewed_seed = vec3(0.7856 * magic.z + tc.y - tc.x) + magic.yzw;\\n\\n    // Generating noise using these random\\n    // initial numbers. And generating a new\\n    //noise every frame using uTime.\\n    vec3 velocity;\\n    velocity.x = cnoise(vec3(tc.x, tc.y, skewed_seed.x) + uTime);\\n    velocity.y = cnoise(vec3(tc.y, skewed_seed.y, tc.x) + uTime);\\n    velocity.z = cnoise(vec3(skewed_seed.z, tc.x, tc.y) + uTime);\\n\\n    // divide the veolcity by 10.0 to slow it // down alot.\\n    velocity = normalize(velocity) / 10.0;\\n\\n\\n    gl_FragColor = vec4( pos + velocity,1.0 );\\n}\\n\")), mdx(\"h2\", {\n    \"id\": \"rendershader\"\n  }, \"RenderShader:\"), mdx(\"p\", null, \"The render Shader has a vertex shader where we grab the position from the renderTexture and then use this to set the position of one on the THREE.Points point. We also apply some noise to the gl_PointSize.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-glsl\"\n  }, \"void main() {\\n    vec4 pos = texture2D( positions, position.xy ).xyzw;\\n\\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( pos.xyz, 1.0 );\\n\\n    float noiseV = cnoise(pos.xyz + uTime);\\n\\n    gl_PointSize = pointSize * noiseV;\\n}\\n\")), mdx(\"p\", null, \"The render fragment shader used a custom circle texture with everything else in the image transparent. We can then do a simple check in the shader to discard any fragments which have a low opacity:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-glsl\"\n  }, \"uniform sampler2D textureCircle;\\nvoid main() {\\n    vec4 customTextureColor = texture2D( textureCircle, gl_PointCoord );\\n\\n    if (customTextureColor.a < 0.5) discard;\\n\\n    gl_FragColor = vec4( vec3(0.1, 0.1, 0.1), 0.13 );\\n}\\n\")), mdx(\"p\", null, \"Why do this? So we can have a custom shape for each of the points, you could have any solid shape with a transparent background and use the same approach.\"), mdx(\"h2\", {\n    \"id\": \"final-thoughts\"\n  }, \"Final Thoughts:\"), mdx(\"p\", null, \"I hope you have found this useful or at least gave you some ideas to play around with GPU particles. If you like this find me on linkedIn and give me a thumbs up\\xA0:)\"), mdx(\"p\", null, \"You could easily add another geometry or mesh to sample from and transition between different shapes or add user interaction using the xy coordinates of the mouse.\"));\n}\n;\nMDXContent.isMDXComponent = true;","hero":{"full":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAABOElEQVQ4y62S166DQAxEl957E4j//01Hx8KI3BulKQ/Drgtje9bOOSc/xvMEz/N+R+j7vsRxLFEUfUL8fmcUCMPwO8IgCPRniAF3QLcvSB8HyrKUqqpO8jzPdfyXumZZJk3TSN/3su+7LMui9jiO6uM+DINinmdF27Zqc/I/UpyERkYQwnVdtTN+4Kzr+sSVqOs6vXNiM1GSJOLSNFVdGItqODmLolCtsIlTmAL4GJ0mkIE4udyBI5kESCDlR8D9ujZ0SHFsYOPaY+HTDknmYjpQhfYRHh+AnBg/MuI0Tao1MUghIwcuB5mtCKALkiAlAWADyLZtU2g3x4tbh8fr3y+zdYQutsi2CfZo/172gO6nLS6gColGzEkn6MeDmIbE8GNfp1NCPjhJ+Du+6YKunFbEFtu2w6YDN0CBPekXkC8GAAAAAElFTkSuQmCC","aspectRatio":1.3258426966292134,"src":"/static/98d9fee692c4cbf1cb995d50d47e5910/a1946/gpu-particles-hero.png","srcSet":"/static/98d9fee692c4cbf1cb995d50d47e5910/5b37e/gpu-particles-hero.png 236w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/49058/gpu-particles-hero.png 472w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/a1946/gpu-particles-hero.png 944w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/030f1/gpu-particles-hero.png 1416w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/5881e/gpu-particles-hero.png 1566w","srcWebp":"/static/98d9fee692c4cbf1cb995d50d47e5910/99fbb/gpu-particles-hero.webp","srcSetWebp":"/static/98d9fee692c4cbf1cb995d50d47e5910/77392/gpu-particles-hero.webp 236w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/1f177/gpu-particles-hero.webp 472w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/99fbb/gpu-particles-hero.webp 944w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/4a492/gpu-particles-hero.webp 1416w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/88f57/gpu-particles-hero.webp 1566w","sizes":"(max-width: 944px) 100vw, 944px"},"regular":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAABOElEQVQ4y62S166DQAxEl957E4j//01Hx8KI3BulKQ/Drgtje9bOOSc/xvMEz/N+R+j7vsRxLFEUfUL8fmcUCMPwO8IgCPRniAF3QLcvSB8HyrKUqqpO8jzPdfyXumZZJk3TSN/3su+7LMui9jiO6uM+DINinmdF27Zqc/I/UpyERkYQwnVdtTN+4Kzr+sSVqOs6vXNiM1GSJOLSNFVdGItqODmLolCtsIlTmAL4GJ0mkIE4udyBI5kESCDlR8D9ujZ0SHFsYOPaY+HTDknmYjpQhfYRHh+AnBg/MuI0Tao1MUghIwcuB5mtCKALkiAlAWADyLZtU2g3x4tbh8fr3y+zdYQutsi2CfZo/172gO6nLS6gColGzEkn6MeDmIbE8GNfp1NCPjhJ+Du+6YKunFbEFtu2w6YDN0CBPekXkC8GAAAAAElFTkSuQmCC","aspectRatio":1.3252032520325203,"src":"/static/98d9fee692c4cbf1cb995d50d47e5910/3ddd4/gpu-particles-hero.png","srcSet":"/static/98d9fee692c4cbf1cb995d50d47e5910/078a8/gpu-particles-hero.png 163w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/e56da/gpu-particles-hero.png 327w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/3ddd4/gpu-particles-hero.png 653w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/c5cc7/gpu-particles-hero.png 980w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/eebd2/gpu-particles-hero.png 1306w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/5881e/gpu-particles-hero.png 1566w","srcWebp":"/static/98d9fee692c4cbf1cb995d50d47e5910/0acdf/gpu-particles-hero.webp","srcSetWebp":"/static/98d9fee692c4cbf1cb995d50d47e5910/ac59e/gpu-particles-hero.webp 163w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/7660b/gpu-particles-hero.webp 327w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/0acdf/gpu-particles-hero.webp 653w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/75470/gpu-particles-hero.webp 980w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/68d47/gpu-particles-hero.webp 1306w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/88f57/gpu-particles-hero.webp 1566w","sizes":"(max-width: 653px) 100vw, 653px"},"narrow":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAABOElEQVQ4y62S166DQAxEl957E4j//01Hx8KI3BulKQ/Drgtje9bOOSc/xvMEz/N+R+j7vsRxLFEUfUL8fmcUCMPwO8IgCPRniAF3QLcvSB8HyrKUqqpO8jzPdfyXumZZJk3TSN/3su+7LMui9jiO6uM+DINinmdF27Zqc/I/UpyERkYQwnVdtTN+4Kzr+sSVqOs6vXNiM1GSJOLSNFVdGItqODmLolCtsIlTmAL4GJ0mkIE4udyBI5kESCDlR8D9ujZ0SHFsYOPaY+HTDknmYjpQhfYRHh+AnBg/MuI0Tao1MUghIwcuB5mtCKALkiAlAWADyLZtU2g3x4tbh8fr3y+zdYQutsi2CfZo/172gO6nLS6gColGzEkn6MeDmIbE8GNfp1NCPjhJ+Du+6YKunFbEFtu2w6YDN0CBPekXkC8GAAAAAElFTkSuQmCC","aspectRatio":1.3255813953488371,"src":"/static/98d9fee692c4cbf1cb995d50d47e5910/502b1/gpu-particles-hero.png","srcSet":"/static/98d9fee692c4cbf1cb995d50d47e5910/f2e6d/gpu-particles-hero.png 114w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/4ddba/gpu-particles-hero.png 229w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/502b1/gpu-particles-hero.png 457w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/7ddc2/gpu-particles-hero.png 686w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/435bf/gpu-particles-hero.png 914w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/5881e/gpu-particles-hero.png 1566w","srcWebp":"/static/98d9fee692c4cbf1cb995d50d47e5910/15384/gpu-particles-hero.webp","srcSetWebp":"/static/98d9fee692c4cbf1cb995d50d47e5910/31fce/gpu-particles-hero.webp 114w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/e3e25/gpu-particles-hero.webp 229w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/15384/gpu-particles-hero.webp 457w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/0258d/gpu-particles-hero.webp 686w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/64ea2/gpu-particles-hero.webp 914w,\n/static/98d9fee692c4cbf1cb995d50d47e5910/88f57/gpu-particles-hero.webp 1566w","sizes":"(max-width: 457px) 100vw, 457px"},"seo":{"src":"/static/98d9fee692c4cbf1cb995d50d47e5910/6050d/gpu-particles-hero.png"}}},{"id":"c6c894ba-a5bf-511c-ab65-ba9d901436c9","slug":"/blender-shader-nodes-and-baking","secret":false,"title":"Blender, Shader Nodes and Baking","author":"Rick","date":"July 11th, 2021","dateForSEO":"2021-07-11T00:00:00.000Z","timeToRead":2,"excerpt":"Using a shader network in blender, then baking the result into a texture and then using this in a web 3D environment.","canonical_url":null,"subscription":true,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Blender, Shader Nodes and Baking\",\n  \"author\": \"Rick\",\n  \"date\": \"2021-07-11T00:00:00.000Z\",\n  \"hero\": \"./images/monkey-hero.png\",\n  \"excerpt\": \"Using a shader network in blender, then baking the result into a texture and then using this in a web 3D environment.\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"This weekend I felt like I needed to do something productive other than a trip away!\\xA0\"), mdx(\"p\", null, \"So its been a while and I thought Id take a look at baking the results of a shader node network in blender.\"), mdx(\"p\", null, \"First of create a suzzanne monkey head (shift + a \\u2192 mesh \\u2192 monkey).\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"970px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"83.50515463917526%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAABYlAAAWJQFJUiTwAAADi0lEQVQ4y32T21PiWBDG82fMzgi5HG4h4SaXJCAIgoKIgCDEEUHuXkBHHWdct2am9vKwW7WP+wd/2ydRX7ZqH75qQqd//XWfE+Hbr5/w/H2F529XePi6wPpugqv1COvbAW7uTnBxfYzFVQeLyzamixZmiybG0waG5wc4GVRhf9xFr18ibaNv5yE8Pk/w5WmMp59HuH8Y4OraxvKih+vVMW5uj3C5bmK5ahC0jsmiisl0D6NRhWA76NoFdHp5tDtZtNomjtoGhLsvfdx/7mO9OsJ0eoDhcB+DQQ2ng11ShVTG6bCE2bKCyXwH56MiBmcF2GdZdE4zaNtptLtptFopNA83Idx8OsTdfQu1agZ+nwJF2njRB1fiBzB5A91uBsOzHD6eWLBtk9yl0ewm0DiKo9lKoHWYwGEjDuHqsobFpIjeaITj1d/YG/1A1v4Bq//dFf3O9X+BYWVQKGSQSkURDjOSD6rKEAjISKcCaDViOKhFCEijTM/zOGhW0OhNUah2EDHKCKdK0NIlJ+oUDdNELpeFrmnwej2QZQkKyev1IhHz4bgZQ7sehbBeljGfbKF7VECzUUfWSCIeCUH0vIMsvofs/Ql+5kUsFoFpZpBMJsgVA2MyfD4ZoijCTAUxoRUM2kkI14sdXMzopFp5VKs1ZLOmU6wovEBxxIst04BpZJx8KrlJ7kT4mAvMGSHckqnVqARhOS5iPt5Cq7mFer1OOyIHfkYjia4LEi+2yJ0DtAxE9DCYIpFzF5g3VDzMi6Q9cnhODkcFNPYtlMtlpyidTkKPaGD81HkhNYiTa4tgfGQOYzSBnykOcNvU8TSv4HG2C+FpuY/HxR4OqyaB0k4Bl6oGHXd8T3zsKDXgzXRNfRv31WHR0vBMq/s6q0ColnOoFE2Utt2R0+kUdF2DJIkvJ8mLvM7eUqkkHYgfMuWUl1OWKBfVQqjumNgljqCGNYTUMMJ0HeLxuCPGGEEkAsouWPGhNv4N3dt/UJv9CevkD5hc9u+wBn8hUR5CDQWhanQPuQOPx4NoNOo4NAyDduZ3/uPj8HvGG/jUGCmOoJ4EUxPwhXncBKMoMfXlbsoEVNzF6rqOYrFIX0CYXLkXlkee4y96PRsQvRvQwqrziaqhwJsYMfj7nPUfIHcYiUQcV/ylV4cKYw6Yr0KSKEqS21BynznnDcgTwWDQOeVAgLqq6sseRSfHxWGvRf+nfwGPXjprX16EtQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/897645d85c6922bb37f8e478b6fd7612/a35e2/creating-monkey.webp 970w\"],\n    \"sizes\": \"(max-width: 970px) 100vw, 970px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/897645d85c6922bb37f8e478b6fd7612/84019/creating-monkey.png 970w\"],\n    \"sizes\": \"(max-width: 970px) 100vw, 970px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/897645d85c6922bb37f8e478b6fd7612/84019/creating-monkey.png\",\n    \"alt\": \"Creating the monkey head\",\n    \"title\": \"Creating the monkey head\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"Now you need to drag the bottom bar of blender window up. Click the icon and select the shader editor.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"820px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"71.46341463414635%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAACL0lEQVQ4y62RW3OaUBRG+VGxNhoTBcG7SczFKIiX4C0gaiSigtpOp9OfvXrQjJOHzuSheVizN3vOrPOxj9RuVtm+PeNPmvh2neW4xnJ0zaJfZv5cYNbTcLtZ7I7MoHWF1bpk2Mkw7ik8mxeYRhxTj9EW9IxvSJZZ43cwIpy3CacGoftE4NyzebklGFcJRhXWwxKelWfa1XA6kVxlZCpYzUt6zSSWnmBgJBi2zpH6QvgnHLP3euwWbbbzFsG0QTB5IHRqbAXByw3+sILXL7GwSsxE8kjuCrnTVpiI9K5IPe2mkXrGLb/WI7avXUGHYNZiM9XZuEIapXXrrEXi5fgWb3iNN6gKKiwHZVaDkqiCfhG/n2c9KiB1mjfs/QGraVtg4rsGS0dnKXa6ciNx8yBfOXWx4wdW9j1r+46NXSO0xVqi1Yg/2L5cs7OrSGajSuhZeBMTz2mxcAwWti56nTeBP9FZR/JJQ9SGkB9Th+4jW7GWw77FBaFzx25yhxS98u7NYjXrHFL6buuUdCUeaT09ptzODHZzg/2rzn7eYD+LeDrxY1bn5+wRKZmIU7spk9dkSgWVnJohc5WkmFcOs0JOplLUkNNJZDFXDjVxQvlQb8o5pO/fz8lmVWRZQVGyJC9SRLNMRuYqnSEtyKoa54nkpxSKJaRUKoWmae+oh5rL5VBV9fgtatRHs8+IzknxeJx8Pv8uOIo/9h9nnxGd+6fwf5DOzs5Owq+QSrFY7EsT/gVskCyX9K/vVgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/4291b496da309fa99bc9f7a9dae7876a/f3687/dragging-bottom-panel-up.webp 820w\"],\n    \"sizes\": \"(max-width: 820px) 100vw, 820px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/4291b496da309fa99bc9f7a9dae7876a/43a06/dragging-bottom-panel-up.png 820w\"],\n    \"sizes\": \"(max-width: 820px) 100vw, 820px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/4291b496da309fa99bc9f7a9dae7876a/43a06/dragging-bottom-panel-up.png\",\n    \"alt\": \"Dragging bottom panel of blender up.\",\n    \"title\": \"Dragging bottom panel of blender up.\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"and then..\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1500px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"48.93333333333333%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAACAklEQVQoz4VS227aQBDlR/AFbG42ptxss8YBO4BJoyhV06pSiYCCQ9LIaYJwSFolD/2BSv2Afuvp7Cak7VMfjmZ258yZM2tnvl5PsP18gnR1hPVyjOvFAOfTHs7nAVazHqYTG/PTNuKpjfXKx6+fW/x4mCCd7yH9FGKzCLGNh1hP+7j66CPzfRvj8eYUD18+4DE5wbfLY2ziQxI+QDIb4nIaIpn3cbMMcHcxQLpgSJc+buOQBANsCLdnA6yJk3DB8TiCY7fgMRdB30fP98BcG6zjoOO00XHblNuidhAN8O7tMcbRPvFtqrde4DEHg7CPjGmayGsaFEWFLCtQVBXlcgXG872sKNA0HfV6A8ViCaqaE9D1IkqlssglSYZhmBhFETKdjotms4l8Pg+VmgsFHbbdhus6RDJokAKTYhAEJFoXdyoN5T3drodq1RScWs1CxAWHw6Eo5kiQuywUi8/kLpGrYlClUoHjOORUI2c6bSKDMQbeyyPn8E2FIHdj0ZRG/RV0ja8jU9GAZVm0evnFZTabFc5yuZw48yE7x/zMuULwaHaP/fdX8N4kaB9ewH69gl62yIUkBDh5J/Q3djUO7pgPEILdvRAlo4aKRWvrBvRSlRrygrRr+B8kSfrjkNFHaZD1VrOBGq3p0BN4Hv06zBPv8xR3+b/gvCcug+/7GI1G+A29mEzqr+l5kwAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/4d232ac2ea505329d59cac78387be03e/4004c/selecting-shader-editor.webp 1500w\"],\n    \"sizes\": \"(max-width: 1500px) 100vw, 1500px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/4d232ac2ea505329d59cac78387be03e/de2df/selecting-shader-editor.png 1500w\"],\n    \"sizes\": \"(max-width: 1500px) 100vw, 1500px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/4d232ac2ea505329d59cac78387be03e/de2df/selecting-shader-editor.png\",\n    \"alt\": \"Selecting shader editor.\",\n    \"title\": \"Selecting shader editor.\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"Once these steps have been done make sure you you select the cycle render engine in render properties tab on the right.\"), mdx(\"p\", null, \"We can get to work on the baking soon..\"), mdx(\"p\", null, \"I don\\u2019t know yet how to do many things with this YET, but baking is a great way of getting something procedural and getting it into a texture you can use in your 3D applications.\"), mdx(\"p\", null, \"Make sure you have selected the monkey head.\"), mdx(\"p\", null, \"Select new on the top bar of the shader editor and delete the principledBSDF node:\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1102px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"90.74410163339383%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAABYlAAAWJQFJUiTwAAADeUlEQVQ4y52T21MaZxiHmdZcJBfJJBedaesACyZokOXMInJYDqLIYdlFQEUR5KyisU20uer0L3/6gtXpjOlMphfPvN+3336//b2Htc2v24zGDcFkdmEwvqgwnJYYTPcYTIThLp1unsZhEquVwLS2MAyNuhHFqIWpGUGsgxAN4aARwnZ5UWM8rjAYlOj3ivT7OwxGRSaTLO26Sjn/gZal0jrRqLXCGFb4QagapFrxU68FMY0FAax6ANt4WGQgIr1ujuOjNO3mNsNuAl37BZvNtuTlCxv7WTuWqVKrBKiW/ZRLKvt7m1RKPqpCvaJi1fwi2M8zOsvSP0lzcpykaaisvrU9ia38+MPT2qe84tAUQREz9hdCXmqCUdqkXlY5qInD6TDHxSjPoLdN7zQuMU45p/DR9Zo3r1Z4ufKCd69XCK2/pVny0GtF6UjaR/UQTUnZEneWiDcNP82qCF5O8lzPCkynCaaTOPNpik+zDF+udCq6Y+nsrObhfpLhqptkehLnspsSsozacfpmlK4R4cyM0G9Esc3E4eU4K02Rw/Moo3ONiXB7qZMM/rQUNHWFr5LFzWma6zP5YD/Ll3GR257O/FjEZQKmMgF+z8+Sci8vTcjQPY5zdhyj34nJXuN6lGbQVKmLy/lRlD+GO3zu5/i9l+U3iXcyCZ+l/vNOmk9dHaugPtT6pl8U+zqzTpKL0yRXUsvbYYa7sc6f8wJ/zXN8lXTvRzp358JA516yuh/lRDjN7ak4lobOxKF79R22trkrc1bmsFmn0yzRNncwKxksoZyP0aikpXsZKkUNYy9BKRtF3/JJt3c4PzFoGQXMUgZzP0O9lMYWDIYIhDVCsSSxmEYwFOGj17dk7b0Hr8+P6g+yvu5dPnN/WOdXhxNV7mmJJGoozKYaYNOnCjKHdrsdp8OOw77KYu2QteJ04hRciiLRIc8cKIpzufYqLvzuNbwiumGXveBxPJwt7tgUueRyub4Lt7x77g1zG5Nux1LcaGluNuQffu/FIWdueedJcBEfeRR4tncpbG9tsa3FiQSCRIJB4tEoUUn78b3vd+h04dxwk9rVKe+XSaXTJFMp0pkMkUjkueC/HT5DnLmcEtfXyJV2MKo18rkcuojlJMZisYeaf8vhfzlWXE6pkYdEIkOhkF8KxeNxNE3D7/f/j5T/+ZhTeZiABd+q+99MUV4lFziMoQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/6f71f79150b80d27a46dee29720bb643/60992/node-setup.webp 1102w\"],\n    \"sizes\": \"(max-width: 1102px) 100vw, 1102px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/6f71f79150b80d27a46dee29720bb643/5f836/node-setup.png 1102w\"],\n    \"sizes\": \"(max-width: 1102px) 100vw, 1102px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/6f71f79150b80d27a46dee29720bb643/5f836/node-setup.png\",\n    \"alt\": \"Node setup.\",\n    \"title\": \"Node setup.\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"and then select this brick texture node:\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1314px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"91.17199391171994%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEBUlEQVQ4y12T13MaVxSHiWeclzxkJk7GimV6Lyt26SDRwUKiC1SQEQLRBBJIlmxrlMTOOHXS3pzJW/7VL3fXJU4efrP37j3nu+f8zq7uz7//4rfXv/LTH9/z4+8/8Ornb3nx3S23L6+4upmzeDJivuwzWx5zuugxmXc5Gbfp9ss87hfYPdqg/TjKbjfIvpDu1S/PBeCKr14uuPl6zvJ6xJkALJ90OT3fE4AWJ5MGg2GNXr/C4dE2B50iu3sZ9veT7LRj1FoKjX2Z1l4A3c2LAde3xzx9fsTV9SGnszbjcZPZvCFgFUazbcbzMpPptgAW2dnfoNlO0GjEhCLUa0FqDUWAA7RbAnj5rMXFdZPlRYPFWY3ptMxwuEW/l6Z/lGQ03KBRshKR7rGZs3JwJCC7Ier1ALWKQrXsp16VadRkdhp+dMtlhfm8JBILjE+KjAYFAcrSOmwIT9ocHJS4b3DxyRcO7t79mKDnU+olJ/WKTKUkUS75xNNHbUuiWRXA60WZxWmRwXGKYT/DbJhn0E0SL+2Rbp4R2xogF/qEy6d8tmLhzkd3iKzpaQlgWwCa2z5xgVc8JVo1AbyYbrKYqtWlmAzTXMyKTEYJZMlISJGQPHZcdjNm/QOiipPshkI05KXTCDI/StFvRejWAhwK9VpiyrNBnqmobNhLMh6kOZ/mORnEkEVyIBAgHAricbu4v7LKbtHJ7TjL5XGSi36K69EjLkXu2cEG5x3hdc6H7vlkWzs462eZacrR6wig30E4HGI9EcPltKHXP6RbDfLNtMjTQY5nJzluxkWeCYsuugJ+nMGmv6cC6wJYYXlSZS4+1tNugVEnS8DvRlFkQsEA/jUfJpOJg2qYJ2oXj1PMD5MselkWx6KIjth30jSLCrpiIU8hm+RRs8/W/pxiIUemUMLrcROJRIhGo3g8HoxGI8GATCwaJB4N4XbZScQj7DRr5HNpkutxMqkEOrNZGG6xYBQV+KQ1nC43D/UGzGYLfr8fWZZRY/R6vajSrL1XZbGosr7dm7W9utaAVqsV/eqX2jQdViOrK5+LALNoWSEkhuJyuTSgWVxqEPFhq52ZHGUSjDMJxJg4/CStDvRmEzrtJpMBmxQn216Q3ZkhZQ5xuNdQZL+YdFC7XQMKmOqlz+0hl1gnIc7iQqlIFNknaV3q1HYtgmxxrhHO1FHWt3AGstgcLuw2G3a7/T1IjTUZTbgj4u9o18nl86wnk6QzGWGXpMVoLVvUlh8+wO2w4vM4MayuaC2/8cz81q83UofjW1OoVKqUNjfJZrJk0mmk/wDftqR6JsuKSDJhE9V9aPa/azM24ZfH48Xr9Wr+Op3O9/HvgQaDAbfbrR2q6w+r+r/eWGDUKnqnd5x/AF1PcpYMHuO8AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/401752e34b04c14f6f744964b8b2f89a/40a27/brick-texture-node.webp 1314w\"],\n    \"sizes\": \"(max-width: 1314px) 100vw, 1314px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/401752e34b04c14f6f744964b8b2f89a/e0c0f/brick-texture-node.png 1314w\"],\n    \"sizes\": \"(max-width: 1314px) 100vw, 1314px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/401752e34b04c14f6f744964b8b2f89a/e0c0f/brick-texture-node.png\",\n    \"alt\": \"Brick texture node.\",\n    \"title\": \"Brick texture node.\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"Join up the colour output to the input of the output material node.\\nThen just because we can you should create an RGB node and connect the colour up with the colour input node on the brick texture.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1434px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"65.27196652719664%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC90lEQVQ4y22SS2/iVhiG+QFddjMVA+aOwdhgMDBczCU4AwSbKJmEIRDCnQTIJBnNaKROK3VRteq2VX/v02NLs6jaxavPPjrfc97v4nv6POTpxeHx8Yz73Vu2K1enzCYtNFWmUMiTz+tIksTl5RV//PqR7bLJcJBl0FM56yoiZnD6KheOhu/w2OP52Ofl0GW9aLKYNXhYnTCf1MgoEfI5DT2bIeD/gV63y99//cnvP+8YOSqXA43zvsKwmxYxw6UtgA+btxy3Fk/3p+xWDTYrkw8PlohVitU3mJ0BZbNDJG1wOx3x26cz9tMi20mZnXh0eVVi6uhMhjrzdwXhcNljv7B4WLRZz0xW8waH7QmLRYXa2YjKYEOuM0PrLLmarllfVbjuG+wF7NPa4uOyzXFc92Tmw/h+enzHj/c2X7ai9MUJewHdz9vcjYpk1ShGQScRCxMJSWhKjJN6lpqR5jCu8VVU9XnZ4nla5+XW5NX33+HbTG32dw7HucP9/ILdZsb6psf8fY+clkbTVGLRCMFgkHYty2HWYjtuMjt/w91FTeT1WI/aLC4bDC0DXyIpo2o5dF1HL5mUrBEFo4ii5YnF4t65qqr4/X5Sckp8Z0nIafyRKFIiSb5SRSkUSGtZ764vFAp5KxEMvEaKylTtLbXzI5n2jFgyQ7loYIi1CYUj9IwEz32NeCREPZrAkhWacZlmMIISlAhIQXzhcJhvkqQQaVVH0w1C0SRSKOz1sFrKUykbmHWToW1R0MXK5EpMilWu82XGmkEpmSIozHlA16Ub3T7JyQRKOk3AdRx8jWkNGSx/wbpYYdtndLt9UjmF2mmLSqNBvlyiZNZJKQohUel/gKlUipzuluj+B2ifDpgfv3J9u+XmZow9GBCVk3T7feHW5qTdpt1qoQig9H9AWZbFZDXvzJtsq8l6OePm/TXT6RTHsYlG46gZjVwu5w3MhcViMS/nXz10AfF43IO67tyeNpsdbMeh07GEOrSEGzfZvevKdeXqm6l/AHxiwN12GXqkAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/93cfa737a58aa105310515e3412f7b03/39706/RGB-colour-input-node.webp 1434w\"],\n    \"sizes\": \"(max-width: 1434px) 100vw, 1434px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/93cfa737a58aa105310515e3412f7b03/cb752/RGB-colour-input-node.png 1434w\"],\n    \"sizes\": \"(max-width: 1434px) 100vw, 1434px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/93cfa737a58aa105310515e3412f7b03/cb752/RGB-colour-input-node.png\",\n    \"alt\": \"RGB colour input node.\",\n    \"title\": \"RGB colour input node.\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"Now you should have something like this:\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1420px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"84.50704225352112%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAABYlAAAWJQFJUiTwAAAEE0lEQVQ4yz2USW8iVxSFK+v8gShpGzCDDTZDMVNgKHADxsyT3RgozFQMxuC4nba7o0iJOom6FSnpTSZFWWeZVaRso/4N+T1fXrnVWZy695V0z7vnnlslvfh6zvMvZzx7MeHufsj1TQ99fspi0WK5qqEvyoxmJ/RHOTraY047aZrtQ+p1hUYjSrUapNKQxTs/rZYf6ennT/j07pTr2xbX101Wl1Wm0xLjcYGRIBlMjpjpaW5HJ1z2M9Q6fkqisGYQlWUqJZ/IZRo1H826D2lzU2G9KbFcHqNPcujjHOOLx/R7KuenCW60LK87Hb4rTXjdHHHfLdCtBiideCkVPBSPDygX3FSLHhoVL9LVqsDTqyJL/YgLLYk+zDAbphn04midMN92W3zfXvIy1eeLyog32pzbppBc8tAseqkWDgT2353LosPlNMtmnmOlZ5iMkixEvJpn0KdRkSuspgnuJyl+L+r80GpxNYqin0fQuzEREwwaIbplP71aAK0RFITDHIvhEfqFykhLMB+nWUxVhqMwk2FYjCDGZhLjj7MrfmqfcnUR51pLsb5IcStGtBH5ZecQvRXDt/cx0otljXvh4u0kz+oiw6VB3k8y6kaY9MIshzE+myV5Oc3wlbjs+fSIu3GGO2HWvZ7lqWjkRpAOayE+kCSkxaDMelRlNSgx750IGceMO3km5zmBI4E003NVxEOm3RTjswRjsTZaLcbsPMOynxVnoaiVIqO4kTweD6FoFDkSQY5GCCgiV5LEk2niioJflvG63ey7XIRDYdwiPxA1Wzs7eAMB4qqKLxxC9vsJiyh9YtomZXeyCcRZugKsdgOM93xYtk24bNusC16uS0HWxx5u805KYSvWLTNp2y7xHQeKyUp0y4LVbObR1haSSSSKP8CTRJZqIkU7eUj3OIfP68Rhd5BXlQdk1YRYjyyZdJiQw8kwkuA8rNANxjg78OOy2zG4JLN4+ISEj56rfPjLz9gfP0OfTQgEg1htNtKVAenmJZlciWKxSCSisB/2oopLg7EY/liUYFzB7nBgMpmQLI+suJM28m89vPrrbzbhf+hXp3jkA/b2nDS0Nf31N7Q7fQZaj4CYm0t2i++4Tj6X4yiTQU2mhBr7O0LztgVfxMOvr7f4tzfgt51XBIWUA/c+LmFEoyZ+DoMup+0WmqYRCoVw2JzEYgpRYaZfmOH1erEJNYZaadtsIuqN8EZu8qf5hB/3nzDx5bA7HXjcfsrlOrV6nWw2Sz6ffyAwCSONbgwYJAZ2hOvm9zPcFe0G9rx4XD5Cex6Ru9k2mZFlJ5VKHlVNC7LcwwwNyQaRQWDAYrH8jwfJu7u7DwO1OmxY7VZ27DZsDruQuy92zkEqpaAocWq1Gu12m6Awy5Bn1L2HQ9S/j/8BtZ5sXk9eXV4AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/789e2e38f4b56aa99c18a70f5bf416d5/a906e/end-setup-in-blender.webp 1420w\"],\n    \"sizes\": \"(max-width: 1420px) 100vw, 1420px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/789e2e38f4b56aa99c18a70f5bf416d5/8a3c9/end-setup-in-blender.png 1420w\"],\n    \"sizes\": \"(max-width: 1420px) 100vw, 1420px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/789e2e38f4b56aa99c18a70f5bf416d5/8a3c9/end-setup-in-blender.png\",\n    \"alt\": \"End setup in blender.\",\n    \"title\": \"End setup in blender.\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"Now the key thing here is you have to create a image texture node and create a new standard image 1024x1024px. and connect it to the second colour input node of the brick texture node.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1056px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"103.78787878787878%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAABYlAAAWJQFJUiTwAAAExUlEQVQ4y1WUa28qVRSG+Q9Gje0p93K/DQMMtIUyQCkF2gKFQi9cByil93o4F5NjoonGGE38Yvy5j2vQY+KHxYY9ez97ve9+GcunH1747vsHPn664/X9nPvnCXePQx5frlk+dpkv28xvW0xmDYzZKaPJMdfDOhdXFboXB3TOdc67Oak9mmcpLG8/jlm9H7F61+fh6YLZTYfZ/IzlXZPF/QnT2xqz2yrjWYXhuMz1oETvssBZN0urvUejmaHR0Gg2UpycqFieVx2eX9s8P51xf9dgPhfItM5kUsEwDplMywznBUZGjvkoy7i/R/tK47SXpNFJctqUEtDJsSIVw/LwVOfursZyUWMxP2JqQkYHjIZFBv0804nOalbgz0mfvwb3/HU+5cOoTOs8SL0ZFZiA6jFqRxGpMJbbRVkABSYCmI1LGMOCdJHnoKig51Va1SRGMcdgV3xTS0z0Br9d3/Jrt81dI0OtGuZEYPVKiFoliOX+RhaNcowH+9wYBRaTgkCzBAMuwuEoCTWJmtTw+rx88fWX7Cspfje+5Y/elMczjfZpjI5IbdcjNKohkXxTZG7sY0yyLOdFHhYlbmY7KMo2kUiEVEollVDZ0VIEvUGKaoQfb8s8DKTzyxTTC00qw7iT5uo0LpINXaTmxKscdwJ8vC2yWOwSDduIhPykUwpJgajRAK4tKxXVw2qSYXmV5b6/y3Kww5OoejFKMreLZTHUmfZzTAZZFqZkIy8XkkLd3SGVPyZfaZLRq0RTOr5YgVa+yM9y6MqQkgt7GeV5nRR5NyvzMsxjWUm+HuUylqMiSxlnfZ2xyMg1DfTLTxwNPnJw9R6t8ULseEXp9JLHqzTLixy3vT1eBvk1/MO8zNtxwQTWeJHMPUkU7odllte61D7RgB0lGiKTiuO029h2Odbl87jFjuDaju1tN8eFKO9E2fM4z4Nk1HJaL3PS6dNa/ES9XqNWq0lYO3LLPqLRGJqmrUePx4vd4ZSbD5NMJteVSCQJB30klCDtVp2r3hmWQCCAP6ygZIqoiRT+QAi3x4/NZhNQFFVVicfj2O12tra2cDqd+CRCPq+Uz4fL5ZY5F6FQWFIRxfLPwjdsu10ostEqIJvMmWM4EpbYpIjFYmug1WplU27afL7+bY4OsxzrBmw2KxbzxK03mzhsG6QTCs6tb7BvfLX2LSLyYjEJtxwUCgbWwLjXTmjbLs+lU5cLr+z32B04BeqQ7xa7UJ2+GInDMdXeI+nyELVwLYYHiEVC0qGGqkRx2jbZ3NhkR/HJwQEqnjCDeJrLuEbPHyUgsm3SrcVht+LyKyQqBsXWDdHDAaGDMVq2RCaj4RefEjtFojuHxBT5x+xK6FWFrJ6lkM+jiSW7mQyebc/ahv8kO60bIi2MJ7CFbdNKQ1ugFwqYCmodg/HrL1xcj7i+vMQlccmVdHn/nVCQNfsC9ng+A/811OXeJp1OCzRCyOnjKHJEMBjE5/dTrZQxRn16vS7dbhev1yf+Kuv1ZgLMKLnET4ewLOaHabZLblkTvzySNbfM9cN54m6JVChEpVLlqFolL53oui5A7zoZZozMvWaZnP8B3W73OsTmSWbHHqdb5Drw++3yij+kXK7QbDZptVproCnPtOsz6HP9DdSR4w1Q/YJyAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/766790f274d9468a3acd40a03690d039/446e0/image-texture-node-blender.webp 1056w\"],\n    \"sizes\": \"(max-width: 1056px) 100vw, 1056px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/766790f274d9468a3acd40a03690d039/92290/image-texture-node-blender.png 1056w\"],\n    \"sizes\": \"(max-width: 1056px) 100vw, 1056px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/766790f274d9468a3acd40a03690d039/92290/image-texture-node-blender.png\",\n    \"alt\": \"Image Texture node creation in blender.\",\n    \"title\": \"Image Texture node creation in blender.\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"This is what it should finally look like:\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"992px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.25%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACBklEQVQoz3WS247SUBSGeQ7pmR4oLYVCS2lpS4+EAXQSZIIkBmgyiZr4BM5reDUPMYle+Hq/e28los5c/O3uyl7f+tdabVmajFM9RrMM0BR9nDIL96WF0NHACSIUWWLvTWjhwzrAx02IQ+XCkET4HR2+qsORFEiSxNTSdQ1FnqGuShTZHFWRY3+3RTj10O2aUBQFoiDADRKkN3fIqyXiPEc6GuEQZ9hOItSOy2CyLFOgjjSdYxqGGI89JEmC9XoDw+hC0zRYlo12+xXSYonz5wecTg1yUngQeHj9doukKDAOgj9AmkQhI1LRdV0Mh0N2Nk0TPM/Dtm10Oh3MohlO7w94t98TAyk00mpETEx8H7Zl/Q0sqwrz+Ry+5zEFkwkDiqLILtKExYKMZbFAHMfwCUQUBQjCL11gv4EGiqJElMQYRSGTR2QYBnhyudfrsXNdJ1itVnAch+kachFbikI/SEs+Ae/MAXaqhVolyyAx2i51ynEcK3o+n3E8HlGWJRsHXdi/0BZ9cMTJpGvjTXmD22qBfZbAJM5UVWVVaXJFxkKBTdMQtzWLXVxdqyWR/0ziFHQ8Hsa3Btmn76iSW4gyz2ZIk2hyFEXY7XZMs9nsZaCsyBDaMuxIwtPXDD+yRyT9GqJCEiT5v5au5/VcnLUsSAIGRh9fujUe9BVqcwqexJ4DXkAvAX8CVWRYZaNdNCEAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/de949b315d16033c7a5eb1acc9e0bd3e/53c9d/final-node-setup.webp 992w\"],\n    \"sizes\": \"(max-width: 992px) 100vw, 992px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/de949b315d16033c7a5eb1acc9e0bd3e/9c46d/final-node-setup.png 992w\"],\n    \"sizes\": \"(max-width: 992px) 100vw, 992px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/de949b315d16033c7a5eb1acc9e0bd3e/9c46d/final-node-setup.png\",\n    \"alt\": \"Final node setup.\",\n    \"title\": \"Final node setup.\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"Once this has been created, go to the render properties tab on the right hand side. Select bake (alittle way down the options) ensuring the image texture node in the shader editor has been selected aswell as the object in the viewport (the monkey head).\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"2032px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"58.95669291338582%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAACrUlEQVQoz22SbW/SYBSG+zPUhEEH7g2lU97KoHRAaSmlG7ANxgaMuRfdQJibw83p/GKixo/+HRPjL7t8WrNooh/u9HlOT65z7nMeaThMcDpM8+qlycVwk/HzTSbPawz3LEYDl7PjDa7P+txOj3l7ccB03OfqZYebcYeGa2JaFcrlMvl8nmw2i7Q3WGavH2fQzfJMQCYth49qnRcbRY52LE66NudHDd5Ndrm92OeNAF6Odrme9Ki7FSoVm2q1iqZpxONxpH4nyX4ny35b56Bb5k3H5UupyXl/naHo8LBlCGiVs4MGN5MuH6+PuBp3mZ62cMo6xWIJy7IwDMOXNNozOT90uT5t8vZ0k6thi/HxGi/6NQYbJXp1nd5GmYPdNbpbDuuVPLeXx3z7+oGqkSeX0zDNspDpS/r0usPnyx2+TLd5P6ozHtQ42alw2C7TaxTormtsOjr9tksm9QRJkvhwM+Xnj+84VgFVVYXtCq7r+tal1ppBu26y07DYquapFlWsYlZU17D1BFoqJqysUirq5FZUUsk4tmWwvVUnnU6LZegYpZJ/TqVSSDNBGVkOY+RU1lZV7HyakLgvzM3RNHW0hIL2eBllboFgSCYcDotviJmZGRZF3K46WMKqrnvzLCKFxM9IJExmZQU1syJWn+PhwwiPY8u0e4e/E8WTUB49IhgMIot8WZYJiXNUxBzH8S0XCoU/QK9qLpcjmUygKApeLJl4KqwUiEajomPZh/wtr0tlaQnHtrGFPKAnya8mFF1cwsxoaPGnzM7OCnCMXq/nzyUQCPwD9IrOi7HcLcN73J58YDAgkhbvMzwfYTxxeRC4x/z8gp8Qi8X8ed1B/lYkEvG7q9VqNJtNHy7dJYYjMn0lSyqsEJAFQCzA68yf238s3wEzmYw/Lu/5JJNJfgHfi6mP1C5lGQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/85e1472fd62359c2792f937c25496599/4d523/baking-in-blender.webp 2032w\"],\n    \"sizes\": \"(max-width: 2032px) 100vw, 2032px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/85e1472fd62359c2792f937c25496599/c9b97/baking-in-blender.png 2032w\"],\n    \"sizes\": \"(max-width: 2032px) 100vw, 2032px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/85e1472fd62359c2792f937c25496599/c9b97/baking-in-blender.png\",\n    \"alt\": \"The actual baking in blender.\",\n    \"title\": \"The actual baking in blender.\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"And if you export this model to GLTF (including textures\\u200A-\\u200Aoccurring by default) and import it into the GLTF online viewer then you will see the texture is loaded onto the model and there ya go, baked a shader node network into an image texture and used this in web 3D setting. As see in the GLTF online viewer:\"), mdx(\"p\", null, mdx(\"undefined\", {\n    parentName: \"p\"\n  }, \"\\n        \", mdx(\"div\", {\n    \"className\": \"embedVideo-container\"\n  }, \"\\n            \", mdx(\"iframe\", {\n    parentName: \"div\",\n    \"width\": 680,\n    \"height\": 400,\n    \"src\": \"https://player.vimeo.com/video/573686396\",\n    \"className\": \"embedVideo-iframe\",\n    \"style\": {\n      \"border\": \"0\"\n    },\n    \"allowFullScreen\": true\n  }), \"\\n        \"))));\n}\n;\nMDXContent.isMDXComponent = true;","hero":{"full":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAADaUlEQVQ4yxWTW1MiVxSFec9jqvIQE+VidGZAG1RAmjt4w6ZpLjaC3Jqmaa46gzqOSWaSTCrmJT8gqUrlPS/5jV82D6v2rnPOXnvttet4nj/NeP7R5f0Hm8VdD3fWZnl7zfy2znhm4Ex1hk4Za3hJp3dBs1WkYeaoN1JcXanU63H0WgTDDMv5AZ7VU5v7xxardybTWQ1nbOC6ZdzJJaNJSVDEtrNY/QzXnQTVlsCMYxgxjMoRFf1A8og0OKBRj+C5fVdhudRZzDTcsRDY5/T7RbqdPPZQZe5cMB/Nca1HxoMa5vUbKjVFyA7QtTDa5b5EhUpZoVpR8MwmZ9hWAcc6YTwUNf08nXaKm6bKzOoyGnziyvwDvfKCNfiF6WBGu5ahXAqil/bRLoKUBZXSHlVtH89ycoI9yDCycqJGSK0Mg26CQScmxT0mo18xGz9TOnvEdT4yt1dYZoqmEaaph6lrQiTktcsQDV0ULt0iYzuDO8pyNztlNpF8fMxikmQ5VnnrqEz6K9rNv3h0iix7R7g3MSbi57SbxhY/e8YhHbGgXz/C41pZGTONM8ywJnfHKYajqDSJM3WE1DlkOXqSpfzL++EJb+Xt7RqDNA/OGathnoVYtGiJ6vMwngfnlKUcztcXdoFRL8GwG5UYZTY85l6UfpjWpLjLx8kpP0jTZ6fA87jI9+L/0yjPqpfhvp9lUDnE0zdPadcLtGoFrqt5zNo6zwikYyVBp56iXY0yNBN0a0laukpbYJai9BtZFpbG8CpPu6zK2Ek8yXiUZOyIlMRYNM7BcY7jhErkKMrOmyChcATfd7sohzH2lQjB0B6hPYWvNrx4d4LE03mCkRi+V3sEXoXw/GQorPFbI8JZbJevN77Bu7VJ0OtDCWyz5/Wj+PyENr0EtoTE58Pn3aKTfs1cPBsVQjjZHaZZP/phAE8+kyaXSVHVS6SSCptStO338xBReTku8jmU4PN+ipdwitTuDt8K4fr+qiCLM3LYuixVS7KoF+loojBfKFAqXWJUaxxFY2yJOn/AjxpPkJNx1GKBfC6Npl0Qj4fwiVq/EK4tiSUSxAVRNY2aLZIr5vFomobjODSbTcKKwpaME/BtE82G+fLvFl/8+R+vs/fcLWYcisc7u7t4NzfIlC3Mh384t3+nahjyVW9Q1ST/A1zqEM4yNQr6AAAAAElFTkSuQmCC","aspectRatio":1.475,"src":"/static/0547aab415f2d344428f244addd634ee/a1946/monkey-hero.png","srcSet":"/static/0547aab415f2d344428f244addd634ee/5b37e/monkey-hero.png 236w,\n/static/0547aab415f2d344428f244addd634ee/49058/monkey-hero.png 472w,\n/static/0547aab415f2d344428f244addd634ee/a1946/monkey-hero.png 944w,\n/static/0547aab415f2d344428f244addd634ee/5c144/monkey-hero.png 1252w","srcWebp":"/static/0547aab415f2d344428f244addd634ee/99fbb/monkey-hero.webp","srcSetWebp":"/static/0547aab415f2d344428f244addd634ee/77392/monkey-hero.webp 236w,\n/static/0547aab415f2d344428f244addd634ee/1f177/monkey-hero.webp 472w,\n/static/0547aab415f2d344428f244addd634ee/99fbb/monkey-hero.webp 944w,\n/static/0547aab415f2d344428f244addd634ee/4d76b/monkey-hero.webp 1252w","sizes":"(max-width: 944px) 100vw, 944px"},"regular":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADH0lEQVQ4yy2TbVfiZhCG+Rft6bYi4KIr4gtIeAmSgIiGd9AIogZIAgEUlaWWbrvd3XPa0w/90B/QP3t1lvbDfZIzyVwzzz3P+D58mfDTryNWH2yWrxaThxvG3jUPj5d4Dw1G0xq2V6Fvl7izzuj0TrnqaLQus7TaadrtJPVGnMblIW0zhm+x6vDyarJYXPE8b+F5dVy3iuNc4LjnDEdFRmONsS3vlsB6x9Sv4zTbCRr1OPXakeiQVjNGu3WEb/5Sk24qTCcGk9EFrlNiOChy29O4E01t0dDDtv5geP+Zcb+KeXVIvX5ErXJIxYiuVSvv06jsS4dzgY2LDCwdd1BgPCxg32vcdFMMb/JMBit6t39TLn+i0fxNCv6FdzehLckNY5/6V9hFRJ4RGuUovuVDmUfvFGeYY2TrPAp8ZGcZ9lMCzzCzm8ycGZeNL/TMFcuphSc+9s041lWCXjOOKfBLgZm1A3yP4tHUyeMK0HN1nqZFJhNVvExKIZXZKMmzq+D0/2E2+MTCijK7yzC9zzAf6KI8404aR4YzbCvioS1ACbrWiXSkM3PlyIM0lnUsEIWJk+b9OMdk+CdP9is/Ozo/ii2LgcbSKbIal1j0pZHbHPNeFt9qVGYpE3yUCU5Fo1udficj/knVXhJPOnl2TiRZFZDKUoou+vk15L00srRPeRbPH7pZZh0Vn5bX0fJ5srkcOV2jUNApGVWqRpFiPouWTYoU1FScizOdnKqsY4njA3YjO1Rr5bXSmRRKMoFvWtzjP0XWistPm8EtAqEQ3weCvAkE+O5/bYQkLrENf4B3WwFyB28pxHfJx3bI7YfIRUP47s7TfJVlqIyaOpnEDm82/BwEQzxFE7xEFZ7eHrEMx+hv7REU8A+bAfTDMB9NlZV5wqqd4pdGjI8t2ZTUiU4yq5HRCpQqNY6Pj9gQ4G44TEctcJvU6CoK9/L9Wk+zvb2F37/Ju90IqXSKVEohmVHX+YVSCd/BvlzOWlUurCOr0yIS2cO/6Se8tU3sXOHb312+cT9TuDDp3ncJS6FgMCj+RTFMj9L1nLNyU7bGwDAM/gUsF+xYaawQZgAAAABJRU5ErkJggg==","aspectRatio":1.481818181818182,"src":"/static/0547aab415f2d344428f244addd634ee/3ddd4/monkey-hero.png","srcSet":"/static/0547aab415f2d344428f244addd634ee/078a8/monkey-hero.png 163w,\n/static/0547aab415f2d344428f244addd634ee/e56da/monkey-hero.png 327w,\n/static/0547aab415f2d344428f244addd634ee/3ddd4/monkey-hero.png 653w,\n/static/0547aab415f2d344428f244addd634ee/c5cc7/monkey-hero.png 980w,\n/static/0547aab415f2d344428f244addd634ee/5c144/monkey-hero.png 1252w","srcWebp":"/static/0547aab415f2d344428f244addd634ee/0acdf/monkey-hero.webp","srcSetWebp":"/static/0547aab415f2d344428f244addd634ee/ac59e/monkey-hero.webp 163w,\n/static/0547aab415f2d344428f244addd634ee/7660b/monkey-hero.webp 327w,\n/static/0547aab415f2d344428f244addd634ee/0acdf/monkey-hero.webp 653w,\n/static/0547aab415f2d344428f244addd634ee/75470/monkey-hero.webp 980w,\n/static/0547aab415f2d344428f244addd634ee/4d76b/monkey-hero.webp 1252w","sizes":"(max-width: 653px) 100vw, 653px"},"narrow":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAADaUlEQVQ4yxWTW1MiVxSFec9jqvIQE+VidGZAG1RAmjt4w6ZpLjaC3Jqmaa46gzqOSWaSTCrmJT8gqUrlPS/5jV82D6v2rnPOXnvttet4nj/NeP7R5f0Hm8VdD3fWZnl7zfy2znhm4Ex1hk4Za3hJp3dBs1WkYeaoN1JcXanU63H0WgTDDMv5AZ7VU5v7xxardybTWQ1nbOC6ZdzJJaNJSVDEtrNY/QzXnQTVlsCMYxgxjMoRFf1A8og0OKBRj+C5fVdhudRZzDTcsRDY5/T7RbqdPPZQZe5cMB/Nca1HxoMa5vUbKjVFyA7QtTDa5b5EhUpZoVpR8MwmZ9hWAcc6YTwUNf08nXaKm6bKzOoyGnziyvwDvfKCNfiF6WBGu5ahXAqil/bRLoKUBZXSHlVtH89ycoI9yDCycqJGSK0Mg26CQScmxT0mo18xGz9TOnvEdT4yt1dYZoqmEaaph6lrQiTktcsQDV0ULt0iYzuDO8pyNztlNpF8fMxikmQ5VnnrqEz6K9rNv3h0iix7R7g3MSbi57SbxhY/e8YhHbGgXz/C41pZGTONM8ywJnfHKYajqDSJM3WE1DlkOXqSpfzL++EJb+Xt7RqDNA/OGathnoVYtGiJ6vMwngfnlKUcztcXdoFRL8GwG5UYZTY85l6UfpjWpLjLx8kpP0jTZ6fA87jI9+L/0yjPqpfhvp9lUDnE0zdPadcLtGoFrqt5zNo6zwikYyVBp56iXY0yNBN0a0laukpbYJai9BtZFpbG8CpPu6zK2Ek8yXiUZOyIlMRYNM7BcY7jhErkKMrOmyChcATfd7sohzH2lQjB0B6hPYWvNrx4d4LE03mCkRi+V3sEXoXw/GQorPFbI8JZbJevN77Bu7VJ0OtDCWyz5/Wj+PyENr0EtoTE58Pn3aKTfs1cPBsVQjjZHaZZP/phAE8+kyaXSVHVS6SSCptStO338xBReTku8jmU4PN+ipdwitTuDt8K4fr+qiCLM3LYuixVS7KoF+loojBfKFAqXWJUaxxFY2yJOn/AjxpPkJNx1GKBfC6Npl0Qj4fwiVq/EK4tiSUSxAVRNY2aLZIr5vFomobjODSbTcKKwpaME/BtE82G+fLvFl/8+R+vs/fcLWYcisc7u7t4NzfIlC3Mh384t3+nahjyVW9Q1ST/A1zqEM4yNQr6AAAAAElFTkSuQmCC","aspectRatio":1.4805194805194806,"src":"/static/0547aab415f2d344428f244addd634ee/502b1/monkey-hero.png","srcSet":"/static/0547aab415f2d344428f244addd634ee/f2e6d/monkey-hero.png 114w,\n/static/0547aab415f2d344428f244addd634ee/4ddba/monkey-hero.png 229w,\n/static/0547aab415f2d344428f244addd634ee/502b1/monkey-hero.png 457w,\n/static/0547aab415f2d344428f244addd634ee/7ddc2/monkey-hero.png 686w,\n/static/0547aab415f2d344428f244addd634ee/435bf/monkey-hero.png 914w,\n/static/0547aab415f2d344428f244addd634ee/5c144/monkey-hero.png 1252w","srcWebp":"/static/0547aab415f2d344428f244addd634ee/15384/monkey-hero.webp","srcSetWebp":"/static/0547aab415f2d344428f244addd634ee/31fce/monkey-hero.webp 114w,\n/static/0547aab415f2d344428f244addd634ee/e3e25/monkey-hero.webp 229w,\n/static/0547aab415f2d344428f244addd634ee/15384/monkey-hero.webp 457w,\n/static/0547aab415f2d344428f244addd634ee/0258d/monkey-hero.webp 686w,\n/static/0547aab415f2d344428f244addd634ee/64ea2/monkey-hero.webp 914w,\n/static/0547aab415f2d344428f244addd634ee/4d76b/monkey-hero.webp 1252w","sizes":"(max-width: 457px) 100vw, 457px"},"seo":{"src":"/static/0547aab415f2d344428f244addd634ee/6050d/monkey-hero.png"}}}]}},"staticQueryHashes":["1143375668","1491088328","1921650733","2068910035","2444214635"]}