refactor: webgl isolation

src/data/bucket.ts

@@ -2,7 +2,7 @@ import type {CollisionBoxArray} from './array_types.g';
 import type {Style} from '../style/style';
 import type {TypedStyleLayer} from '../style/style_layer/typed_style_layer';
 import type {FeatureIndex} from './feature_index';
-import type {Context} from '../gl/context';
+import type {Context} from '../webgl/context';
 import type {FeatureStates} from '../source/source_state';
 import type {ImagePosition} from '../render/image_atlas';
 import type {CanonicalTileID} from '../tile/tile_id';

src/data/bucket/circle_bucket.ts

@@ -20,9 +20,9 @@ import type {
 } from '../bucket';
 import type {CircleStyleLayer} from '../../style/style_layer/circle_style_layer';
 import type {HeatmapStyleLayer} from '../../style/style_layer/heatmap_style_layer';
-import type {Context} from '../../gl/context';
-import type {IndexBuffer} from '../../gl/index_buffer';
-import type {VertexBuffer} from '../../gl/vertex_buffer';
+import type {Context} from '../../webgl/context';
+import type {IndexBuffer} from '../../webgl/index_buffer';
+import type {VertexBuffer} from '../../webgl/vertex_buffer';
 import type Point from '@mapbox/point-geometry';
 import type {FeatureStates} from '../../source/source_state';
 import type {ImagePosition} from '../../render/image_atlas';

src/data/bucket/fill_bucket.ts

@@ -21,9 +21,9 @@ import type {
     PopulateParameters
 } from '../bucket';
 import type {FillStyleLayer} from '../../style/style_layer/fill_style_layer';
-import type {Context} from '../../gl/context';
-import type {IndexBuffer} from '../../gl/index_buffer';
-import type {VertexBuffer} from '../../gl/vertex_buffer';
+import type {Context} from '../../webgl/context';
+import type {IndexBuffer} from '../../webgl/index_buffer';
+import type {VertexBuffer} from '../../webgl/vertex_buffer';
 import type Point from '@mapbox/point-geometry';
 import type {FeatureStates} from '../../source/source_state';
 import type {ImagePosition} from '../../render/image_atlas';

src/data/bucket/fill_extrusion_bucket.ts

@@ -24,9 +24,9 @@ import type {
 } from '../bucket';
 
 import type {FillExtrusionStyleLayer} from '../../style/style_layer/fill_extrusion_style_layer';
-import type {Context} from '../../gl/context';
-import type {IndexBuffer} from '../../gl/index_buffer';
-import type {VertexBuffer} from '../../gl/vertex_buffer';
+import type {Context} from '../../webgl/context';
+import type {IndexBuffer} from '../../webgl/index_buffer';
+import type {VertexBuffer} from '../../webgl/vertex_buffer';
 import type Point from '@mapbox/point-geometry';
 import type {FeatureStates} from '../../source/source_state';
 import type {ImagePosition} from '../../render/image_atlas';

src/data/bucket/line_bucket.ts

@@ -26,10 +26,10 @@ import type {LineStyleLayer} from '../../style/style_layer/line_style_layer';
 import type Point from '@mapbox/point-geometry';
 import type {Segment} from '../segment';
 import type {RGBAImage} from '../../util/image';
-import type {Context} from '../../gl/context';
-import type {Texture} from '../../render/texture';
-import type {IndexBuffer} from '../../gl/index_buffer';
-import type {VertexBuffer} from '../../gl/vertex_buffer';
+import type {Context} from '../../webgl/context';
+import type {Texture} from '../../webgl/texture';
+import type {IndexBuffer} from '../../webgl/index_buffer';
+import type {VertexBuffer} from '../../webgl/vertex_buffer';
 import type {FeatureStates} from '../../source/source_state';
 import type {ImagePosition} from '../../render/image_atlas';
 import type {SubdivisionGranularitySetting} from '../../render/subdivision_granularity_settings';

src/data/bucket/symbol_bucket.ts

@@ -47,9 +47,9 @@ import type {
 import type {CollisionBoxArray, CollisionBox, SymbolInstance} from '../array_types.g';
 import type {StructArray, StructArrayMember, ViewType} from '../../util/struct_array';
 import type {SymbolStyleLayer} from '../../style/style_layer/symbol_style_layer';
-import type {Context} from '../../gl/context';
-import type {IndexBuffer} from '../../gl/index_buffer';
-import type {VertexBuffer} from '../../gl/vertex_buffer';
+import type {Context} from '../../webgl/context';
+import type {IndexBuffer} from '../../webgl/index_buffer';
+import type {VertexBuffer} from '../../webgl/vertex_buffer';
 import type {SymbolQuad} from '../../symbol/quads';
 import type {SizeData} from '../../symbol/symbol_size';
 import type {FeatureStates} from '../../source/source_state';

src/data/program_configuration.ts

@@ -8,16 +8,16 @@ import {patternAttributes} from './bucket/pattern_attributes';
 import {dashAttributes} from './bucket/dash_attributes';
 import {EvaluationParameters} from '../style/evaluation_parameters';
 import {FeaturePositionMap} from './feature_position_map';
-import {type Uniform, Uniform1f, UniformColor, Uniform4f} from '../render/uniform_binding';
+import {type Uniform, Uniform1f, UniformColor, Uniform4f} from '../webgl/uniform_binding';
 
-import type {UniformLocations} from '../render/uniform_binding';
+import type {UniformLocations} from '../webgl/uniform_binding';
 
 import type {CanonicalTileID} from '../tile/tile_id';
-import type {Context} from '../gl/context';
+import type {Context} from '../webgl/context';
 import type {TypedStyleLayer} from '../style/style_layer/typed_style_layer';
 import type {CrossfadeParameters} from '../style/evaluation_parameters';
 import type {StructArray, StructArrayMember} from '../util/struct_array';
-import type {VertexBuffer} from '../gl/vertex_buffer';
+import type {VertexBuffer} from '../webgl/vertex_buffer';
 import type {ImagePosition} from '../render/image_atlas';
 import type {
     Feature,

src/data/segment.ts

@@ -2,7 +2,7 @@ import {warnOnce} from '../util/util';
 
 import {register} from '../util/web_worker_transfer';
 
-import type {VertexArrayObject} from '../render/vertex_array_object';
+import type {VertexArrayObject} from '../webgl/vertex_array_object';
 import type {StructArray} from '../util/struct_array';
 
 /**

src/geo/projection/globe_projection.ts

@@ -7,7 +7,7 @@ import {VerticalPerspectiveProjection} from './vertical_perspective_projection';
 import {type Projection, type ProjectionGPUContext, type TileMeshUsage} from './projection';
 import {type PreparedShader} from '../../shaders/shaders';
 import {type SubdivisionGranularitySetting} from '../../render/subdivision_granularity_settings';
-import {type Context} from '../../gl/context';
+import {type Context} from '../../webgl/context';
 import {type CanonicalTileID} from '../../tile/tile_id';
 import {type Mesh} from '../../render/mesh';
 

src/geo/projection/globe_projection_error_measurement.ts

@@ -1,16 +1,16 @@
 import {Color} from '@maplibre/maplibre-gl-style-spec';
-import {ColorMode} from '../../gl/color_mode';
-import {CullFaceMode} from '../../gl/cull_face_mode';
-import {DepthMode} from '../../gl/depth_mode';
-import {StencilMode} from '../../gl/stencil_mode';
+import {ColorMode} from '../../webgl/color_mode';
+import {CullFaceMode} from '../../webgl/cull_face_mode';
+import {DepthMode} from '../../webgl/depth_mode';
+import {StencilMode} from '../../webgl/stencil_mode';
 import {warnOnce} from '../../util/util';
-import {projectionErrorMeasurementUniformValues} from '../../render/program/projection_error_measurement_program';
+import {projectionErrorMeasurementUniformValues} from '../../webgl/program/projection_error_measurement_program';
 import {Mesh} from '../../render/mesh';
 import {SegmentVector} from '../../data/segment';
 import {PosArray, TriangleIndexArray} from '../../data/array_types.g';
 import posAttributes from '../../data/pos_attributes';
-import {type Framebuffer} from '../../gl/framebuffer';
-import {isWebGL2} from '../../gl/webgl2';
+import {type Framebuffer} from '../../webgl/framebuffer';
+import {isWebGL2} from '../../webgl/webgl2';
 import {type ProjectionGPUContext} from './projection';
 
 /**

src/geo/projection/mercator_projection.ts

@@ -2,7 +2,7 @@ import type {Projection, ProjectionGPUContext, TileMeshUsage} from './projection
 import type {CanonicalTileID} from '../../tile/tile_id';
 import {EXTENT} from '../../data/extent';
 import {type PreparedShader, shaders} from '../../shaders/shaders';
-import type {Context} from '../../gl/context';
+import type {Context} from '../../webgl/context';
 import {Mesh} from '../../render/mesh';
 import {PosArray, TriangleIndexArray} from '../../data/array_types.g';
 import {SegmentVector} from '../../data/segment';

src/geo/projection/projection.ts

@@ -1,8 +1,8 @@
 import type {CanonicalTileID} from '../../tile/tile_id';
 import type {PreparedShader} from '../../shaders/shaders';
-import type {Context} from '../../gl/context';
+import type {Context} from '../../webgl/context';
 import type {Mesh} from '../../render/mesh';
-import type {Program} from '../../render/program';
+import type {Program} from '../../webgl/program';
 import type {SubdivisionGranularitySetting} from '../../render/subdivision_granularity_settings';
 import type {ProjectionSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {EvaluationParameters} from '../../style/evaluation_parameters';

src/geo/projection/vertical_perspective_projection.ts

@@ -1,4 +1,4 @@
-import type {Context} from '../../gl/context';
+import type {Context} from '../../webgl/context';
 import type {CanonicalTileID} from '../../tile/tile_id';
 import {type Mesh} from '../../render/mesh';
 import {now} from '../../util/time_control';

src/render/image_atlas.ts

@@ -6,7 +6,7 @@ import potpack from 'potpack';
 import type {StyleImage} from '../style/style_image';
 import {type TextFit} from '../style/style_image';
 import type {ImageManager} from './image_manager';
-import type {Texture} from './texture';
+import type {Texture} from '../webgl/texture';
 import type {Rect} from './glyph_atlas';
 import type {GetImagesResponse} from '../util/actor_messages';
 

src/render/image_manager.ts

@@ -4,12 +4,12 @@ import potpack from 'potpack';
 import {Event, ErrorEvent, Evented} from '../util/evented';
 import {RGBAImage} from '../util/image';
 import {ImagePosition} from './image_atlas';
-import {Texture} from './texture';
+import {Texture} from '../webgl/texture';
 import {renderStyleImage} from '../style/style_image';
 import {warnOnce} from '../util/util';
 
 import type {StyleImage} from '../style/style_image';
-import type {Context} from '../gl/context';
+import type {Context} from '../webgl/context';
 import type {PotpackBox} from 'potpack';
 import type {GetImagesResponse} from '../util/actor_messages';
 

src/render/line_atlas.ts

@@ -1,6 +1,6 @@
 import {warnOnce} from '../util/util';
 
-import type {Context} from '../gl/context';
+import type {Context} from '../webgl/context';
 
 /**
  * A dash entry

src/render/mesh.ts

@@ -1,6 +1,6 @@
 import {type SegmentVector} from '../data/segment';
-import {type VertexBuffer} from '../gl/vertex_buffer';
-import {type IndexBuffer} from '../gl/index_buffer';
+import {type VertexBuffer} from '../webgl/vertex_buffer';
+import {type IndexBuffer} from '../webgl/index_buffer';
 
 export class Mesh {
     vertexBuffer: VertexBuffer;

src/render/painter.test.ts

@@ -3,7 +3,7 @@ import {Painter} from './painter';
 import {MercatorTransform} from '../geo/projection/mercator_transform';
 import {Style} from '../style/style';
 import {StubMap} from '../util/test/util';
-import {Texture} from './texture';
+import {Texture} from '../webgl/texture';
 
 const getStubMap = () => new StubMap() as any;
 

src/render/painter.ts

@@ -9,30 +9,17 @@ import posAttributes from '../data/pos_attributes';
 import {type ProgramConfiguration} from '../data/program_configuration';
 import {CrossTileSymbolIndex} from '../symbol/cross_tile_symbol_index';
 import {shaders} from '../shaders/shaders';
-import {Program} from './program';
-import {programUniforms} from './program/program_uniforms';
-import {Context} from '../gl/context';
-import {DepthMode} from '../gl/depth_mode';
-import {StencilMode} from '../gl/stencil_mode';
-import {ColorMode} from '../gl/color_mode';
-import {CullFaceMode} from '../gl/cull_face_mode';
-import {Texture} from './texture';
+import {Program} from '../webgl/program';
+import {programUniforms} from '../webgl/program/program_uniforms';
+import {Context} from '../webgl/context';
+import {DepthMode} from '../webgl/depth_mode';
+import {StencilMode} from '../webgl/stencil_mode';
+import {ColorMode} from '../webgl/color_mode';
+import {CullFaceMode} from '../webgl/cull_face_mode';
+import {Texture} from '../webgl/texture';
 import {Color} from '@maplibre/maplibre-gl-style-spec';
-import {drawSymbols} from './draw_symbol';
-import {drawCircles} from './draw_circle';
-import {drawHeatmap} from './draw_heatmap';
-import {drawLine} from './draw_line';
-import {drawFill} from './draw_fill';
-import {drawFillExtrusion} from './draw_fill_extrusion';
-import {drawHillshade} from './draw_hillshade';
-import {drawColorRelief} from './draw_color_relief';
-import {drawRaster} from './draw_raster';
-import {drawBackground} from './draw_background';
-import {drawDebug, drawDebugPadding, selectDebugSource} from './draw_debug';
-import {drawCustom} from './draw_custom';
-import {drawDepth, drawCoords} from './draw_terrain';
+import {selectDebugSource, webglDrawFunctions, type DrawFunctions} from '../webgl/draw';
 import {type OverscaledTileID} from '../tile/tile_id';
-import {drawSky, drawAtmosphere} from './draw_sky';
 import {Mesh} from './mesh';
 import {MercatorShaderDefine, MercatorShaderVariantKey} from '../geo/projection/mercator_projection';
 
@@ -43,11 +30,11 @@ import type {CrossFaded} from '../style/properties';
 import type {LineAtlas} from './line_atlas';
 import type {ImageManager} from './image_manager';
 import type {GlyphManager} from './glyph_manager';
-import type {VertexBuffer} from '../gl/vertex_buffer';
-import type {IndexBuffer} from '../gl/index_buffer';
-import type {DepthRangeType, DepthMaskType, DepthFuncType} from '../gl/types';
+import type {VertexBuffer} from '../webgl/vertex_buffer';
+import type {IndexBuffer} from '../webgl/index_buffer';
+import type {DepthRangeType, DepthMaskType, DepthFuncType} from '../webgl/types';
 import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
-import type {RenderToTexture} from './render_to_texture';
+import type {IRenderToTexture} from './render_to_texture_interface';
 import type {ProjectionData} from '../geo/projection/projection_data';
 import {coveringTiles} from '../geo/projection/covering_tiles';
 import {isSymbolStyleLayer} from '../style/style_layer/symbol_style_layer';
@@ -84,10 +71,12 @@ export type RenderOptions = {
  * @internal
  * Initialize a new painter object.
  */
+
 export class Painter {
+    drawFunctions: DrawFunctions;
     context: Context;
     transform: IReadonlyTransform;
-    renderToTexture: RenderToTexture;
+    renderToTexture: IRenderToTexture;
     _tileTextures: {
         [_: number]: Texture[];
     };
@@ -137,6 +126,7 @@ export class Painter {
     terrainFacilitator: {dirty: boolean; matrix: mat4; renderTime: number};
 
     constructor(gl: WebGLRenderingContext | WebGL2RenderingContext, transform: IReadonlyTransform) {
+        this.drawFunctions = webglDrawFunctions;
         this.context = new Context(gl);
         this.transform = transform;
         this._tileTextures = {};
@@ -556,7 +546,7 @@ export class Painter {
         this.clearStencil();
 
         // draw sky first to not overwrite symbols
-        if (this.style.sky) drawSky(this, this.style.sky);
+        if (this.style.sky) this.drawFunctions.sky(this, this.style.sky);
 
         this._showOverdrawInspector = options.showOverdrawInspector;
         this.depthRangeFor3D = [0, 1 - ((style._order.length + 2) * this.numSublayers * this.depthEpsilon)];
@@ -608,18 +598,18 @@ export class Painter {
 
         // Render atmosphere, only for Globe projection
         if (renderOptions.isRenderingGlobe) {
-            drawAtmosphere(this, this.style.sky, this.style.light);
+            this.drawFunctions.atmosphere(this, this.style.sky, this.style.light);
         }
 
         if (this.options.showTileBoundaries) {
             const selectedSource = selectDebugSource(this.style, this.transform.zoom);
             if (selectedSource) {
-                drawDebug(this, selectedSource, selectedSource.getVisibleCoordinates());
+                this.drawFunctions.debug(this, selectedSource, selectedSource.getVisibleCoordinates());
             }
         }
 
         if (this.options.showPadding) {
-            drawDebugPadding(this);
+            this.drawFunctions.debugPadding(this);
         }
 
         // Set defaults for most GL values so that anyone using the state after the render
@@ -651,37 +641,38 @@ export class Painter {
         mat4.copy(prevMatrix, currMatrix);
         this.terrainFacilitator.renderTime = Date.now();
         this.terrainFacilitator.dirty = false;
-        drawDepth(this, this.style.map.terrain);
-        drawCoords(this, this.style.map.terrain);
+        this.drawFunctions.terrainDepth(this, this.style.map.terrain);
+        this.drawFunctions.terrainCoords(this, this.style.map.terrain);
     }
 
     renderLayer(painter: Painter, tileManager: TileManager, layer: StyleLayer, coords: OverscaledTileID[], renderOptions: RenderOptions) {
         if (layer.isHidden(this.transform.zoom)) return;
         if (layer.type !== 'background' && layer.type !== 'custom' && !(coords || []).length) return;
         this.id = layer.id;
 
+        const draw = this.drawFunctions;
         if (isSymbolStyleLayer(layer)) {
-            drawSymbols(painter, tileManager, layer, coords, this.style.placement.variableOffsets, renderOptions);
+            draw.symbol(painter, tileManager, layer, coords, this.style.placement.variableOffsets, renderOptions);
         } else if (isCircleStyleLayer(layer)) {
-            drawCircles(painter, tileManager, layer, coords, renderOptions);
+            draw.circle(painter, tileManager, layer, coords, renderOptions);
         } else if (isHeatmapStyleLayer(layer)) {
-            drawHeatmap(painter, tileManager, layer, coords, renderOptions);
+            draw.heatmap(painter, tileManager, layer, coords, renderOptions);
         } else if (isLineStyleLayer(layer)) {
-            drawLine(painter, tileManager, layer, coords, renderOptions);
+            draw.line(painter, tileManager, layer, coords, renderOptions);
         } else if (isFillStyleLayer(layer)) {
-            drawFill(painter, tileManager, layer, coords, renderOptions);
+            draw.fill(painter, tileManager, layer, coords, renderOptions);
         } else if (isFillExtrusionStyleLayer(layer)) {
-            drawFillExtrusion(painter, tileManager, layer, coords, renderOptions);
+            draw.fillExtrusion(painter, tileManager, layer, coords, renderOptions);
         } else if (isHillshadeStyleLayer(layer)) {
-            drawHillshade(painter, tileManager, layer, coords, renderOptions);
+            draw.hillshade(painter, tileManager, layer, coords, renderOptions);
         } else if (isColorReliefStyleLayer(layer)) {
-            drawColorRelief(painter, tileManager, layer, coords, renderOptions);
+            draw.colorRelief(painter, tileManager, layer, coords, renderOptions);
         } else if (isRasterStyleLayer(layer)) {
-            drawRaster(painter, tileManager, layer, coords, renderOptions);
+            draw.raster(painter, tileManager, layer, coords, renderOptions);
         } else if (isBackgroundStyleLayer(layer)) {
-            drawBackground(painter, tileManager, layer, coords, renderOptions);
+            draw.background(painter, tileManager, layer, coords, renderOptions);
         } else if (isCustomStyleLayer(layer)) {
-            drawCustom(painter, tileManager, layer, renderOptions);
+            draw.custom(painter, tileManager, layer, renderOptions);
         }
     }
 

src/render/render_to_texture_interface.ts

@@ -0,0 +1,15 @@
+import type {Style} from '../style/style';
+import type {StyleLayer} from '../style/style_layer';
+import type {Tile} from '../tile/tile';
+import type {RenderOptions} from './painter';
+
+/**
+ * Interface for render-to-texture implementations.
+ * The painter uses this interface — concrete implementations live in backend folders (webgl/, webgpu/).
+ */
+export interface IRenderToTexture {
+    prepareForRender(style: Style, zoom: number): void;
+    renderLayer(layer: StyleLayer, renderOptions: RenderOptions): boolean;
+    getTexture(tile: Tile): any;
+    destruct(): void;
+}