<metaproperty="article:modified_time"content="2021-02-12T06:29:40.000Z"><metaproperty="og:site_name"content="Learn Wgpu"><metaproperty="og:title"content="Compute Example: Tangents and Bitangents"><metaproperty="og:type"content="website"><metaproperty="og:url"content="/showcase/compute/"><metaname="twitter:title"content="Compute Example: Tangents and Bitangents"><metaname="twitter:url"content="/showcase/compute/"><metaname="twitter:card"content="summary_large_image"><metaname="twitter:label1"content="Written by"><metaname="twitter:data2"content="Benjamin R Hansen"><metaname="twitter:creator"content="https://twitter.com/sotrh760">
</code></pre></div><p>This structure works perfectly fine when used as a vertex buffer. Using it as a storage buffer proved less convenient. My previous code used a GLSL struct similar to my <code>ModelVertex</code>.</p><divclass="language-glsl extra-class"><preclass="language-glsl"><code><spanclass="token keyword">struct</span><spanclass="token class-name">ModelVertex</span><spanclass="token punctuation">{</span>
</code></pre></div><p>At first glance, this seems just fine, but OpenGL experts would likely see a problem with the structure. Our fields aren't aligned properly to support the <code>std430</code> alignment that storage buffers require.. I won't get into detail but you can check out the <ahref="/showcase/alignment">alignment showcase</a> if you want to know more. To summarize, the <code>vec2</code> for the <code>tex_coords</code> was messing up the byte alignment, corrupting the vertex data resulting in the following:</p><p><imgsrc="/learn-wgpu/assets/img/corruption.675b1eca.png"alt="./corruption.png"></p><p>I could have fixed this by adding a padding field after <code>tex_coords</code> on the Rust side, but that would require modifying the <code>VertexBufferLayout</code>. I ended up solving this problem by using the components of the vectors directly and resulted with a struct like this:</p><divclass="language-glsl extra-class"><preclass="language-glsl"><code><spanclass="token keyword">struct</span><spanclass="token class-name">ModelVertex</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Since <code>std430</code> will use the alignment of the largest element of the struct, using all floats means the struct will be aligned to 4 bytes. This is alignment matches what <code>ModelVertex</code> uses in Rust. This was kind of a pain to work with, but it fixed the corruption issue.</p><p>The second problem required me to rethink how I was computing the tangent and bitangent. The previous algorithm I was using only computed the tangent and bitangent for each triangle and set all the vertices in that triangle to use the same tangent and bitangent. While this is fine in a single threaded context, the code breaks down when trying to compute the triangles in parallel. The reason is that multiple triangles can share the same vertices. This means that when we go to save the resulting tangents, we inevitably end up trying to write to the same vertex from multiple different threads which is a big no no. You can see the issue with this method below:</p><p><imgsrc="/learn-wgpu/assets/img/black_triangles.df338b97.png"alt="./black_triangles.png"></p><p>Those black triangles were the result of multiple GPU threads trying to modify the same vertices. Looking at the data in Render Doc I could see that the tangents and bitangents were garbage numbers such as <code>NaN</code>.</p><p><imgsrc="/learn-wgpu/assets/img/render_doc_output.e0c8b298.png"alt="./render_doc_output.png"></p><p>While on the CPU we could introduce a synchronization primitive such as a <code>Mutex</code> to fix this issue, AFAIK there isn't really such a thing on the GPU. Instead I decided to swap my code to work with each vertex individually. There are some hurdles with that, but those will be easier to explain in code. Let's start with the <code>main</code> function.</p><divclass="language-glsl extra-class"><preclass="language-glsl"><code><spanclass="token keyword">void</span><spanclass="token function">main</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">{</span>
</code></pre></div><p>We use the <code>gl_GlobalInvocationID.x</code> to get the index of the vertex we want to compute the tangents for. I opted to put the actual calculation into it's own method. Let's take a look at that.</p><divclass="language-glsl extra-class"><preclass="language-glsl"><code>ModelVertex <spanclass="token function">calcTangentBitangent</span><spanclass="token punctuation">(</span><spanclass="token keyword">uint</span> vertexIndex<spanclass="token punctuation">)</span><spanclass="token punctuation">{</span>
ModelVertex v <spanclass="token operator">=</span> srcVertices<spanclass="token punctuation">[</span>vertexIndex<spanclass="token punctuation">]</span><spanclass="token punctuation">;</span>
</code></pre></div><h2id="possible-improvements"><ahref="#possible-improvements"class="header-anchor">#</a> Possible Improvements</h2><p>Looping over every triangle for every vertex is likely raising some red flags for some of you. In a single threaded context, this algorithm would end up being O(N*M). As we are utilizing the high number of threads availble to our GPU, this is less of an issue, but it still means our GPU is burning more cycles than it needs to.</p><p>One way I came up with to possibly improve performance is to store the index of each triangle in a hash map like structure with the vertex index as keys. Here's some pseudo code:</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">for</span> t <spanclass="token keyword">in</span><spanclass="token number">0</span><spanclass="token punctuation">..</span>indices<spanclass="token punctuation">.</span><spanclass="token function">len</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token operator">/</span><spanclass="token number">3</span><spanclass="token punctuation">{</span>
</code></pre></div><p>We'd then need to flatten this structure to pass it to the GPU. We'd also need a second array to index the first.</p><divclass="language-rust extra-class"><preclass="language-rust"><code><spanclass="token keyword">for</span><spanclass="token punctuation">(</span>i<spanclass="token punctuation">,</span><spanclass="token punctuation">(</span>_v<spanclass="token punctuation">,</span> t_list<spanclass="token punctuation">)</span><spanclass="token punctuation">)</span><spanclass="token keyword">in</span> triangle_map<spanclass="token punctuation">.</span><spanclass="token function">iter</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">.</span><spanclass="token function">enumerate</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">{</span>
</code></pre></div><p>I ultimately decided against this method as it was more complicated, and I haven't had time to benchmark it to see if it's faster that the simple method.</p><h2id="results"><ahref="#results"class="header-anchor">#</a> Results</h2><p>The tangents and bitangents are now getting calculated correctly and on the GPU!</p><p><imgsrc="/learn-wgpu/assets/img/results.7918efc1.png"alt="./results.png"></p><divclass="auto-github-link"><ahref="https://github.com/sotrh/learn-wgpu/tree/master/code/showcase/compute/"target="_blank"rel="noopener noreferrer">Check out the code!</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div></div><footerclass="page-edit"><!----><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">2/12/2021, 6:29:40 AM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
