muerwre.github.io/docs/frontend/webgl/fragment-shaders/_payload.js

export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:"UseWhatsChanged",_path:"\u002Ffrontend\u002Freact\u002Fusewhatschanged"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:u,_path:v},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:l,_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-qKKsIqiioV":{_path:v,_dir:"webgl",_draft:m,_partial:m,_locale:"en",_empty:m,title:u,description:"Fragment shaders describe how polygons are painted (or textured). Read Basics of WebGL (Drawing a Cube) first.",excerpt:{type:w,children:[{type:a,tag:i,props:{},children:[{type:b,value:x},{type:a,tag:c,props:{className:[y]},children:[{type:b,value:z}]},{type:b,value:A},{type:a,tag:j,props:{href:B},children:[{type:b,value:C}]},{type:b,value:D}]},{type:a,tag:E,props:{id:n},children:[{type:b,value:o}]},{type:a,tag:i,props:{},children:[{type:b,value:F},{type:a,tag:j,props:{href:G},children:[{type:b,value:l}]},{type:b,value:p}]},{type:a,tag:k,props:{code:q,language:H},children:[{type:a,tag:I,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:b,value:q}]}]}]}]},body:{type:w,children:[{type:a,tag:i,props:{},children:[{type:b,value:x},{type:a,tag:c,props:{className:[y]},children:[{type:b,value:z}]},{type:b,value:A},{type:a,tag:j,props:{href:B},children:[{type:b,value:C}]},{type:b,value:D}]},{type:a,tag:E,props:{id:n},children:[{type:b,value:o}]},{type:a,tag:i,props:{},children:[{type:b,value:F},{type:a,tag:j,props:{href:G},children:[{type:b,value:l}]},{type:b,value:p}]},{type:a,tag:k,props:{code:q,language:H},children:[{type:a,tag:I,props:{},children:[{type:a,tag:k,props:{__ignoreMap:r},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"precision highp "}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:";"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F parameter from Vertex Shader"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"varying vec4 v_positionWithOffset;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F parameters passed from Javascript loop"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" slide;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:J}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:s}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" aspect;"}]}]},{type:a,tag:c,props:{class:e},children:[]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:" "}]},{type:a,tag:c,props:{class:L},children:[{type:b,value:"main"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:h},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"){"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F color, attached to current verticle {r,g,b,alpha}"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F same a["}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F   v_positionWithOffset.x,"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F   v_positionWithOffset.y, "}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F   v_positionWithOffset.z, "}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F   1"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:g}]},{type:a,tag:c,props:{class:f},children:[{type:b,value:"\u002F\u002F  ]"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"  gl_FragColor"}]},{type:a,tag:c,props:{class:"ct-592041"},children:[{type:b,value:"="}]},{type:a,tag:c,props:{class:L},children:[{type:b,value:"vec4"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:"v_positionWithOffset"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:N},children:[{type:b,value:"xyz"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:","}]},{type:a,tag:c,props:{class:"ct-a7d944"},children:[{type:b,value:"1"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:");"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"}```"}]}]}]}]}]},{type:a,tag:"style",children:[{type:b,value:".ct-a7d944{color:#79C0FF}.ct-970676{color:#C9D1D9}.ct-592041{color:#FF7B72}.ct-c08e51{color:#D2A8FF}.ct-7ad4c6{color:#8B949E}.ct-74ea1f{color:#FF7B72}.ct-399fca{color:#C9D1D9}.light .ct-399fca{color:#657B83}.light .ct-74ea1f{color:#073642}.light .ct-7ad4c6{color:#93A1A1}.light .ct-c08e51{color:#268BD2}.light .ct-592041{color:#859900}.light .ct-970676{color:#268BD2}.light .ct-a7d944{color:#D33682}"}]}],toc:{title:r,searchDepth:t,depth:t,links:[{id:n,depth:t,text:o}]}},_type:"markdown",_id:"content:Frontend:WebGL:Fragment Shaders.md",_source:"content",_file:"Frontend\u002FWebGL\u002FFragment Shaders.md",_extension:"md"}},prerenderedAt:1685704586195}}("element","text","span","ct-399fca","line","ct-7ad4c6","  ","ct-74ea1f","p","a","code","Vertex Shaders",false,"sample-fragment-vertex","Sample fragment vertex",".","precision highp float;\n\n\u002F\u002F parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\n\u002F\u002F parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(void){\n  \u002F\u002F color, attached to current verticle {r,g,b,alpha}\n  \u002F\u002F same a[\n  \u002F\u002F   v_positionWithOffset.x,\n  \u002F\u002F   v_positionWithOffset.y, \n  \u002F\u002F   v_positionWithOffset.z, \n  \u002F\u002F   1\n  \u002F\u002F  ]\n  gl_FragColor=vec4(v_positionWithOffset.xyz,1);\n}```\n","","float",2,"Fragment Shaders","\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders","root","Fragment shaders describe ","highlight","how polygons are painted"," (or textured). Read ","Basics%20of%20WebGL%20(Drawing%20a%20Cube)","Basics of WebGL (Drawing a Cube)"," first.","h2","Parameters could be passed here as written at ","Vertex%20Shaders","c","pre","uniform ","void","ct-c08e51","(","ct-970676"))