QGameDev add tutorial

fynv · May 16, 2023 · 503a31b · 503a31b
1 parent e26b6c2
commit 503a31b
Show file tree

Hide file tree

Showing 67 changed files with 325 additions and 6 deletions.
diff --git a/LightmapCompressor/main.cpp b/LightmapCompressor/main.cpp
@@ -71,7 +71,7 @@ int main(int argc, char* argv[])
 {
 	if (argc < 2)
 	{
-		printf("LightmapCompressor input.hdr [output_prefix] [jpeg\png\webp]\n");
+		printf("LightmapCompressor input.hdr [output_prefix] [jpeg\\png\\webp]\n");
 		return 0;
 	}
 

diff --git a/QBin/help/atlas_model.jpg b/QBin/help/atlas_model.jpg
diff --git a/QBin/help/avatar_models.jpg b/QBin/help/avatar_models.jpg
diff --git a/QBin/help/camera_control.jpg b/QBin/help/camera_control.jpg
diff --git a/QBin/help/deploy_models.jpg b/QBin/help/deploy_models.jpg
diff --git a/QBin/help/deploy_models2.jpg b/QBin/help/deploy_models2.jpg
diff --git a/QBin/help/deploy_models3.jpg b/QBin/help/deploy_models3.jpg
diff --git a/QBin/help/deploy_models4.jpg b/QBin/help/deploy_models4.jpg
diff --git a/QBin/help/index.html b/QBin/help/index.html
@@ -1256,6 +1256,7 @@
 <li><a href="#logs">Logs</a></li>
 </ul>
 </li>
+<li><a href="#lightmap-tools">Lightmap tools</a></li>
 </ul>
 </li>
 </ul>
@@ -1299,12 +1300,36 @@ <h3 class="atx" id="side-bar">Side Bar</h3>
 <p>Right click the Target item at ② for context menu, where you get options to run the target or create a shortcut of the App on the desktop. To run the target, you can also just double click the item. A bundling process will be triggered by calling the external "rollup" tool if a JavaScript file is modified. A separate process will be started by launching the GamePlayer passing the information of the target. Note the bundled JavaScript files are hidden in the "Files" tab, because you should never edit these files manually.</p>
 <h3 class="atx" id="editors">Editors</h3>
 <p>GameDev provides editors for file formats most commonly used in a Three.V8 project, which are JavaScript, XML and JSON. </p>
-<p>In this IDE, we use specifically structured XML files to represent 3D Scenes and a dedicated <a href="scene_editor.html">scene editor</a> is provided.</p>
+<p>In this IDE, we use specifically structured XML files to represent 3D Scenes and a dedicated <a href="scene_editor.html">scene editor</a> is provided. Besides the basic functionality of placing object into your scene, the XML editor also integrates global illumination pre-baking functions, which is powered by a compute-shader based ray-tracing system (CWBVH).</p>
+<p>Also see <a href="tutorials.html">tutorials</a> for a walk-through of the usage of the editors.</p>
 <h3 class="atx" id="logs">Logs</h3>
 <p>Currently the "Console" tab of the log areas mainly shows outputs from the bundling process and the scene editor.</p>
 <p>Since that a running Target has its own process (QGamePlayer.exe), their outputs can be seen in their own consoles.</p>
 <p><img alt="" src="gameplayer.jpg"></p>
 <p>The console of the GamePlayer is hidden by default, and can be shown by dragging.</p>
+<h2 class="atx" id="lightmap-tools">Lightmap tools</h2>
+<p>There are 2 command-line tools related to lightmaps: </p>
+<ul>
+<li>Lightmapper.exe for creation of the 2nd UV set.</li>
+</ul>
+<p>The command line looks like:</p>
+<pre><code class="fenced-code-block">Lightmapper input.glb [output.glb] [texels_per_unit]</code></pre>
+<p>Both input and output are glb files. The 2nd UV set will be inserted as TEXCOORD_1.</p>
+<p>"texels_per_unit" is a resolution hint. See <a href="https://github.com/jpcy/xatlas">xatlas</a> for detail.</p>
+<ul>
+<li>LightmapCompressor.exe for compressing pre-baked lightmap images.</li>
+</ul>
+<pre><code class="fenced-code-block">LightmapCompressor input.hdr [output_prefix] [jpeg\png\webp]</code></pre>
+<p>LightmapCompressor takes a RGBE HDR file for input. 2 compression modes are supported.</p>
+<ul>
+<li>Cascaded residual encoding using <a href="https://fynv.github.io/Cascaded-Residual-Encoding-for-HDR-Lightmap-Compression/">this method</a>.</li>
+</ul>
+<p>This is the default mode. Pass in "jpeg" after output_prefix, or omit it.</p>
+<ul>
+<li>RGBM compression</li>
+</ul>
+<p>RGBM compression requires lossless alpha. PNG and WebP can achieve that.</p>
+<p>Pass in "png" or "webp" after output_prefix.</p>
 </article>
 </body>
 </html>
diff --git a/QBin/help/new_file.jpg b/QBin/help/new_file.jpg
diff --git a/QBin/help/new_file_xml.jpg b/QBin/help/new_file_xml.jpg
diff --git a/QBin/help/new_file_xml2.jpg b/QBin/help/new_file_xml2.jpg
diff --git a/QBin/help/new_project.jpg b/QBin/help/new_project.jpg
diff --git a/QBin/help/new_project2.jpg b/QBin/help/new_project2.jpg
diff --git a/QBin/help/new_project3.jpg b/QBin/help/new_project3.jpg
diff --git a/QBin/help/new_sky.jpg b/QBin/help/new_sky.jpg
diff --git a/QBin/help/run_target.jpg b/QBin/help/run_target.jpg
diff --git a/QBin/help/scene2.jpg b/QBin/help/scene2.jpg
diff --git a/QBin/help/scene2_2.jpg b/QBin/help/scene2_2.jpg
diff --git a/QBin/help/scene2_3.jpg b/QBin/help/scene2_3.jpg
diff --git a/QBin/help/scene2_4.jpg b/QBin/help/scene2_4.jpg
diff --git a/QBin/help/scene2_5.jpg b/QBin/help/scene2_5.jpg
diff --git a/QBin/help/scripting.jpg b/QBin/help/scripting.jpg
diff --git a/QBin/help/scripting2.jpg b/QBin/help/scripting2.jpg
diff --git a/QBin/help/set_directional_light.jpg b/QBin/help/set_directional_light.jpg
diff --git a/QBin/help/set_directional_light2.jpg b/QBin/help/set_directional_light2.jpg
diff --git a/QBin/help/set_probe_grid.jpg b/QBin/help/set_probe_grid.jpg
diff --git a/QBin/help/set_probe_grid2.jpg b/QBin/help/set_probe_grid2.jpg
diff --git a/QBin/help/set_sky_box.jpg b/QBin/help/set_sky_box.jpg
diff --git a/QBin/help/set_sky_box2.jpg b/QBin/help/set_sky_box2.jpg
diff --git a/QBin/help/sky_box_images.jpg b/QBin/help/sky_box_images.jpg
diff --git a/QBin/help/tutorials.html b/QBin/help/tutorials.html
@@ -1242,7 +1242,89 @@
   <style>.markdown-body{}pre.front-matter{display:none!important;}</style>
 </head>
 <body>
-  <article class="markdown-body"><h1 class="atx" id="tutorial">Tutorial</h1>
+  <article class="markdown-body"><h1 class="atx" id="tutorials">Tutorials</h1>
+<h2 class="atx" id="new-project">New Project</h2>
+<p><img alt="" src="new_project.jpg"></p>
+<p><img alt="" src="new_project2.jpg"></p>
+<p><img alt="" src="new_project3.jpg"></p>
+<h2 class="atx" id="new-xml-scene">New XML Scene</h2>
+<p><img alt="" src="new_file.jpg"></p>
+<p><img alt="" src="new_file_xml.jpg"></p>
+<p><img alt="" src="new_file_xml2.jpg"></p>
+<h2 class="atx" id="set-up-sky">Set-up sky</h2>
+<p><img alt="" src="new_sky.jpg"></p>
+<h3 class="atx" id="deploy-sky-box-images">Deploy sky-box images</h3>
+<p><img alt="" src="sky_box_images.jpg"></p>
+<p><img alt="" src="set_sky_box.jpg"></p>
+<p><img alt="" src="set_sky_box2.jpg"></p>
+<h2 class="atx" id="delploy-models">Delploy models</h2>
+<p>Here we just load a single GLB model that contains all the static objects.</p>
+<p><img alt="" src="deploy_models.jpg"></p>
+<p><img alt="" src="deploy_models2.jpg"></p>
+<p><img alt="" src="deploy_models3.jpg"></p>
+<p><img alt="" src="deploy_models4.jpg"></p>
+<h2 class="atx" id="setup-directional-light">Setup directional light</h2>
+<p><img alt="" src="set_directional_light.jpg"></p>
+<p><img alt="" src="set_directional_light2.jpg"></p>
+<h2 class="atx" id="global-illumination---deploy-a-probe-grid">Global illumination - Deploy a probe-grid</h2>
+<p><img alt="" src="set_probe_grid.jpg"></p>
+<p><img alt="" src="set_probe_grid2.jpg"></p>
+<h2 class="atx" id="scripting">Scripting</h2>
+<p>Copy code from "project_template" to the project directory. (Skip project.json and scene.xml).</p>
+<p><img alt="" src="scripting.jpg"></p>
+<p>Create a target:</p>
+<p><img alt="" src="scripting2.jpg"></p>
+<p>Double click the created target:</p>
+<p><img alt="" src="run_target.jpg"></p>
+<p>You can then do whatever change you want to the JavaScript code.</p>
+<p>It is programmed against the <a href="api/index.html">User Script APIs</a>.</p>
+<h2 class="atx" id="camera-and-orbit-control-settings">Camera and Orbit Control settings</h2>
+<p>These are not part of the Scene editor UI.</p>
+<p>Simply type into the XML code:</p>
+<p><img alt="" src="camera_control.jpg"></p>
+<h2 class="atx" id="placing-an-avatar">Placing an avatar</h2>
+<p>Deploy the necessary models:</p>
+<p><img alt="" src="avatar_models.jpg"></p>
+<p>Insert the following code to the scene.xml:</p>
+<pre><code class="fenced-code-block language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>avatar</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>assets/models/CyberbotGold.glb<span class="token punctuation">"</span></span> <span class="token attr-name">name_idle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>idle<span class="token punctuation">"</span></span> <span class="token attr-name">name_forward</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>walk_forward<span class="token punctuation">"</span></span> <span class="token attr-name">name_backward</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>walk_backward<span class="token punctuation">"</span></span> <span class="token attr-name">camera_position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.0, 1.5, -2.0<span class="token punctuation">"</span></span> <span class="token attr-name">url_anim</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>assets/models/Animations.glb<span class="token punctuation">"</span></span> <span class="token attr-name">fix_anims</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fix_anims<span class="token punctuation">"</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0, 1.8, 2.5<span class="token punctuation">"</span></span> <span class="token attr-name">rotation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0, -180, 0<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span></code></pre>
+<p>and the following code to scene.js</p>
+<pre><code class="fenced-code-block language-js"><span class="token comment">// The code is necessary only when the animation track names doesn't match</span>
+<span class="token comment">// the joint names in the character model.</span>
+<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">fix_anims</span><span class="token punctuation">(</span><span class="token parameter">anims</span><span class="token punctuation">)</span>
+<span class="token punctuation">{</span>
+    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> anim <span class="token keyword">of</span> anims<span class="token punctuation">)</span>
+    <span class="token punctuation">{</span>
+        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">"translations"</span> <span class="token keyword">in</span> anim<span class="token punctuation">)</span>
+        <span class="token punctuation">{</span>
+            <span class="token keyword">let</span> translations <span class="token operator">=</span> anim<span class="token punctuation">.</span>translations<span class="token punctuation">;</span>
+            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> trans <span class="token keyword">of</span> translations<span class="token punctuation">)</span>
+            <span class="token punctuation">{</span>
+                trans<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"mixamorig:"</span><span class="token operator">+</span>trans<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+
+        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">"rotations"</span> <span class="token keyword">in</span> anim<span class="token punctuation">)</span>
+        <span class="token punctuation">{</span>
+            <span class="token keyword">let</span> rotations <span class="token operator">=</span> anim<span class="token punctuation">.</span>rotations<span class="token punctuation">;</span>
+            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> rot <span class="token keyword">of</span> rotations<span class="token punctuation">)</span>
+            <span class="token punctuation">{</span>
+                rot<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"mixamorig:"</span><span class="token operator">+</span>rot<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></code></pre>
+<h2 class="atx" id="using-lightmaps">Using lightmaps</h2>
+<p>Using Lightmapper.exe, you can insert a 2nd UV set into villa.glb. In this way, we get villa_atlas.glb:</p>
+<p><img alt="" src="atlas_model.jpg"></p>
+<p>Create a new XML scene (scene2.xml) and copy &lt;sky&gt;, &lt;model&gt; and &lt;directional_light&gt; settings from scene.xml:</p>
+<p><img alt="" src="scene2.jpg"></p>
+<p>Modify villa.glb into villa_atlas.glb, the go to "Scene" tab:</p>
+<p><img alt="" src="scene2_2.jpg"></p>
+<p>Name the lightmap, then select "scene" in the Scene Graph, and click "Bake":</p>
+<p><img alt="" src="scene2_3.jpg"></p>
+<p>Modify scene.js so that scene2.xml gets load instead of scene.xml, when you double click "Target":</p>
+<p><img alt="" src="scene2_4.jpg"></p>
+<p><img alt="" src="scene2_5.jpg"></p>
 </article>
 </body>
 </html>
diff --git a/QGameDev/CMakeLists.txt b/QGameDev/CMakeLists.txt
@@ -218,7 +218,7 @@ set (DEFINES  ${DEFINES}
 include_directories(${INCLUDE_DIR})
 add_definitions(${DEFINES})
 add_executable (QGameDev ${SOURCES} ${HEADERS})
-set_property(TARGET QGameDev PROPERTY WIN32_EXECUTABLE false)
+set_property(TARGET QGameDev PROPERTY WIN32_EXECUTABLE true)
 
 target_link_directories(QGameDev PUBLIC ${LINK_DIR})
 target_link_libraries(QGameDev ${LINK_LIBS})

diff --git a/QGameDev/MainWindow.cpp b/QGameDev/MainWindow.cpp
@@ -323,6 +323,7 @@ MainWindow::MainWindow(QApplication* app)
 
 	connect(m_ui.action_View_Help, SIGNAL(triggered()), this, SLOT(CommandHelp()));
 	connect(m_ui.actionThree_V8_API, SIGNAL(triggered()), this, SLOT(CommandAPIDoc()));
+	connect(m_ui.actionTutorials, SIGNAL(triggered()), this, SLOT(CommandTutorials()));
 
 	connect(m_ui.tree_files, SIGNAL(customContextMenuRequested(const QPoint&)), this, SLOT(TreeFilesContextMenu(const QPoint&)));
 	connect(m_ui.tree_files, SIGNAL(itemDoubleClicked(QTreeWidgetItem*, int)), this, SLOT(TreeFilesItemDoubleClick(QTreeWidgetItem*, int)));
@@ -689,6 +690,25 @@ void MainWindow::CommandAPIDoc()
 	}
 }
 
+void MainWindow::CommandTutorials()
+{
+	QString local_path = QCoreApplication::applicationDirPath();
+	QString help_path = local_path + "/help/tutorials.html";
+	QString key_path = local_path + "/help/index.html";
+
+	if (opened_tabs.contains(key_path))
+	{
+		HelpPage* help_page = static_cast<HelpPage*>(opened_tabs[key_path]);
+		m_ui.tabWidgetEditor->setCurrentWidget(help_page);
+		help_page->Goto(help_path);
+	}
+	else
+	{
+		HelpPage* help_page = new HelpPage(m_ui.tabWidgetEditor, help_path);
+		AddTabItem(help_page, key_path, "Help");
+	}
+}
+
 void MainWindow::OpenJavaScript(QString file_path)
 {	
 	if (opened_tabs.contains(file_path))

diff --git a/QGameDev/MainWindow.h b/QGameDev/MainWindow.h
@@ -97,6 +97,7 @@ private slots:
 	void CommandProjectSettings();
 	void CommandHelp();
 	void CommandAPIDoc();	
+	void CommandTutorials();
 	void TrashDir(QString path);
 	void TreeFilesContextMenu(const QPoint& pos);
 	void TreeFilesItemDoubleClick(QTreeWidgetItem* item, int column);

diff --git a/QGameDev/MainWindow.ui b/QGameDev/MainWindow.ui
@@ -323,6 +323,7 @@
     </property>
     <addaction name="action_View_Help"/>
     <addaction name="actionThree_V8_API"/>
+    <addaction name="actionTutorials"/>
    </widget>
    <widget class="QMenu" name="menu_Project">
     <property name="title">
@@ -609,6 +610,11 @@
     <string>Ctrl+L</string>
    </property>
   </action>
+  <action name="actionTutorials">
+   <property name="text">
+    <string>Tutorials</string>
+   </property>
+  </action>
  </widget>
  <resources>
   <include location="resources/resources.qrc"/>

diff --git a/QGameDev/docs/atlas_model.jpg b/QGameDev/docs/atlas_model.jpg
diff --git a/QGameDev/docs/avatar_models.jpg b/QGameDev/docs/avatar_models.jpg
diff --git a/QGameDev/docs/camera_control.jpg b/QGameDev/docs/camera_control.jpg
diff --git a/QGameDev/docs/deploy_models.jpg b/QGameDev/docs/deploy_models.jpg
diff --git a/QGameDev/docs/deploy_models2.jpg b/QGameDev/docs/deploy_models2.jpg
diff --git a/QGameDev/docs/deploy_models3.jpg b/QGameDev/docs/deploy_models3.jpg
diff --git a/QGameDev/docs/deploy_models4.jpg b/QGameDev/docs/deploy_models4.jpg
diff --git a/QGameDev/docs/index.md b/QGameDev/docs/index.md
@@ -10,6 +10,7 @@ GameDev is an IDE for Three.V8, the JavaScript based 3D application engine.
     - [Side Bar](#side-bar)
     - [Editors](#editors)
     - [Logs](#logs)
+  - [Lightmap tools](#lightmap-tools)
 
 See [Scene Editor](scene_editor.html) for details of the XML based scene-editor.
 
@@ -81,7 +82,9 @@ Right click the Target item at ② for context menu, where you get options to ru
 
 GameDev provides editors for file formats most commonly used in a Three.V8 project, which are JavaScript, XML and JSON. 
 
-In this IDE, we use specifically structured XML files to represent 3D Scenes and a dedicated [scene editor](scene_editor.html) is provided.
+In this IDE, we use specifically structured XML files to represent 3D Scenes and a dedicated [scene editor](scene_editor.html) is provided. Besides the basic functionality of placing object into your scene, the XML editor also integrates global illumination pre-baking functions, which is powered by a compute-shader based ray-tracing system (CWBVH).
+
+Also see [tutorials](tutorials.html) for a walk-through of the usage of the editors.
 
 ### Logs 
 
@@ -93,6 +96,40 @@ Since that a running Target has its own process (QGamePlayer.exe), their outputs
 
 The console of the GamePlayer is hidden by default, and can be shown by dragging.
 
+## Lightmap tools
+
+There are 2 command-line tools related to lightmaps: 
+
+* Lightmapper.exe for creation of the 2nd UV set.
+
+The command line looks like:
+
+```
+Lightmapper input.glb [output.glb] [texels_per_unit]
+```
+
+Both input and output are glb files. The 2nd UV set will be inserted as TEXCOORD_1.
+
+"texels_per_unit" is a resolution hint. See [xatlas](https://github.com/jpcy/xatlas) for detail.
+
+* LightmapCompressor.exe for compressing pre-baked lightmap images.
+
+```
+LightmapCompressor input.hdr [output_prefix] [jpeg\png\webp]
+```
+
+LightmapCompressor takes a RGBE HDR file for input. 2 compression modes are supported.
+
+* Cascaded residual encoding using [this method](https://fynv.github.io/Cascaded-Residual-Encoding-for-HDR-Lightmap-Compression/).
+
+This is the default mode. Pass in "jpeg" after output_prefix, or omit it.
+
+* RGBM compression
+
+RGBM compression requires lossless alpha. PNG and WebP can achieve that.
+
+Pass in "png" or "webp" after output_prefix.
+
 
 
 

diff --git a/QGameDev/docs/new_file.jpg b/QGameDev/docs/new_file.jpg
diff --git a/QGameDev/docs/new_file_xml.jpg b/QGameDev/docs/new_file_xml.jpg
diff --git a/QGameDev/docs/new_file_xml2.jpg b/QGameDev/docs/new_file_xml2.jpg
diff --git a/QGameDev/docs/new_project.jpg b/QGameDev/docs/new_project.jpg
diff --git a/QGameDev/docs/new_project2.jpg b/QGameDev/docs/new_project2.jpg
diff --git a/QGameDev/docs/new_project3.jpg b/QGameDev/docs/new_project3.jpg
diff --git a/QGameDev/docs/new_sky.jpg b/QGameDev/docs/new_sky.jpg
diff --git a/QGameDev/docs/run_target.jpg b/QGameDev/docs/run_target.jpg
diff --git a/QGameDev/docs/scene2.jpg b/QGameDev/docs/scene2.jpg
diff --git a/QGameDev/docs/scene2_2.jpg b/QGameDev/docs/scene2_2.jpg
diff --git a/QGameDev/docs/scene2_3.jpg b/QGameDev/docs/scene2_3.jpg
diff --git a/QGameDev/docs/scene2_4.jpg b/QGameDev/docs/scene2_4.jpg
diff --git a/QGameDev/docs/scene2_5.jpg b/QGameDev/docs/scene2_5.jpg
diff --git a/QGameDev/docs/scripting.jpg b/QGameDev/docs/scripting.jpg
diff --git a/QGameDev/docs/scripting2.jpg b/QGameDev/docs/scripting2.jpg
diff --git a/QGameDev/docs/set_directional_light.jpg b/QGameDev/docs/set_directional_light.jpg
diff --git a/QGameDev/docs/set_directional_light2.jpg b/QGameDev/docs/set_directional_light2.jpg
diff --git a/QGameDev/docs/set_probe_grid.jpg b/QGameDev/docs/set_probe_grid.jpg
diff --git a/QGameDev/docs/set_probe_grid2.jpg b/QGameDev/docs/set_probe_grid2.jpg
diff --git a/QGameDev/docs/set_sky_box.jpg b/QGameDev/docs/set_sky_box.jpg
diff --git a/QGameDev/docs/set_sky_box2.jpg b/QGameDev/docs/set_sky_box2.jpg
diff --git a/QGameDev/docs/sky_box_images.jpg b/QGameDev/docs/sky_box_images.jpg