muerwre.github.io/frontend/webgl/vertex-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,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC){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:"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:x,_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:r,_path:N}]}]},{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:"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:"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-AJXcBpscEK":{_path:N,_dir:"webgl",_draft:y,_partial:y,_locale:"en",_empty:y,title:r,description:"Read Basics of WebGL (Drawing a Cube) first.",excerpt:{type:O,children:[{type:a,tag:f,props:{},children:[{type:b,value:P},{type:a,tag:h,props:{href:Q},children:[{type:b,value:R}]},{type:b,value:S}]},{type:a,tag:f,props:{},children:[{type:a,tag:T,props:{},children:[{type:b,value:r}]},{type:b,value:U},{type:a,tag:g,props:{},children:[{type:b,value:z}]},{type:b,value:V}]},{type:a,tag:k,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:s,props:{code:C,language:W},children:[{type:a,tag:X,props:{},children:[{type:a,tag:s,props:{__ignoreMap:D},children:[{type:b,value:C}]}]}]},{type:a,tag:k,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:f,props:{},children:[{type:b,value:Y},{type:a,tag:g,props:{},children:[{type:b,value:Z}]},{type:b,value:G},{type:a,tag:h,props:{href:_,rel:[t]},children:[{type:b,value:$}]},{type:b,value:aa}]},{type:a,tag:f,props:{},children:[{type:b,value:ab}]},{type:a,tag:ac,props:{},children:[{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:af}]},{type:b,value:ag}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ah}]},{type:b,value:ai},{type:a,tag:h,props:{href:aj},children:[{type:b,value:x}]},{type:b,value:u}]}]},{type:a,tag:k,props:{id:H},children:[{type:b,value:I}]},{type:a,tag:f,props:{},children:[{type:b,value:ak},{type:a,tag:g,props:{},children:[{type:b,value:al}]},{type:b,value:am},{type:a,tag:g,props:{},children:[{type:b,value:an}]},{type:b,value:ao}]},{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ap}]},{type:b,value:aq},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ar}]},{type:b,value:as},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:at}]},{type:b,value:au}]},{type:a,tag:f,props:{},children:[{type:b,value:av},{type:a,tag:h,props:{href:aw,rel:[t]},children:[{type:b,value:ax}]},{type:b,value:u}]}]},body:{type:O,children:[{type:a,tag:f,props:{},children:[{type:b,value:P},{type:a,tag:h,props:{href:Q},children:[{type:b,value:R}]},{type:b,value:S}]},{type:a,tag:f,props:{},children:[{type:a,tag:T,props:{},children:[{type:b,value:r}]},{type:b,value:U},{type:a,tag:g,props:{},children:[{type:b,value:z}]},{type:b,value:V}]},{type:a,tag:k,props:{id:A},children:[{type:b,value:B}]},{type:a,tag:s,props:{code:C,language:W},children:[{type:a,tag:X,props:{},children:[{type:a,tag:s,props:{__ignoreMap:D},children:[{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F current vertice position {x,y,z,w}"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"attribute vec4 aVertexPosition;"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F final vertice position with all transformations applied,"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F that will be passed to Fragment 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:i},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:ay}]},{type:a,tag:c,props:{class:J},children:[{type:b,value:az}]},{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:ay}]},{type:a,tag:c,props:{class:J},children:[{type:b,value:az}]},{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:J},children:[{type:b,value:"void"}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:G}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:"main"}]},{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:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"  vec4 scale"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:aA}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(slide),"}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aB}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F float array of 4 elements, same as [aspect,1,1,1]"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"  vec4 aspectRatioFix"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"(aspect,"}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:aA}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{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:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"  gl_Position"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"aVertexPosition"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:aC}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"scale"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:aC}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:"aspectRatioFix,"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:v}]},{type:a,tag:c,props:{class:i},children:[{type:b,value:"\u002F\u002F vertice offset, that will be passed to fragment shader"}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"  v_positionWithOffset"}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:w}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:z}]},{type:a,tag:c,props:{class:j},children:[{type:b,value:"+"}]},{type:a,tag:c,props:{class:n},children:[{type:b,value:K}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:L}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:M}]},{type:a,tag:c,props:{class:o},children:[{type:b,value:p}]},{type:a,tag:c,props:{class:d},children:[{type:b,value:aB}]}]},{type:a,tag:c,props:{class:e},children:[{type:a,tag:c,props:{class:d},children:[{type:b,value:"}"}]}]}]}]}]},{type:a,tag:k,props:{id:E},children:[{type:b,value:F}]},{type:a,tag:f,props:{},children:[{type:b,value:Y},{type:a,tag:g,props:{},children:[{type:b,value:Z}]},{type:b,value:G},{type:a,tag:h,props:{href:_,rel:[t]},children:[{type:b,value:$}]},{type:b,value:aa}]},{type:a,tag:f,props:{},children:[{type:b,value:ab}]},{type:a,tag:ac,props:{},children:[{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ad}]},{type:b,value:ae}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:af}]},{type:b,value:ag}]},{type:a,tag:l,props:{},children:[{type:a,tag:g,props:{},children:[{type:b,value:ah}]},{type:b,value:ai},{type:a,tag:h,props:{href:aj},children:[{type:b,value:x}]},{type:b,value:u}]}]},{type:a,tag:k,props:{id:H},children:[{type:b,value:I}]},{type:a,tag:f,props:{},children:[{type:b,value:ak},{type:a,tag:g,props:{},children:[{type:b,value:al}]},{type:b,value:am},{type:a,tag:g,props:{},children:[{type:b,value:an}]},{type:b,value:ao}]},{type:a,tag:f,props:{},children:[{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ap}]},{type:b,value:aq},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:ar}]},{type:b,value:as},{type:a,tag:c,props:{className:[m]},children:[{type:b,value:at}]},{type:b,value:au}]},{type:a,tag:f,props:{},children:[{type:b,value:av},{type:a,tag:h,props:{href:aw,rel:[t]},children:[{type:b,value:ax}]},{type:b,value:u}]},{type:a,tag:"style",children:[{type:b,value:".ct-8efb8c{color:#79C0FF}.ct-9783fe{color:#FF7B72}.ct-5548e4{color:#D2A8FF}.ct-9ee2e4{color:#FF7B72}.ct-a92b07{color:#C9D1D9}.ct-3806f6{color:#8B949E}.light .ct-3806f6{color:#93A1A1}.light .ct-a92b07{color:#657B83}.light .ct-9ee2e4{color:#073642}.light .ct-5548e4{color:#268BD2}.light .ct-9783fe{color:#859900}.light .ct-8efb8c{color:#D33682}"}]}],toc:{title:D,searchDepth:q,depth:q,links:[{id:A,depth:q,text:B},{id:E,depth:q,text:F},{id:H,depth:q,text:I}]}},_type:"markdown",_id:"content:Frontend:WebGL:Vertex Shaders.md",_source:"content",_file:"Frontend\u002FWebGL\u002FVertex Shaders.md",_extension:"md"}},prerenderedAt:1672566746265}}("element","text","span","ct-a92b07","line","p","code-inline","a","ct-3806f6","ct-9783fe","h2","li","highlight","ct-5548e4","ct-8efb8c","1",2,"Vertex Shaders","code","nofollow",".","  ","=","Fragment Shaders",false,"gl_Position","sample-code","Sample code","\u002F\u002F current vertice position {x,y,z,w}\nattribute vec4 aVertexPosition;\n\u002F\u002F final vertice position with all transformations applied,\n\u002F\u002F that will be passed to Fragment Shader\nvarying vec4 v_positionWithOffset;\n\u002F\u002F Parameters passed from Javascript loop\nuniform float slide;\nuniform float aspect;\n\nvoid main(){\n  \u002F\u002F float array of 4 elements, same as [slide,slide,slide,1]\n  vec4 scale=vec4(vec3(slide),1);\n  \u002F\u002F float array of 4 elements, same as [aspect,1,1,1]\n  vec4 aspectRatioFix=vec4(aspect,vec3(1));\n  \u002F\u002F vertice position, multiplied with matrices of scale and aspect ratio\n  gl_Position=aVertexPosition*scale*aspectRatioFix,\n  \u002F\u002F vertice offset, that will be passed to fragment shader\n  v_positionWithOffset=gl_Position+vec4(1,1,1,1);\n}\n","","passing-parameters-to-vertexshader","Passing parameters to VertexShader"," ","applying-transformations","Applying transformations","ct-9ee2e4","vec4","(",",","\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders","root","Read ","Basics%20of%20WebGL%20(Drawing%20a%20Cube)","Basics of WebGL (Drawing a Cube)"," first.","strong"," define vertice positions in 3D-space. That's just a function, that defines "," value by applying different transformations to it.","c","pre","Search for ","Uniforms","https:\u002F\u002Fopen.gl\u002Fdrawing","at open.gl"," for further reading.","There're 3 ways to pass parameters.","ul","attribute"," are parameters, that won't change. Good for vertex buffers.","uniform"," are meant to change over the time. Good for passing transformations.","varying"," are parameters, that's shared between Vertex and ","Fragment%20Shaders","Every vertice position is defined as ","{x,y,z,w}",", where ","w"," is a common denominator, that's used to achieve fast coord transformations by multiplying number of square matrices with original vertice coordinates.","We don't change vertice position buffer",", because it's slow when being run inside Javascript loop, we ","pass transformation matrices"," instead and ","multiply vertice positions with transformation matrices"," inside a Graphic Card's GPU, because that's what GPU made for.","Good explanation can be found here: ","https:\u002F\u002Fopen.gl\u002Ftransformations","open.gl","uniform ","float","vec3",");","*"))