{"id":1702,"date":"2024-01-21T16:51:46","date_gmt":"2024-01-21T16:51:46","guid":{"rendered":"https:\/\/www.katsbits.com\/site\/?p=1702"},"modified":"2024-01-21T16:51:46","modified_gmt":"2024-01-21T16:51:46","slug":"render-skybox","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/site\/render-skybox\/","title":{"rendered":"Render a Skybox Environment Map"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#Skybox_set-up\" >Skybox set-up<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#Make_a_Skydome\" >Make a Skydome<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#Initial_Materials\" >Initial Materials<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#UV_Unwrapping\" >UV Unwrapping<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#extra_Material_settings_Replacing_Images\" >extra Material settings &amp; Replacing Images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#EnvBox_Material_Settings\" >EnvBox, Material &amp; Settings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#Render_Environment_Map\" >Render Environment Map<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#Alpha_Masks_Transparency\" >Alpha Masks &amp; Transparency<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#Organisation_Orientation\" >Organisation &amp; Orientation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#Process_Summary\" >Process Summary<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.katsbits.com\/site\/render-skybox\/#Video\" >Video<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>Skyboxes are a cheap way to provide  background visuals beyond the player reachable objects of a  Scene. Essentially just a series of  panels   projected onto the inside of an environment, Skyboxes can be produced by rendering a  special scene  containing all the elements that need to appear &#8211;  sky,  ground, background objects and other items.<\/p>\n<p>The following tutorial discusses this  process, of setting up and rendering a basic skybox, using &quot;<b>Bender Render<\/b>&quot; (&quot;<b>Blender Internal<\/b>&quot;), for use in game development. A basic understanding of Blender is recommended but not absolutely necessary to get the most from the content below.<\/p>\n<blockquote style=\"background-color: #ddecf3; color: #000;\"><p><strong>Download<\/strong>: <a href=\"\/files\/tutorials\/katsbits_skybox-example.zip\" title=\"Download the Blender Skybox template file\">KatsBits &#8211; Skybox Example<\/a> (c200 KB | *.blend, *.tga)<\/p><\/blockquote>\n<blockquote><p><strong>Resources<\/strong><br \/>\n&#8211; <a href=\"https:\/\/www.katsbits.com\/site\/cycles-skybox\/\" title=\"Render a Skybox using Cycles Render\" target=\"_self\" rel=\"noopener\">Skybox using Cycles<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.katsbits.com\/site\/rendering-skybox-environment-maps\/\" title=\"Render a Skybox Environment Map in Blender 2.49\" target=\"_self\" rel=\"noopener\"> Skybox in Blender 2.49<\/a><\/p><\/blockquote>\n<p>          <a name=\"setup\" id=\"setup\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Skybox_set-up\"><\/span>Skybox set-up<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The simplest form of Skybox is a sphere split horizontally  into two halves at its mid-point; an upper section representing   &#8216;<b>sky<\/b>&#8216;, and lower for &#8216;<b>ground<\/b>&#8216; (up to and including the horizon). The &#8216;sky&#8217; section is usually a little larger than the &#8216;ground&#8217; so it can overlap the lower section  to compensate for missing areas  due to alpha masking at the horizon (skyline masked to represent distant trees, cityscapes etc.). At grid-centre to the two domes (half-spheres) is   a  cube  typically assigned an &quot;<b>Environment Map<\/b>&quot; Material &#8211; this essentially represents  the six sides of the eventual  cubic Skybox, the &#8216;point of view&#8217; from  which the Scenes contents will be rendered.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: essentially a Skybox can be rendered from anything within the 3D View but for convenience, usually because the resulting map is to be used as an environment background, they are generated using a sphere split in to two halves. This forms a boundary. Within this any placed object will be rendered as part of the eventual map. In other words, although in most instances a Skybox is generated to display just &#8216;sky&#8217; and &#8216;ground&#8217;, the Scene used to create that image can contain any manner of objects &#8211; models represented buildings for a cityscape, trees for a distant forest and so on. So long as these ancillary items sit inside the dome (and within range of the renderer) they will be baked to the Skybox image.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/skybox-objects.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/skybox-objects_sml.jpg\" alt=\"Basic objects used to generate Skybox\" width=\"640\" height=\"360\" border=\"0\" title=\"Basic objects used to generate Skybox\" \/><\/a><\/p>\n<p>The basic elements used to render a Skybox environment map,  an upper and lower dome representing  &#8216;sky&#8217; and &#8216;ground&#8217;, and a reference point, usually located grid-centre, which forms the point of view from which rendering takes place (&quot;<b>Camera<\/b>&quot; and &quot;<b>Lamp<\/b>&quot; objects visible in the Scene  are not explicitly used for Skybox rendering)<\/p>\n<\/p><\/div>\n<p>          <a name=\"skydome\" id=\"skydome\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Make_a_Skydome\"><\/span>Make a Skydome<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To create a simple  Skybox generator the first elements to set up are the upper and lower domes for the &#8216;sky&#8217; and &#8216;ground&#8217;. Starting with a &quot;<b>New<\/b>&quot; Scene in Blender (&quot;<b>File &raquo; New<\/b>&quot;), select the default Cube and move it to an unused layer; right-click the object then press &quot;<b>M<\/b>&quot; to access the &quot;<b>Move to Layer<\/b>&quot; pop-up,  left-click one of the buttons  selecting the layer to which the object will be immediately moved (it will disappear from view).<\/p>\n<blockquote>\n<p><b>Design note<\/b>: this doesn&#8217;t remove the Cube from use, it just puts it to one side ready for  use later in the process. If Blender is set up to load an empty Scene a Cube will need to be added &#8211; press &quot;<b>Shift+A<\/b>&quot; to access the &quot;<b>Add<\/b>&quot; menu and select &quot;<b>Mesh &raquo; Cube<\/b>&quot; from the options available. Or from the <b>Tool Shelf<\/b> to the left, click the &quot;<b>Create<\/b>&quot; tab then  the &quot;<b>Cube<\/b>&quot; button to place a cube object in the Scene at the Cursor (subject to Blender version). Note also that if the Scene is completely empty a &quot;<b>Camera<\/b>&quot; entity must  be included else the render process will error out with the &quot;<b>No camera found in scene<\/b>&quot; message when it attempts to render the Skybox. If a &quot;<b>Camera<\/b>&quot; is present do not delete it.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/default-scene.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/default-scene_sml.jpg\" alt=\"Blenders Default Scene from which a Skybox generator is made\" width=\"640\" height=\"360\" border=\"0\" title=\"Blenders Default Scene from which a Skybox generator is made\" \/><\/a><\/p>\n<p>The Skybox  is made using  Blenders default Scene, which typically contains a &#8216;<b>Cube<\/b>&#8216;, a &#8216;<b>Camera<\/b>&#8216; and a &#8216;<b>Lamp<\/b>&#8216; object. Although the lamp and camera are not explicitly used for Skybox generation, the latter item needs to be physically in the Scene (even though it&#8217;s not the point of view through which rendering takes place)<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/default-move-cube.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/default-move-cube_sml.jpg\" alt=\"Move the default cube to an unused layer for use later\" width=\"640\" height=\"360\" border=\"0\" title=\"Move the default cube to an unused layer for use later\" \/><\/a><\/p>\n<p>The default Cube is in the way at present but rather than delete it, it can be moved to another layer for use later on in the process. Press &quot;<b>M<\/b>&quot; and left-click a button to move the object<\/p>\n<\/p><\/div>\n<p>With the Cube moved out of the way for now, the next step is to place a  &quot;<b>UV Sphere<\/b>&quot; mesh object in  the Scene to  be  used for the &#8216;sky&#8217; and &#8216;ground&#8217; elements. To do this, from the 3D View Header left-click the &quot;<b>Add<\/b>&quot; menu option, or  press &quot;<b>Shift+A<\/b>&quot;, and select &quot;<b>Mesh &raquo; UV Sphere<\/b>&quot; from the available options. A small spherical object will  appear  centred on the   Cursor and accompanied by an &quot;<b>Add UV Sphere<\/b>&quot; properties panel at the bottom of the &quot;<b>Tool Shelf<\/b>&quot; (press &quot;<b>T<\/b>&quot; if not visible) &#8211; the default values  can be left untouched.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: depending on the version of Blender used,  an alternative to using &quot;<b>Shift+A<\/b>&quot; is to click the &quot;<b>Create<\/b>&quot; tab in the &quot;<b>Tool Shelf<\/b>&quot; and then on the &quot;<b>UV Sphere<\/b>&quot; button to place the appropriate object in the Scene. The sphere will appear wherever the &quot;<b>3D Cursor<\/b>&quot; is located, which should ideally be at grid-centre. If not the mesh can be moved there by changing its &#8216;XYZ&#8217; &quot;<b>Location<\/b>&quot; data under  &quot;<b>Object<\/b>&quot; properties &#8211; click the &quot;<b>Object<\/b>&quot; Properties button (displays an orange cube) and scroll down to the &quot;<b>Transform<\/b>&quot; sub-section. Change the &quot;<b>X:<\/b>&quot;, &quot;<b>Y:<\/b>&quot; and &quot;<b>Z:<\/b>&quot; values for &quot;<b>Location:<\/b>&quot; so each reads &quot;<b>0.00000<\/b>&quot;; because the spheres Origin is located centre-of-mass (the small point that appears, usually at the centre, when an object is selected), changing &quot;<b>Location<\/b>&quot; values will reposition the sphere to be dead-centre of the 3D Views grid.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/default-uv-sphere.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/default-uv-sphere_sml.jpg\" alt=\"Add a &quot;UV Sphere&quot; to the scene\" width=\"640\" height=\"360\" border=\"0\" title=\"Add a &quot;UV Sphere&quot; to the scene\" \/><\/a><\/p>\n<p>As the Skybox is  actually made from a sphere one needs to be added to the Scene. Press &quot;<b>Shift+A<\/b>&quot; and select &quot;<b>Mesh &raquo; UV Sphere<\/b>&quot; or use the &quot;<b>Add<\/b>&quot; menu in the 3D View Header, choosing the same options. An object appears along with a set of properties (use default settings)<\/p>\n<\/p><\/div>\n<p>The sphere is relative small by default, and as the Cube previously moved temporarily to another layer will be used later on, needs to be resized so its larger &#8211;  the Cube should fit inside the completed dome. With with sphere selected (right-click), press &quot;<b>S<\/b>&quot;, hold down &quot;<b>Ctrl<\/b>&quot;, and then drag the mouse away from the item to incrementally &quot;<b>Scale<\/b>&quot; the object larger. Left-click to confirm once a suitable size is reached.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: the sphere should be at least large enough for the default cube to sit comfortably inside without touching the outer, in the example shown below, &quot;<b>20<\/b>&quot; &#8216;Blender Units&#8217;. When using the 3D Widget to manipulate objects, to the far-left of the 3D View Header a series of numbers and statistics appear that provide size related feedback &#8211; using &quot;<b>Ctrl<\/b>&quot; engages &#8216;grid-snap&#8217; so the numbers shown will jump in fixed increments. Alternately to using the manipulator widget and shortcuts, an objects size can also be changed in &quot;<b>Object<\/b>&quot; Properties by altering the  &quot;<b>X:<\/b>&quot;, &quot;<b>Y:<\/b>&quot; and &quot;<b>Z:<\/b>&quot; values under &quot;<b>Scale:<\/b>&quot;. Or the &quot;<b>X:<\/b>&quot;, &quot;<b>Y:<\/b>&quot; and &quot;<b>Z:<\/b>&quot; attributes associated with &quot;<b>View<\/b>&quot; properties, &quot;<b>N<\/b>&quot;,  under the &quot;<b>Dimensions<\/b>&quot; sub-section.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/resize-sphere.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/resize-sphere_sml.jpg\" alt=\"Resize the sphere using &quot;Scale&quot;\" width=\"640\" height=\"360\" border=\"0\" title=\"Resize the sphere using &quot;Scale&quot;\" \/><\/a><\/p>\n<p>The default &quot;<b>UV Sphere<\/b>&quot; object is relatively small so needs to be resized to fit the Cube inside at a later stage in the process. SImply right-click to select and press &quot;<b>S<\/b>&quot; to &quot;<b>Scale<\/b>&quot;<\/p>\n<\/p><\/div>\n<p>Next the sphere needs to be split into two sections for the &#8216;upper&#8217; and &#8216;lower&#8217; elements of the Skybox. Whilst still selected press &quot;<b>Tab<\/b>&quot; to toggle into &quot;<b>Edit Mode<\/b>&quot; (or select &quot;<b>Edit Mode<\/b>&quot; from the &quot;<b>Interaction Mode<\/b>&quot; selector in the 3D View Header) then press &quot;<b>B<\/b>&quot; to activate and use  &quot;<b>Box Select<\/b>&quot;  to left-click drag  out a drawn selection area over the upper half of the mesh, which  then highlights to confirm.<\/p>\n<blockquote>\n<p><b>Design note<\/b>:  making a selection that needs to include the front and back of an object  may require switching to &quot;<b>Wireframe<\/b>&quot; mode  to make the selection easier. Press &quot;<b>Z<\/b>&quot; to enable &quot;<b>Wireframe<\/b>&quot; or click the &quot;<b>Display Mode<\/b>&quot; button in the 3D View Header. Alternatively from the Header again, click the &quot;<b>Limit selection to visible<\/b>&quot; button to enable\/disable as appropriate to make selections. Note also that before making a selection the mesh may need to be cleared of any previous selections by pressing &quot;<b>A<\/b>&quot;, &quot;<b>(De)select All<\/b>&quot;.<\/p>\n<\/blockquote>\n<p>Once selected the upper section can  then be detached as a completely independent object using  the &quot;<b>Separate<\/b>&quot; function. To do this, from the &quot;<b>Mesh<\/b>&quot; menu option in the 3D View Header click &quot;<b>Vertices &raquo; Separate &raquo; Selection<\/b>&quot; (or alternatively press &quot;<b>P &raquo; Selection<\/b>&quot;). This detaches the vertices creating a brand new object whilst leaving the unselected elements alone.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: when using the &quot;<b>Mesh<\/b>&quot; Header menu option, &quot;<b>Separate<\/b>&quot; is only available under &quot;<b>Vertices<\/b>&quot; whereas when using the shortcut, &quot;<b>P<\/b>&quot;,  &quot;<b>Separate<\/b>&quot; is accessible as a pop-up  in &quot;<b>Vertex<\/b>&quot;, &quot;<b>Edge<\/b>&quot; or &quot;<b>Face<\/b>&quot; select mode.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/box-select.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/box-select_sml.jpg\" alt=\"Using &quot;Box Select&quot; highlight the upper half of the sphere\" width=\"640\" height=\"360\" border=\"0\" title=\"Using &quot;Box Select&quot; highlight the upper half of the sphere\" \/><\/a><\/p>\n<p>Press &quot;<b>B<\/b>&quot; to use &quot;<b>Box Select<\/b>&quot; to highlight the upper half of the mesh. This can then be detached, using &quot;<b>Separate<\/b>&quot;, as a completely independent object whilst leaving the lower half untouched<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/separate-selection.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/separate-selection_sml.jpg\" alt=\"Press &quot;P&quot; to detach the selection using &quot;Separate&quot;\" width=\"640\" height=\"360\" border=\"0\" title=\"Press &quot;P&quot; to detach the selection using &quot;Separate&quot;\" \/><\/a><\/p>\n<p>Once the selection is made from the &quot;<b>Mesh<\/b>&quot; menu click &quot;<b>Separate &raquo; Selected<\/b>&quot; to detach the highlighted vertices as a completely unique object&#8230;<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/separate-objects.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/separate-objects_sml.jpg\" alt=\"Sphere now comprises two separate objects\" width=\"640\" height=\"360\" border=\"0\" title=\"Sphere now comprises two separate objects\" \/><\/a><\/p>\n<p>&#8230; which now means the sphere is made from two domes, one each for the &#8216;sky&#8217; and &#8216;ground&#8217;<\/p>\n<\/p><\/div>\n<p>The final adjustment to make is to increase the size of the upper section slightly so its larger than the lower, which it can   overlap slightly. To do this press &quot;<b>Tab<\/b>&quot; to exit &quot;<b>Edit Mode<\/b>&quot; and making sure  the mesh is selected press &quot;<b>S<\/b>&quot;, then &quot;<b>Ctrl<\/b>&quot;, to &quot;<b>Scale<\/b>&quot; the upper dome a little whilst snapped to the grid. Left-click to confirm. Once  done left-click drag the &quot;<b>Z<\/b>&quot; axis handle of the manipulation widget (blue handle) and move the upper dome  down so the first row of faces belonging to  both lower and upper overlap. Release <b>LMB<\/b> to confirm.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: with &quot;<b>Ctrl<\/b>&quot; pressed when moving the mouse to rescale the object, one &#8216;snap&#8217; (a unit of fixed distance based on grid cell sizes) should be sufficient an increase in size. When moving the object either left-click drag the blue handle, setting a new position on release. Or press &quot;<b>G<\/b>&quot; to activate the widget, then &quot;<b>Z<\/b>&quot; to lock movement to the vertical axis. Left-click to confirm. The overlap is somewhat important because it <a href=\"#alphamasks\" title=\"Rendering with alphamasks\" target=\"_self\" rel=\"noopener\">acts as a &#8216;tolerance&#8217; for the lower to be alpha masked at the horizon<\/a> &#8211; if there were no overlap the process would render gaps as &#8216;black&#8217; (or whatever colour is set as the Scene background).<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/resize-sky.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/resize-sky_sml.jpg\" alt=\"Resize the upper dome slightly and move it to overlap the lower\" width=\"640\" height=\"360\" border=\"0\" title=\"Resize the upper dome slightly and move it to overlap the lower\" \/><\/a><\/p>\n<p>To allow a small degree of tolerance for the grounds horizon to be inclusive of alpha masks and transparencies there should be some overlap between the upper and lower domes. Once rescaled slightly, move the upper mesh down so the first row of faces overlap between the two<\/p>\n<\/p><\/div>\n<p>          <a name=\"materials\" id=\"materials\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Initial_Materials\"><\/span>Initial Materials<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the upper and lower dome meshes are set up they  next need to be assigned a basic Material before  then being UV Unwrapped and assigned their respective images,   essential to ensure  the eventual Skybox is rendered correctly.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: at this point  Materials are assigned using default values with perhaps a change to the &quot;<b>Diffuse<\/b>&quot; colour  for  ease of identification &#8211; more complex properties can\/are set  later on in the process.<\/p>\n<\/blockquote>\n<p>To add the Materials select the upper dome and from within &quot;<b>Material<\/b>&quot; Properties click the button titled &quot;<b>+ New<\/b>&quot; just below the empty aperture at the very top of the panel. A set of properties and options  will immediately appear. In the &quot;<b>Diffuse<\/b>&quot; sub-section  left-click the small bar tined  off-white, a colour-picker will be shown. Left-click somewhere in the wheel to make a selection then press &quot;<b>Enter<\/b>&quot; or left-click elsewhere on-screen to confirm. In the &quot;<b>Material datablock ID<\/b>&quot; text input field directly under the aperture (which now displays the <i>Material<\/i> data being edited) left-click and type an identifying name, &quot;<b>sky<\/b>&quot; in this instance. Press &quot;<b>Enter<\/b>&quot; to confirm or left-click elsewhere on-screen.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: objects tend not to have Materials assigned when added to the Scene by default but if one is available simply change the &quot;<b>Diffuse<\/b>&quot; colour and &quot;<b>Material datablock ID<\/b>&quot; for each to uniquely identify them. As the lower and upper were previously part of the same object any changes to pre-existing assigned Materials will duplicate. To change this select either object and to the right side of the datablock input field click the &quot;<b>+<\/b>&quot; button. This makes a new unique instance of the original Material, duplicating and propagating over it&#8217;s options and settings for independent editing.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-sky-diffuse.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-sky-diffuse_sml.jpg\" alt=\"Changing Material &quot;Diffuse&quot; colour\" width=\"640\" height=\"360\" border=\"0\" title=\"Changing Material &quot;Diffuse&quot; colour\" \/><\/a><\/p>\n<p>Once the Material has been created change the &quot;<b>Diffuse<\/b>&quot; colour to make it easily identifiable and assign a unique &quot;<b>datablock ID<\/b>&quot; (&quot;<b>sky<\/b>&quot; in this example)<\/p>\n<\/p><\/div>\n<p>Next in &quot;<b>Texture<\/b>&quot; properties, again click the button marked &quot;<b>+ New<\/b>&quot; to generate a set of default options. Left-click the &quot;<b>Unique datablock ID name<\/b>&quot; input field directly under the aperture list (which now also displays the <i>Texture<\/i> data currently being edited) and type a new name, &quot;<b>sky<\/b>&quot; in this instance. Press &quot;<b>Enter<\/b>&quot; to confirm or left-click elsewhere on screen. Change &quot;<b>Type:<\/b>&quot; to &quot;<b>Image or Movie<\/b>&quot; by selecting that option from the drop-down menu. Then from the &quot;<b>Image<\/b>&quot; sub-section click &quot;<b>+ New<\/b>&quot; to access the &quot;<b>New Image<\/b>&quot;  dialogue,  editing the &quot;<b>Name<\/b>&quot;, &quot;<b>Width<\/b>&quot; and &quot;<b>Height<\/b>&quot; of the image to be generated as appropriate. Click &quot;<b>OK<\/b>&quot; to create and automatically associate the new image with the Texture and Material data. Repeat the steps so both objects  each have their own &quot;<b>Material<\/b>&quot;, &quot;<b>Texture<\/b>&quot; and &quot;<b>Image<\/b>&quot; data.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: the result should be two independent Materials, in this instance &quot;<b>sky<\/b>&quot;, tinted  light-blue and, and &quot;<b>ground<\/b>&quot;, tinted bright-green. <a href=\"https:\/\/www.katsbits.com\/site\/gingerbread-materials\/#newimage\" title=\"More details on using &quot;Generated&quot; image data\" target=\"_self\" rel=\"noopener\">For more information on using   Materials with &quot;<b>Generated<\/b>&quot; images click here<\/a>.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-sky-image.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-sky-image_sml.jpg\" alt=\"Create a new image\" width=\"640\" height=\"360\" border=\"0\" title=\"Create a new image\" \/><\/a><\/p>\n<p>In &quot;<b>Texture<\/b>&quot; Properties, which should be blank, left-click an available slot in the aperture (red\/white checker icon) then click the &quot;<b>+ New<\/b>&quot; button to generate a generic set of  options<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-sky-image-properties.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-sky-image-properties_sml.jpg\" alt=\"Generated image properties\" width=\"640\" height=\"360\" border=\"0\" title=\"Generated image properties\" \/><\/a><\/p>\n<p>Scroll down to the &quot;<b>Image<\/b>&quot; sub-section and click the &quot;<b>+ New<\/b>&quot; button; the &quot;<b>New Image<\/b>&quot; dialogue appears allowing entry of some basic image information &#8211; &#8216;name&#8217;, &#8216;size&#8217; and &#8216;type&#8217;. Left-click &quot;<b>OK<\/b>&quot; to create<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-sky.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-sky_sml.jpg\" alt=\"Create a standard Material with a unique ID and &quot;Diffuse&quot; colour\" width=\"640\" height=\"360\" border=\"0\" title=\"Create a standard Material with a unique ID and &quot;Diffuse&quot; colour\" \/><\/a><\/p>\n<p>This initial phase simply generates a basic Material that makes use of default data and options, and assigns a  generated image that will be used once the object is UV unwrapped<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-ground.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-ground_sml.jpg\" alt=\"Create a second Material with similar unique properties\" width=\"640\" height=\"360\" border=\"0\" title=\"Create a second Material with similar unique properties\" \/><\/a><\/p>\n<p>Repeat the process for the remaining dome object so it too has an independent Material, (&#8216;green&#8217; shown to identify &#8216;ground&#8217;) with generated image assignment<\/p>\n<\/p><\/div>\n<p>          <a name=\"uvmaps\" id=\"uvmaps\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"UV_Unwrapping\"><\/span>UV Unwrapping<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once  the initial Materials are in place the images generated during that process can then be assigned to the upper and lower domes though &quot;<b>UV Unwrapping<\/b>&quot;.<\/p>\n<blockquote>\n<p><b>Design note<\/b>:  although there are  a number of different ways objects can be textured and UV unwrapped, for game related content the application of standard Materials and &quot;UV&quot; mapping is sufficient for purpose.<\/p>\n<\/blockquote>\n<p>As much of the UV mapping process takes place in the &quot;<b>UV\/Image Editor<\/b>&quot; it will need to be visible, but not necessarily the focus of the User Interface. So either, swap the &quot;<b>Outliner<\/b>&quot; view top-right for the &quot;<b>UV\/Image Editor<\/b>&quot; by left-clicking the &quot;<b>Editor type&#8230;<\/b>&quot; button to the left-side of the Header, selecting the option from the list. Or from the main application Header running along the top of Blender click the &quot;<b>Choose Screen Layout<\/b>&quot; button, selecting &quot;<b>UV Editing<\/b>&quot; from the the options available.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: because the UV maps being generated for these types of projects are relatively simply there is no real need to switch completely to the UV\/Image Editor, so long as it can be seen and basic manipulations are possible, it can occupy a smaller area than might otherwise be used, subject to User preference.<\/p>\n<\/blockquote>\n<p>Once the &quot;<b>UV\/Image Editor<\/b>&quot; is visible, select the upper dome and &quot;<b>Tab<\/b>&quot; into &quot;<b>Edit Mode<\/b>&quot;. Select the entire structure of the mesh, &quot;<b>A<\/b>&quot;, and then from the 3D View Header select &quot;<b>Mesh &raquo; UV Unwrap &raquo; Unwrap<\/b>&quot;. Alternatively press &quot;<b>U<\/b>&quot; then select &quot;<b>Unwrap<\/b>&quot;. This unwraps the objects UV&#8217;s as a flat grid of points and lines, which appear in the UV\/Image Editor.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: when using &quot;<b>A<\/b>&quot; to &quot;<b>Select All<\/b>&quot; the key may need to be pressed twice, once to <b>DE<\/b>-select  active selections then once again to <b>RE<\/b>-select everything.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/uv-map-standard.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/uv-map-standard_sml.jpg\" alt=\"UV unwrapping the mesh to assign an image\" width=\"640\" height=\"360\" border=\"0\" title=\"UV unwrapping the mesh to assign an image\" \/><\/a><\/p>\n<p>Once Materials are assigned each mesh can be UV unwrapped so the &#8216;Image&#8217; previously generated during Material set-up can be applied to the object &#8211; as the UV\/Image Editor is needed swap out the &quot;<b>Outliner<\/b>&quot; or select the &quot;<b>UV Editing<\/b>&quot; layout option<\/p>\n<\/p><\/div>\n<p>To assign an image to the newly generated UV Map, from within the &quot;<b>UV\/Image Editor<\/b>&quot; whilst  the objects UV&#8217;s are visible, click the &quot;<b>Browse Image to be linked<\/b>&quot; button in the Header and select the named entry associated with the image previously generated per the Material that&#8217;s assigned to the mesh, in this instance  &quot;<b>sky<\/b>&quot;.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: images generally cannot be assigned to  UV&#8217;s unless those UV&#8217;s are visible in the &quot;<b>UV\/Image Editor<\/b>&quot;, even if the image is available and selectable in the &quot;<b>Browse Image to be linked<\/b>&quot; list (such selections will appear in the UV\/Image Editors workspace but not on the mesh). To ensure selections are correctly assigned the entire mesh needs to be actively selected in &quot;<b>Edit Mode<\/b>&quot;.<\/p>\n<\/blockquote>\n<p>The UV\/Image Editor will display the image selected in the workspace with the UV map superimposed over the top, both of which are confined to a fixed area determined by the dimensions of the image itself (typically a &#8216;square&#8217; or &#8216;rectangle&#8217; shape). In the 3D View the image may not appear mapped to the mesh, if this is the case press &quot;<b>Alt+Z<\/b>&quot; to switch &quot;<b>Display Mode<\/b>&quot; to &quot;<b>Texture<\/b>&quot; confirming assignment. Repeat the process so both domes are UV Unwrapped and mapped with their respective generated image.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: images can be assigned to UV&#8217;s in part or whole independently of the Material they may be associated with &#8211; be aware that doing so may cause rendering issues should the final Material contain more complex properties supposed to affect the image and how it should be displayed.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/uv-map-sky.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/uv-map-sky_sml.jpg\" alt=\"Assinging the previously generated image to the UV mapped dome\" width=\"640\" height=\"360\" border=\"0\" title=\"Assinging the previously generated image to the UV mapped dome\" \/><\/a><\/p>\n<p>With the mesh UV Unwrapped the previously generated image can be assigned using the UV\/Image Editor by selecting the entry from the &quot;<b>Browse Image to be linked<\/b>&quot; list (&quot;sky&quot; in this instance)<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/uv-map-ground.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/uv-map-ground_sml.jpg\" alt=\"Selecting the entire mesh, UV mapping and assigning an image\" width=\"640\" height=\"360\" border=\"0\" title=\"Selecting the entire mesh, UV mapping and assigning an image\" \/><\/a><\/p>\n<p>The process of UV Unwrapping and assigning an appropriate image to an object needs to be repeated for the remain half of the full dome (&quot;<b>ground<\/b>&quot; in this instance)<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/uv-map-unwrap.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/uv-map-unwrap_sml.jpg\" alt=\"Shown in &quot;UV Editing&quot; layout the UV map and image assign to the upper dome\" width=\"640\" height=\"360\" border=\"0\" title=\"Shown in &quot;UV Editing&quot; layout the UV map and image assign to the upper dome\" \/><\/a><\/p>\n<p>For clarity the UV map and image assignments shown in &quot;<b>UV Editing<\/b>&quot; layout mode &#8211; &quot;<b>UV\/Image Editor<\/b>&quot; to the left, the &quot;<b>3D View<\/b>&quot; to the right side of the screen<\/p>\n<\/p><\/div>\n<p>          <a name=\"extras\" id=\"extras\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"extra_Material_settings_Replacing_Images\"><\/span>extra Material settings &amp; Replacing Images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the upper and lower domes have been UV mapped their Materials  can be further  edited to add a secondary setting that changes the way light affects the scene, one that essentially makes selected items appear &#8216;<b>full-bright<\/b>&#8216;. This is the &quot;<b>Shadeless<\/b>&quot; property and by activating,  the scenes lighting no longer has  influence over the way objects appear lit,  which in-turn ensures the rendered Skybox  contains no out-of-place shading or shadows.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: although  &quot;<b>Shadeless<\/b>&quot; materials may appear  &#8216;lit&#8217; or &#8216;self-illuminating&#8217; they are not the same as those able to properly &#8216;cast&#8217; or &quot;<b>Emit<\/b>&quot; light &#8211; materials that can be set up to act as a source of light. For Skybox rendering  &quot;<b>Shadeless<\/b>&quot; is  useful, depending on requirements, because Materials can then processed and illuminated uniformly  regardless of the Scenes contents.<\/p>\n<\/blockquote>\n<p>To activate &quot;<b>Shadeless<\/b>&quot; select the object to be affected then under &quot;<b>Material<\/b>&quot; Properties scroll down to the &quot;<b>Shading<\/b>&quot; sub-section and left-click the checkbox to the left  of the heading to activate. The image will immediately appear flat-lit in the 3D View, visually confirming the change. Repeat the process for the remaining dome object.<\/p>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-shadeless.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-shadeless_sml.jpg\" alt=\"Activating the &quot;Shadeless&quot; Material property\" width=\"640\" height=\"360\" border=\"0\" title=\"Activating the &quot;Shadeless&quot; Material property\" \/><\/a><\/p>\n<p>From the &quot;<b>Shading<\/b>&quot; sub-section of &quot;<b>Material<\/b>&quot; Properties, activate &quot;<b>Shadeless<\/b>&quot; by left-clicking the checkbox thus disabling the effect  light and shading has on the object &#8211; in comparison note the lower dome,  the light in the Scene is not large or powerful enough to illuminate it so it will appear black until the &quot;Shadeless&quot; property is set for its Material<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-shadeless-both.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/material-shadeless-both_sml.jpg\" alt=\"Flat lit and &quot;Shadeless&quot; Materials\" width=\"640\" height=\"360\" border=\"0\" title=\"Flat lit and &quot;Shadeless&quot; Materials\" \/><\/a><\/p>\n<p>Once both Materials have been set to &quot;<b>Shadeless<\/b>&quot; they will appear  flat  lit &#8211; depending on the Scene and background requirements this is useful to ensure everything appears uniformly  to the renderer<\/p>\n<\/p><\/div>\n<p>Once &quot;<b>Shadeless<\/b>&quot; is set, check each Materials &quot;<b>Image<\/b>&quot; properties to  ensure the correct data is loaded in for use, for example swapping out the temporary &quot;<b>Generated<\/b>&quot; data for any actual bitmaps to be rendered.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: using &quot;<b>Generated<\/b>&quot; data has some initial advantages for Materials in that their general size  can be changed on-the-fly  without unduly hindering other aspects of development. It can also be saved out for editing,  reloaded back in once the final details are determined. To save generated image data, from the <b>UV\/Image Editor<\/b> use the &quot;<b>Browse Image to be linked<\/b>&quot; button to select the unsaved data so it&#8217;s active in the viewport (in instances where more than one datablock is available), then from the &quot;<b>Image*<\/b>&quot; Header menu select &quot;<b>Save As Image<\/b>&quot; or &quot;<b>Save A Copy<\/b>&quot;, the difference being the former replaces the image currently active to the Material then references an an actual bitmap, the one just saved, versus the latter which saves a &#8216;copy&#8217; of the active  data whilst leaving the active, but generated, image in place.<\/p>\n<\/blockquote>\n<p>To load  a replacement, in &quot;<b>Texture<\/b>&quot; Properties scroll down to the &quot;<b>Image<\/b>&quot; sub-section and first left-click the &quot;<b>Source<\/b>&quot; drop-down menu and select &quot;<b>Single Image<\/b>&quot;,  this informs on the <i>type<\/i> of image data being represented, in this instance a single image bitmap, then click the &quot;<b>Open file browser<\/b>&quot; icon. The interface will switch to the &quot;<b>File Browser<\/b>&quot;. Find and then left-click select the bitmap to be used and click the &quot;<b>Accept<\/b>&quot; button top-right. Blender will return to the previous screen with the image loaded into the Material and displayed on the object. Repeat the process for the remaining object. Once done the basic set-up of the background is complete and ready for use. Next the Cube object previously moved to another layer needs to be prepared.<\/p>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/image-replace-generated.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/image-replace-generated_sml.jpg\" alt=\"Replacing &quot;Generated&quot; image data with &quot;Single Image&quot;\" width=\"640\" height=\"360\" border=\"0\" \/><\/a><\/p>\n<p>Before loading in a replacement image some of the Materials settings need to be changed. In &quot;Texture&quot; Properties switch &quot;<b>Generated<\/b>&quot; to &quot;<b>Single Image<\/b>&quot;[1] then click the &quot;<b>File<\/b>&quot; button[2]&#8230;   (the mesh may appear &#8216;pink&#8217; during at this point  indicating an image (bitmap) has not yet been assigned or is missing)<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/image-replacement.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/image-replacement_sml.jpg\" alt=\"Loading in the replacement using the &quot;File Browser&quot;\" width=\"640\" height=\"360\" border=\"0\" \/><\/a><\/p>\n<p>In the  &quot;<b>File Browser<\/b>&quot; that opens, left-click select the bitmap  that&#8217;s to be loaded in  replacing the previously  &quot;<b>Generated<\/b>&quot; image data then click the &quot;<b>Accept<\/b>&quot; button top-right<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/image-generated-replaced.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/image-generated-replaced_sml.jpg\" alt=\"Both dome meshes with replacement images assigned to object and Material\" width=\"640\" height=\"360\" border=\"0\" \/><\/a><\/p>\n<p>The &quot;<b>Generated<\/b>&quot; image data replaced with more appropriate &#8216;sky&#8217; and &#8216;ground&#8217; bitmaps for both upper and lower dome. The Scene is almost ready for rendering<\/p>\n<\/p><\/div>\n<p>          <a name=\"envbox\" id=\"envbox\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"EnvBox_Material_Settings\"><\/span>EnvBox, Material &amp; Settings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The second aspect of setting up a  Skybox for rendering is to add, or create, an &quot;<b>Environment Box<\/b>&quot; (or &quot;<b>EnvBox<\/b>&quot;) to serve as the  &#8216;camera&#8217;, or the point of view, through which the Scenes contents are considered and rendered. In this instance the  default Cube previously moved to another layer.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: the standard &quot;<b>Camera<\/b>&quot; object cannot be used in a general sense for environment map rendering because it only looks at the Scene from a single fixed point-of-view. Using a cube solves this because each face of the EnvBox represents a &#8216;perspective&#8217; or &#8216;view&#8217; of  the scene, a &#8216;side&#8217; (&#8216;left&#8217;, &#8216;right&#8217;, &#8216;front&#8217;, &#8216;back&#8217; etc.) of the final rendered &quot;<b>Environment Map<\/b>&quot;. The physical size of the cube isn&#8217;t so important as its shape, which should be cubic.<\/p>\n<\/blockquote>\n<p>First if the cube was moved to another layer left-click the &quot;<b>Visible Layers<\/b>&quot; button representing that to display the object,  then make sure its located at the Scenes centre. To do that right-click the object and check its &quot;<b>Location<\/b>&quot; data in &quot;<b>Object<\/b>&quot; or &quot;<b>View<\/b>&quot; Properties (&quot;<b>N<\/b>&quot;), each &quot;<b>X:<\/b>&quot;, &quot;<b>Y:<\/b>&quot; and &quot;<b>Z:<\/b>&quot; value should be &quot;<b>0.00000<\/b>&quot;. If not left-click each input field in-turn and type the correct value. Press &quot;<b>Enter<\/b>&quot; to confirm or click elsewhere on screen.<\/p>\n<blockquote>\n<p> <b>Design note<\/b>: the EnvBox should be  centred on the Scene because  any directional  deviations may cause the resulting image to distort slightly, i.e. exhibit a directional bias towards the direction of offset &#8211; if the box is to the right slightly it may result in the left side appearing smaller, an important consideration when rendering a Scene with other objects and items in it. Additionally note that &quot;scene centre&quot; may not be the same as &quot;grid-centre&quot; &#8211;  the object should be centred relative to the contents the the Scene being rendered, which may not tally with the grid.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/envbox-initial.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/envbox-initial_sml.jpg\" alt=\"The default Cube can be used as an 'EnvBox'\" width=\"640\" height=\"360\" border=\"0\" title=\"The default Cube can be used as an 'EnvBox'\" \/><\/a><\/p>\n<p>The default Scene Cube to be used as the &quot;<b>EnvBox<\/b>&quot; through which rendering will take place &#8211; ensure the object is centred on the Scene being rendered (which may not position it &#8216;grid-centre&#8217;)<\/p>\n<\/p><\/div>\n<p>Once positioned add a new Material to the cube. To do this click the &quot;<b>Material<\/b>&quot; Properties button then  &quot;<b>+ New<\/b>&quot; to generate  an  entry &#8211; the Material panel will populate  and the cubes appearance may change slightly in the 3D View. From here scroll down to the &quot;<b>Shading<\/b>&quot; sub-section and active &quot;<b>Shadeless<\/b>&quot; by left-clicking the checkbox. The cubes appearance may again change  in the 3D View by way of visual conformation.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: activating &quot;<b>Shadeless<\/b>&quot; for the &#8216;EnvBox&#8217; serves the same\/similar purpose as for the domes, it ensures the final render is not unduly affected by lighting and shading (subject to requirements of the scene).<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/envmap-material-shadeless.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/envmap-material-shadeless_sml.jpg\" alt=\"Activate the &quot;Shadeless&quot; Material property\" width=\"640\" height=\"360\" border=\"0\" title=\"Activate the &quot;Shadeless&quot; Material property\" \/><\/a><\/p>\n<p>Once a Material has been assigned to the cube, from &quot;<b>Material<\/b>&quot; Properties activate  &quot;<b>Shadeless<\/b>&quot;  (under &quot;<b>Shading<\/b>&quot;) to disable the effect  light\/shading has over  objects in the Scene and the  Environment Map during the rendering process<\/p>\n<\/p><\/div>\n<p>Next in &quot;<b>Texture<\/b>&quot; Properties change the &quot;<b>Type<\/b>&quot; to &quot;<b>Environment Map<\/b>&quot; by selecting that option from the drop-down menu below the &#8216;name&#8217; input field. A  set of properties will appear  under a new &quot;<b>Environment Map<\/b>&quot; titled sub-section. Here left-click &quot;<b>Static<\/b>&quot; to activate single image rendering<sup>[1]<\/sup>; make sure &quot;<b>Mapping:<\/b>&quot; is set to &quot;<b>Cube<\/b>&quot;<sup>[2]<\/sup>; change the &quot;<b>Resolution:<\/b>&quot; of the map to be rendered<sup>[3]<\/sup>; and optionally alter the &quot;<b>Clipping:<\/b>&quot; distances<sup>[4]<\/sup> to make sure the entire Scene is included for consideration and rendering.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: when changing the maps &quot;<b>Resolution:<\/b>&quot; bear in mind the value used relates to the shortest side of the map, usually the vertical axis; at &quot;1024&quot; the result would be an image that&#8217;s 1536 pixels wide by 1024 pixel height, i.e. six 512&#215;512 panels (one for each side of the EnvBox cube) forming a 3W x 2H grid.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/envmap-select-image-type.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/envmap-select-image-type_sml.jpg\" alt=\"Change the 'Texture Type' to &quot;Environment Map&quot;\" width=\"640\" height=\"360\" border=\"0\" title=\"Change the 'Texture Type' to &quot;Environment Map&quot;\" \/><\/a><\/p>\n<p>For the cube to be useful the &quot;<b>Type<\/b>&quot; of Material its mapped with needs to be changed  to  &quot;<b>Environment Map<\/b>&quot; by selecting the option from the drop-down list in &quot;<b>Texture<\/b>&quot; Properties&#8230;<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/envmap-texture-settings.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/envmap-texture-settings_sml.jpg\" alt=\"Set the &quot;Environment Map&quot; properties\" width=\"640\" height=\"360\" border=\"0\" title=\"Set the &quot;Environment Map&quot; properties\" \/><\/a><\/p>\n<p>&#8230; which makes a set of additional &quot;<b>Environment Map<\/b>&quot; related properties appear &#8211; set &quot;<b>Static<\/b>&quot;[1], make sure &quot;<b>Cube<\/b>&quot;[2] is selected, change the  &quot;<b>Resolution:<\/b>&quot;[3] and check &quot;<b>Clipping: <\/b>(Start\/End)&quot;[4] to ensure the contents of the entire Scene are being included in the render<\/p>\n<\/p><\/div>\n<p>The final and most important setting to change is  &quot;<b>Viewpoint Object<\/b>&quot;<sup>[5]<\/sup>, the item Blender uses as the point-of-view from which rendering\/projection of the environment map takes place. In this instance the cube. To select it click the orange icon on the left-side of the &quot;<b>Viewpoint Object<\/b>&quot; input field and select &quot;<b>Cube<\/b>&quot; from the list of entries available. Once done the Skybox is ready to be rendered.<\/p>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/envmap-viewpoint-object.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/envmap-viewpoint-object_sml.jpg\" alt=\"Set the &quot;Viewpoint Object&quot; used to render the Scene\" width=\"640\" height=\"360\" border=\"0\" title=\"Set the &quot;Viewpoint Object&quot; used to render the Scene\" \/><\/a><\/p>\n<p>The most important aspect of rendering Environment Maps is to set the object which forms the renderer&#8217;s  point of view of the Scene. This is done changing the &quot;<b>Viewpoint Object<\/b>&quot; property[5] to use a specific item, in this instance the Cube (called &quot;Cube&quot;),  selected from the &#8216;object list&#8217;<\/p>\n<\/p><\/div>\n<p>          <a name=\"render\" id=\"render\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Render_Environment_Map\"><\/span>Render Environment Map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before rendering the environment map an image format needs to be set in &quot;<b>Render<\/b>&quot; Properties because the option is not provided  at save. Click the &quot;<b>Render<\/b>&quot; Properties button (&#8216;camera&#8217; icon) and scroll down to the &quot;<b>Output<\/b>&quot; sub-section, here click the &quot;<b>File Format<\/b>&quot; drop-down menu (bottom-left of the section) and  select &quot;<b>Targa Raw<\/b>&quot;, &quot;<b>BMP<\/b>&quot;, &quot;<b>Tif<\/b>&quot; or other loss-less image format.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: preference should be given to the use of &#8216;<b>raw<\/b>&#8216; or <b>uncompressed<\/b> image formats,  or failing that to ones that makes use of <b>lossless compression<\/b>. Avoid jpg or other aggressively compressed formats  at all costs as they often contain compression artefacts, banding, patterns etc.,   that  can be magnified in-game, especially when projected as an environment background.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-format.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-format_sml.jpg\" alt=\"Select the format rendered data is to be saved as\" width=\"640\" height=\"360\" border=\"0\" title=\"Select the format rendered data is to be saved as\" \/><\/a><\/p>\n<p>The image format the map is rendered to is set in &quot;<b>Render<\/b>&quot; properties under the &quot;<b>Output<\/b>&quot; sub-section &#8211; click the &quot;<b>File Format<\/b>&quot; drop-down menu (bottom-left of the section) and select a lossless format such as <b>*.tga<\/b>, <b>*.bmp<\/b> or <b>*.tif<\/b><\/p>\n<\/p><\/div>\n<p>Once the format is set <b>make sure all   elements that need to be rendered are visible in the 3D View<\/b> (&quot;<b>Shift+LMB<\/b>&quot; layers where used). Then to start scroll back up to the top of &quot;<b>Render<\/b>&quot; Properties and click the &quot;<b>Render<\/b>&quot; button (displays a &#8216;camera&#8217; icon). Blender will  switch to the &quot;<b>Render View<\/b>&quot; and sequentially process the Scene (time taken will vary), rendering   each projection (six) of the EnvBox  as an image before finishing with a render from the   camera objects point of view.<\/p>\n<blockquote>\n<p><b>Design note<\/b>:  double-check   an actual &quot;<b>Camera<\/b>&quot; object is present somewhere in the Scene else the process will fail with a &quot;<b>No camera found in scene<\/b>&quot; message. The image rendered as a result of the camera  is not part of the  environment map and can be ignored\/discarded.<\/p>\n<\/blockquote>\n<div class=\"content_images\"> <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-single-image.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-single-image_sml.jpg\" alt=\"Click the &quot;Render&quot; button to generate the Environment Map\" width=\"640\" height=\"360\" border=\"0\" title=\"Click the &quot;Render&quot; button to generate the Environment Map\" \/><\/a><\/p>\n<p>Ensure <b>ALL<\/b> items to be rendered are <b>VISIBLE<\/b> in the 3D View before clicking the &quot;<b>Render<\/b>&quot; button (the EnvBox doesn&#8217;t specifically need to be selected to render the Scene)<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-skybox.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-skybox_sml.jpg\" alt=\"Mid-render showing one of the Environment Map tiles\" width=\"640\" height=\"360\" border=\"0\" title=\"Mid-render showing one of the Environment Map tiles\" \/><\/a><\/p>\n<p>When processing the Scene the Environment Map attributed to the Skybox is rendered first (six panels, one for each face of the EnvBox Cube)&#8230;<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-camera.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-camera_sml.jpg\" alt=\"The final stage of rendering is the Camera (although discarded)\" width=\"640\" height=\"360\" border=\"0\" title=\"The final stage of rendering is the Camera (although discarded)\" \/><\/a><\/p>\n<p>&#8230; until the final image to be rendered is the Camera view (which is to be discarded) &#8211; note  that a &quot;<b>Camera<\/b>&quot; object needs to be in the Scene else render will fail (camera doesn&#8217;t need to point at anything or be assigned any properties)<\/p>\n<\/p><\/div>\n<p>          <a name=\"saving\" id=\"saving\"><\/a><\/p>\n<p>Once the  process completes the rendered environment map  will be available for saving. To do this  make sure the &#8216;EnvBox&#8217;  object  is selected so the     rendered data is   active, then  from  &quot;<b>Texture<\/b>&quot; Properties scroll down to the &quot;<b>Environment Map<\/b>&quot; sub-section and click the black downward pointing arrow top-right of the section<sup>[1]<\/sup>. A drop-down menu will appear with a number of options, select &quot;<b>Save Environment Map<\/b>&quot;. This opens the  &quot;<b>File Browser<\/b>&quot;  allowing  a location to be set and a file name to be written before  the &quot;<b>Save Environment Map<\/b>&quot; button top-right is the clicked to confirm and save with Blender returning to the previous screen once done. <\/p>\n<blockquote>\n<p><b>Design note<\/b>: when saving the rendered map, the file extension may need to be manually included because *.blend is present by default (which may cause some confusion when looking for and trying to open the image).<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-save-environment-map.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-save-environment-map_sml.jpg\" alt=\"Saving the rendered Environment Map from &quot;Texture&quot; properties\" width=\"640\" height=\"360\" border=\"0\" title=\"Saving the rendered Environment Map from &quot;Texture&quot; properties\" \/><\/a><\/p>\n<p>Save the rendered map back in &quot;<b>Texture<\/b>&quot; Properties where the option to &quot;<b>Save Environment Map<\/b>&quot; becomes available (option is greyed out when no map is available for saving) &#8211; note the &#8216;EnvBox&#8217; object needs to be selected to highlight the data before it can be saved to file&#8230;<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/save-environment-map.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/save-environment-map_sml.jpg\" alt=\"save the &quot;Environment Map&quot;\" width=\"640\" height=\"360\" border=\"0\" \/><\/a><\/p>\n<p> &#8230; in the &quot;<b>File Browser<\/b>&quot; type the file extension being saved to, i.e. *.tga, *.bmp etc., and then click the &quot;<b>Save Environment Map<\/b>&quot; button top-right<\/p>\n<p>            <a name=\"finalimage\" id=\"finalimage\"><\/a><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-map-image.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-map-image_sml.jpg\" alt=\"Final render open in and image-editor\" width=\"640\" height=\"360\" border=\"0\" title=\"Final render open in and image-editor\" \/><\/a><\/p>\n<p>The saved *.tga map open in image-editor (bright-green indicates areas where an alpha mask is present but not correctly compensated for by the rendering process &#8211; <a href=\"#alphamasks\" title=\"Rendering Environment Maps with alpha\" target=\"_self\" rel=\"noopener\">see below<\/a>)<\/p>\n<\/p><\/div>\n<p>          <a name=\"alphamasks\" id=\"alphamasks\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Alpha_Masks_Transparency\"><\/span> Alpha Masks &amp; Transparency<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Given the nature of Skyboxes they typically include some degree of transparency or alpha masking, usually at the horizon, to avoid the transition point between key elements being a straight, hard line. Although <a href=\"https:\/\/www.katsbits.com\/site\/scene-view-alpha-transparency\/\" title=\"Transparency in Blender\" target=\"_self\" rel=\"noopener\">there are a number of ways to approach the inclusion of alpha transparency<\/a>, overall the features use requires  each Material   have &quot;<b>Use Alpha<\/b>&quot; enabled in &quot;<b>Image<\/b>&quot; Properties<sup>[1]<\/sup>, without this setting, even if Materials do have transparency set-up, Blender will ignore the effect.<\/p>\n<blockquote>\n<p><b>Design note<\/b>:  Materials are initially created  with &quot;<b>Use Alpha<\/b>&quot;    active by default. If   alpha-masking or transparency   is not found Materials are  treated as standard.<\/p>\n<\/blockquote>\n<p> Simply activating &quot;<b>Use Alpha<\/b>&quot; doesn&#8217;t necessarily mean transparencies are used however. For that, various  properties need to be set <a href=\"https:\/\/www.katsbits.com\/site\/scene-view-alpha-transparency\/\" title=\"Setting up alpha transparency\">depending on the type of transparency  needed<\/a> and the general behaviour required of the Material involved.<\/p>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/image-use-alpha.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/image-use-alpha_sml.jpg\" alt=\"Materials need to have &quot;Use Alpha&quot; active\" width=\"640\" height=\"360\" border=\"0\" title=\"Materials need to have &quot;Use Alpha&quot; active\" \/><\/a><\/p>\n<p>By default Materials have the &quot;<b>Use Alpha<\/b>&quot; setting active in &quot;<b>Texture<\/b>&quot; Properties even in instances where  transparency is not used (the effect is ignored otherwise)<\/p>\n<\/p><\/div>\n<p>To set up transparency for  Skybox rendering, first  the Material itself has to be rendered transparent, then  &quot;<b>Texture<\/b>&quot; properties have to be set so they use the  alpha channel of any images loaded into the Material.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: if a Material  is not transparent its &quot;<b>Diffuse<\/b>&quot; colour  will be visible when the Scene is rendered (<a href=\"#finalimage\" title=\"Diffuse colour being displayed in a render\" target=\"_self\" rel=\"noopener\">the bright-green seen in the final render above<\/a>). Essentially  because   Materials  comprise three distinct layers  &#8211; &quot;<b>Material<\/b>&quot;, &quot;<b>Texture<\/b>&quot; and &quot;<b>Image<\/b>&quot; &#8211; each needs to be set up to behave correctly with respect to transparency; a corollary would be to think of three sheets of  craft-paper stacked atop each other, for &#8216;transparency&#8217; to work each layer  has to be cut in a way that  corresponds to the upper most layer and any cut-out shapes it contains. If  not, the cut-out  and last  whole layer are all that&#8217;s seen,  any subsequent layers then being obscured from view as a result.<\/p>\n<\/blockquote>\n<p>To do this,  from &quot;<b>Material<\/b>&quot; Properties scroll down to the sub-section titled &quot;<b>Transparency<\/b>&quot; and left-click the checkbox to activate. Here ensure the &quot;<b>Z Transparency<\/b>&quot; button is active (appears blue) and that the &quot;<b>Alpha:<\/b>&quot; input field is set to &quot;<b>0.000<\/b>&quot; (&quot;<b>Alpha: 0.000<\/b>&quot;). This forces the Materials &quot;<b>Diffuse<\/b>&quot; colour (and other properties that might be set) to render invisible so it has no affect or influence the outcome of processing the Scene.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: the properties and options associated with &quot;<b>Transparency<\/b>&quot; are usually not on display and require the small  downward pointing arrow to the left-side of the heading to be clicked to expand and expose them for use. <\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-material-transparent.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-material-transparent_sml.jpg\" alt=\"Set Materials &quot;Transparency&quot; properties\" width=\"640\" height=\"360\" border=\"0\" title=\"Set Materials &quot;Transparency&quot; properties\" \/><\/a><\/p>\n<p>For  transparency to work the Materials  &quot;<b>Transparency<\/b>&quot; properties needs to be set so the &quot;<b>Diffuse<\/b>&quot; colour (and\/or other options) are    rendered invisible &#8211; check (or select) &quot;<b>Z-Transparency<\/b>&quot; is active and then change &quot;<b>Alpha: 1.000<\/b>&quot; to &quot;<b>Alpha: 0.000<\/b>&quot;<\/p>\n<\/p><\/div>\n<p>Next in &quot;<b>Texture<\/b>&quot; Properties scroll down to the &quot;<b>Influence<\/b>&quot; sub-section and from the  &quot;<b>Diffuse:<\/b>&quot; group of options, activate &quot;<b>Alpha:<\/b>&quot; by left-clicking the checkbox (leave the value, &quot;1.000&quot;, untouched). Upon  activation the 3D View will update to display the areas subject to alpha transparency, confirmation the Material is now set up correctly and ready for rendering.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: for standard rendering the value attributed to &quot;<b>Alpha:<\/b>&quot; can be left as is. However it can be changed to reduce the level of transparency determined by the image if needed with a range between  &quot;<b>1.000<\/b>&quot; (positive) and &quot;<b>-1.000<\/b>&quot; (negative) &#8211; the former uses the alpha as presented, the latter inverts it.<\/p>\n<\/blockquote>\n<div class=\"content_images\"> <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-texture-alpha.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-texture-alpha_sml.jpg\" alt=\"Set &quot;Alpha&quot; in Texture properties\" width=\"640\" height=\"360\" border=\"0\" title=\"Set &quot;Alpha&quot; in Texture properties\" \/><\/a><\/p>\n<p>With the &quot;<b>Diffuse<\/b>&quot; properties set so they display invisible, in &quot;<b>Texture<\/b>&quot; Properties activate &quot;<b>Alpha<\/b>&quot; so the image based alpha-channel can influence the rendered transparency  for the entire Material<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-using-alpha.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-using-alpha_sml.jpg\" alt=\"Mid-render showing transparent areas now included\" width=\"640\" height=\"360\" border=\"0\" title=\"Mid-render showing transparent areas now included\" \/><\/a><\/p>\n<p>Mid-way through  rendering the  &#8216;ground&#8217; section is shown with a fully masked horizon as determined by the &#8216;transparency&#8217; and &#8216;alpha&#8217; settings of the Material (without these settings the image displays partial inclusion of the &quot;Diffuse&quot; colour, <a href=\"#finalimage\" title=\"Map rendered without properly setting up transparency\" target=\"_self\" rel=\"noopener\">bright-green in this instance<\/a>, where the image alpha-mask affects &quot;<b>Texture<\/b>&quot;  but not &quot;<b>Material<\/b>&quot; properties)<\/p>\n<p>            <a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-map-image-alpha.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-map-image-alpha_sml.jpg\" alt=\"Rerendered Environmant Map with transparency active\" width=\"640\" height=\"360\" border=\"0\" title=\"Rerendered Environmant Map with transparency active\" \/><\/a><\/p>\n<p>Final environment map rendered with skyline correctly defined by the image based alpha-mask and  transparency properties of the ground mesh and the Material assigned to it<\/p>\n<\/p><\/div>\n<p>          <a name=\"orientation\" id=\"orientation\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Organisation_Orientation\"><\/span>Organisation &amp; Orientation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The final rendered Environment Map  is essentially a flattened cube with the organisation and orientation of each tile determined by Blenders Global axes. This means;<\/p>\n<ul>\n<li>&quot;Front&quot; is on the positive &quot;Y&quot; axis (&quot;+Y&quot;, centre-top).<\/li>\n<li>&quot;Right&quot; is to the positive &quot;X&quot; axis (&quot;+X&quot;, right-top).<\/li>\n<li>&quot;Up\/Top&quot; is on the positive &quot;Z&quot; axis (&quot;+Z&quot;, centre-bottom).<\/li>\n<\/ul>\n<p>The upshot of this when using  the rendered images outside Blender typically means the map will need to be edited and the tiles rearranged to fit requirements and\/or cut into, and saved as, separate images where the use of a single map is not appropriate.<\/p>\n<blockquote>\n<p><b>Design note<\/b>:  tiles  currently cannot be reorganise from within Blender so some manual editing may be required, subject to the way &#8216;environment maps&#8217; are set up in the destination technology. The prospect of having to do this highlights one of the reasons <a href=\"#saving\" title=\"Saving environmant map\" target=\"_self\" rel=\"noopener\">lossless image formats should be used when saving   maps<\/a> as  compression and anti-aliasing  can cause  &#8216;bleed&#8217;, &#8216;smudging&#8217; and other visual artefacts that are tricky to correct effectively, especially between strong or bright colours, an issue that becomes more apparent where tiles need to  be cut up and rearranged.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-map-orientation.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/skybox\/render-map-orientation_sml.jpg\" alt=\"Orientation of each face of the Environmant Map\" width=\"640\" height=\"360\" border=\"0\" title=\"Orientation of each face of the Environmant Map\" \/><\/a><\/p>\n<p>The   organisation and orientation of each tile within the map  may differ between source (Blender) and destination technology (where the map is to be used) so some editing map be necessary, keeping in mind their respective  position relative to the whole<\/p>\n<\/p><\/div>\n<p>          <a name=\"summary\" id=\"summary\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Process_Summary\"><\/span>Process Summary<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The following is a summary of process to set up a simple Skybox in Blender to render an &quot;<b>Environment Map<\/b>&quot;. From the default Scene;<\/p>\n<ul>\n<li><b>Sky and Ground Domes<\/b>\n<ul>\n<li>add a UV Sphere, resize so the default Scene cubes easily fits within it.<\/li>\n<li>split the sphere into two separate objects, an upper and lower dome.<\/li>\n<li>resize the upper slight and overlap the lower.<\/li>\n<li>assign separate Materials to each upper and lower dome.<\/li>\n<li>add  an Image to the Materials (either  generated or  bitmap).<\/li>\n<li>UV unwrap the meshes using simple UV maps.<\/li>\n<li>assign the respective image the each UV map and object.<\/li>\n<li>set Materials as &quot;<b>Shadeless<\/b>&quot;.<\/li>\n<\/ul>\n<\/li>\n<li><b>EnvBox<\/b>\n<ul>\n<li>assign a new Material to default Scene Cube.<\/li>\n<li>set Material as &quot;<b>Shadeless<\/b>&quot;.<\/li>\n<li>switch Material &quot;<b>Type<\/b>&quot; to &quot;<b>Environment Map<\/b>&quot;.<\/li>\n<li>set  &quot;<b>Environment Map<\/b>&quot; properties as &quot;<b>Static<\/b>&quot;,  &quot;<b>Cube<\/b>&quot; and change &quot;<b>Resolution<\/b>&quot;.<\/li>\n<li>set &quot;<b>Viewpoint Object<\/b>&quot; to &quot;<b>Cube<\/b>&quot; (name of default cube).<\/li>\n<\/ul>\n<\/li>\n<li><b>Render Scene<\/b>\n<ul>\n<li>in &quot;<b>Render<\/b>&quot; Properties set image format to &quot;<b>tga<\/b>&quot; or other lossless format.<\/li>\n<li>click &quot;<b>Render<\/b>&quot; to process the Scene.<\/li>\n<li>save the results in &quot;<b>Texture<\/b>&quot; Properties.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>          <a name=\"conclusion\" id=\"conclusion\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The most basic form of Scene to set up and render is a sphere of two parts as described above. It works for purpose largely because of its simplicity, especially with respect to the way images are used and UV Mapped to each object. For more flexibility however, Scene can be more complex in terms of their general construction, separate objects being used for different elements. Scenes can also contain other items depending on what the background is eventually to represent, although care should be taken to avoid issues of &#8216;magnification&#8217; due to in-game projection mechanisms.<\/p>\n<p>          <a name=\"video\" id=\"video\"><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Video\"><\/span>Video<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The following video shows the basic process described in the above tutorial.<\/p>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/uVPsbPIXH9E?rel=0\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1703,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[285,276,277,368,369,440,372,298,441,373,371,374,29,239,260],"class_list":["post-1702","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-alpha-mask","tag-blender-2-5x","tag-blender-2-6x","tag-blender-internal","tag-blender-render","tag-envbox","tag-environment-map","tag-render","tag-render-properties","tag-shadeless","tag-skybox","tag-transparency","tag-tutorials","tag-uv-editing","tag-uv-image-editor"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts\/1702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/comments?post=1702"}],"version-history":[{"count":3,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts\/1702\/revisions"}],"predecessor-version":[{"id":1708,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts\/1702\/revisions\/1708"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/media\/1703"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/media?parent=1702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/categories?post=1702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/tags?post=1702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}