java
/
jMonkeyEngine-wiki
zrcadlo https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445
							<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]--><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Asciidoctor 1.5.4"><title>How to create free SkyMaps</title><link rel="stylesheet" href="./asciidoctor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./coderay-asciidoctor.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"><link rel="stylesheet" href="/home/travis/build/jMonkeyEngine/wiki/build/asciidoc/html5/jme3/advanced/twemoji-awesome.css"></head><body class="article toc2 toc-left"><div id="header"><div id="toolbar"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/src/docs/asciidoc/jme3/advanced/free_skymaps.adoc"><i class="fa fa-pencil-square" aria-hidden="true"></i></a><a href="https://github.com/jMonkeyEngine/wiki/new/master/src/docs/asciidoc/jme3/advanced/"><i class="fa fa-plus-square" aria-hidden="true"></i></a><input dir="auto" style="position: relative; vertical-align: top;" spellcheck="false" autocomplete="off" class="searchbox__input aa-input" id="doc-search" name="search" placeholder="Search in the doc" required="required" type="search"></div><h1>How to create free SkyMaps</h1><div class="details"><span class="author" id="author"></span><br><span id="revnumber">version ,</span> <span id="revdate">2017/04/4 10:23</span></div><div id="toc" class="toc2"><div id="toctitle">Table of Contents</div><ul class="sectlevel1"><li><a href="#blender">Blender</a></li><li><a href="#gimp">Gimp</a></li></ul></div></div><div id="content"><div id="preamble"><div class="sectionbody"><div class="paragraph"><p>There are a plethora of ways to create skymaps with varying levels of difficulty and expense. The <a href="http://planetside.co.uk/">Terragen</a> program has been mentioned as one way to do so but it is now limited in its use and for commercial purposes is not free. Another program, <a href="https://www.daz3d.com/bryce-7-pro">Bryce</a>, is also not free and seems to of stalled in development based off there only being a 32bit version available. Maybe they are doing things behind the scenes but its still not a free program. This articles intent is to give the JME3 user other options for the creation of skymaps using the free programs Blender and Gimp. It is not the be all, end all of skymap creation. If you know of better methods or tools please feel free to share your wisdom on the <a href="https://hub.jmonkeyengine.org/">forums</a>.</p></div></div></div>
<div class="sect1"><h2 id="blender">Blender</h2><div class="sectionbody"><div class="paragraph"><p>Using Blender you can create your skymaps for free. Once <a href="https://www.blender.org/">Blender</a> is setup, your skymaps creation can be done easily. For this article I will go into detail on how to setup Blender to create Angular maps based off a video produced by jMonkey contributor glaucomardano and mentioned in this <a href="https://hub.jmonkeyengine.org/t/jmonkeyengine-tutorial-how-to-create-skymaps-using-blender/19313">forum post</a>. Contributor glaucomardano did a good job on the video but it requires previous knowledge of Blender to be able to easily follow along. As such, I will translate it to paper for you. You can view his video by following this link: <a href="https://youtu.be/z38Aikz5nE8">jMonkeyEngine Tutorial - How to create skymaps using blender</a>.</p></div>
<div class="admonitionblock note"><table><tr><td class="icon"><i class="fa icon-note" title="Note"></i></td><td class="content"><div class="paragraph"><p>This tutorial is an adaptation of contributor glaucomardanos production, not an exact duplicate.<br>
These steps assume you&#8217;re using the default blender setup and apply to vers 2.78c+.<br>
The tutorial is in checklist format so you can mark items as you go to keep your place.</p></div></td></tr></table></div>
<div class="ulist checklist"><div class="title">Blender Skybox Checklist</div>
<ul class="checklist"><li><p><input type="checkbox" data-item-complete="0"> Start with a new file in blender.</p></li><li><p><input type="checkbox" data-item-complete="0"> Select the lamp and the default cube in the 3d view or in the Outliner panel (top-right panel) and delete them: <kbd>X</kbd>. They are not needed for this procedure.</p></li><li><p><input type="checkbox" data-item-complete="0"> Select the camera object in the 3d view or in the Outliner panel then clear its location and rotation by using keyboard shortcuts <kbd>Alt</kbd>+<kbd>G</kbd> and <kbd>Alt</kbd>+<kbd>R</kbd>.</p></li><li><p><input type="checkbox" data-item-complete="0"> In the properties panel (lower-right panel) select the Object tab (orange box). This will give you a visual perspective of the camera changes you are about to make.</p></li><li><p><input type="checkbox" data-item-complete="0"> Rename the Camera to Camera-north.</p></li><li><p><input type="checkbox" data-item-complete="0"> With your cursor inside the 3d view, change to top-ortho view by pressing <kbd>NumPad 7</kbd> followed by <kbd>NumPad 5</kbd>.</p></li><li><p><input type="checkbox" data-item-complete="0"> With the camera still selected, press <kbd>R</kbd> immediately followed by <kbd>X</kbd> immediately followed by 90 immediately followed by <kbd>Enter</kbd> to rotate the camera 90 degrees around the X axis.</p></li><li><p><input type="checkbox" data-item-complete="0"> With the camera still selected, press <kbd>Shift</kbd>+<kbd>D</kbd>. This will duplicate the camera. Next press <kbd>Enter</kbd> to set the selection.</p></li><li><p><input type="checkbox" data-item-complete="0"> Press <kbd>R</kbd> immediately followed by 180 immediately followed by <kbd>Enter</kbd>. This will rotate the camera 180 degrees around the Z axis. Rename this camera to Camera-south.</p></li><li><p><input type="checkbox" data-item-complete="0"> With the camera still selected, press <kbd>Shift</kbd>+<kbd>D</kbd>. This will duplicate the camera. Next press <kbd>Enter</kbd> to set the selection.</p></li><li><p><input type="checkbox" data-item-complete="0"> With the camera still selected, press <kbd>R</kbd> immediately followed by 90 immediately followed by <kbd>Enter</kbd>. This will rotate the camera another 90 degrees around the Z axis. Rename this camera to Camera-west.</p></li><li><p><input type="checkbox" data-item-complete="0"> With the camera still selected, press <kbd>Shift</kbd>+<kbd>D</kbd>. This will duplicate the camera. Next press <kbd>Enter</kbd> to set the selection.  </p></li><li><p><input type="checkbox" data-item-complete="0"> With the camera still selected, press <kbd>R</kbd> immediately followed by -180 immediately followed by <kbd>Enter</kbd>. This will rotate the camera -180 degrees around the Z axis. Rename this camera to Camera-east.</p></li><li><p><input type="checkbox" data-item-complete="0"> With your mouse inside the 3d view change your view to right-ortho by entering <kbd>NumPad 3</kbd>.</p></li><li><p><input type="checkbox" data-item-complete="0"> Select Camera-south in 3d view or in the Outliner panel (top-right panel) and press <kbd>Shift</kbd>+<kbd>D</kbd>. This will duplicate the camera. Next press <kbd>Enter</kbd> to set the selection.</p></li><li><p><input type="checkbox" data-item-complete="0"> With the camera still selected, press <kbd>R</kbd> immediately followed by 90 immediately followed by <kbd>Enter</kbd>. This will rotate the camera 90 degrees around the X axis. The camera should now be pointing up. Rename this camera to Camera-up.</p></li><li><p><input type="checkbox" data-item-complete="0"> With the camera still selected, press <kbd>Shift</kbd>+<kbd>D</kbd>. This will duplicate the camera. Next press <kbd>Enter</kbd> to set the selection.</p></li><li><p><input type="checkbox" data-item-complete="0"> With the camera still selected, press <kbd>R</kbd> immediately followed by 180 immediately followed by <kbd>Enter</kbd>. This will rotate the camera 180 degrees along the X axis. The camera should now be facing down. Rename this camera to Camera-down.</p></li><li><p><input type="checkbox" data-item-complete="0"> Save your file.</p></li></ul></div>
<div class="ulist checklist"><div class="title">Angular Map</div>
<ul class="checklist"><li><p><input type="checkbox" data-item-complete="0"> Open up a web browser and search for "free high res skymap" and select a Angular map of your choice or you can find some here at <a href="https://blenderartists.org/forum/showthread.php?24038-Free-high-res-skymaps-%2528Massive-07-update!%2529">https://blenderartists.org/forum/showthread.php?24038-Free-high-res-skymaps-%2528Massive-07-update!%2529</a> instead. Remember to select an <strong>ANGULAR</strong> map.</p></li><li><p><input type="checkbox" data-item-complete="0"> Save a map to your pc in a place you can easily locate it from later in blender.</p></li></ul></div>
<div class="ulist checklist"><div class="title">Textures Tab</div>
<ul class="checklist"><li><p><input type="checkbox" data-item-complete="0"> From the properties panel (bottom-right panel) select the Textures tab (red-white checkerboard) then press the new button to create a new texture. Rename this texture to AngMap.</p></li><li><p><input type="checkbox" data-item-complete="0"> Under the Image panel select open and navigate to the file you saved earlier.</p></li><li><p><input type="checkbox" data-item-complete="0"> In the Mapping panel select AngMap from the drop down box.</p></li><li><p><input type="checkbox" data-item-complete="0"> In the Influence panel de-select blend (ble) and select horizon (hor).</p></li></ul></div>
<div class="ulist checklist"><div class="title">Data Tab</div>
<ul class="checklist"><li><p><input type="checkbox" data-item-complete="0"> From the properties panel select the Data tab (reel to reel camera).</p></li><li><p><input type="checkbox" data-item-complete="0"> In the lens panel change the Focal Lens value from 35 to 16. Do this for every camera.</p></li></ul></div>
<div class="ulist checklist"><div class="title">Render Tab</div>
<ul class="checklist"><li><p><input type="checkbox" data-item-complete="0"> From the properties panel select the Render tab (normal looking camera).</p></li><li><p><input type="checkbox" data-item-complete="0"> In the Dimensions panel set the resolution to any number that is a power of 2. For this example 1024 x 1024.</p></li><li><p><input type="checkbox" data-item-complete="0"> Slide the resolution scale to 100%.</p></li><li><p><input type="checkbox" data-item-complete="0"> In the Output panel change the image type to JPEG. I have found out by trial and error that using a JPEG file has the same image quality as a PNG or DDS file but with a huge difference in image size. A single PNG image will clock in at over 8mb to the JPEG size of 325kb. Even converting to a DDS file comes in at over 3mb for comparison (using RGB888 as is recommended by Momoko_Fan/Core Developer in this <a href="https://hub.jmonkeyengine.org/t/best-dds-format-for-skyfactory/17668/2">forum post</a>) with no gain in image quality that I could see. Your welcome to experiment on your own if you wish.</p></li><li><p><input type="checkbox" data-item-complete="0"> Set the image format to RGB.</p></li><li><p><input type="checkbox" data-item-complete="0"> Setting the quality slider has the effect of reducing the image size where 0 is maximum compression and 100 is no compression. In this example, setting it to 0 reduced the image sizes to less than 125kb, once again with no discernable image degradation that I could see.</p></li></ul></div>
<div class="ulist checklist"><div class="title">World Tab</div>
<ul class="checklist"><li><p><input type="checkbox" data-item-complete="0"> In the properties panel select the World tab.</p></li><li><p><input type="checkbox" data-item-complete="0"> Check the Real Sky toggle.</p></li></ul></div>
<div class="ulist checklist"><div class="title">Map Generator Setup</div>
<ul class="checklist"><li><p><input type="checkbox" data-item-complete="0"> From the header at the top of the 3d view click the <b class="button">Choose Screen Layout</b> button next to the word <code>Default</code> and select <code>Split Verticle F/R</code>.</p></li><li><p><input type="checkbox" data-item-complete="0"> Click the <code>+</code> sign to create a new layout.</p></li><li><p><input type="checkbox" data-item-complete="0"> Rename this new layout Angular Map Generator or a name of your choosing.</p></li><li><p><input type="checkbox" data-item-complete="0"> In the left side 3d view, at the bottom, next to the word view, is the <b class="button">Current Editor Type</b> button. Click it and change it to <code>UV/Image Editor</code>.</p></li><li><p><input type="checkbox" data-item-complete="0"> Place your mouse inside the right side 3d view and press <kbd>NumPad 5</kbd> to toggle ortho view. You&#8217;re now setup to render your Angular map.</p></li><li><p><input type="checkbox" data-item-complete="0"> Save your file.</p></li></ul></div>
<div class="ulist checklist"><div class="title">Rendering And Saving</div>
<ul class="checklist"><li><p><input type="checkbox" data-item-complete="0"> With your first camera selected (in this case Camera-down) and your mouse inside the right side 3d view, press <kbd>Ctrl</kbd>+<kbd>NumPad 0</kbd> to set your selected camera to be the active camera. </p></li><li><p><input type="checkbox" data-item-complete="0"> Press <kbd>F12</kbd> to render the scene. A image will appear in the left side UV/Image Editor.</p></li><li><p><input type="checkbox" data-item-complete="0"> With your mouse inside the left side UV/Image Editor you can scroll in or out to center the view.</p></li><li><p><input type="checkbox" data-item-complete="0"> With your mouse inside the left side UV/Image Editor press <kbd>F3</kbd> to save your image. Rename the image (down.jpg in this case).</p></li></ul></div>
<div class="paragraph"><p>Follow this same procedure for the remaining cameras. Rendering, renaming and saving each. After you have rendered all your images you can copy and paste them into your asset folder for JME3. Usually under the <code>Assets/Texture</code> directory.</p></div>
<div class="paragraph"><p>To use your images in your code, in simpleInitApp(), load the Textures and use the SkyFactory to create your sky.</p></div>
<div class="listingblock"><div class="content"><pre class="CodeRay highlight"><code data-lang="java">Texture west = getAssetManager().loadTexture(<span class="string"><span class="delimiter">&quot;</span><span class="content">Textures/Sky/west.jpg</span><span class="delimiter">&quot;</span></span>);
Texture east = getAssetManager().loadTexture(<span class="string"><span class="delimiter">&quot;</span><span class="content">Textures/Sky/east.jpg</span><span class="delimiter">&quot;</span></span>);
Texture north = getAssetManager().loadTexture(<span class="string"><span class="delimiter">&quot;</span><span class="content">Textures/Sky/north.jpg</span><span class="delimiter">&quot;</span></span>);
Texture south = getAssetManager().loadTexture(<span class="string"><span class="delimiter">&quot;</span><span class="content">Textures/Sky/south.jpg</span><span class="delimiter">&quot;</span></span>);
Texture up = getAssetManager().loadTexture(<span class="string"><span class="delimiter">&quot;</span><span class="content">Textures/Sky/up.jpg</span><span class="delimiter">&quot;</span></span>);
Texture down = getAssetManager().loadTexture(<span class="string"><span class="delimiter">&quot;</span><span class="content">Textures/Sky/down.jpg</span><span class="delimiter">&quot;</span></span>);
getRootNode().attachChild(SkyFactory.createSky(getAssetManager(), west, east, north, south, up, down));</code></pre></div></div>
<div class="paragraph"><p>Many thanks go out to contributor glaucomardano for his video. He has excellent taste in music.</p></div>
<div class="paragraph"><p>Listed below are other Blender tutorials JME3 users may find valuable.</p></div>
<div class="ulist"><ul><li><p><a href="https://www.katsbits.com/tutorials/blender/cycles-skybox.php">Render a Skybox using Cycles</a></p></li><li><p><a href="https://www.katsbits.com/tutorials/blender/render-skybox.php">Render a Skybox Environment Map</a></p></li></ul></div></div></div>
<div class="sect1"><h2 id="gimp">Gimp</h2><div class="sectionbody"><div class="paragraph"><p>You can use <a href="https://www.gimp.org/">Gimp</a> to create SkyMaps from a single image with the addition of 2 scripts.</p></div>
<div class="ulist"><ul><li><p><a href="https://code.google.com/archive/p/gimp-dds/">Gimp-dds</a></p></li><li><p><a href="http://registry.gimp.org/node/25532">Cubemap Layers Generator</a></p></li></ul></div>
<div class="paragraph"><p>After installing the scripts you open a image in gimp. This script works by slicing up the image into 6 layers of equal size, each by the power of 2.</p></div>
<div class="olist arabic"><ol class="arabic"><li><p>After you open the image you select <code><span class="menuseq"><span class="menu">Filters</span>&#160;&#9656; <span class="submenu">Generic</span>&#160;&#9656; <span class="menuitem">Cubemap Layers Generator</span></span></code>.</p></li><li><p>Fill in the details as follows.</p><div class="ulist"><ul><li><p>Source: navigate to the image you are slicing.</p></li><li><p>Cubemap layout: <code>Cross Horizontal</code></p></li><li><p>2 to the power of: <code>10</code> (for 1024 sized Layers)</p></li></ul></div></li><li><p>Press <b class="button">OK</b> to slice up the image.</p></li><li><p>Select <code><span class="menuseq"><span class="menu">File</span>&#160;&#9656; <span class="menuitem">Export As</span></span></code> and change the <code>Name</code> and <code>File Type</code> to <code>.dds</code>. Choose your save location, typically <code>Assets/Textures</code>.</p></li><li><p>Press <b class="button">Export</b>.</p></li><li><p>A DDS panel will open. Apply the following settings:</p><div class="ulist"><ul><li><p>Compression: <code>None</code></p></li><li><p>Format: <code>RGB8</code></p></li><li><p>Save: <code>As cube map</code></p></li><li><p>MipMaps: <code>No mipmaps</code></p></li></ul></div></li><li><p>Press <b class="button">OK</b> to export.</p></li></ol></div>
<div class="paragraph"><p>You attach the exported image to your scene as is explained in the <a href="../../jme3/advanced/sky.html">How to add a Sky to your Scene</a> tutorial.</p></div></div></div></div><div id="footer"><div id="footer-text">Version <br>Last updated 2019-12-20 23:30:51 +00:00</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script><script>docsearch({
  apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  indexName: 'jmonkeyengine',
  inputSelector: '#doc-search',
  debug: false // Set debug to true if you want to inspect the dropdown
});</script></body></html>