muerwre.github.io/frontend/webgl/rendering-without-blocking-in-a-worker/_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){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:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:$,_path:aa},{title:"Vertex Shaders",_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-jfOHJYayRG":{_path:aa,_dir:"webgl",_draft:P,_partial:P,_locale:"en",_empty:P,title:$,description:Q,excerpt:{type:ab,children:[{type:a,tag:m,props:{},children:[{type:c,value:Q}]},{type:a,tag:m,props:{},children:[{type:c,value:ac}]},{type:a,tag:m,props:{},children:[{type:c,value:ad},{type:a,tag:B,props:{href:ae,rel:[C]},children:[{type:c,value:af}]},{type:c,value:ag},{type:a,tag:B,props:{href:ah,rel:[C]},children:[{type:c,value:D}]},{type:c,value:ai}]},{type:a,tag:m,props:{},children:[{type:c,value:aj}]},{type:a,tag:r,props:{code:R,language:E},children:[{type:a,tag:F,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:c,value:R}]}]}]},{type:a,tag:m,props:{},children:[{type:c,value:ak}]},{type:a,tag:r,props:{code:S,language:E},children:[{type:a,tag:F,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:c,value:S}]}]}]}]},body:{type:ab,children:[{type:a,tag:m,props:{},children:[{type:c,value:Q}]},{type:a,tag:m,props:{},children:[{type:c,value:ac}]},{type:a,tag:m,props:{},children:[{type:c,value:ad},{type:a,tag:B,props:{href:ae,rel:[C]},children:[{type:c,value:af}]},{type:c,value:ag},{type:a,tag:B,props:{href:ah,rel:[C]},children:[{type:c,value:D}]},{type:c,value:ai}]},{type:a,tag:m,props:{},children:[{type:c,value:aj}]},{type:a,tag:r,props:{code:R,language:E},children:[{type:a,tag:F,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F main.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"Worker"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"'.\u002Frender-worker.ts'"}]},{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:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"document"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"getElementById"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"'view'"}]},{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:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F attaching event listener to worker"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:":"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:"MessageEvent"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"?."}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:an}]},{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:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:ap}]},{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:K}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"event"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"as"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:D}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:M}]},{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:"}"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F sending canvas contents to worker"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"renderInCanvas"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"return"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:at}]}]},{type:a,tag:b,props:{class:e},children:[{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:i}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:as}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aw}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:ao}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:T}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:O}]},{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:az}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:aA}]}]}]}]}]},{type:a,tag:m,props:{},children:[{type:c,value:ak}]},{type:a,tag:r,props:{code:S,language:E},children:[{type:a,tag:F,props:{},children:[{type:a,tag:r,props:{__ignoreMap:z},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F render-worker.ts"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:aB},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:aB},children:[{type:c,value:"default"}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:ar}]},{type:a,tag:b,props:{class:"ct-f9dec0"},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:_},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:"ct-efbc2f"},children:[{type:c,value:"{"}]}]},{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:g},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:al}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:"message"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:at}]}]},{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:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"instanceof"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:U},children:[{type:c,value:D}]},{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:N}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:"'Received unknown data'"}]},{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:K}]}]},{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:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F OffscreenCanvas can be set up inside workers"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"OffscreenCanvas"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aE}]},{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:i}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:y},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:am}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:an}]},{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:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:H}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:J}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:W}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:A}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:f}]},{type:a,tag:b,props:{class:Y},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:u},children:[{type:c,value:ap}]},{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:K}]}]},{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:i}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aq}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:L},children:[{type:c,value:M}]},{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:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F That will block execution inside worker for "}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F a couple of seconds"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"doHardRenderingStuffHere"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aD}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aE}]},{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:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:s},children:[{type:c,value:"\u002F\u002F Sending resulting image back to main thread"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:au}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:av}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:aw}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:V}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:aC}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:l}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:ax}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ay}]},{type:a,tag:b,props:{class:g},children:[{type:c,value:O}]},{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:az}]}]},{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:aA}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-efbc2f{color:#C9D1D9}.ct-f9dec0{color:#FF7B72}.ct-888044{color:#FFA657}.ct-07071a{color:#FF7B72}.ct-80cb17{color:#79C0FF}.ct-e14aea{color:#79C0FF}.ct-d51149{color:#FFA657}.ct-51042a{color:#C9D1D9}.ct-6305c6{color:#A5D6FF}.ct-4b5866{color:#D2A8FF}.ct-6a1d4f{color:#FF7B72}.ct-47c9b9{color:#79C0FF}.ct-bff5e9{color:#C9D1D9}.ct-4485ca{color:#FF7B72}.ct-424312{color:#8B949E}.light .ct-424312{color:#93A1A1}.light .ct-4485ca{color:#073642}.light .ct-bff5e9{color:#657B83}.light .ct-47c9b9{color:#268BD2}.light .ct-6a1d4f{color:#859900}.light .ct-4b5866{color:#268BD2}.light .ct-6305c6{color:#2AA198}.light .ct-51042a{color:#268BD2}.light .ct-d51149{color:#268BD2}.light .ct-e14aea{color:#859900}.light .ct-80cb17{color:#D33682}.light .ct-07071a{color:#859900}.light .ct-888044{color:#657B83}.light .ct-f9dec0{color:#073642}.light .ct-efbc2f{color:#657B83}"}]}],toc:{title:z,searchDepth:aF,depth:aF,links:[]}},_type:"markdown",_id:"content:Frontend:WebGL:Rendering without blocking in a Worker.md",_source:"content",_file:"Frontend\u002FWebGL\u002FRendering without blocking in a Worker.md",_extension:"md"}},prerenderedAt:1669555900243}}("element","span","text","ct-bff5e9","line"," ","ct-51042a","ct-6a1d4f","    ","ct-4b5866","(",".","p","ct-4485ca",");","=","data","code","ct-424312","const","ct-6305c6","canvas","ctx",", ","ct-47c9b9","","new","a","nofollow","ImageBitmap","typescript","pre","=\u003E","if"," (","!","    }","ct-80cb17","0","      ","image",false,"Rendering items on #canvas in main loop might cause interface freezes, preventing render process from executing properly by flooding execution stack with operations.","\u002F\u002F main.ts\nconst instance = new Worker('.\u002Frender-worker.ts');\nconst canvas = document.getElementById('view');\n\n\u002F\u002F attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) =\u003E {\n    const ctx = canvas?.getContext(\"2d\");\n    if (!ctx) {\n        throw new Error(`Can't get 2D context`);\n    }\n    \n    ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n\u002F\u002F sending canvas contents to worker\nconst renderInCanvas = () =\u003E {\n    if (!canvas.current) {\n      return;\n    }\n    \n    createImageBitmap(canvas.current).then(image =\u003E {\n        instance.postMessage(image, { transfer: [image] })\n    });\n};\n","\u002F\u002F render-worker.ts\nexport default () =\u003E {\n  self.onmessage = (message: MessageEvent) =\u003E {\n    const data = message.data;\n\n    if (!(data instanceof ImageBitmap)) {\n      throw new Error('Received unknown data')\n    }\n\n    \u002F\u002F OffscreenCanvas can be set up inside workers\n    const canvas = new OffscreenCanvas(data.width, data.height);\n    const ctx = canvas.getContext(\"2d\");\n\n    if (!ctx) {\n      throw new Error(`Can't get 2D context`);\n    }\n\n    ctx.drawImage(data, 0, 0);\n\n    \u002F\u002F That will block execution inside worker for \n    \u002F\u002F a couple of seconds\n    doHardRenderingStuffHere(ctx, data.width, data.height);\n\n    \u002F\u002F Sending resulting image back to main thread\n    createImageBitmap(canvas).then((image) =\u003E {\n      self.postMessage(image, { transfer: [image] });\n    });\n  };\n};\n","instance","ct-d51149"," {",") {","throw","ct-e14aea","Error","ct-888044","Rendering Without Blocking In A Worker","\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker","root","To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop.","Workers can have access to ","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FTransferable_objects","Transferrable Objects"," from main thread by receiving memory address. That's a lot faster than cloning. In this case ","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FImageBitmap"," is transferrable.","Code for the main thread component:","Worker code:","onmessage","getContext","\"2d\"","        ","`Can't get 2D context`","drawImage"," () ","current",";","createImageBitmap",").","then","postMessage",", { transfer: [","    });","};","ct-07071a","self","width","height",2))