{"id":9295,"date":"2026-04-08T15:00:02","date_gmt":"2026-04-08T13:00:02","guid":{"rendered":"https:\/\/www.codecon.sk\/?p=9295"},"modified":"2026-05-25T15:26:53","modified_gmt":"2026-05-25T13:26:53","slug":"rendering-maps-at-scale-bridging-openlayers-and-pixijs","status":"publish","type":"post","link":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/","title":{"rendered":"Rendering Maps at Scale: Bridging OpenLayers and PixiJS"},"content":{"rendered":"

The Problem<\/strong>
\nWhen building a meteorological map application, you quickly run into a rendering wall. You need to display thousands of data points \u2014 wind barbs, temperature gradients, animated streamlines \u2014 all on an interactive map that users can pan, zoom, and step through time.<\/p>\n

SVG works fine for a few hundred elements, but falls apart at larger scales. Canvas 2D is faster, but redrawing everything on every frame becomes a bottleneck. The natural next step is the GPU.<\/p>\n

This post walks through how we extended OpenLayers<\/a> \u2014 a library for displaying interactive maps in the browser \u2014 with a custom WebGL rendering pipeline, using PixiJS<\/a> to handle the GPU side. PixiJS is a 2D rendering library that normally draws to its own canvas, but here we use it differently. It is less about the final visuals and more about the plumbing that makes it work.<\/p>\n

The full source code is on GitHub<\/a>.<\/p>\n

Here is what the end result looks like \u2014 wind rendered as barbs and as streamlines:<\/p>\n

\"Wind
\nWind barbs \u2014 each arrow shows wind direction and speed at a grid point<\/em><\/p>\n

\"Wind
\nWind streamlines \u2014 continuous lines that follow the wind flow<\/em><\/p>\n

1. Keeping Concerns Separate
\n<\/strong>OpenLayers structures its rendering around three abstractions: a source<\/strong> that fetches data, a layer<\/strong> that owns the source, and a renderer<\/strong> that draws pixels. We extend all three.<\/p>\n

To keep the code manageable, we split the renderer<\/strong> into two classes. The renderer handles OpenLayers’ lifecycle \u2014 it knows about frames, caching, and when to trigger a redraw. The detail<\/strong> class does the actual drawing and has no knowledge of OpenLayers at all.<\/p>\n

The detail class follows a simple interface ( renderer-detail.ts<\/a> ):
\n\"renderer-detail\"Each concrete layer type \u2014 like WindbarbLayer<\/a> \u2014 only needs to wire these pieces together. The drawing complexity lives in its detail class. See also custom-layer.ts<\/a>, custom-source.ts<\/a> and custom-layer-renderer.ts<\/a>.<\/p>\n

2. Injecting PixiJS into an Existing WebGL Context
\n<\/strong>Normally PixiJS creates and owns a <canvas><\/span> element. Here we flip that: we create the WebGL2RenderingContext<\/span> ourselves and hand it to PixiJS. This way we stay in control of the canvas, and PixiJS just borrows it ( pixi-layer-detail.ts<\/a> ):<\/p>\n

\"\"<\/p>\n

This gives us the full PixiJS scene graph \u2014 Container, Graphics, Mesh, Shader, Texture<\/span> \u2014 on a context we share with our own GLSL shaders. PixiJS takes care of buffer uploads and texture binding. We stay in control of the canvas.<\/p>\n

3. The Offscreen Render Queue
\n<\/strong>This is where the main performance gains come from.<\/p>\n

WebGL rendering only needs to happen when data changes<\/em>. Panning and zooming are just coordinate changes \u2014 they do not need the GPU to redraw anything. So we separate the two:<\/p>\n

    \n
  1. When data changes, render onto an OffscreenCanvas<\/span> and save the result as an ImageBitmap<\/span><\/li>\n
  2. On every frame after that (pan, zoom, resize), draw that saved image onto the visible canvas using a simple coordinate transform<\/li>\n<\/ol>\n

    The key design decisions in offscreen-renderer-queue.ts<\/a> :
    \n– One shared offscreen canvas for all layers.<\/strong> Multiple layers cannot use the same WebGL context at the same time, so they share a single canvas and take turns.
    \n– Jobs run one at a time, never at the same time.<\/strong> We use RxJS concatMap<\/span> to make sure render jobs are processed one after another.
    \n– Pixels are handed off without copying.\u00a0<\/strong>transferRoImageBitmap()<\/span> gives ownership of the pixel buffer to the bitmap directly.<\/p>\n

    Once a frame is rendered and saved, every pan or zoom is just a single ctx.drawImage()<\/span> call \u2014 no GPU work at all. On top of this, an LRU cache ( lru-cache.ts<\/a> ) stores previously rendered frames so stepping back and forth through forecast time steps requires no GPU work either.<\/p>\n

    4. Encoding Grid Data as GPU Textures
    \n<\/strong>Wind data is stored as two separate grids: U<\/strong> (the east-west component) and V<\/strong> (the north- south component). Together they describe both the direction and speed of wind at every point. For example, a strong U value with a small V value means the wind is blowing mostly east or west.<\/p>\n

    Weather grid data \u2014 say, wind U\/V components across a 200\u00d7150 grid \u2014 arrives as JavaScript Float64Array<\/span>s. Sending 30,000 individual float values to the GPU as vertex attributes is not practical.<\/p>\n

    Instead, we pack the data into a GPU texture. Each grid point becomes one pixel, with the U and V wind components packed into the four color channels (R, G, B, A), two bytes each. The vertex shader then reads each wind value by looking up that pixel in the texture. The decode is one line of GLSL ( windbarb-renderer-detail.ts<\/a> ):\"grid\"The GPU reads and processes all 30,000 wind values in parallel, with no per-frame CPU work. The full encoding logic lives in data-texture.ts<\/a> .<\/p>\n

    Putting It All Together
    \n<\/strong>Here is the flow from new data arriving to pixels on screen:
    \n1. Source params change<\/strong> \u2192 new grid data is fetched from the weather API
    \n2. Data arrives<\/strong> \u2192 the detail class updates the GPU texture and renders to an ImageBitmap<\/span> via the offscreen queue
    \n3. Image is cached<\/strong> \u2192 stored in the LRU cache by time step, viewport size, and position
    \n4. Map moves<\/strong> \u2192 OpenLayers calls renderFrame()<\/span> on every interaction, which is just a fast drawImage()<\/span> with a position transform<\/p>\n

    Steps 1\u20133 are async and only run when data changes. Step 4 runs on every animation frame and is cheap.<\/p>\n

    Closing Thoughts
    \n<\/strong>This setup is not specific to weather data. The same approach works for any layer type where you need GPU rendering on an interactive map: point clouds, heatmaps, custom vector overlays.<\/p>\n

    The setup takes some effort, but once it is in place, adding a new layer type means writing one detail class and a few shaders
    \n\u2014 the rest takes care of itsef<\/p>\n","protected":false},"excerpt":{"rendered":"

    How we wired a WebGL rendering pipeline into a geospatial map using PixiJS and OpenLayers<\/p>\n","protected":false},"author":5,"featured_media":10002,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[88],"tags":[89,90,92,91],"class_list":["post-9295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codecon","tag-bratislava","tag-codecon","tag-inspiration","tag-partners"],"acf":[],"yoast_head":"\nRendering Maps at Scale: Bridging OpenLayers and PixiJS — CODECON<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rendering Maps at Scale: Bridging OpenLayers and PixiJS — CODECON\" \/>\n<meta property=\"og:description\" content=\"How we wired a WebGL rendering pipeline into a geospatial map using PixiJS and OpenLayers\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/\" \/>\n<meta property=\"og:site_name\" content=\"CODECON\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-08T13:00:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-25T13:26:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codecon.sk\/wp-content\/uploads\/2026\/04\/rendering.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Eva Kalinov\u00e1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eva Kalinov\u00e1\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/\"},\"author\":{\"name\":\"Eva Kalinov\u00e1\",\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/#\\\/schema\\\/person\\\/815e94ce93756757859939501e018711\"},\"headline\":\"Rendering Maps at Scale: Bridging OpenLayers and PixiJS\",\"datePublished\":\"2026-04-08T13:00:02+00:00\",\"dateModified\":\"2026-05-25T13:26:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/\"},\"wordCount\":932,\"image\":{\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codecon.sk\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/rendering.webp\",\"keywords\":[\"#bratislava\",\"#codecon\",\"#inspiration\",\"#partners\"],\"articleSection\":[\"CODECON\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/\",\"url\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/\",\"name\":\"Rendering Maps at Scale: Bridging OpenLayers and PixiJS — CODECON\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codecon.sk\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/rendering.webp\",\"datePublished\":\"2026-04-08T13:00:02+00:00\",\"dateModified\":\"2026-05-25T13:26:53+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/#\\\/schema\\\/person\\\/815e94ce93756757859939501e018711\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codecon.sk\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/rendering.webp\",\"contentUrl\":\"https:\\\/\\\/www.codecon.sk\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/rendering.webp\",\"width\":2048,\"height\":1024,\"caption\":\"rendering blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Domovsk\u00e1 str\u00e1nka\",\"item\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rendering Maps at Scale: Bridging OpenLayers and PixiJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/\",\"name\":\"CODECON\",\"description\":\"Najv\u00e4\u010d\u0161ie komunitn\u00e9 stretnutie v\u00fdvoj\u00e1rov na Slovensku\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codecon.sk\\\/en\\\/#\\\/schema\\\/person\\\/815e94ce93756757859939501e018711\",\"name\":\"Eva Kalinov\u00e1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Rendering Maps at Scale: Bridging OpenLayers and PixiJS — CODECON","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/","og_locale":"en_US","og_type":"article","og_title":"Rendering Maps at Scale: Bridging OpenLayers and PixiJS — CODECON","og_description":"How we wired a WebGL rendering pipeline into a geospatial map using PixiJS and OpenLayers","og_url":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/","og_site_name":"CODECON","article_published_time":"2026-04-08T13:00:02+00:00","article_modified_time":"2026-05-25T13:26:53+00:00","og_image":[{"width":2048,"height":1024,"url":"https:\/\/www.codecon.sk\/wp-content\/uploads\/2026\/04\/rendering.webp","type":"image\/webp"}],"author":"Eva Kalinov\u00e1","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Eva Kalinov\u00e1","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/#article","isPartOf":{"@id":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/"},"author":{"name":"Eva Kalinov\u00e1","@id":"https:\/\/www.codecon.sk\/en\/#\/schema\/person\/815e94ce93756757859939501e018711"},"headline":"Rendering Maps at Scale: Bridging OpenLayers and PixiJS","datePublished":"2026-04-08T13:00:02+00:00","dateModified":"2026-05-25T13:26:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/"},"wordCount":932,"image":{"@id":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codecon.sk\/wp-content\/uploads\/2026\/04\/rendering.webp","keywords":["#bratislava","#codecon","#inspiration","#partners"],"articleSection":["CODECON"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/","url":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/","name":"Rendering Maps at Scale: Bridging OpenLayers and PixiJS — CODECON","isPartOf":{"@id":"https:\/\/www.codecon.sk\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/#primaryimage"},"image":{"@id":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codecon.sk\/wp-content\/uploads\/2026\/04\/rendering.webp","datePublished":"2026-04-08T13:00:02+00:00","dateModified":"2026-05-25T13:26:53+00:00","author":{"@id":"https:\/\/www.codecon.sk\/en\/#\/schema\/person\/815e94ce93756757859939501e018711"},"breadcrumb":{"@id":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/#primaryimage","url":"https:\/\/www.codecon.sk\/wp-content\/uploads\/2026\/04\/rendering.webp","contentUrl":"https:\/\/www.codecon.sk\/wp-content\/uploads\/2026\/04\/rendering.webp","width":2048,"height":1024,"caption":"rendering blog"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codecon.sk\/en\/rendering-maps-at-scale-bridging-openlayers-and-pixijs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Domovsk\u00e1 str\u00e1nka","item":"https:\/\/www.codecon.sk\/en\/"},{"@type":"ListItem","position":2,"name":"Rendering Maps at Scale: Bridging OpenLayers and PixiJS"}]},{"@type":"WebSite","@id":"https:\/\/www.codecon.sk\/en\/#website","url":"https:\/\/www.codecon.sk\/en\/","name":"CODECON","description":"Najv\u00e4\u010d\u0161ie komunitn\u00e9 stretnutie v\u00fdvoj\u00e1rov na Slovensku","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codecon.sk\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.codecon.sk\/en\/#\/schema\/person\/815e94ce93756757859939501e018711","name":"Eva Kalinov\u00e1"}]}},"_links":{"self":[{"href":"https:\/\/www.codecon.sk\/en\/wp-json\/wp\/v2\/posts\/9295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codecon.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codecon.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codecon.sk\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codecon.sk\/en\/wp-json\/wp\/v2\/comments?post=9295"}],"version-history":[{"count":3,"href":"https:\/\/www.codecon.sk\/en\/wp-json\/wp\/v2\/posts\/9295\/revisions"}],"predecessor-version":[{"id":9993,"href":"https:\/\/www.codecon.sk\/en\/wp-json\/wp\/v2\/posts\/9295\/revisions\/9993"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codecon.sk\/en\/wp-json\/wp\/v2\/media\/10002"}],"wp:attachment":[{"href":"https:\/\/www.codecon.sk\/en\/wp-json\/wp\/v2\/media?parent=9295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codecon.sk\/en\/wp-json\/wp\/v2\/categories?post=9295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codecon.sk\/en\/wp-json\/wp\/v2\/tags?post=9295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}