<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>DirectX on GameSweetGame</title><link>https://gamesweetgame.com/en/categories/directx/</link><description>Recent content in DirectX on GameSweetGame</description><generator>Hugo -- gohugo.io</generator><language>en</language><lastBuildDate>Thu, 04 Jan 2024 00:00:00 +0900</lastBuildDate><atom:link href="https://gamesweetgame.com/en/categories/directx/index.xml" rel="self" type="application/rss+xml"/><item><title>Rendering a 3D Character — Transform Pipeline Order</title><link>https://gamesweetgame.com/en/p/rendering-a-3d-character-transform-pipeline-order/</link><pubDate>Thu, 04 Jan 2024 00:00:00 +0900</pubDate><guid>https://gamesweetgame.com/en/p/rendering-a-3d-character-transform-pipeline-order/</guid><description>&lt;h2 id="transform-order"&gt;Transform Order
&lt;/h2&gt;&lt;p&gt;&lt;strong&gt;Polygon × World Matrix × View Matrix × Projection Matrix&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;World Matrix&lt;/strong&gt; — Place the model in world space (position, rotation, scale)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;View Matrix&lt;/strong&gt; — Transform relative to the camera&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Projection Matrix&lt;/strong&gt; — Project 3D onto 2D screen&lt;/li&gt;
&lt;/ol&gt;</description></item><item><title>DirectX Lighting Basics — Ambient, Diffuse, Specular</title><link>https://gamesweetgame.com/en/p/directx-lighting-basics-ambient-diffuse-specular/</link><pubDate>Wed, 03 Jan 2024 00:00:00 +0900</pubDate><guid>https://gamesweetgame.com/en/p/directx-lighting-basics-ambient-diffuse-specular/</guid><description>&lt;h2 id="lighting-calculation"&gt;Lighting Calculation
&lt;/h2&gt;&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-hlsl" data-lang="hlsl"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;float4&lt;/span&gt; fvTotalAmbient &lt;span style="color:#f92672"&gt;=&lt;/span&gt; fvAmbient &lt;span style="color:#f92672"&gt;*&lt;/span&gt; fvBaseColor;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;float4&lt;/span&gt; fvTotalDiffuse &lt;span style="color:#f92672"&gt;=&lt;/span&gt; fvDiffuse &lt;span style="color:#f92672"&gt;*&lt;/span&gt; fNDotL &lt;span style="color:#f92672"&gt;*&lt;/span&gt; fvBaseColor;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;float4&lt;/span&gt; fvTotalSpecular &lt;span style="color:#f92672"&gt;=&lt;/span&gt; fvSpecular &lt;span style="color:#f92672"&gt;*&lt;/span&gt; pow( fRDotV, fSpecularPower );
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;return&lt;/span&gt;( saturate( fvTotalAmbient &lt;span style="color:#f92672"&gt;+&lt;/span&gt; fvTotalDiffuse &lt;span style="color:#f92672"&gt;+&lt;/span&gt; fvTotalSpecular ) );
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="notes"&gt;Notes
&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;&lt;code&gt;saturate()&lt;/code&gt; clamps the value between 0 and 1&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Do NOT use saturate in HDR&lt;/strong&gt; (values above 1.0 are needed)&lt;/li&gt;
&lt;li&gt;Large capacity is possible due to texture compression&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Rim lighting&lt;/strong&gt; technique: compute using the normal vector at the vertex stage&lt;/li&gt;
&lt;/ul&gt;</description></item><item><title>Assimp FBX Model Loading &amp; Skinning Animation</title><link>https://gamesweetgame.com/en/p/assimp-fbx-model-loading-skinning-animation/</link><pubDate>Tue, 02 Jan 2024 00:00:00 +0900</pubDate><guid>https://gamesweetgame.com/en/p/assimp-fbx-model-loading-skinning-animation/</guid><description>
 &lt;blockquote&gt;
 &lt;p&gt;Current status: Implementing in a simple project structure first, then porting to the team engine.&lt;/p&gt;

 &lt;/blockquote&gt;
&lt;h2 id="version-issues"&gt;Version Issues
&lt;/h2&gt;&lt;p&gt;The bone count was way too high, so I tested by switching Assimp versions:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Latest version (v143)&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Latest version - 67 bones" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;v140&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt="v140 - 2 bones" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"&gt;&lt;/p&gt;
&lt;p&gt;This is from checking a single mesh. The latest version reports 67 bones, while the older version correctly shows 2.&lt;/p&gt;
&lt;h2 id="skinning-animation--head-and-arms-stretching-bug"&gt;Skinning Animation — Head and Arms Stretching Bug
&lt;/h2&gt;&lt;p&gt;Skinning animation works, but the head and arms stretch out way too long.&lt;/p&gt;
&lt;p&gt;&lt;img alt="Head/arms stretching" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"&gt;&lt;/p&gt;
&lt;p&gt;&lt;del&gt;After debugging for a while, I found that the bones in the FBX file were sticking out above the head.&lt;/del&gt;&lt;/p&gt;
&lt;p&gt;I experimented in Blender and confirmed that when vertex positions are slightly above the bones on the Y axis, the arms and hands stretch. Since my animation causes stretching, the bones must be slightly offset downward.&lt;/p&gt;
&lt;p&gt;&lt;img alt="Checking bone positions in Blender" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"&gt;&lt;/p&gt;
&lt;h2 id="model-lying-down-after-blender-export"&gt;Model Lying Down After Blender Export
&lt;/h2&gt;&lt;p&gt;Check the &lt;strong&gt;Y Up&lt;/strong&gt; option in the export settings.&lt;/p&gt;
&lt;p&gt;&lt;img alt="Blender export settings" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px"&gt;&lt;/p&gt;
&lt;p&gt;If the model is still lying down, try changing Y Up to something else, export, then switch back to Y Up and export again. That fixed it.&lt;/p&gt;</description></item><item><title>DirectX UI System Implementation</title><link>https://gamesweetgame.com/en/p/directx-ui-system-implementation/</link><pubDate>Mon, 01 Jan 2024 00:00:00 +0900</pubDate><guid>https://gamesweetgame.com/en/p/directx-ui-system-implementation/</guid><description>&lt;p&gt;When creating an entity, add UITestScript as a component. Pass the UI type during creation.&lt;/p&gt;
&lt;p&gt;Each type is implemented inside the Update function.&lt;/p&gt;
&lt;h2 id="ui-types"&gt;UI Types
&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;STATIC&lt;/strong&gt; — A UI element that just sits there&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;ONMOUSE&lt;/strong&gt; — A UI element that &amp;ldquo;breathes&amp;rdquo; when hovered&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;GAUGE&lt;/strong&gt; — A gauge UI for time, hunger, mini-games, etc.&lt;/li&gt;
&lt;li&gt;If animation is needed, more types can be added&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="shader-code"&gt;Shader Code
&lt;/h2&gt;&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-hlsl" data-lang="hlsl"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;float4&lt;/span&gt; main(PixelIn input) &lt;span style="color:#f92672"&gt;:&lt;/span&gt; SV_TARGET
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;{
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;float4&lt;/span&gt; texColor &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;float4&lt;/span&gt;(&lt;span style="color:#ae81ff"&gt;1&lt;/span&gt;, &lt;span style="color:#ae81ff"&gt;1&lt;/span&gt;, &lt;span style="color:#ae81ff"&gt;1&lt;/span&gt;, &lt;span style="color:#ae81ff"&gt;0&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;if&lt;/span&gt;(UItype &lt;span style="color:#f92672"&gt;==&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;1&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#75715e"&gt;// Use frac() to wrap texture coordinates within 0-1 range&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#75715e"&gt;// for seamless repetition&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; input.tex.x &lt;span style="color:#f92672"&gt;=&lt;/span&gt; frac(input.tex.x);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; input.tex.y &lt;span style="color:#f92672"&gt;=&lt;/span&gt; frac(input.tex.y);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; texColor &lt;span style="color:#f92672"&gt;=&lt;/span&gt; shaderTexture.Sample(SampleType, input.tex);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;if&lt;/span&gt; (texColor.a &lt;span style="color:#f92672"&gt;&amp;lt;&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;0.01&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;discard&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; }
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;else&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;if&lt;/span&gt;(UItype &lt;span style="color:#f92672"&gt;==&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;2&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;float2&lt;/span&gt; textureOffset &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;float2&lt;/span&gt;(&lt;span style="color:#ae81ff"&gt;0.0f&lt;/span&gt;, &lt;span style="color:#ae81ff"&gt;0.0f&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;float2&lt;/span&gt; textureSize &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;float2&lt;/span&gt;(&lt;span style="color:#ae81ff"&gt;1.0f&lt;/span&gt;, &lt;span style="color:#ae81ff"&gt;1&lt;/span&gt; &lt;span style="color:#f92672"&gt;-&lt;/span&gt; textureTranslation);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#75715e"&gt;// Discard pixels outside the visible gauge area&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;if&lt;/span&gt; (input.tex.x &lt;span style="color:#f92672"&gt;&amp;lt;&lt;/span&gt; textureOffset.x &lt;span style="color:#f92672"&gt;||&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; input.tex.x &lt;span style="color:#f92672"&gt;&amp;gt;&lt;/span&gt; textureOffset.x &lt;span style="color:#f92672"&gt;+&lt;/span&gt; textureSize.x &lt;span style="color:#f92672"&gt;||&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#ae81ff"&gt;1&lt;/span&gt; &lt;span style="color:#f92672"&gt;-&lt;/span&gt; input.tex.y &lt;span style="color:#f92672"&gt;&amp;lt;&lt;/span&gt; textureOffset.y &lt;span style="color:#f92672"&gt;||&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#ae81ff"&gt;1&lt;/span&gt; &lt;span style="color:#f92672"&gt;-&lt;/span&gt; input.tex.y &lt;span style="color:#f92672"&gt;&amp;gt;&lt;/span&gt; textureOffset.y &lt;span style="color:#f92672"&gt;+&lt;/span&gt; textureSize.y)
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;discard&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; }
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;else&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; texColor &lt;span style="color:#f92672"&gt;=&lt;/span&gt; shaderTexture.Sample(SampleType, input.tex);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; }
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; }
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;else&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; texColor &lt;span style="color:#f92672"&gt;=&lt;/span&gt; shaderTexture.Sample(SampleType, input.tex);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;if&lt;/span&gt; (texColor.a &lt;span style="color:#f92672"&gt;&amp;lt;&lt;/span&gt; &lt;span style="color:#ae81ff"&gt;0.01&lt;/span&gt;)
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;discard&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; }
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;return&lt;/span&gt; texColor;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id="key-points"&gt;Key Points
&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;UItype == 1 (ONMOUSE):&lt;/strong&gt; Uses &lt;code&gt;frac()&lt;/code&gt; to wrap texture coordinates for a breathing animation effect&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;UItype == 2 (GAUGE):&lt;/strong&gt; Controls the visible texture area via &lt;code&gt;textureTranslation&lt;/code&gt; to create a fill effect&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;else (STATIC):&lt;/strong&gt; Simple texture sampling with alpha discard below 0.01&lt;/li&gt;
&lt;/ul&gt;</description></item></channel></rss>