mirror of
https://github.com/muerwre/muerwre.github.io.git
synced 2025-04-25 19:06:41 +07:00
6 lines
No EOL
68 KiB
HTML
6 lines
No EOL
68 KiB
HTML
<!DOCTYPE html>
|
|
<html data-head-attrs="">
|
|
<head><title>Basics Of WebGL (Drawing A Cube) • Obsidian Garden</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://anal.vault48.org/script.js" data-website-id="7d587423-ffda-4732-a99d-6cf60d5c9a8a" async></script><meta name="head:count" content="3"><link rel="modulepreload" href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/entry.a1162545.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/default.291a94d3.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.62cc3970.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.module.fbcd3219.js"><link rel="preload" as="style" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutMainMenu.8e9bb43b.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/navigation.c88a11e6.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/content.24233a04.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.0b8ad036.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.module.5f1b7ee4.js"><link rel="preload" as="style" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="modulepreload" as="script" crossorigin href="/nuxt/LayoutFooter.92ed5906.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/_...slug_.63d24149.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/HomeReference.bf6fb900.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseH2.7bcea41b.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseUl.a662ccb8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseLi.03d0a4b8.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseA.125f5d24.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseP.b6cc34ce.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseStrong.157fed42.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCodeInline.4d9c4a74.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseImg.092ce6d9.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.6beb51eb.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/UiIconCopy.bfce4552.js"><link rel="modulepreload" as="script" crossorigin href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.module.230a312a.js"><link rel="preload" as="style" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/client-db.ba528d0d.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/web-socket.f2a8f486.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/error-component.406471bb.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/landing.b66b3c30.js"><link rel="prefetch" as="style" href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.b2295632.css"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.85946555.js"><link rel="prefetch" as="script" crossorigin href="/nuxt/LayoutHeader.vue_used_vue_type_style_index_0_lang.module.57d4f89f.js"><link rel="prefetch" as="style" href="/nuxt/entry.10eae4ea.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/nuxt/logo.d91c5032.svg"><link rel="stylesheet" href="/nuxt/LayoutMainMenuToggle.vue_used_vue_type_style_index_0_lang.17e7aae7.css"><link rel="stylesheet" href="/nuxt/LayoutThemeToggle.vue_used_vue_type_style_index_0_lang.cfa40af4.css"><link rel="stylesheet" href="/nuxt/ProseCode.vue_used_vue_type_style_index_1_lang.24930a5d.css"><style>._grid_1ipws_1{display:grid;grid-template-columns:360px auto;width:100%}@media (max-width:1024px){._grid_1ipws_1{grid-template-columns:33vw auto}}@media (max-width:768px){._grid_1ipws_1{grid-template-columns:auto}}._main_1ipws_17{display:flex;flex-direction:column;height:100%;min-width:0;position:relative;z-index:1}._sidebar_1ipws_26{background-color:var(--color-menu-background)}@media (max-width:768px){._sidebar_1ipws_26{background-color:var(--color-menu-overlay-background);opacity:0;position:fixed;transition:opacity .5s;visibility:hidden;width:100%;z-index:2}._sidebar_1ipws_26._active_1ipws_39{opacity:1;visibility:visible}}._menu_1ipws_45{background-color:var(--color-menu-background);height:100vh;max-width:400px;min-width:0;overflow:auto;padding:40px 30px;position:sticky;top:0}@media (max-width:768px){._menu_1ipws_45{transform:translate(-40px);transition:transform .25s .1s}._active_1ipws_39 ._menu_1ipws_45{transform:translate(0)}}._menu_toggle_1ipws_65{border-radius:0 0 8px 0;left:13px;position:fixed;top:13px;transform:translate(0);transition:all .25s;visibility:hidden;z-index:4}@media (max-width:768px){._menu_toggle_1ipws_65{right:0;transform:translate(0);visibility:visible}}._menu_toggle_1ipws_65._active_1ipws_39,._menu_toggle_1ipws_65._shifted_1ipws_82{transform:translate(-13px,-13px)}._menu_toggle_1ipws_65._shifted_1ipws_82{background:var(--color-menu-background)}._footer_1ipws_89{margin-top:40px}._content_1ipws_93{height:100%;width:100%}@media (max-width:768px){._content_1ipws_93{padding-top:40px}}</style><style>._wrapper_vom09_1{display:flex;flex:1;flex-direction:column;height:100%;padding-top:40px}@media (max-width:1024px){._wrapper_vom09_1{padding-top:10px}}._content_vom09_14{flex:1}._footer_vom09_18{border-top:1px solid var(--color-line);margin-top:60px;padding:10px}._theme_toggle_vom09_24{stroke:currentColor;stroke-width:.5px;position:absolute;right:20px;top:20px;z-index:12}@media (max-width:768px){._theme_toggle_vom09_24{stroke-width:1.5px;right:16px;top:16px}}</style><style>._content_1gz79_1{margin:auto;max-width:min(1280px,100vw);padding:0 40px}@media (max-width:1024px){._content_1gz79_1{padding:0 40px}}@media (max-width:768px){._content_1gz79_1{padding:0 20px}}</style><style>._container_192pu_1{position:relative}._container_192pu_1._secondary_192pu_4{padding:7px 2px 0}._container_192pu_1._secondary_192pu_4:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-22px;width:1px}._container_192pu_1._secondary_192pu_4:first-child:before{top:-4px}._container_192pu_1._secondary_192pu_4:last-child:before{bottom:auto;height:40px}._row_192pu_24{padding:3px 2px;position:relative}._row_192pu_24:before{background-color:var(--color-menu-line);bottom:13px;content:" ";left:-16px;position:absolute;top:-14px;width:1px}._row_192pu_24:first-child:before{top:-4px}._row_192pu_24:last-child:before{bottom:auto;height:30px}._row_192pu_24:only-child:before{height:19px}._heading_192pu_48{align-items:center;color:var(--color-menu-title);display:flex;font-weight:600;position:relative;text-transform:uppercase}._secondary_192pu_4 ._heading_192pu_48:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66{color:var(--color-menu-link);line-height:1.4em;position:relative;text-decoration:none}._link_192pu_66:before{background-color:var(--color-menu-line);content:" ";height:1px;left:-17px;position:absolute;top:.6em;width:10px}._link_192pu_66._active_192pu_81{color:var(--color-menu-link-active);font-weight:700}._children_192pu_86{margin:10px 3px;padding:0 0 0 16px;position:relative}</style><link rel="stylesheet" href="/nuxt/entry.10eae4ea.css" media="print" onload="this.media='all'; this.onload=null;"><script>const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"dark";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
|
|
</script></head>
|
|
<body data-head-attrs=""><div id="__nuxt"><div class="_grid_1ipws_1" hastransition="true"><button class="_menu_toggle_1ipws_65 _button_5opgq_1 _menu_toggle_1ipws_65"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#ffffff" class="_hamburger_5opgq_9"><rect x="0" y="3" width="24" height="2"></rect><rect x="0" y="11" width="24" height="2"></rect><rect x="0" y="19" width="24" height="2"></rect></svg></button><div class="_sidebar_1ipws_26"><div class="_menu_1ipws_45"><nav><div class="_logo_kmqkz_8"><a href="/" class=""><div class="_title_kmqkz_29">Obsidian Garden</div><div class="_subtitle_kmqkz_35">by muerwre</div></a></div><div class="_section_title_kmqkz_1">Cheatsheet</div><!--[--><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Blockchain</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/blockchain/common-typescript-examples" class="_link_192pu_66">Common Typescript Examples</a></div><div class="_row_192pu_24"><a href="/blockchain/smart-contracts" class="_link_192pu_66">Smart Contracts</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Css</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/css/automatic-grid-like-masonry-with-pure-css" class="_link_192pu_66">Automatic Grid Like Masonry With Pure CSS</a></div><div class="_row_192pu_24"><a href="/css/sass-nth-child-iterate-mixin" class="_link_192pu_66">Sass Nth Child Iterate Mixin</a></div><div class="_row_192pu_24"><a href="/css/test-if-browser-supports-css-rules" class="_link_192pu_66">Test If Browser Supports CSS Rules</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Docker</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/docker/building-static-pages-with-docker" class="_link_192pu_66">Building Static Pages With Docker</a></div><div class="_row_192pu_24"><a href="/docker/common-things-with-docker-mailserver" class="_link_192pu_66">Common Things With Docker Mailserver</a></div><div class="_row_192pu_24"><a href="/docker/drone-ci" class="_link_192pu_66">Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/github-pages-with-drone-ci" class="_link_192pu_66">Github Pages With Drone Ci</a></div><div class="_row_192pu_24"><a href="/docker/private-docker-registry" class="_link_192pu_66">Private Docker Registry</a></div><div class="_row_192pu_24"><a href="/docker/refresh-containers-on-pull" class="_link_192pu_66">Refresh Containers On Pull</a></div><div class="_row_192pu_24"><a href="/docker/seed-dump-inside-docker" class="_link_192pu_66">Seed Dump Inside Docker</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-mysql" class="_link_192pu_66">Wait For Mysql</a></div><div class="_row_192pu_24"><a href="/docker/wait-for-redis" class="_link_192pu_66">Wait For Redis</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Frontend</div><div class="_children_192pu_86"><!--[--><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React Native</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react-native/oauth2-login" class="_link_192pu_66">OAuth2 Login</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/preserve-flatlist-scroll-position-in-react-native" class="_link_192pu_66">Preserve FlatList Scroll Position In React Native</a></div><div class="_row_192pu_24"><a href="/frontend/react-native/useful-comands" class="_link_192pu_66">Useful Comands</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">React</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/react/axios-refresh-token-on-react" class="_link_192pu_66">Axios Refresh Token On React</a></div><div class="_row_192pu_24"><a href="/frontend/react/axios-with-abortcontroller" class="_link_192pu_66">Axios With AbortController</a></div><div class="_row_192pu_24"><a href="/frontend/react/detect-hook-deps-changes-with-usewhatschanged" class="_link_192pu_66">Detect Hook Deps Changes With UseWhatsChanged</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Vue</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/frontend/vue/adding-global-properties-to-component" class="_link_192pu_66">Adding Global Properties To Component</a></div><div class="_row_192pu_24"><a href="/frontend/vue/make-nuxt-handle-obsidian-highlights" class="_link_192pu_66">Make Nuxt Handle Obsidian Highlights</a></div><!--]--></div></div><div class="_container_192pu_1 _secondary_192pu_4"><div class="_heading_192pu_48">Webgl</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a aria-current="page" href="/frontend/webgl/basics-of-webgl-(drawing-a-cube)" class="router-link-active _active_192pu_81 _link_192pu_66">Basics Of WebGL (Drawing A Cube)</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/fragment-shaders" class="_link_192pu_66">Fragment Shaders</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/rendering-without-blocking-in-a-worker" class="_link_192pu_66">Rendering Without Blocking In A Worker</a></div><div class="_row_192pu_24"><a href="/frontend/webgl/vertex-shaders" class="_link_192pu_66">Vertex Shaders</a></div><!--]--></div></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Git</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/git/force-git-to-use-https" class="_link_192pu_66">Force Git To Use HTTPS</a></div><div class="_row_192pu_24"><a href="/git/git-aliases-and-useful-commands" class="_link_192pu_66">Git Aliases And Useful Commands</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Golang</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/golang/i18n-in-golang" class="_link_192pu_66">I18n In Golang</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Graphql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/graphql/apollo-client-pagination" class="_link_192pu_66">Apollo Client Pagination</a></div><div class="_row_192pu_24"><a href="/graphql/refresh-token-in-apollo-client" class="_link_192pu_66">Refresh Token In Apollo Client</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Linux</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/linux/certbot-well-known-auto-renew" class="_link_192pu_66">Certbot Well Known Auto Renew</a></div><div class="_row_192pu_24"><a href="/linux/find-out-who-uses-swap" class="_link_192pu_66">Find Out Who Uses Swap</a></div><div class="_row_192pu_24"><a href="/linux/fixing-lagging-usb-headphones" class="_link_192pu_66">Fixing Lagging USB Headphones</a></div><div class="_row_192pu_24"><a href="/linux/gitea-for-git-hosting" class="_link_192pu_66">Gitea For Git Hosting</a></div><div class="_row_192pu_24"><a href="/linux/google-photos-alternative-with-photoprism" class="_link_192pu_66">Google Photos Alternative With Photoprism</a></div><div class="_row_192pu_24"><a href="/linux/linux-on-asus-zenbook-um3402-ya" class="_link_192pu_66">Linux On Asus Zenbook UM3402 YA</a></div><div class="_row_192pu_24"><a href="/linux/resume-or-start-screen-session" class="_link_192pu_66">Resume Or Start Screen Session</a></div><div class="_row_192pu_24"><a href="/linux/rsync-file-with-ssh" class="_link_192pu_66">Rsync File With SSH</a></div><div class="_row_192pu_24"><a href="/linux/setting-up-nginx" class="_link_192pu_66">Setting Up NGINX</a></div><div class="_row_192pu_24"><a href="/linux/ssh" class="_link_192pu_66">SSH</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Obsidian</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/obsidian/self-hosted-obsidian-sync-with-couchdb" class="_link_192pu_66">Self Hosted Obsidian Sync With CouchDB</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Sql</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/sql/mysql-and-mariadb-setup" class="_link_192pu_66">MySQL And MariaDB Setup</a></div><div class="_row_192pu_24"><a href="/sql/postgress-setup" class="_link_192pu_66">Postgress Setup</a></div><!--]--></div></div></div><div class="_row_kmqkz_25"><div class="_container_192pu_1"><div class="_heading_192pu_48">Typescript</div><div class="_children_192pu_86"><!--[--><div class="_row_192pu_24"><a href="/typescript/add-global-variable-to-window" class="_link_192pu_66">Add Global Variable To Window</a></div><div class="_row_192pu_24"><a href="/typescript/flatten-object-with-periods" class="_link_192pu_66">Flatten Object With Periods</a></div><div class="_row_192pu_24"><a href="/typescript/type-guards" class="_link_192pu_66">Type Guards</a></div><!--]--></div></div></div><!--]--></nav></div></div><div class="_main_1ipws_17"><div class="_content_1ipws_93"><div class="_wrapper_vom09_1" hastransition="true"><div class="_content_vom09_14"><button class="_theme_toggle_vom09_24 _button_jz7in_1 _theme_toggle_vom09_24"><span></span></button><!--[--><!--[--><main class="_content_1gz79_1"><!--[--><h1>Basics Of WebGL (Drawing A Cube)</h1><article><div><h2 id="helpful-documentation"><a href="#helpful-documentation"><!--[-->Helpful documentation<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://open.gl/" rel="nofollow" target="_blank"><!--[-->https://open.gl/<!--]--></a><!--]--></li><li><!--[-->This youtube series: <a href="https://www.youtube.com/watch?v=kB0ZVUrI4Aw" rel="nofollow" target="_blank"><!--[-->Basics<!--]--></a>, <a href="https://www.youtube.com/watch?v=3yLL9ADo-ko" rel="nofollow" target="_blank"><!--[-->Making a cube, applying transformations<!--]--></a>, <a href="https://www.youtube.com/watch?v=hpnd11doMgc&t=52s" rel="nofollow" target="_blank"><!--[-->Texturing<!--]--></a><!--]--></li><!--]--></ul><h2 id="vertices-and-indices"><a href="#vertices-and-indices"><!--[-->Vertices and Indices<!--]--></a></h2><p><!--[--><strong><!--[-->Vertices<!--]--></strong> are points with specific coordinates <code><!--[-->{x,y,z}<!--]--></code> in a 3D-space. We can build any figure by connecting <strong><!--[-->vertices<!--]--></strong> in triangles with <strong><!--[-->indices<!--]--></strong>.<!--]--></p><h2 id="shaders"><a href="#shaders"><!--[-->Shaders<!--]--></a></h2><p><!--[-->Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card.<!--]--></p><p><!--[--><a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> describe <strong><!--[-->vertice<!--]--></strong> positions, so Graphic Card can position them by connecting with <strong><!--[-->indices<!--]--></strong> and project to 2D canvas.<!--]--></p><p><!--[--><a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a> describe the way polygons should be colored by assigning colors to Vertices or by applying textures to polygons.<!--]--></p><p><!--[-->Shaders can have parameters passed from Javascript code (<code><!--[-->uniforms<!--]--></code>, <code><!--[-->varyings<!--]--></code> and <code><!--[-->attributes<!--]--></code>). <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a> can also access data from <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> (that ones called <code><!--[-->varyings<!--]--></code>).<!--]--></p><p><!--[--><img src="https://open.gl/media/img/c2_pipeline.png" alt><!--]--></p><h2 id="program"><a href="#program"><!--[-->Program<!--]--></a></h2><p><!--[-->Program, as far as I understand, is a scene, that's described with <strong><!--[-->Vertices<!--]--></strong>, <strong><!--[-->Indices<!--]--></strong>, specific <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> and <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a>.<!--]--></p><h2 id="applying-transformations"><a href="#applying-transformations"><!--[-->Applying transformations<!--]--></a></h2><p><!--[-->The best way to change positions inside <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a> or color in <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a> is to pass parameters (also called <code><!--[-->uniforms<!--]--></code> and <code><!--[-->varyings<!--]--></code>).<!--]--></p><p><!--[-->Read about that at <a href="https://open.gl/transformations" rel="nofollow" target="_blank"><!--[-->open.gl<!--]--></a> and at <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a>.<!--]--></p><h2 id="source-code-with-explanations"><a href="#source-code-with-explanations"><!--[-->Source code with explanations<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-27c1e8">// render-a-cube.ts</span></span><span class="line"><span class="ct-64cc74">import</span><span class="ct-60d196"> { </span><span class="ct-535538">createShader</span><span class="ct-60d196"> } </span><span class="ct-64cc74">from</span><span class="ct-60d196"> </span><span class="ct-534aac">"./create-shader"</span><span class="ct-60d196">;</span></span><span class="line"><span class="ct-64cc74">import</span><span class="ct-60d196"> </span><span class="ct-535538">vxShader</span><span class="ct-60d196"> </span><span class="ct-64cc74">from</span><span class="ct-60d196"> </span><span class="ct-534aac">"./vertex.glsl?raw"</span><span class="ct-60d196">;</span></span><span class="line"><span class="ct-64cc74">import</span><span class="ct-60d196"> </span><span class="ct-535538">fgShader</span><span class="ct-60d196"> </span><span class="ct-64cc74">from</span><span class="ct-60d196"> </span><span class="ct-534aac">"./fragment.glsl?raw"</span><span class="ct-60d196">;</span></span><span class="line"></span><span class="line"><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">canvas</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-535538">document</span><span class="ct-60d196">.</span><span class="ct-a1f1df">getElementyId</span><span class="ct-60d196">(</span><span class="ct-534aac">'view'</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">ctx</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-535538">canvas</span><span class="ct-60d196">.</span><span class="ct-a1f1df">getRenderingContext</span><span class="ct-60d196">(</span><span class="ct-534aac">'webgl'</span><span class="ct-60d196">);</span></span><span class="line"></span><span class="line"><span class="ct-27c1e8">// should be put inside requestAnimationFrame</span></span><span class="line"><span class="ct-a1f1df">drawCube</span><span class="ct-60d196">(</span><span class="ct-535538">ctx</span><span class="ct-60d196">)(); </span></span><span class="line"></span><span class="line"><span class="ct-ef809f">function</span><span class="ct-60d196"> </span><span class="ct-a1f1df">drawCube</span><span class="ct-60d196"> (</span></span><span class="line"><span class="ct-7f4c7e"> </span><span class="ct-7cd29f">gl</span><span class="ct-8977a7">:</span><span class="ct-7f4c7e"> </span><span class="ct-a32dc8">WebGL2RenderingContext</span><span class="ct-7f4c7e">, </span></span><span class="line"><span class="ct-7f4c7e"> </span><span class="ct-7cd29f">width</span><span class="ct-8977a7">:</span><span class="ct-7f4c7e"> </span><span class="ct-d183b6">number</span><span class="ct-7f4c7e">,</span></span><span class="line"><span class="ct-7f4c7e"> </span><span class="ct-7cd29f">height</span><span class="ct-8977a7">:</span><span class="ct-7f4c7e"> </span><span class="ct-d183b6">number</span></span><span class="line"><span class="ct-60d196">) {</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// Initializing viewport</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">viewport</span><span class="ct-60d196">(</span><span class="ct-3f41dc">0</span><span class="ct-60d196">, </span><span class="ct-535538">width</span><span class="ct-60d196">, </span><span class="ct-535538">height</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">clearColor</span><span class="ct-60d196">(</span><span class="ct-3f41dc">0</span><span class="ct-60d196">, </span><span class="ct-3f41dc">0</span><span class="ct-60d196">, </span><span class="ct-3f41dc">0</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">clear</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">COLOR_BUFFER_BIT</span><span class="ct-60d196">);</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">prg</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">createProgram</span><span class="ct-60d196">();</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">if</span><span class="ct-60d196"> (</span><span class="ct-64cc74">!</span><span class="ct-535538">prg</span><span class="ct-60d196">) {</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">throw</span><span class="ct-60d196"> </span><span class="ct-64cc74">new</span><span class="ct-60d196"> </span><span class="ct-7f060f">Error</span><span class="ct-60d196">(</span><span class="ct-534aac">"Can't init programm"</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> }</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// Setting up VERTEX and FRAGMENT shaders</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">vx</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-a1f1df">createShader</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">, </span><span class="ct-535538">vxShader</span><span class="ct-60d196">, </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">VERTEX_SHADER</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">attachShader</span><span class="ct-60d196">(</span><span class="ct-535538">prg</span><span class="ct-60d196">, </span><span class="ct-535538">vx</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">fx</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-a1f1df">createShader</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">, </span><span class="ct-535538">fgShader</span><span class="ct-60d196">, </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">FRAGMENT_SHADER</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">attachShader</span><span class="ct-60d196">(</span><span class="ct-535538">prg</span><span class="ct-60d196">, </span><span class="ct-535538">fx</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">linkProgram</span><span class="ct-60d196">(</span><span class="ct-535538">prg</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">if</span><span class="ct-60d196"> (</span><span class="ct-64cc74">!</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">getProgramParameter</span><span class="ct-60d196">(</span><span class="ct-535538">prg</span><span class="ct-60d196">, </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">LINK_STATUS</span><span class="ct-60d196">)) {</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">throw</span><span class="ct-60d196"> </span><span class="ct-64cc74">new</span><span class="ct-60d196"> </span><span class="ct-7f060f">Error</span><span class="ct-60d196">(</span><span class="ct-534aac">"Could not initialise shaders"</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> }</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// Cube's vertices Array<[x,y,z]>, 8 items</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">vertices</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> [</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// 0</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// 1</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// 2</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// 3</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// 4</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// 5</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// 6</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">-</span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// 7</span></span><span class="line"><span class="ct-60d196"> ];</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// indices, that form triangles, that form cube sides</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">indices</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> [</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">2</span><span class="ct-60d196">, </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-3f41dc">0</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// side 0 (first triangle)</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">0</span><span class="ct-60d196">, </span><span class="ct-3f41dc">3</span><span class="ct-60d196">, </span><span class="ct-3f41dc">2</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// side 0 (second triangle)</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">0</span><span class="ct-60d196">, </span><span class="ct-3f41dc">4</span><span class="ct-60d196">, </span><span class="ct-3f41dc">7</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// side 1 (first triangle)</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">7</span><span class="ct-60d196">, </span><span class="ct-3f41dc">3</span><span class="ct-60d196">, </span><span class="ct-3f41dc">0</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// side 1 (second triangle)</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">0</span><span class="ct-60d196">, </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-3f41dc">5</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// ...</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">5</span><span class="ct-60d196">, </span><span class="ct-3f41dc">4</span><span class="ct-60d196">, </span><span class="ct-3f41dc">0</span><span class="ct-60d196">, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span><span class="ct-3f41dc">2</span><span class="ct-60d196">, </span><span class="ct-3f41dc">6</span><span class="ct-60d196">, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">6</span><span class="ct-60d196">, </span><span class="ct-3f41dc">5</span><span class="ct-60d196">, </span><span class="ct-3f41dc">1</span><span class="ct-60d196">, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">2</span><span class="ct-60d196">, </span><span class="ct-3f41dc">3</span><span class="ct-60d196">, </span><span class="ct-3f41dc">7</span><span class="ct-60d196">, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">7</span><span class="ct-60d196">, </span><span class="ct-3f41dc">6</span><span class="ct-60d196">, </span><span class="ct-3f41dc">2</span><span class="ct-60d196">, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">4</span><span class="ct-60d196">, </span><span class="ct-3f41dc">5</span><span class="ct-60d196">, </span><span class="ct-3f41dc">6</span><span class="ct-60d196">, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">6</span><span class="ct-60d196">, </span><span class="ct-3f41dc">7</span><span class="ct-60d196">, </span><span class="ct-3f41dc">4</span><span class="ct-60d196">,</span></span><span class="line"><span class="ct-60d196"> ];</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// createe a vertex buffer and bind vertices to it</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">squareVertexBuffer</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">createBuffer</span><span class="ct-60d196">();</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">bindBuffer</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">ARRAY_BUFFER</span><span class="ct-60d196">, </span><span class="ct-535538">squareVertexBuffer</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">bufferData</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">ARRAY_BUFFER</span><span class="ct-60d196">, </span><span class="ct-64cc74">new</span><span class="ct-60d196"> </span><span class="ct-7f060f">Float32Array</span><span class="ct-60d196">(</span><span class="ct-535538">vertices</span><span class="ct-60d196">), </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">STATIC_DRAW</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">bindBuffer</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">ARRAY_BUFFER</span><span class="ct-60d196">, </span><span class="ct-f236f7">null</span><span class="ct-60d196">);</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// create a vertex buffer and bind indices to it</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">squareIndexBuffer</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">createBuffer</span><span class="ct-60d196">();</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">bindBuffer</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">ELEMENT_ARRAY_BUFFER</span><span class="ct-60d196">, </span><span class="ct-535538">squareIndexBuffer</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">bufferData</span><span class="ct-60d196">(</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">ELEMENT_ARRAY_BUFFER</span><span class="ct-60d196">,</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">new</span><span class="ct-60d196"> </span><span class="ct-7f060f">Uint16Array</span><span class="ct-60d196">(</span><span class="ct-535538">indices</span><span class="ct-60d196">),</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">STATIC_DRAW</span></span><span class="line"><span class="ct-60d196"> );</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">bindBuffer</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">ELEMENT_ARRAY_BUFFER</span><span class="ct-60d196">, </span><span class="ct-f236f7">null</span><span class="ct-60d196">);</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// initial drawing</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">clearColor</span><span class="ct-60d196">(</span><span class="ct-3f41dc">0.0</span><span class="ct-60d196">, </span><span class="ct-3f41dc">0.0</span><span class="ct-60d196">, </span><span class="ct-3f41dc">0.0</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">enable</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">DEPTH_TEST</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">clear</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">COLOR_BUFFER_BIT</span><span class="ct-60d196"> </span><span class="ct-64cc74">|</span><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">DEPTH_BUFFER_BIT</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">viewport</span><span class="ct-60d196">(</span><span class="ct-3f41dc">0</span><span class="ct-60d196">, </span><span class="ct-535538">width</span><span class="ct-60d196">, </span><span class="ct-535538">height</span><span class="ct-60d196">);</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// bind squareVertexBuffer as vertex positions buffer</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">bindBuffer</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">ARRAY_BUFFER</span><span class="ct-60d196">, </span><span class="ct-535538">squareVertexBuffer</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">vertexAttribPointer</span><span class="ct-60d196">(</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">getAttribLocation</span><span class="ct-60d196">(</span><span class="ct-535538">prg</span><span class="ct-60d196">, </span><span class="ct-534aac">"aVertexPosition"</span><span class="ct-60d196">), </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">3</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// 3 bytes-long</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">FLOAT</span><span class="ct-60d196">,</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-f236f7">false</span><span class="ct-60d196">, </span><span class="ct-27c1e8">// don't normalize (int to float)</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">0</span><span class="ct-60d196">, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">0</span></span><span class="line"><span class="ct-60d196"> );</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// send vertice buffer as `aVertexPosition` attribute inside vertex shader</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">enableVertexAttribArray</span><span class="ct-60d196">(</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">getAttribLocation</span><span class="ct-60d196">(</span><span class="ct-535538">prg</span><span class="ct-60d196">, </span><span class="ct-534aac">"aVertexPosition"</span><span class="ct-60d196">)</span></span><span class="line"><span class="ct-60d196"> );</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">let</span><span class="ct-60d196"> </span><span class="ct-535538">i</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-3f41dc">0</span><span class="ct-60d196">;</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">let</span><span class="ct-60d196"> </span><span class="ct-535538">speed</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-3f41dc">0.01</span><span class="ct-60d196">;</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// that's the main rendering callback</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">return</span><span class="ct-60d196"> () </span><span class="ct-ef809f">=></span><span class="ct-60d196"> {</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">useProgram</span><span class="ct-60d196">(</span><span class="ct-535538">prg</span><span class="ct-60d196">);</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">scale</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-535538">i</span><span class="ct-60d196"> </span><span class="ct-64cc74">*</span><span class="ct-60d196"> </span><span class="ct-60d196"> </span><span class="ct-3f41dc">0.25</span><span class="ct-60d196">;</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// used for scaling inside Vertex Shader</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">uniform1f</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">getUniformLocation</span><span class="ct-60d196">(</span><span class="ct-535538">prg</span><span class="ct-60d196">, </span><span class="ct-534aac">"slide"</span><span class="ct-60d196">), </span><span class="ct-535538">scale</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// GL Screen is square, so we need to fix it's aspect ration</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">uniform1f</span><span class="ct-60d196">(</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">getUniformLocation</span><span class="ct-60d196">(</span><span class="ct-535538">prg</span><span class="ct-60d196">, </span><span class="ct-534aac">"aspect"</span><span class="ct-60d196">), </span><span class="ct-535538">height</span><span class="ct-60d196"> </span><span class="ct-64cc74">/</span><span class="ct-60d196"> </span><span class="ct-535538">width</span><span class="ct-60d196">);</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">bindBuffer</span><span class="ct-60d196">(</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">ELEMENT_ARRAY_BUFFER</span><span class="ct-60d196">, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">squareIndexBuffer</span></span><span class="line"><span class="ct-60d196"> );</span></span><span class="line"><span class="ct-60d196"> </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">drawElements</span><span class="ct-60d196">(</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">TRIANGLES</span><span class="ct-60d196">, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">indices</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">UNSIGNED_SHORT</span><span class="ct-60d196">, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-3f41dc">0</span><span class="ct-60d196">,</span></span><span class="line"><span class="ct-60d196"> );</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">if</span><span class="ct-60d196"> (</span><span class="ct-535538">i</span><span class="ct-60d196"> </span><span class="ct-64cc74">></span><span class="ct-60d196"> </span><span class="ct-64cc74">||</span><span class="ct-60d196"> </span><span class="ct-3f41dc">0</span><span class="ct-60d196">) {</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">speed</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-64cc74">-</span><span class="ct-535538">speed</span><span class="ct-60d196">;</span></span><span class="line"><span class="ct-60d196"> }</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">i</span><span class="ct-60d196"> </span><span class="ct-64cc74">+=</span><span class="ct-60d196"> </span><span class="ct-535538">speed</span><span class="ct-60d196">;</span></span><span class="line"><span class="ct-60d196"> };</span></span><span class="line"><span class="ct-60d196">};</span></span></code></pre><!--]--></div><h2 id="shader-compiler"><a href="#shader-compiler"><!--[-->Shader compiler<!--]--></a></h2><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>typescript</span></button><!--[--><pre><code><span class="line"><span class="ct-27c1e8">// create-shader.ts</span></span><span class="line"><span class="ct-64cc74">export</span><span class="ct-60d196"> </span><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-a1f1df">createShader</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> (</span></span><span class="line"><span class="ct-7f4c7e"> </span><span class="ct-7cd29f">gl</span><span class="ct-8977a7">:</span><span class="ct-7f4c7e"> </span><span class="ct-a32dc8">WebGL2RenderingContext</span><span class="ct-7f4c7e">,</span></span><span class="line"><span class="ct-7f4c7e"> </span><span class="ct-7cd29f">sourceCode</span><span class="ct-8977a7">:</span><span class="ct-7f4c7e"> </span><span class="ct-d183b6">string</span><span class="ct-7f4c7e">,</span></span><span class="line"><span class="ct-7f4c7e"> </span><span class="ct-7cd29f">type</span><span class="ct-8977a7">:</span><span class="ct-7f4c7e"> </span><span class="ct-d183b6">number</span><span class="ct-7f4c7e">, </span><span class="ct-93980e">// gl.VERTEX_SHADER or gl.FRAGMENT_SHADER</span></span><span class="line"><span class="ct-60d196">) </span><span class="ct-ef809f">=></span><span class="ct-60d196"> {</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">shader</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">createShader</span><span class="ct-60d196">(</span><span class="ct-535538">type</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">if</span><span class="ct-60d196"> (</span><span class="ct-64cc74">!</span><span class="ct-535538">shader</span><span class="ct-60d196">) {</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">throw</span><span class="ct-60d196"> </span><span class="ct-64cc74">new</span><span class="ct-60d196"> </span><span class="ct-7f060f">Error</span><span class="ct-60d196">(</span><span class="ct-534aac">`Can't init shader`</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> }</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">shaderSource</span><span class="ct-60d196">(</span><span class="ct-535538">shader</span><span class="ct-60d196">, </span><span class="ct-535538">sourceCode</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">compileShader</span><span class="ct-60d196">(</span><span class="ct-535538">shader</span><span class="ct-60d196">);</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">if</span><span class="ct-60d196"> (</span><span class="ct-64cc74">!</span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">getShaderParameter</span><span class="ct-60d196">(</span><span class="ct-535538">shader</span><span class="ct-60d196">, </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-c51f3e">COMPILE_STATUS</span><span class="ct-60d196">)) {</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-ef809f">const</span><span class="ct-60d196"> </span><span class="ct-c51f3e">info</span><span class="ct-60d196"> </span><span class="ct-64cc74">=</span><span class="ct-60d196"> </span><span class="ct-535538">gl</span><span class="ct-60d196">.</span><span class="ct-a1f1df">getShaderInfoLog</span><span class="ct-60d196">(</span><span class="ct-535538">shader</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">throw</span><span class="ct-60d196"> </span><span class="ct-534aac">`Could not compile WebGL program. </span><span class="ct-5dbe56">\n\n</span><span class="ct-534aac">${</span><span class="ct-535538">info</span><span class="ct-534aac">}`</span><span class="ct-60d196">;</span></span><span class="line"><span class="ct-60d196"> }</span></span><span class="line"></span><span class="line"><span class="ct-60d196"> </span><span class="ct-64cc74">return</span><span class="ct-60d196"> </span><span class="ct-535538">shader</span><span class="ct-60d196">;</span></span><span class="line"><span class="ct-60d196">};</span></span></code></pre><!--]--></div><h2 id="vertex-shader-example"><a href="#vertex-shader-example"><!--[-->Vertex Shader Example<!--]--></a></h2><p><!--[-->Read more at <a href="/frontend/webgl/vertex-shaders" class=""><!--[-->Vertex Shaders<!--]--></a><!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-27c1e8">// current vertice position {x,y,z,w}</span></span><span class="line"><span class="ct-60d196">attribute vec4 aVertexPosition;</span></span><span class="line"><span class="ct-27c1e8">// final vertice position with all transformations applied,</span></span><span class="line"><span class="ct-27c1e8">// that will be passed to Fragment Shader</span></span><span class="line"><span class="ct-60d196">varying vec4 v_positionWithOffset;</span></span><span class="line"><span class="ct-27c1e8">// Parameters passed from Javascript loop</span></span><span class="line"><span class="ct-60d196">uniform </span><span class="ct-ef809f">float</span><span class="ct-60d196"> slide;</span></span><span class="line"><span class="ct-60d196">uniform </span><span class="ct-ef809f">float</span><span class="ct-60d196"> aspect;</span></span><span class="line"></span><span class="line"><span class="ct-ef809f">void</span><span class="ct-60d196"> </span><span class="ct-a1f1df">main</span><span class="ct-60d196">(){</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// float array of 4 elements, same as [slide,slide,slide,1]</span></span><span class="line"><span class="ct-60d196"> vec4 scale</span><span class="ct-64cc74">=</span><span class="ct-a1f1df">vec4</span><span class="ct-60d196">(</span><span class="ct-a1f1df">vec3</span><span class="ct-60d196">(slide),</span><span class="ct-3f41dc">1</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// float array of 4 elements, same as [aspect,1,1,1]</span></span><span class="line"><span class="ct-60d196"> vec4 aspectRatioFix</span><span class="ct-64cc74">=</span><span class="ct-a1f1df">vec4</span><span class="ct-60d196">(aspect,</span><span class="ct-a1f1df">vec3</span><span class="ct-60d196">(</span><span class="ct-3f41dc">1</span><span class="ct-60d196">));</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// vertice position, multiplied with matrices of scale and aspect ratio</span></span><span class="line"><span class="ct-60d196"> gl_Position</span><span class="ct-64cc74">=</span><span class="ct-60d196">aVertexPosition</span><span class="ct-64cc74">*</span><span class="ct-60d196">scale</span><span class="ct-64cc74">*</span><span class="ct-60d196">aspectRatioFix,</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// vertice offset, that will be passed to fragment shader</span></span><span class="line"><span class="ct-60d196"> v_positionWithOffset</span><span class="ct-64cc74">=</span><span class="ct-60d196">gl_Position</span><span class="ct-64cc74">+</span><span class="ct-a1f1df">vec4</span><span class="ct-60d196">(</span><span class="ct-3f41dc">1</span><span class="ct-60d196">,</span><span class="ct-3f41dc">1</span><span class="ct-60d196">,</span><span class="ct-3f41dc">1</span><span class="ct-60d196">,</span><span class="ct-3f41dc">1</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196">}</span></span></code></pre><!--]--></div><h2 id="fragment-shader-example"><a href="#fragment-shader-example"><!--[-->Fragment Shader Example<!--]--></a></h2><p><!--[-->Read more at <a href="/frontend/webgl/fragment-shaders" class=""><!--[-->Fragment Shaders<!--]--></a>.<!--]--></p><div class="_wrapper_1pe7v_1"><button class="_language_1pe7v_9"><span class="_icon_1pe7v_5"><svg xmlns="http://www.w3.org/2000/svg" height="12" viewbox="0 0 24 24" width="12" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"></path><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg></span><span>c</span></button><!--[--><pre><code><span class="line"><span class="ct-60d196">precision highp </span><span class="ct-ef809f">float</span><span class="ct-60d196">;</span></span><span class="line"></span><span class="line"><span class="ct-27c1e8">// parameter from Vertex Shader</span></span><span class="line"><span class="ct-60d196">varying vec4 v_positionWithOffset;</span></span><span class="line"></span><span class="line"><span class="ct-ef809f">void</span><span class="ct-60d196"> </span><span class="ct-a1f1df">main</span><span class="ct-60d196">(</span><span class="ct-ef809f">void</span><span class="ct-60d196">){</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// color, attached to current verticle {r,g,b,alpha}</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// same a[</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// v_positionWithOffset.x,</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// v_positionWithOffset.y, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// v_positionWithOffset.z, </span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// 1</span></span><span class="line"><span class="ct-60d196"> </span><span class="ct-27c1e8">// ]</span></span><span class="line"><span class="ct-60d196"> gl_FragColor</span><span class="ct-64cc74">=</span><span class="ct-a1f1df">vec4</span><span class="ct-60d196">(</span><span class="ct-535538">v_positionWithOffset</span><span class="ct-60d196">.</span><span class="ct-535538">xyz</span><span class="ct-60d196">,</span><span class="ct-3f41dc">1</span><span class="ct-60d196">);</span></span><span class="line"><span class="ct-60d196">}</span></span></code></pre><!--]--></div><style>.ct-5dbe56{color:#79C0FF}.ct-93980e{color:#8B949E}.ct-f236f7{color:#79C0FF}.ct-7f060f{color:#79C0FF}.ct-3f41dc{color:#79C0FF}.ct-d183b6{color:#79C0FF}.ct-a32dc8{color:#FFA657}.ct-8977a7{color:#FF7B72}.ct-7cd29f{color:#FFA657}.ct-7f4c7e{color:#C9D1D9}.ct-a1f1df{color:#D2A8FF}.ct-c51f3e{color:#79C0FF}.ct-ef809f{color:#FF7B72}.ct-534aac{color:#A5D6FF}.ct-535538{color:#C9D1D9}.ct-60d196{color:#C9D1D9}.ct-64cc74{color:#FF7B72}.ct-27c1e8{color:#8B949E}.light .ct-27c1e8{color:#93A1A1}.light .ct-64cc74{color:#859900}.light .ct-60d196{color:#657B83}.light .ct-535538{color:#268BD2}.light .ct-534aac{color:#2AA198}.light .ct-ef809f{color:#073642}.light .ct-c51f3e{color:#268BD2}.light .ct-a1f1df{color:#268BD2}.light .ct-7f4c7e{color:#657B83}.light .ct-7cd29f{color:#657B83}.light .ct-8977a7{color:#859900}.light .ct-a32dc8{color:#268BD2}.light .ct-d183b6{color:#859900}.light .ct-3f41dc{color:#D33682}.light .ct-7f060f{color:#859900}.light .ct-f236f7{color:#B58900}.light .ct-93980e{color:#93A1A1}.light .ct-5dbe56{color:#CB4B16}</style></div></article><!--]--></main><!--]--><!--]--></div><footer class="_footer_ogxvf_1 _footer_vom09_18 _footer_vom09_18"><div>btw, have a nice day</div><div class="_filler_ogxvf_9"></div><div> (2018 - 2024) <a href="https://github.com/muerwre/" rel="noopener noreferrer" target="_blank">muerwre</a></div></footer></div></div></div></div></div><script type="module">import p from "/frontend/webgl/basics-of-webgl-(drawing-a-cube)/_payload.js";window.__NUXT__={...p,...((function(a,b,c,d,e,f){return {state:{"$scolor-mode":{preference:b,value:b,unknown:c,forced:a}},_errors:{},serverRendered:c,config:{public:{content:{clientDB:{isSPA:a,integrity:1711020837115},navigation:{fields:[]},base:"_content",tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:{default:"github-dark",light:"solarized-light"},preload:[d,"c","go","graphql","scss",d,e,"docker","typescript","javascript","nginx","bash","yaml",e],apiURL:"\u002Fapi\u002F_content\u002Fhighlight"},wsUrl:f,documentDriven:a,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"\u002F",buildAssetsDir:"nuxt\u002F",cdnURL:f}},prerenderedAt:1711020861440}}(false,"dark",true,"shell","sh","")))}</script><script type="module" src="/nuxt/entry.a1162545.js" crossorigin></script><script type="module" src="/nuxt/default.291a94d3.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenuToggle.62cc3970.js" crossorigin></script><script type="module" src="/nuxt/LayoutMainMenu.8e9bb43b.js" crossorigin></script><script type="module" src="/nuxt/content.24233a04.js" crossorigin></script><script type="module" src="/nuxt/LayoutThemeToggle.0b8ad036.js" crossorigin></script><script type="module" src="/nuxt/_...slug_.63d24149.js" crossorigin></script><script type="module" src="/nuxt/LayoutFooter.92ed5906.js" crossorigin></script><script type="module" src="/nuxt/ProseH2.7bcea41b.js" crossorigin></script><script type="module" src="/nuxt/ProseUl.a662ccb8.js" crossorigin></script><script type="module" src="/nuxt/ProseLi.03d0a4b8.js" crossorigin></script><script type="module" src="/nuxt/ProseA.125f5d24.js" crossorigin></script><script type="module" src="/nuxt/ProseP.b6cc34ce.js" crossorigin></script><script type="module" src="/nuxt/ProseStrong.157fed42.js" crossorigin></script><script type="module" src="/nuxt/ProseCodeInline.4d9c4a74.js" crossorigin></script><script type="module" src="/nuxt/ProseImg.092ce6d9.js" crossorigin></script><script type="module" src="/nuxt/ProseCode.6beb51eb.js" crossorigin></script><script type="module" src="/nuxt/UiIconCopy.bfce4552.js" crossorigin></script></body>
|
|
</html> |