You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
learn-wgpu/showcase/alignment/index.html

29 lines
14 KiB
HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Memory Layout in GLSL | Learn Wgpu</title>
<meta name="description" content="">
<meta name="generator" content="VuePress 1.4.0">
<meta property="article:modified_time" content="2020-11-21T20:16:07.000Z"><meta property="og:site_name" content="Learn Wgpu"><meta property="og:title" content="Memory Layout in GLSL"><meta property="og:type" content="website"><meta property="og:url" content="/showcase/alignment/"><meta name="twitter:title" content="Memory Layout in GLSL"><meta name="twitter:url" content="/showcase/alignment/"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:label1" content="Written by"><meta name="twitter:data2" content="Benjamin R Hansen"><meta name="twitter:creator" content="https://twitter.com/sotrh760">
<link rel="preload" href="/learn-wgpu/assets/css/0.styles.7acc6ef6.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.6593075e.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/2.da3fd46f.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/28.a3ac06e2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/10.de8cadfb.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.65c8dcc2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.26aabcb1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.78eedf26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.f852c057.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.0fda50ec.js"><link rel="prefetch" href="/learn-wgpu/assets/js/16.f1c9d31a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/17.8d0c6c00.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.d3691f26.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.e9350ae9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.70e640cc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.19d2890c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.2132e362.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.1a88f225.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.6da05868.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.2c8435d6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.5b0dad74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.04f788d9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.281013fa.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.2a393c66.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.dc887be9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.6b1a77da.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.6c35427e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.7f771450.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.88810c81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.d5139107.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.ecb6e79c.js">
<link rel="stylesheet" href="/learn-wgpu/assets/css/0.styles.7acc6ef6.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="inner"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/learn-wgpu/" class="home-link router-link-active"><!----> <span class="site-name">Learn Wgpu</span></a> <div class="links"><!----> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header> <div class="sidebar-mask"></div> <div class="docs-layout"><aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/learn-wgpu/" class="sidebar-link">Introduction</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Beginner</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/beginner/tutorial1-window/" class="sidebar-link">Dependencies and the window</a></li><li><a href="/learn-wgpu/beginner/tutorial2-swapchain/" class="sidebar-link">The Swapchain</a></li><li><a href="/learn-wgpu/beginner/tutorial3-pipeline/" class="sidebar-link">The Pipeline</a></li><li><a href="/learn-wgpu/beginner/tutorial4-buffer/" class="sidebar-link">Buffers and Indices</a></li><li><a href="/learn-wgpu/beginner/tutorial5-textures/" class="sidebar-link">Textures and bind groups</a></li><li><a href="/learn-wgpu/beginner/tutorial6-uniforms/" class="sidebar-link">Uniform buffers and a 3d camera</a></li><li><a href="/learn-wgpu/beginner/tutorial7-instancing/" class="sidebar-link">Instancing</a></li><li><a href="/learn-wgpu/beginner/tutorial8-depth/" class="sidebar-link">The Depth Buffer</a></li><li><a href="/learn-wgpu/beginner/tutorial9-models/" class="sidebar-link">Model Loading</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Intermediate</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/intermediate/tutorial10-lighting/" class="sidebar-link">Working with Lights</a></li><li><a href="/learn-wgpu/intermediate/tutorial11-normals/" class="sidebar-link">Normal Mapping</a></li><li><a href="/learn-wgpu/intermediate/tutorial12-camera/" class="sidebar-link">A Better Camera</a></li><li><a href="/learn-wgpu/intermediate/tutorial13-threading/" class="sidebar-link">Multi-threading with Wgpu and Rayon</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Showcase</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/learn-wgpu/showcase/" class="sidebar-link">Foreward</a></li><li><a href="/learn-wgpu/showcase/windowless/" class="sidebar-link">Wgpu without a window</a></li><li><a href="/learn-wgpu/showcase/gifs/" class="sidebar-link">Creating gifs</a></li><li><a href="/learn-wgpu/showcase/pong/" class="sidebar-link">Pong</a></li><li><a href="/learn-wgpu/showcase/compute/" class="sidebar-link">Compute Example: Tangents and Bitangents</a></li><li><a href="/learn-wgpu/showcase/alignment/" class="active sidebar-link">Memory Layout in GLSL</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn-wgpu/showcase/alignment/#alignments" class="sidebar-link">Alignments</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/showcase/alignment/#in-wgpu" class="sidebar-link">In WGPU</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/showcase/alignment/#std140-since-glsl-1-4-opengl-3-1" class="sidebar-link">std140 (since GLSL 1.4, OpenGL 3.1)</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/showcase/alignment/#std430-since-glsl-4-3-opengl-4-3" class="sidebar-link">std430 (since GLSL 4.3, OpenGL 4.3)</a></li></ul></li><li><a href="/learn-wgpu/showcase/imgui-demo/" class="sidebar-link">Basic Imgui Demo</a></li></ul></section></li><li><a href="/learn-wgpu/news/" class="sidebar-link">News</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="memory-layout-in-glsl"><a href="#memory-layout-in-glsl" class="header-anchor">#</a> Memory Layout in GLSL</h1> <h2 id="alignments"><a href="#alignments" class="header-anchor">#</a> Alignments</h2> <p>The address of the position of an instance in memory has to a multiple of its alignment.</p> <p>Normally alignment is the same as size. Exceptions are vec3, structs and arrays.</p> <p>A vec3 is padded to be a vec4 which means it behaves as if it was a vec4 just that the last entry is not used.</p> <p><code>{i,u,b}vec</code> is shorthand for <code>ivec</code>, <code>uvec</code>, <code>bvec</code> so a vector of <code>int</code> or <code>uint</code> or <code>bool</code>. A <code>vec</code> is a vec of <code>float</code>.</p> <table><thead><tr><th>type</th> <th>Alignment in bytes</th> <th>size in bytes</th></tr></thead> <tbody><tr><td>int, uint, float, bool</td> <td>4</td> <td>4</td></tr> <tr><td>double</td> <td>8</td> <td>8</td></tr> <tr><td>{i,u,b}vec2</td> <td>8</td> <td>8</td></tr> <tr><td>dvec2</td> <td>16</td> <td>16</td></tr> <tr><td>{i,u,b}vec3</td> <td><strong>16</strong></td> <td>12</td></tr> <tr><td>{i,u,b}vec4</td> <td>16</td> <td>16</td></tr> <tr><td>dvec3</td> <td><strong>32</strong></td> <td>24</td></tr> <tr><td>dvec4</td> <td>32</td> <td>32</td></tr> <tr><td>mat3 (like array of 3 vec3)</td> <td><strong>16</strong></td> <td>3*16</td></tr> <tr><td>mat4 (like array of 4 vec4)</td> <td>16</td> <td>4*16</td></tr></tbody></table> <p><a href="https://www.khronos.org/registry/OpenGL/specs/gl/glspec45.core.pdf#page=159" target="_blank" rel="noopener noreferrer">Reference<svg xmlns="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"><path fill="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> <polygon fill="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></a> section 7.6.2.2</p> <h2 id="in-wgpu"><a href="#in-wgpu" class="header-anchor">#</a> In WGPU</h2> <p>To make <em>uniform buffers</em> portable they have to be std140 and not std430.
<em>Uniform structs</em> have to be std140.
<em>Storage structs</em> have to be std430.</p> <p><em>Storage buffers</em> for compute shaders can be std140 or std430.</p> <h2 id="std140-since-glsl-1-4-opengl-3-1"><a href="#std140-since-glsl-1-4-opengl-3-1" class="header-anchor">#</a> std140 (since GLSL 1.4, OpenGL 3.1)</h2> <p>Array:</p> <ul><li>determine the alignment of the member type and lets name it <code>align_member</code></li> <li>the alignment of the array is maximum(<code>align_member</code>, 16)</li></ul> <p>Struct:</p> <ul><li>determine the member with the largest alignment and lets name it <code>max_member_align</code></li> <li>the alignment of the array is maximum(<code>max_member_align</code>, 16)</li></ul> <h3 id="crates-to-make-your-struct-compatible-with-std140"><a href="#crates-to-make-your-struct-compatible-with-std140" class="header-anchor">#</a> crates to make your struct compatible with std140</h3> <p><a href="https://github.com/rustgd/glsl-layout" target="_blank" rel="noopener noreferrer">glsl_layout<svg xmlns="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"><path fill="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> <polygon fill="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></a> <a href="https://github.com/LPGhatguy/crevice" target="_blank" rel="noopener noreferrer">crevice<svg xmlns="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"><path fill="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> <polygon fill="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></a></p> <h2 id="std430-since-glsl-4-3-opengl-4-3"><a href="#std430-since-glsl-4-3-opengl-4-3" class="header-anchor">#</a> std430 (since GLSL 4.3, OpenGL 4.3)</h2> <p>more space efficient for structs and arrays</p> <p>Array</p> <ul><li>alignment is the alignment of the element type</li></ul> <p>Struct</p> <ul><li>alignment is the alignment of the member with the largest alignment</li></ul> <h3 id="crates-to-make-yuor-struct-compatible-with-std430"><a href="#crates-to-make-yuor-struct-compatible-with-std430" class="header-anchor">#</a> crates to make yuor struct compatible with std430</h3> <p><a href="https://github.com/rustgd/glsl-layout/issues/9" target="_blank" rel="noopener noreferrer">glsl_layout issue<svg xmlns="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"><path fill="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> <polygon fill="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></a> <a href="https://github.com/LPGhatguy/crevice/issues/1" target="_blank" rel="noopener noreferrer">crevice issue<svg xmlns="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"><path fill="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> <polygon fill="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></a></p> <hr></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">11/21/2020, 8:16:07 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/learn-wgpu/showcase/compute/" class="prev">
Compute Example: Tangents and Bitangents
</a></span> <span class="next"><a href="/learn-wgpu/showcase/imgui-demo/">
Basic Imgui Demo
</a>
</span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
<script src="/learn-wgpu/assets/js/app.6593075e.js" defer></script><script src="/learn-wgpu/assets/js/2.da3fd46f.js" defer></script><script src="/learn-wgpu/assets/js/28.a3ac06e2.js" defer></script>
</body>
</html>