muerwre.github.io/frontend/webgl/basics-of-webgl-(drawing-a-cube)/_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,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq,br,bs,bt,bu,bv,bw,bx,by,bz,bA,bB,bC,bD,bE,bF,bG,bH,bI,bJ,bK,bL,bM,bN,bO,bP,bQ,bR,bS,bT,bU,bV,bW,bX,bY,bZ,b_,b$,ca,cb,cc,cd,ce,cf,cg,ch,ci,cj,ck,cl,cm,cn,co,cp,cq,cr,cs,ct,cu,cv,cw,cx,cy,cz,cA,cB,cC,cD,cE,cF,cG,cH,cI,cJ,cK,cL,cM){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:br,_path:bs},{title:P,_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:I,_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:"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:"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-8rrGOHb5uL":{_path:bs,_dir:"webgl",_draft:aG,_partial:aG,_locale:"en",_empty:aG,title:br,description:H,excerpt:{type:bt,children:[{type:a,tag:x,props:{id:aH},children:[{type:c,value:aI}]},{type:a,tag:bu,props:{},children:[{type:a,tag:ah,props:{},children:[{type:a,tag:t,props:{href:ai,rel:[N]},children:[{type:c,value:ai}]}]},{type:a,tag:ah,props:{},children:[{type:c,value:bv},{type:a,tag:t,props:{href:bw,rel:[N]},children:[{type:c,value:bx}]},{type:c,value:g},{type:a,tag:t,props:{href:by,rel:[N]},children:[{type:c,value:bz}]},{type:c,value:g},{type:a,tag:t,props:{href:bA,rel:[N]},children:[{type:c,value:bB}]}]}]},{type:a,tag:x,props:{id:aJ},children:[{type:c,value:aK}]},{type:a,tag:y,props:{},children:[{type:a,tag:D,props:{},children:[{type:c,value:aj}]},{type:c,value:bC},{type:a,tag:E,props:{},children:[{type:c,value:bD}]},{type:c,value:bE},{type:a,tag:D,props:{},children:[{type:c,value:ak}]},{type:c,value:bF},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:k}]},{type:a,tag:x,props:{id:aL},children:[{type:c,value:aM}]},{type:a,tag:y,props:{},children:[{type:c,value:bG}]},{type:a,tag:y,props:{},children:[{type:a,tag:t,props:{href:O},children:[{type:c,value:I}]},{type:c,value:bH},{type:a,tag:D,props:{},children:[{type:c,value:bI}]},{type:c,value:bJ},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:bK}]},{type:a,tag:y,props:{},children:[{type:a,tag:t,props:{href:Q},children:[{type:c,value:P}]},{type:c,value:bL}]},{type:a,tag:y,props:{},children:[{type:c,value:bM},{type:a,tag:E,props:{},children:[{type:c,value:al}]},{type:c,value:g},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:bN}]},{type:c,value:bO},{type:a,tag:t,props:{href:Q},children:[{type:c,value:P}]},{type:c,value:bP},{type:a,tag:t,props:{href:O},children:[{type:c,value:I}]},{type:c,value:bQ},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:am}]},{type:a,tag:y,props:{},children:[{type:a,tag:bR,props:{alt:H,src:bS},children:[]}]},{type:a,tag:x,props:{id:aN},children:[{type:c,value:aO}]},{type:a,tag:y,props:{},children:[{type:c,value:bT},{type:a,tag:D,props:{},children:[{type:c,value:aj}]},{type:c,value:g},{type:a,tag:D,props:{},children:[{type:c,value:bU}]},{type:c,value:bV},{type:a,tag:t,props:{href:O},children:[{type:c,value:I}]},{type:c,value:X},{type:a,tag:t,props:{href:Q},children:[{type:c,value:P}]},{type:c,value:k}]},{type:a,tag:x,props:{id:aP},children:[{type:c,value:aQ}]},{type:a,tag:y,props:{},children:[{type:c,value:bW},{type:a,tag:t,props:{href:O},children:[{type:c,value:I}]},{type:c,value:bX},{type:a,tag:t,props:{href:Q},children:[{type:c,value:P}]},{type:c,value:bY},{type:a,tag:E,props:{},children:[{type:c,value:al}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:am}]},{type:a,tag:y,props:{},children:[{type:c,value:bZ},{type:a,tag:t,props:{href:b_,rel:[N]},children:[{type:c,value:b$}]},{type:c,value:ca},{type:a,tag:t,props:{href:O},children:[{type:c,value:I}]},{type:c,value:k}]},{type:a,tag:x,props:{id:aR},children:[{type:c,value:aS}]},{type:a,tag:A,props:{code:aT,language:an},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:H},children:[{type:c,value:aT}]}]}]},{type:a,tag:x,props:{id:aU},children:[{type:c,value:aV}]},{type:a,tag:A,props:{code:aW,language:an},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:H},children:[{type:c,value:aW}]}]}]},{type:a,tag:x,props:{id:aX},children:[{type:c,value:aY}]},{type:a,tag:A,props:{code:aZ,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:H},children:[{type:c,value:aZ}]}]}]},{type:a,tag:x,props:{id:a_},children:[{type:c,value:a$}]},{type:a,tag:A,props:{code:ba,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:H},children:[{type:c,value:ba}]}]}]}]},body:{type:bt,children:[{type:a,tag:x,props:{id:aH},children:[{type:c,value:aI}]},{type:a,tag:bu,props:{},children:[{type:a,tag:ah,props:{},children:[{type:a,tag:t,props:{href:ai,rel:[N]},children:[{type:c,value:ai}]}]},{type:a,tag:ah,props:{},children:[{type:c,value:bv},{type:a,tag:t,props:{href:bw,rel:[N]},children:[{type:c,value:bx}]},{type:c,value:g},{type:a,tag:t,props:{href:by,rel:[N]},children:[{type:c,value:bz}]},{type:c,value:g},{type:a,tag:t,props:{href:bA,rel:[N]},children:[{type:c,value:bB}]}]}]},{type:a,tag:x,props:{id:aJ},children:[{type:c,value:aK}]},{type:a,tag:y,props:{},children:[{type:a,tag:D,props:{},children:[{type:c,value:aj}]},{type:c,value:bC},{type:a,tag:E,props:{},children:[{type:c,value:bD}]},{type:c,value:bE},{type:a,tag:D,props:{},children:[{type:c,value:ak}]},{type:c,value:bF},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:k}]},{type:a,tag:x,props:{id:aL},children:[{type:c,value:aM}]},{type:a,tag:y,props:{},children:[{type:c,value:bG}]},{type:a,tag:y,props:{},children:[{type:a,tag:t,props:{href:O},children:[{type:c,value:I}]},{type:c,value:bH},{type:a,tag:D,props:{},children:[{type:c,value:bI}]},{type:c,value:bJ},{type:a,tag:D,props:{},children:[{type:c,value:T}]},{type:c,value:bK}]},{type:a,tag:y,props:{},children:[{type:a,tag:t,props:{href:Q},children:[{type:c,value:P}]},{type:c,value:bL}]},{type:a,tag:y,props:{},children:[{type:c,value:bM},{type:a,tag:E,props:{},children:[{type:c,value:al}]},{type:c,value:g},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:bN}]},{type:c,value:bO},{type:a,tag:t,props:{href:Q},children:[{type:c,value:P}]},{type:c,value:bP},{type:a,tag:t,props:{href:O},children:[{type:c,value:I}]},{type:c,value:bQ},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:am}]},{type:a,tag:y,props:{},children:[{type:a,tag:bR,props:{alt:H,src:bS},children:[]}]},{type:a,tag:x,props:{id:aN},children:[{type:c,value:aO}]},{type:a,tag:y,props:{},children:[{type:c,value:bT},{type:a,tag:D,props:{},children:[{type:c,value:aj}]},{type:c,value:g},{type:a,tag:D,props:{},children:[{type:c,value:bU}]},{type:c,value:bV},{type:a,tag:t,props:{href:O},children:[{type:c,value:I}]},{type:c,value:X},{type:a,tag:t,props:{href:Q},children:[{type:c,value:P}]},{type:c,value:k}]},{type:a,tag:x,props:{id:aP},children:[{type:c,value:aQ}]},{type:a,tag:y,props:{},children:[{type:c,value:bW},{type:a,tag:t,props:{href:O},children:[{type:c,value:I}]},{type:c,value:bX},{type:a,tag:t,props:{href:Q},children:[{type:c,value:P}]},{type:c,value:bY},{type:a,tag:E,props:{},children:[{type:c,value:al}]},{type:c,value:X},{type:a,tag:E,props:{},children:[{type:c,value:W}]},{type:c,value:am}]},{type:a,tag:y,props:{},children:[{type:c,value:bZ},{type:a,tag:t,props:{href:b_,rel:[N]},children:[{type:c,value:b$}]},{type:c,value:ca},{type:a,tag:t,props:{href:O},children:[{type:c,value:I}]},{type:c,value:k}]},{type:a,tag:x,props:{id:aR},children:[{type:c,value:aS}]},{type:a,tag:A,props:{code:aT,language:an},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:H},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F render-a-cube.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:bb}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\".\u002Fcreate-shader\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:bb}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cb}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\".\u002Fvertex.glsl?raw\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:bb}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\".\u002Ffragment.glsl?raw\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"document"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getElementyId"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"'view'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:ce}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cd}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getRenderingContext"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"'webgl'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F This one should be put inside requestAnimationFrame"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:cf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ce}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")(); "}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:"function"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:cg},children:[{type:c,value:ch}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:aq},children:[{type:c,value:bd}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:K}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:aq},children:[{type:c,value:bd}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Initializing viewport"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ci}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ck}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cl}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"createProgram"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:be}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ad},children:[{type:c,value:bf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"Can't init programm\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:av}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Setting up VERTEX and FRAGMENT shaders"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cb}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"VERTEX_SHADER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:co}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cc}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"FRAGMENT_SHADER"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:co}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"linkProgram"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getProgramParameter"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"LINK_STATUS"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cp}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ad},children:[{type:c,value:bf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"Could not initialise shaders\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:av}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Cube's vertices Array\u003C[x,y,z]\u003E, 8 items"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cq}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 0"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 1"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 2"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 3"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bg}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 4"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 5"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:",    "}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 6"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bh}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 7"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cr}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Cube's indices, that connect vertices"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cq}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ae}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ag}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:af}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cr}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002FThe following code snippet creates a vertex buffer and binds the vertices to it"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cs}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:be}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ct}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ad},children:[{type:c,value:"Float32Array"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ak}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cu}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:bj},children:[{type:c,value:cv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F create a vertex buffer and bind the indices to it"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cs}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:be}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ct}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ad},children:[{type:c,value:"Uint16Array"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"),"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cu}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:bj},children:[{type:c,value:cv}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F initial drawing"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cj}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:bm}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"enable"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"DEPTH_TEST"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ck}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cl}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"|"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"DEPTH_BUFFER_BIT"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:ci}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Bind squareVertexBuffer as vertex positions buffer"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:az}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bi}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"vertexAttribPointer"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:cx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F 3 bytes-long"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"FLOAT"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:bj},children:[{type:c,value:"false"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F don't normalize (int to float)"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Send vertice buffer as `aVertexPosition` inside vertex shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"enableVertexAttribArray"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cw}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:cx}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:")"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:bl}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cy}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cy}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"0.01"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F that's the main rendering callback"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:cz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" () "}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cB}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"useProgram"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"0.25"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F That will be used for scaling inside Vertex Shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"slide\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F GL Screen is square, so we need to fix it's aspect ration"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:L}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"\"aspect\""}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:ap}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:aB}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:bk}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"drawElements"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"TRIANGLES"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:T}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"UNSIGNED_SHORT"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aE}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"    );"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u003E"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"||"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:B}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:S}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"    }"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"+="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"  };"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cE}]}]}]}]}]},{type:a,tag:x,props:{id:aU},children:[{type:c,value:aV}]},{type:a,tag:A,props:{code:aW,language:an},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:H},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F create-shader.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:cg},children:[{type:c,value:ch}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:K}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:cF}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:aq},children:[{type:c,value:"string"}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:K}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:z},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:cG}]},{type:a,tag:b,props:{class:Z},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:aq},children:[{type:c,value:bd}]},{type:a,tag:b,props:{class:z},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-636b7a"},children:[{type:c,value:"\u002F\u002F gl.VERTEX_SHADER or gl.FRAGMENT_SHADER"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:cA}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cB}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cG}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:as}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:ad},children:[{type:c,value:bf}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"`Can't init shader`"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:av}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"shaderSource"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"compileShader"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:U}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:at}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getShaderParameter"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"COMPILE_STATUS"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:cp}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:cH}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:m}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:"getShaderInfoLog"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"`Could not compile WebGL program. "}]},{type:a,tag:b,props:{class:"ct-57374d"},children:[{type:c,value:"\\n\\n"}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:cH}]},{type:a,tag:b,props:{class:C},children:[{type:c,value:"}`"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:av}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:cz}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:V}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cE}]}]}]}]}]},{type:a,tag:x,props:{id:aX},children:[{type:c,value:aY}]},{type:a,tag:A,props:{code:aZ,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:H},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F current vertice position {x,y,z,w}"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"attribute vec4 aVertexPosition;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F final vertice position with all transformations applied,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F that will be passed to Fragment Shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cI}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F Parameters passed from Javascript loop"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cJ}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" slide;"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cJ}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" aspect;"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cK}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(){"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F float array of 4 elements, same as [slide,slide,slide,1]"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"  vec4 scale"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(slide),"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F float array of 4 elements, same as [aspect,1,1,1]"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"  vec4 aspectRatioFix"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(aspect,"}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cL}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"));"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F vertice position, multiplied with matrices of scale and aspect ratio"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"  gl_Position"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"aVertexPosition"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:bn}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:bo}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"aspectRatioFix,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F vertice offset, that will be passed to fragment shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"  v_positionWithOffset"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"gl_Position"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"+"}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cM}]}]}]}]}]},{type:a,tag:x,props:{id:a_},children:[{type:c,value:a$}]},{type:a,tag:A,props:{code:ba,language:ao},children:[{type:a,tag:R,props:{},children:[{type:a,tag:A,props:{__ignoreMap:H},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"precision highp "}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:bp}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F parameter from Vertex Shader"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cI}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:v},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:h}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:cK}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:bq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"){"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F color, attached to current verticle {r,g,b,alpha}"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F same a["}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F   v_positionWithOffset.x,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F   v_positionWithOffset.y, "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F   v_positionWithOffset.z, "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F   1"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:p},children:[{type:c,value:"\u002F\u002F  ]"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"  gl_FragColor"}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:aF}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:o}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"v_positionWithOffset"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"xyz"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:r}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:cM}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-57374d{color:#79C0FF}.ct-636b7a{color:#8B949E}.ct-eba289{color:#79C0FF}.ct-a8a068{color:#79C0FF}.ct-f5bfb4{color:#79C0FF}.ct-7639ed{color:#79C0FF}.ct-cafa59{color:#FFA657}.ct-46980c{color:#FF7B72}.ct-498d8f{color:#FFA657}.ct-520c6a{color:#C9D1D9}.ct-d86af1{color:#D2A8FF}.ct-dbd4e3{color:#79C0FF}.ct-a9317a{color:#FF7B72}.ct-ccae6d{color:#A5D6FF}.ct-516446{color:#C9D1D9}.ct-505858{color:#C9D1D9}.ct-3be404{color:#FF7B72}.ct-03b3df{color:#8B949E}.light .ct-03b3df{color:#93A1A1}.light .ct-3be404{color:#859900}.light .ct-505858{color:#657B83}.light .ct-516446{color:#268BD2}.light .ct-ccae6d{color:#2AA198}.light .ct-a9317a{color:#073642}.light .ct-dbd4e3{color:#268BD2}.light .ct-d86af1{color:#268BD2}.light .ct-520c6a{color:#657B83}.light .ct-498d8f{color:#657B83}.light .ct-46980c{color:#859900}.light .ct-cafa59{color:#268BD2}.light .ct-7639ed{color:#859900}.light .ct-f5bfb4{color:#D33682}.light .ct-a8a068{color:#859900}.light .ct-eba289{color:#B58900}.light .ct-636b7a{color:#93A1A1}.light .ct-57374d{color:#CB4B16}"}]}],toc:{title:H,searchDepth:M,depth:M,links:[{id:aH,depth:M,text:aI},{id:aJ,depth:M,text:aK},{id:aL,depth:M,text:aM},{id:aN,depth:M,text:aO},{id:aP,depth:M,text:aQ},{id:aR,depth:M,text:aS},{id:aU,depth:M,text:aV},{id:aX,depth:M,text:aY},{id:a_,depth:M,text:a$}]}},_type:"markdown",_id:"content:Frontend:WebGL:Basics of WebGL (Drawing a Cube).md",_source:"content",_file:"Frontend\u002FWebGL\u002FBasics of WebGL (Drawing a Cube).md",_extension:"md"}},prerenderedAt:1669555900034}}("element","span","text","ct-505858","line","ct-516446",", "," ","ct-f5bfb4","ct-3be404",".","  ","gl","ct-d86af1","(","ct-03b3df","1",");","ct-dbd4e3","a","    ","ct-a9317a","=","h2","p","ct-520c6a","code","0","ct-ccae6d","strong","code-inline","const","-","","Vertex Shaders",";",",","prg",2,"nofollow","Vertex%20Shaders","Fragment Shaders","Fragment%20Shaders","pre","      ","indices"," (","shader","varyings"," and ","ct-498d8f","ct-46980c",":","bindBuffer","createShader","if","new","ct-a8a068","2","7","6","li","https:\u002F\u002Fopen.gl\u002F","Vertices","vertices","uniforms",").","typescript","c","width","ct-7639ed","height",") {","!","throw","  }","3","4","5","ARRAY_BUFFER","), ","ELEMENT_ARRAY_BUFFER","i","speed","        ","vec4",false,"helpful-documentation","Helpful documentation","vertices-and-indices","Vertices and Indices","shaders","Shaders","program","Program","applying-transformations","Applying transformations","source-code-with-explanations","Source code with explanations","\u002F\u002F render-a-cube.ts\nimport { createShader } from \".\u002Fcreate-shader\";\nimport vxShader from \".\u002Fvertex.glsl?raw\";\nimport fgShader from \".\u002Ffragment.glsl?raw\";\n\nconst canvas = document.getElementyId('view');\nconst ctx = canvas.getRenderingContext('webgl');\n\n\u002F\u002F This one should be put inside requestAnimationFrame\ndrawCube(ctx)(); \n\nfunction drawCube (\n  gl: WebGL2RenderingContext, \n  width: number,\n  height: number\n) {\n  \u002F\u002F Initializing viewport\n  gl.viewport(0, 0, width, height);\n  gl.clearColor(0, 0, 0, 0);\n  gl.clear(gl.COLOR_BUFFER_BIT);\n\n  const prg = gl.createProgram();\n  if (!prg) {\n    throw new Error(\"Can't init programm\");\n  }\n\n  \u002F\u002F Setting up VERTEX and FRAGMENT shaders\n  const vx = createShader(gl, vxShader, gl.VERTEX_SHADER);\n  gl.attachShader(prg, vx);\n  const fx = createShader(gl, fgShader, gl.FRAGMENT_SHADER);\n  gl.attachShader(prg, fx);\n  gl.linkProgram(prg);\n  if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {\n    throw new Error(\"Could not initialise shaders\");\n  }\n\n  \u002F\u002F Cube's vertices Array\u003C[x,y,z]\u003E, 8 items\n  const vertices = [\n    -1, -1, -1, \u002F\u002F 0\n    1, -1, -1,  \u002F\u002F 1\n    1, 1, -1,   \u002F\u002F 2\n    -1, 1, -1,  \u002F\u002F 3\n    -1, -1, 1,  \u002F\u002F 4\n    1, -1, 1,   \u002F\u002F 5\n    1, 1, 1,    \u002F\u002F 6\n    -1, 1, 1,   \u002F\u002F 7\n  ];\n\n  \u002F\u002F Cube's indices, that connect vertices\n  const indices = [\n    2, 1, 0, 0, 3, 2, 0, 4, 7, 7, 3, 0, 0, 1, 5, 5, 4, 0, 1, 2, 6, 6, 5, 1, 2,\n    3, 7, 7, 6, 2, 4, 5, 6, 6, 7, 4,\n  ];\n\n  \u002F\u002FThe following code snippet creates a vertex buffer and binds the vertices to it\n  const squareVertexBuffer = gl.createBuffer();\n  gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n  gl.bindBuffer(gl.ARRAY_BUFFER, null);\n\n  \u002F\u002F create a vertex buffer and bind the indices to it\n  const squareIndexBuffer = gl.createBuffer();\n  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n  gl.bufferData(\n    gl.ELEMENT_ARRAY_BUFFER,\n    new Uint16Array(indices),\n    gl.STATIC_DRAW\n  );\n  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n\n  \u002F\u002F initial drawing\n  gl.clearColor(0.0, 0.0, 0.0, 0.0);\n  gl.enable(gl.DEPTH_TEST);\n  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n  gl.viewport(0, 0, width, height);\n\n  \u002F\u002F Bind squareVertexBuffer as vertex positions buffer\n  gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);\n  \n  \u002F\u002F Send every 3 bytes from squareVertexBuffer as {x,y,z} for each verticle\n  gl.vertexAttribPointer(\n      gl.getAttribLocation(prg, \"aVertexPosition\"), \n      3, \u002F\u002F 3 bytes-long\n      gl.FLOAT,\n      false, \u002F\u002F don't normalize (int to float)\n      0, \n      0\n  );\n  \u002F\u002F Send vertice buffer as `aVertexPosition` inside vertex shader\n  gl.enableVertexAttribArray(\n      gl.getAttribLocation(prg, \"aVertexPosition\")\n  );\n\n  let i = 0;\n  let speed = 0.01;\n\n  \u002F\u002F that's the main rendering callback\n  return () =\u003E {\n    gl.useProgram(prg);\n\n    const scale = i * 0.25 + 0.25;\n\n    \u002F\u002F That will be used for scaling inside Vertex Shader\n    gl.uniform1f(gl.getUniformLocation(prg, \"slide\"), scale);\n\n    \u002F\u002F GL Screen is square, so we need to fix it's aspect ration\n    gl.uniform1f(gl.getUniformLocation(prg, \"aspect\"), height \u002F width);\n\n    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);\n    gl.drawElements(\n        gl.TRIANGLES, \n        indices.length, \n        gl.UNSIGNED_SHORT, \n        0\n    );\n\n    if (i \u003E 1 || i \u003C 0) {\n      speed = -speed;\n    }\n\n    i += speed;\n  };\n};\n","shader-compiler","Shader compiler","\u002F\u002F create-shader.ts\nexport const createShader = (\n  gl: WebGL2RenderingContext,\n  sourceCode: string,\n  type: number, \u002F\u002F gl.VERTEX_SHADER or gl.FRAGMENT_SHADER\n) =\u003E {\n  const shader = gl.createShader(type);\n  if (!shader) {\n    throw new Error(`Can't init shader`);\n  }\n\n  gl.shaderSource(shader, sourceCode);\n  gl.compileShader(shader);\n\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    const info = gl.getShaderInfoLog(shader);\n    throw `Could not compile WebGL program. \\n\\n${info}`;\n  }\n\n  return shader;\n};\n","vertex-shader-example","Vertex Shader Example","\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","fragment-shader-example","Fragment Shader Example","precision highp float;\n\n\u002F\u002F parameter from Vertex Shader\nvarying vec4 v_positionWithOffset;\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","import","from","number","();","Error",",  ",",   ","squareVertexBuffer","ct-eba289","squareIndexBuffer","  );","0.0","scale","*","float","void","Basics Of WebGL (Drawing A Cube)","\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)","root","ul","This youtube series: ","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=kB0ZVUrI4Aw","Basics","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=3yLL9ADo-ko","Making a cube, applying transformations","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=hpnd11doMgc&t=52s","Texturing"," are points with specific coordinates ","{x,y,z}"," in a 3D-space. We can build any figure by connecting "," in triangles with ","Shaders are functions, written in C, which describe how to draw and color polygons to Graphic Card."," describe ","vertice"," positions, so Graphic Card can position them by connecting with "," and project to 2D canvas."," describe the way polygons should be colored by assigning colors to Vertices or by applying textures  to polygons.","Shaders can have parameters passed from Javascript code (","attributes","). "," can also access data from "," (that ones called ","img","https:\u002F\u002Fopen.gl\u002Fmedia\u002Fimg\u002Fc2_pipeline.png","Program, as far I understand, is a scene, that's described with ","Indices",", specific ","The best way to change positions inside "," or color in "," is to pass parameters (also called ","Read about that at ","https:\u002F\u002Fopen.gl\u002Ftransformations","open.gl"," and at ","vxShader","fgShader","canvas","ctx","drawCube","ct-cafa59","WebGL2RenderingContext","viewport","clearColor","clear","COLOR_BUFFER_BIT","vx","attachShader","fx",")) {"," [","  ];","createBuffer","bufferData","STATIC_DRAW","null","getAttribLocation","\"aVertexPosition\"","let","return","=\u003E"," {","uniform1f","getUniformLocation","};","sourceCode","type","info","varying vec4 v_positionWithOffset;","uniform ","main","vec3","}"))