mirror of
https://github.com/sotrh/learn-wgpu.git
synced 2024-11-16 06:12:55 +00:00
34 lines
15 KiB
HTML
34 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Introduction | Learn Wgpu</title>
|
|
<meta name="generator" content="VuePress 1.9.7">
|
|
|
|
<meta name="description" content="">
|
|
<meta property="article:modified_time" content="2022-05-14T18:48:46.000Z">
|
|
<meta property="og:site_name" content="Learn Wgpu">
|
|
<meta property="og:title" content="Introduction">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="/">
|
|
<meta name="twitter:title" content="Introduction">
|
|
<meta name="twitter:url" content="/">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:label1" content="Written by">
|
|
<meta name="twitter:data1" content="Benjamin Hansen">
|
|
<meta name="twitter:creator" content="https://twitter.com/sotrh760">
|
|
|
|
<link rel="preload" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.css" as="style"><link rel="preload" href="/learn-wgpu/assets/js/app.97462b2e.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/17.7a15a658.js" as="script"><link rel="preload" href="/learn-wgpu/assets/js/40.014bbfe2.js" as="script"><link rel="prefetch" href="/learn-wgpu/assets/js/0.538bc9f6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/10.734d87da.js"><link rel="prefetch" href="/learn-wgpu/assets/js/11.41034c46.js"><link rel="prefetch" href="/learn-wgpu/assets/js/12.a4ce281e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/13.50f08c5b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/14.65041ede.js"><link rel="prefetch" href="/learn-wgpu/assets/js/15.e0b6e526.js"><link rel="prefetch" href="/learn-wgpu/assets/js/18.c8349761.js"><link rel="prefetch" href="/learn-wgpu/assets/js/19.2469c630.js"><link rel="prefetch" href="/learn-wgpu/assets/js/2.63a2358e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/20.295c559d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/21.3972e66e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/22.ae08829d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/23.d649043b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/24.5b5cf4ba.js"><link rel="prefetch" href="/learn-wgpu/assets/js/25.a63ee8c2.js"><link rel="prefetch" href="/learn-wgpu/assets/js/26.9b876ccf.js"><link rel="prefetch" href="/learn-wgpu/assets/js/27.a15a4eb1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/28.064a85a6.js"><link rel="prefetch" href="/learn-wgpu/assets/js/29.fb933617.js"><link rel="prefetch" href="/learn-wgpu/assets/js/3.e2a96752.js"><link rel="prefetch" href="/learn-wgpu/assets/js/30.2e0b419b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/31.09885c9c.js"><link rel="prefetch" href="/learn-wgpu/assets/js/32.19c7b8dd.js"><link rel="prefetch" href="/learn-wgpu/assets/js/33.9a017b74.js"><link rel="prefetch" href="/learn-wgpu/assets/js/34.695eaab4.js"><link rel="prefetch" href="/learn-wgpu/assets/js/35.1ae459af.js"><link rel="prefetch" href="/learn-wgpu/assets/js/36.bb1a0e6a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/37.34968282.js"><link rel="prefetch" href="/learn-wgpu/assets/js/38.e9aed210.js"><link rel="prefetch" href="/learn-wgpu/assets/js/39.1c5b4548.js"><link rel="prefetch" href="/learn-wgpu/assets/js/4.3c71cf5e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/41.c80ee966.js"><link rel="prefetch" href="/learn-wgpu/assets/js/42.82e26587.js"><link rel="prefetch" href="/learn-wgpu/assets/js/43.740cfe90.js"><link rel="prefetch" href="/learn-wgpu/assets/js/44.5be8c6e7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/45.2e48975d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/46.ec58808b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/47.04026fdc.js"><link rel="prefetch" href="/learn-wgpu/assets/js/48.b66ca2b7.js"><link rel="prefetch" href="/learn-wgpu/assets/js/49.a7984c3a.js"><link rel="prefetch" href="/learn-wgpu/assets/js/5.bb0f1b1e.js"><link rel="prefetch" href="/learn-wgpu/assets/js/50.3f70b0bd.js"><link rel="prefetch" href="/learn-wgpu/assets/js/51.3dddd985.js"><link rel="prefetch" href="/learn-wgpu/assets/js/52.d210553f.js"><link rel="prefetch" href="/learn-wgpu/assets/js/53.d8a00d81.js"><link rel="prefetch" href="/learn-wgpu/assets/js/54.dee38fb1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/55.1203faa5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/56.b08678b1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/57.8a33a691.js"><link rel="prefetch" href="/learn-wgpu/assets/js/58.0b75502d.js"><link rel="prefetch" href="/learn-wgpu/assets/js/59.9487d6c9.js"><link rel="prefetch" href="/learn-wgpu/assets/js/6.11fcad8b.js"><link rel="prefetch" href="/learn-wgpu/assets/js/60.8f0e7ac5.js"><link rel="prefetch" href="/learn-wgpu/assets/js/61.a146a907.js"><link rel="prefetch" href="/learn-wgpu/assets/js/7.769bb1c1.js"><link rel="prefetch" href="/learn-wgpu/assets/js/8.dac8f9bf.js"><link rel="prefetch" href="/learn-wgpu/assets/js/9.1150195e.js">
|
|
<link rel="stylesheet" href="/learn-wgpu/assets/css/1.styles.a99e0ea1.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/" aria-current="page" class="home-link router-link-exact-active 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/" aria-current="page" class="active sidebar-link">Introduction</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn-wgpu/#what-is-wgpu" class="sidebar-link">What is wgpu?</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/#why-rust" class="sidebar-link">Why Rust?</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/#contribution-and-support" class="sidebar-link">Contribution and Support</a></li><li class="sidebar-sub-header"><a href="/learn-wgpu/#special-thanks-to-these-patrons" class="sidebar-link">Special thanks to these patrons!</a></li></ul></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-surface/" class="sidebar-link">The Surface</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></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Showcase</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>News</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="introduction"><a href="#introduction" class="header-anchor">#</a> Introduction</h1> <h2 id="what-is-wgpu"><a href="#what-is-wgpu" class="header-anchor">#</a> What is wgpu?</h2> <p><a href="https://github.com/gfx-rs/wgpu" target="_blank" rel="noopener noreferrer">Wgpu<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a> is a Rust implementation of the <a href="https://gpuweb.github.io/gpuweb/" target="_blank" rel="noopener noreferrer">WebGPU API spec<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a>. WebGPU is a specification published by the GPU for the Web Community Group. It aims to allow web code access to GPU functions in a safe and reliable manner. It does this by mimicking the Vulkan API, and translating that down to whatever API the host hardware is using (ie. DirectX, Metal, Vulkan).</p> <p>Wgpu is still in development, so some of this doc is subject to change.</p> <h2 id="why-rust"><a href="#why-rust" class="header-anchor">#</a> Why Rust?</h2> <p>Wgpu actually has C bindings to allow you to write C/C++ code with it, as well as use other languages that interface with C. That being said, wgpu is written in Rust, and it has some convenient Rust bindings that don't have to jump through any hoops. On top of that, I've been enjoying writing in Rust.</p> <p>You should be fairly familiar with Rust before using this tutorial as I won't go into much detail on Rust syntax. If you're not super comfortable with Rust you can review the <a href="https://www.rust-lang.org/learn" target="_blank" rel="noopener noreferrer">Rust tutorial<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a>. You should also be familiar with <a href="https://doc.rust-lang.org/cargo/" target="_blank" rel="noopener noreferrer">Cargo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a>.</p> <p>I'm using this project to learn wgpu myself, so I might miss some important details, or explain things badly. I'm always open to constructive feedback.</p> <h2 id="contribution-and-support"><a href="#contribution-and-support" class="header-anchor">#</a> Contribution and Support</h2> <ul><li>I accept pull requests (<a href="https://github.com/sotrh/learn-wgpu" target="_blank" rel="noopener noreferrer">GitHub repo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a>) for fixing issues with this tutorial such as typos, incorrect information, and other inconsistencies.</li> <li>Due to wgpu's rapidly changing api, I'm not accepting any new pull requests for showcase demos.</li> <li>If you want to support me directly, check out my <a href="https://www.patreon.com/sotrh" target="_blank" rel="noopener noreferrer">patreon<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a>!</li></ul> <h2 id="special-thanks-to-these-patrons"><a href="#special-thanks-to-these-patrons" class="header-anchor">#</a> Special thanks to these patrons!</h2> <p><em>In no particular order</em></p> <ul><li>Zeh Fernando</li> <li>The toddling chaos</li> <li>Jan Šipr</li> <li>Bernard Llanos</li> <li>Aron Granberg</li> <li>Ian Gowen</li> <li>Paul E Hansen</li> <li>Lennart</li> <li>Gunstein Vatnar</li> <li>David Laban</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">5/14/2022, 6:48:46 PM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/learn-wgpu/beginner/tutorial1-window/">
|
|
Dependencies and the window
|
|
</a>
|
|
→
|
|
</span></p></div> </main></div></div><div class="global-ui"><!----></div></div>
|
|
<script src="/learn-wgpu/assets/js/app.97462b2e.js" defer></script><script src="/learn-wgpu/assets/js/17.7a15a658.js" defer></script><script src="/learn-wgpu/assets/js/40.014bbfe2.js" defer></script>
|
|
</body>
|
|
</html>
|