From 9bc670838f39abc84fe4141b2c13e4ed5618f6ab Mon Sep 17 00:00:00 2001 From: lzxue <120635640@qq.com> Date: Tue, 14 Feb 2023 20:57:12 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E7=A7=BB=E9=99=A4=E6=97=A0=E6=95=88?= =?UTF-8?q?=E7=9A=84blend,mask=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dev-demos/features/point/demos/icons.tsx | 1 + dev-demos/features/point/pointCircle.md | 15 +- .../core/src/services/layer/ILayerService.ts | 3 + packages/core/src/services/renderer/IModel.ts | 63 +++--- .../layers/src/Geometry/models/billboard.ts | 3 - packages/layers/src/Geometry/models/plane.ts | 4 +- packages/layers/src/core/BaseLayer.ts | 4 +- packages/layers/src/core/BaseModel.ts | 24 ++- packages/layers/src/heatmap/models/grid.ts | 4 - packages/layers/src/heatmap/models/grid3d.ts | 5 - packages/layers/src/heatmap/models/heatmap.ts | 14 +- packages/layers/src/heatmap/models/hexagon.ts | 5 - packages/layers/src/image/models/image.ts | 6 +- packages/layers/src/line/models/arc.ts | 4 +- packages/layers/src/line/models/arc_3d.ts | 4 +- .../layers/src/line/models/earthArc_3d.ts | 4 +- .../layers/src/line/models/great_circle.ts | 6 +- packages/layers/src/line/models/half.ts | 4 +- packages/layers/src/line/models/line.ts | 5 +- packages/layers/src/line/models/linearline.ts | 4 +- packages/layers/src/line/models/simpleLine.ts | 8 +- packages/layers/src/mask/models/fill.ts | 1 - packages/layers/src/point/models/extrude.ts | 1 - packages/layers/src/point/models/fill.ts | 5 +- packages/layers/src/point/models/fillmage.ts | 7 +- packages/layers/src/point/models/image.ts | 6 - packages/layers/src/point/models/normal.ts | 6 +- packages/layers/src/point/models/radar.ts | 6 - .../layers/src/point/models/simplePoint.ts | 5 - packages/layers/src/point/models/text.ts | 13 +- packages/layers/src/polygon/models/extrude.ts | 6 +- packages/layers/src/polygon/models/fill.ts | 5 +- packages/layers/src/polygon/models/ocean.ts | 5 +- packages/layers/src/polygon/models/water.ts | 4 - packages/layers/src/raster/models/raster.ts | 5 +- .../layers/src/raster/models/rasterRgb.ts | 4 - .../src/raster/models/rasterTerrainRgb.ts | 7 +- packages/layers/src/wind/models/wind.ts | 3 +- packages/renderer/src/regl/ReglModel.ts | 204 +++++++++--------- 39 files changed, 198 insertions(+), 285 deletions(-) diff --git a/dev-demos/features/point/demos/icons.tsx b/dev-demos/features/point/demos/icons.tsx index 09860a1eb3..f1eba7f0d3 100644 --- a/dev-demos/features/point/demos/icons.tsx +++ b/dev-demos/features/point/demos/icons.tsx @@ -51,6 +51,7 @@ export default () => { .active(false) .size(20); scene.addLayer(imageLayer); + setTimeout(() => { imageLayer.shape('02'); diff --git a/dev-demos/features/point/pointCircle.md b/dev-demos/features/point/pointCircle.md index 84900016c4..6b553cc000 100644 --- a/dev-demos/features/point/pointCircle.md +++ b/dev-demos/features/point/pointCircle.md @@ -22,8 +22,10 @@ export default () => { ) .then((res) => res.text()) .then((data) => { - const pointLayer = new PointLayer({}) - .source(data.slice(0, 1000), { + const pointLayer = new PointLayer({ + blend:'additive' + }) + .source(data, { parser: { type: 'csv', x: 'Longitude', @@ -53,10 +55,13 @@ export default () => { strokeWidth: 0, stroke: '#fff', }); - pointLayer.on('mousemove',(e)=>{ - console.log(e); - }) scene.addLayer(pointLayer); + // let i =0; + // setInterval(() => { + // i++ % 2 === 0 ? pointLayer.setBlend('additive') : pointLayer.setBlend('normal'); + + // },20) + }, ) diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index b95155a527..7e257b35a5 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -21,6 +21,7 @@ import { IBlendOptions, IModel, IModelInitializationOptions, + IStencilOptions, } from '../renderer/IModel'; import { IMultiPassRenderer, @@ -88,6 +89,8 @@ export interface ILayerModelInitializationOptions { export interface ILayerModel { render(): void; renderUpdate?(): void; + getBlend(): Partial; + getStencil(): Partial; getUninforms(): IModelUniform; getDefaultStyle(): unknown; getAnimateUniforms(): IModelUniform; diff --git a/packages/core/src/services/renderer/IModel.ts b/packages/core/src/services/renderer/IModel.ts index 8cb169900f..32d951d71a 100644 --- a/packages/core/src/services/renderer/IModel.ts +++ b/packages/core/src/services/renderer/IModel.ts @@ -26,6 +26,35 @@ export interface IBlendOptions { // gl.blendColor color: [number, number, number, number]; } +export interface IStencilOptions { + // gl.enable(gl.STENCIL_TEST) + enable: boolean; + // gl.stencilMask + mask: number; + func: { + cmp: + | gl.NEVER + | gl.ALWAYS + | gl.LESS + | gl.LEQUAL + | gl.GREATER + | gl.GEQUAL + | gl.EQUAL + | gl.NOTEQUAL; + ref: number; + mask: number; + }; + opFront: { + fail: stencilOp; + zfail: stencilOp; + zpass: stencilOp; + }; + opBack: { + fail: stencilOp; + zfail: stencilOp; + zpass: stencilOp; + }; +} type stencilOp = | gl.ZERO | gl.KEEP @@ -185,35 +214,7 @@ export interface IModelInitializationOptions { /** * stencil */ - stencil?: Partial<{ - // gl.enable(gl.STENCIL_TEST) - enable: boolean; - // gl.stencilMask - mask: number; - func: { - cmp: - | gl.NEVER - | gl.ALWAYS - | gl.LESS - | gl.LEQUAL - | gl.GREATER - | gl.GEQUAL - | gl.EQUAL - | gl.NOTEQUAL; - ref: number; - mask: number; - }; - opFront: { - fail: stencilOp; - zfail: stencilOp; - zpass: stencilOp; - }; - opBack: { - fail: stencilOp; - zfail: stencilOp; - zpass: stencilOp; - }; - }>; + stencil?: Partial; /** * cull @@ -236,7 +237,9 @@ export interface IModelDrawOptions { }; elements?: IElements; - blend?: IBlendOptions; + blend?: Partial; + + stencil?: Partial; } /** diff --git a/packages/layers/src/Geometry/models/billboard.ts b/packages/layers/src/Geometry/models/billboard.ts index f4add26fdc..571461a100 100644 --- a/packages/layers/src/Geometry/models/billboard.ts +++ b/packages/layers/src/Geometry/models/billboard.ts @@ -6,7 +6,6 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IGeometryLayerStyleOptions } from '../../core/interface'; import planeFrag from '../shaders/billboard_frag.glsl'; @@ -104,8 +103,6 @@ export default class BillBoardModel extends BaseModel { triangulation: this.planeGeometryTriangulation, primitive: gl.TRIANGLES, depth: { enable: true }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/Geometry/models/plane.ts b/packages/layers/src/Geometry/models/plane.ts index 548d834fe2..d081a4f692 100644 --- a/packages/layers/src/Geometry/models/plane.ts +++ b/packages/layers/src/Geometry/models/plane.ts @@ -8,7 +8,6 @@ import { ITexture2D, } from '@antv/l7-core'; import { Version } from '@antv/l7-maps'; -import { getMask } from '@antv/l7-utils'; // import { mat4, vec3 } from 'gl-matrix'; import BaseModel from '../../core/BaseModel'; import { IGeometryLayerStyleOptions } from '../../core/interface'; @@ -158,8 +157,7 @@ export default class PlaneModel extends BaseModel { triangulation: this.planeGeometryTriangulation, primitive: gl.TRIANGLES, depth: { enable: true }, - stencil: getMask(mask, maskInside), - blend: this.getBlend(), + cull: { enable: true, face: gl.BACK, // gl.FRONT | gl.BACK; diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index fd0b2db927..cf81dc9d0c 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -857,7 +857,7 @@ export default class BaseLayer this.updateLayerConfig({ blend: type, }); - this.layerModelNeedUpdate = true; + // this.layerModelNeedUpdate = true; this.reRender(); return this; } @@ -1364,6 +1364,8 @@ export default class BaseLayer model.draw( { uniforms: this.layerModel.getUninforms(), + blend: this.layerModel.getBlend(), + stencil: this.layerModel.getStencil(), }, isPicking, ); diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index c67cde504d..8296bd4f85 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/packages/layers/src/core/BaseModel.ts @@ -20,6 +20,7 @@ import { IPickingService, IRendererService, IShaderModuleService, + IStencilOptions, IStyleAttributeService, ITexture2D, ITexture2DInitializationOptions, @@ -27,7 +28,7 @@ import { Triangulation, TYPES, } from '@antv/l7-core'; -import { rgb2arr } from '@antv/l7-utils'; +import { getMask, rgb2arr } from '@antv/l7-utils'; import { color } from 'd3-color'; import { isEqual, isNumber, isString } from 'lodash'; import { BlendTypes } from '../utils/blend'; @@ -501,6 +502,27 @@ export default class BaseModel const { blend = 'normal' } = this.layer.getLayerConfig(); return BlendTypes[BlendType[blend]] as IBlendOptions; } + public getStencil(): Partial { + const { mask = false, maskInside = true } = this.layer.getLayerConfig(); + // TODO 临时处理，后期移除MaskLayer + if (this.layer.type === 'MaskLayer') { + return { + enable: true, + mask: 0xff, + func: { + cmp: gl.ALWAYS, + ref: 1, + mask: 0xff, + }, + opFront: { + fail: gl.REPLACE, + zfail: gl.REPLACE, + zpass: gl.REPLACE, + }, + }; + } + return getMask(mask, maskInside); + } public getDefaultStyle(): unknown { return {}; } diff --git a/packages/layers/src/heatmap/models/grid.ts b/packages/layers/src/heatmap/models/grid.ts index 804be1a0ef..8c4eb18ca3 100644 --- a/packages/layers/src/heatmap/models/grid.ts +++ b/packages/layers/src/heatmap/models/grid.ts @@ -5,7 +5,6 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IHeatMapLayerStyleOptions } from '../../core/interface'; import { HeatmapGridTriangulation } from '../../core/triangulation'; @@ -31,8 +30,6 @@ export default class GridModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; const model = await this.layer.buildLayerModel({ moduleName: 'heatmapGrid', vertexShader: heatmapGridVert, @@ -40,7 +37,6 @@ export default class GridModel extends BaseModel { triangulation: HeatmapGridTriangulation, primitive: gl.TRIANGLES, depth: { enable: false }, - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/heatmap/models/grid3d.ts b/packages/layers/src/heatmap/models/grid3d.ts index 7451716750..a46463429b 100644 --- a/packages/layers/src/heatmap/models/grid3d.ts +++ b/packages/layers/src/heatmap/models/grid3d.ts @@ -5,7 +5,6 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IHeatMapLayerStyleOptions } from '../../core/interface'; import { PointExtrudeTriangulation } from '../../core/triangulation'; @@ -31,8 +30,6 @@ export default class Grid3DModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; const model = await this.layer.buildLayerModel({ moduleName: 'heatmapGrid3d', vertexShader: heatmapGrid3dVert, @@ -40,8 +37,6 @@ export default class Grid3DModel extends BaseModel { triangulation: PointExtrudeTriangulation, primitive: gl.TRIANGLES, depth: { enable: true }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/heatmap/models/heatmap.ts b/packages/layers/src/heatmap/models/heatmap.ts index ff22fb329a..94e898187c 100644 --- a/packages/layers/src/heatmap/models/heatmap.ts +++ b/packages/layers/src/heatmap/models/heatmap.ts @@ -7,12 +7,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { - generateColorRamp, - getCullFace, - getMask, - IColorRamp, -} from '@antv/l7-utils'; +import { generateColorRamp, getCullFace, IColorRamp } from '@antv/l7-utils'; import { mat4 } from 'gl-matrix'; import { injectable } from 'inversify'; import 'reflect-metadata'; @@ -167,8 +162,6 @@ export default class HeatMapModel extends BaseModel { } private buildHeatmapColor(): IModel { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; this.shaderModuleService.registerModule('heatmapColor', { vs: heatmapColorVert, fs: heatmapColorFrag, @@ -203,13 +196,11 @@ export default class HeatMapModel extends BaseModel { depth: { enable: false, }, - blend: this.getBlend(), elements: createElements({ data: [0, 2, 1, 2, 3, 1], type: gl.UNSIGNED_INT, count: 6, }), - stencil: getMask(mask, maskInside), }); } @@ -275,8 +266,6 @@ export default class HeatMapModel extends BaseModel { }); } private build3dHeatMap() { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; const { getViewportSize } = this.rendererService; const { width, height } = getViewportSize(); const triangulation = heatMap3DTriangulation(width / 4.0, height / 4.0); @@ -329,7 +318,6 @@ export default class HeatMapModel extends BaseModel { type: gl.UNSIGNED_INT, count: triangulation.indices.length, }), - stencil: getMask(mask, maskInside), }); } private updateStyle() { diff --git a/packages/layers/src/heatmap/models/hexagon.ts b/packages/layers/src/heatmap/models/hexagon.ts index fdb374fc7b..79143f674d 100644 --- a/packages/layers/src/heatmap/models/hexagon.ts +++ b/packages/layers/src/heatmap/models/hexagon.ts @@ -5,7 +5,6 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IHeatMapLayerStyleOptions } from '../../core/interface'; import { HeatmapGridTriangulation } from '../../core/triangulation'; @@ -32,8 +31,6 @@ export default class HexagonModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IHeatMapLayerStyleOptions; const model = await this.layer.buildLayerModel({ moduleName: 'heatmapHexagon', vertexShader: heatmapGridVert, @@ -41,8 +38,6 @@ export default class HexagonModel extends BaseModel { triangulation: HeatmapGridTriangulation, depth: { enable: false }, primitive: gl.TRIANGLES, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/image/models/image.ts b/packages/layers/src/image/models/image.ts index 75b7645a3a..5163e85b17 100644 --- a/packages/layers/src/image/models/image.ts +++ b/packages/layers/src/image/models/image.ts @@ -6,7 +6,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { getMask, isMini } from '@antv/l7-utils'; +import { isMini } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IImageLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; @@ -24,9 +24,6 @@ export default class ImageModel extends BaseModel { } public async initModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IImageLayerStyleOptions; - const source = this.layer.getSource(); const { createTexture2D } = this.rendererService; this.texture = createTexture2D({ @@ -72,7 +69,6 @@ export default class ImageModel extends BaseModel { enable: true, }, depth: { enable: false }, - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/line/models/arc.ts b/packages/layers/src/line/models/arc.ts index e23685bdd8..0f85cbce4b 100644 --- a/packages/layers/src/line/models/arc.ts +++ b/packages/layers/src/line/models/arc.ts @@ -8,7 +8,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { getMask, rgb2arr } from '@antv/l7-utils'; +import { rgb2arr } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions } from '../../core/interface'; @@ -183,9 +183,7 @@ export default class ArcModel extends BaseModel { fragmentShader: frag, triangulation: LineArcTriangulation, depth: { enable: false }, - blend: this.getBlend(), segmentNumber, - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/line/models/arc_3d.ts b/packages/layers/src/line/models/arc_3d.ts index b9c2f89bc0..2432baea85 100644 --- a/packages/layers/src/line/models/arc_3d.ts +++ b/packages/layers/src/line/models/arc_3d.ts @@ -8,7 +8,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { getMask, rgb2arr } from '@antv/l7-utils'; +import { rgb2arr } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions } from '../../core/interface'; @@ -169,9 +169,7 @@ export default class Arc3DModel extends BaseModel { vertexShader: vert, fragmentShader: frag, triangulation: LineArcTriangulation, - blend: this.getBlend(), segmentNumber, - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/line/models/earthArc_3d.ts b/packages/layers/src/line/models/earthArc_3d.ts index bed6078d2a..47ab5e74b5 100644 --- a/packages/layers/src/line/models/earthArc_3d.ts +++ b/packages/layers/src/line/models/earthArc_3d.ts @@ -8,7 +8,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { getMask, rgb2arr } from '@antv/l7-utils'; +import { rgb2arr } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions } from '../../core/interface'; @@ -169,9 +169,7 @@ export default class Arc3DModel extends BaseModel { fragmentShader: frag, triangulation: LineArcTriangulation, depth: { enable: true }, - blend: this.getBlend(), segmentNumber, - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/line/models/great_circle.ts b/packages/layers/src/line/models/great_circle.ts index fedd96b224..4a9ab15f84 100644 --- a/packages/layers/src/line/models/great_circle.ts +++ b/packages/layers/src/line/models/great_circle.ts @@ -8,7 +8,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { getMask, rgb2arr } from '@antv/l7-utils'; +import { rgb2arr } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions } from '../../core/interface'; @@ -126,16 +126,12 @@ export default class GreatCircleModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as ILineLayerStyleOptions; const model = await this.layer.buildLayerModel({ moduleName: 'lineGreatCircle', vertexShader: line_arc2d_vert, fragmentShader: line_arc_frag, triangulation: LineArcTriangulation, depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/line/models/half.ts b/packages/layers/src/line/models/half.ts index 32f0c9e8a4..fe18f2d35c 100644 --- a/packages/layers/src/line/models/half.ts +++ b/packages/layers/src/line/models/half.ts @@ -5,7 +5,7 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; -import { getMask, rgb2arr } from '@antv/l7-utils'; +import { rgb2arr } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions } from '../../core/interface'; @@ -107,8 +107,6 @@ export default class LineModel extends BaseModel { fragmentShader: frag, triangulation: LineTriangulation, depth: { enable: depth }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts index 6f856e839c..9e9ca0febe 100644 --- a/packages/layers/src/line/models/line.ts +++ b/packages/layers/src/line/models/line.ts @@ -8,7 +8,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { getMask, LineTriangulation, rgb2arr } from '@antv/l7-utils'; +import { LineTriangulation, rgb2arr } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { @@ -194,8 +194,7 @@ export default class LineModel extends BaseModel { fragmentShader: frag, triangulation: LineTriangulation, depth: { enable: depth }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), + workerEnabled, workerOptions: { modelType: 'line' + type, diff --git a/packages/layers/src/line/models/linearline.ts b/packages/layers/src/line/models/linearline.ts index 23bf3d44a3..57b1956917 100644 --- a/packages/layers/src/line/models/linearline.ts +++ b/packages/layers/src/line/models/linearline.ts @@ -6,7 +6,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { generateColorRamp, getMask, IColorRamp } from '@antv/l7-utils'; +import { generateColorRamp, IColorRamp } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions, LinearDir } from '../../core/interface'; @@ -101,8 +101,6 @@ export default class LinearLineModel extends BaseModel { fragmentShader: linear_line_frag, triangulation: LineTriangulation, depth: { enable: depth }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/line/models/simpleLine.ts b/packages/layers/src/line/models/simpleLine.ts index 2ccd449e57..76cf51c592 100644 --- a/packages/layers/src/line/models/simpleLine.ts +++ b/packages/layers/src/line/models/simpleLine.ts @@ -5,7 +5,7 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; -import { getMask, rgb2arr } from '@antv/l7-utils'; +import { rgb2arr } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions } from '../../core/interface'; @@ -106,9 +106,6 @@ export default class SimpleLineModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as ILineLayerStyleOptions; - const { frag, vert, type } = this.getShaders(); const model = await this.layer.buildLayerModel({ @@ -118,8 +115,7 @@ export default class SimpleLineModel extends BaseModel { triangulation: SimpleLineTriangulation, primitive: gl.LINES, depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), + pick: false, }); return [model]; diff --git a/packages/layers/src/mask/models/fill.ts b/packages/layers/src/mask/models/fill.ts index d14c6a9378..6cd8260a8f 100644 --- a/packages/layers/src/mask/models/fill.ts +++ b/packages/layers/src/mask/models/fill.ts @@ -28,7 +28,6 @@ export default class MaskModel extends BaseModel { fragmentShader: mask_frag, triangulation: polygonTriangulation, depth: { enable: false }, - blend: this.getBlend(), stencil: { enable: true, mask: 0xff, diff --git a/packages/layers/src/point/models/extrude.ts b/packages/layers/src/point/models/extrude.ts index 466acf27ad..075947d767 100644 --- a/packages/layers/src/point/models/extrude.ts +++ b/packages/layers/src/point/models/extrude.ts @@ -144,7 +144,6 @@ export default class ExtrudeModel extends BaseModel { vertexShader: pointExtrudeVert, fragmentShader: pointExtrudeFrag, triangulation: PointExtrudeTriangulation, - blend: this.getBlend(), cull: { enable: true, face: getCullFace(this.mapService.version), diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index ac7a977a6a..6d139100c1 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/packages/layers/src/point/models/fill.ts @@ -9,7 +9,7 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; -import { getMask, PointFillTriangulation } from '@antv/l7-utils'; +import { PointFillTriangulation } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface'; @@ -141,8 +141,7 @@ export default class FillModel extends BaseModel { fragmentShader: frag, triangulation: PointFillTriangulation, depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), + workerEnabled, workerOptions: { modelType: type, diff --git a/packages/layers/src/point/models/fillmage.ts b/packages/layers/src/point/models/fillmage.ts index d119e97fdd..7bab9bf145 100644 --- a/packages/layers/src/point/models/fillmage.ts +++ b/packages/layers/src/point/models/fillmage.ts @@ -8,7 +8,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { getCullFace, getMask } from '@antv/l7-utils'; +import { getCullFace } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface'; @@ -138,16 +138,13 @@ export default class FillImageModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IPointLayerStyleOptions; const model = await this.layer.buildLayerModel({ moduleName: 'pointFillImage', vertexShader: pointFillVert, fragmentShader: pointFillFrag, triangulation: PointFillTriangulation, depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), + cull: { enable: true, face: getCullFace(this.mapService.version), diff --git a/packages/layers/src/point/models/image.ts b/packages/layers/src/point/models/image.ts index 193eaee3d9..a2575df437 100644 --- a/packages/layers/src/point/models/image.ts +++ b/packages/layers/src/point/models/image.ts @@ -6,7 +6,6 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions } from '../../core/interface'; @@ -93,9 +92,6 @@ export default class ImageModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IPointLayerStyleOptions; - const model = await this.layer.buildLayerModel({ moduleName: 'pointImage', vertexShader: pointImageVert, @@ -103,8 +99,6 @@ export default class ImageModel extends BaseModel { triangulation: PointImageTriangulation, depth: { enable: false }, primitive: gl.POINTS, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); return [model]; diff --git a/packages/layers/src/point/models/normal.ts b/packages/layers/src/point/models/normal.ts index aaa8854c57..221bc9fe76 100644 --- a/packages/layers/src/point/models/normal.ts +++ b/packages/layers/src/point/models/normal.ts @@ -5,7 +5,6 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions } from '../../core/interface'; @@ -41,8 +40,6 @@ export default class NormalModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IPointLayerStyleOptions; this.layer.triangulation = PointTriangulation; const model = await this.layer.buildLayerModel({ @@ -52,8 +49,7 @@ export default class NormalModel extends BaseModel { triangulation: PointTriangulation, depth: { enable: false }, primitive: gl.POINTS, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), + pick: false, }); return [model]; diff --git a/packages/layers/src/point/models/radar.ts b/packages/layers/src/point/models/radar.ts index 0564410d99..e1570fcaeb 100644 --- a/packages/layers/src/point/models/radar.ts +++ b/packages/layers/src/point/models/radar.ts @@ -9,7 +9,6 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface'; @@ -60,17 +59,12 @@ export default class RadarModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IPointLayerStyleOptions; - const model = await this.layer.buildLayerModel({ moduleName: 'pointRadar', vertexShader: pointFillVert, fragmentShader: pointFillFrag, triangulation: PointFillTriangulation, depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/point/models/simplePoint.ts b/packages/layers/src/point/models/simplePoint.ts index 2db06e1029..c65f575373 100644 --- a/packages/layers/src/point/models/simplePoint.ts +++ b/packages/layers/src/point/models/simplePoint.ts @@ -5,7 +5,6 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions } from '../../core/interface'; @@ -97,8 +96,6 @@ export default class SimplePointModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IPointLayerStyleOptions; this.layer.triangulation = PointTriangulation; const model = await this.layer.buildLayerModel({ @@ -108,8 +105,6 @@ export default class SimplePointModel extends BaseModel { triangulation: PointTriangulation, depth: { enable: false }, primitive: gl.POINTS, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts index 6e20937165..a2d62f040b 100644 --- a/packages/layers/src/point/models/text.ts +++ b/packages/layers/src/point/models/text.ts @@ -6,12 +6,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { - boundsContains, - calculateCentroid, - getMask, - padBounds, -} from '@antv/l7-utils'; +import { boundsContains, calculateCentroid, padBounds } from '@antv/l7-utils'; import { isEqual, isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions } from '../../core/interface'; @@ -200,8 +195,6 @@ export default class TextModel extends BaseModel { fragmentShader: textFrag, triangulation: TextTriangulation.bind(this), depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); return [model]; } @@ -568,8 +561,6 @@ export default class TextModel extends BaseModel { } private async reBuildModel() { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IPointLayerStyleOptions; this.filterGlyphs(); const model = await this.layer.buildLayerModel({ moduleName: 'pointText', @@ -577,8 +568,6 @@ export default class TextModel extends BaseModel { fragmentShader: textFrag, triangulation: TextTriangulation.bind(this), depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); // TODO 渲染流程待修改 this.layer.models = [model]; diff --git a/packages/layers/src/polygon/models/extrude.ts b/packages/layers/src/polygon/models/extrude.ts index dc423f3095..b26c6dd926 100644 --- a/packages/layers/src/polygon/models/extrude.ts +++ b/packages/layers/src/polygon/models/extrude.ts @@ -5,7 +5,7 @@ import { IModel, ITexture2D, } from '@antv/l7-core'; -import { getMask, rgb2arr } from '@antv/l7-utils'; +import { rgb2arr } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPolygonLayerStyleOptions } from '../../core/interface'; @@ -99,16 +99,12 @@ export default class ExtrudeModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IPolygonLayerStyleOptions; - const { frag, vert, type } = this.getShaders(); const model = await this.layer.buildLayerModel({ moduleName: type, vertexShader: vert, fragmentShader: frag, triangulation: PolygonExtrudeTriangulation, - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/polygon/models/fill.ts b/packages/layers/src/polygon/models/fill.ts index 3b171b209c..f9f294c37b 100644 --- a/packages/layers/src/polygon/models/fill.ts +++ b/packages/layers/src/polygon/models/fill.ts @@ -6,7 +6,7 @@ import { IModel, Triangulation, } from '@antv/l7-core'; -import { getMask, polygonFillTriangulation } from '@antv/l7-utils'; +import { polygonFillTriangulation } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPolygonLayerStyleOptions } from '../../core/interface'; @@ -90,8 +90,7 @@ export default class FillModel extends BaseModel { triangulation, primitive: gl.TRIANGLES, depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), + workerEnabled, workerOptions: { modelType: type, diff --git a/packages/layers/src/polygon/models/ocean.ts b/packages/layers/src/polygon/models/ocean.ts index fc9bc17f87..a78e092ee4 100644 --- a/packages/layers/src/polygon/models/ocean.ts +++ b/packages/layers/src/polygon/models/ocean.ts @@ -7,7 +7,7 @@ import { ITexture2D, } from '@antv/l7-core'; import { Version } from '@antv/l7-maps'; -import { getMask, rgb2arr } from '@antv/l7-utils'; +import { rgb2arr } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPolygonLayerStyleOptions } from '../../core/interface'; @@ -47,8 +47,6 @@ export default class OceanModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IPolygonLayerStyleOptions; const model = await this.layer.buildLayerModel({ moduleName: 'polygonOcean', vertexShader: ocean_vert, @@ -56,7 +54,6 @@ export default class OceanModel extends BaseModel { triangulation: polygonTriangulation, primitive: gl.TRIANGLES, depth: { enable: false }, - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/polygon/models/water.ts b/packages/layers/src/polygon/models/water.ts index 3fcc39c083..1988a1ec01 100644 --- a/packages/layers/src/polygon/models/water.ts +++ b/packages/layers/src/polygon/models/water.ts @@ -7,7 +7,6 @@ import { ITexture2D, } from '@antv/l7-core'; import { Version } from '@antv/l7-maps'; -import { getMask } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPolygonLayerStyleOptions } from '../../core/interface'; @@ -38,8 +37,6 @@ export default class WaterModel extends BaseModel { } public async buildModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IPolygonLayerStyleOptions; const model = await this.layer.buildLayerModel({ moduleName: 'polygonWater', vertexShader: water_vert, @@ -47,7 +44,6 @@ export default class WaterModel extends BaseModel { triangulation: polygonTriangulation, primitive: gl.TRIANGLES, depth: { enable: false }, - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/raster/models/raster.ts b/packages/layers/src/raster/models/raster.ts index f6e8a25ebb..884808c3bb 100644 --- a/packages/layers/src/raster/models/raster.ts +++ b/packages/layers/src/raster/models/raster.ts @@ -5,7 +5,7 @@ import { IModel, ITexture2D, } from '@antv/l7-core'; -import { getDefaultDomain, getMask } from '@antv/l7-utils'; +import { getDefaultDomain } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IRasterLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; @@ -59,8 +59,6 @@ export default class RasterModel extends BaseModel { } public async initModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IRasterLayerStyleOptions; const source = this.layer.getSource(); const { createTexture2D } = this.rendererService; const parserDataItem = source.data.dataArray[0]; @@ -83,7 +81,6 @@ export default class RasterModel extends BaseModel { triangulation: RasterImageTriangulation, primitive: gl.TRIANGLES, depth: { enable: false }, - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/raster/models/rasterRgb.ts b/packages/layers/src/raster/models/rasterRgb.ts index 5bcbed3db9..89c190c629 100644 --- a/packages/layers/src/raster/models/rasterRgb.ts +++ b/packages/layers/src/raster/models/rasterRgb.ts @@ -5,7 +5,6 @@ import { IModel, ITexture2D, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IRasterLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; @@ -58,8 +57,6 @@ export default class RasterModel extends BaseModel { } public async initModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IRasterLayerStyleOptions; const source = this.layer.getSource(); const { createTexture2D } = this.rendererService; const parserDataItem = source.data.dataArray[0]; @@ -80,7 +77,6 @@ export default class RasterModel extends BaseModel { triangulation: RasterImageTriangulation, primitive: gl.TRIANGLES, depth: { enable: false }, - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/raster/models/rasterTerrainRgb.ts b/packages/layers/src/raster/models/rasterTerrainRgb.ts index e42f137766..57e77c6298 100644 --- a/packages/layers/src/raster/models/rasterTerrainRgb.ts +++ b/packages/layers/src/raster/models/rasterTerrainRgb.ts @@ -6,7 +6,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { getDefaultDomain, getMask } from '@antv/l7-utils'; +import { getDefaultDomain } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IRasterLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; @@ -50,9 +50,6 @@ export default class RasterTerrainRGB extends BaseModel { }; } public async initModels(): Promise { - const { mask = false, maskInside = true } = - this.layer.getLayerConfig() as IRasterLayerStyleOptions; - const source = this.layer.getSource(); const { createTexture2D } = this.rendererService; const imageData = await source.data.images; @@ -69,8 +66,6 @@ export default class RasterTerrainRGB extends BaseModel { triangulation: RasterImageTriangulation, primitive: gl.TRIANGLES, depth: { enable: false }, - blend: this.getBlend(), - stencil: getMask(mask, maskInside), }); return [model]; } diff --git a/packages/layers/src/wind/models/wind.ts b/packages/layers/src/wind/models/wind.ts index 8bcc3fe9d3..bf8fdcc88c 100644 --- a/packages/layers/src/wind/models/wind.ts +++ b/packages/layers/src/wind/models/wind.ts @@ -7,7 +7,7 @@ import { ITexture2D, Point, } from '@antv/l7-core'; -import { FrequencyController, getMask } from '@antv/l7-utils'; +import { FrequencyController } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IWindLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; @@ -120,7 +120,6 @@ export default class WindModel extends BaseModel { triangulation: RasterImageTriangulation, primitive: gl.TRIANGLES, depth: { enable: false }, - stencil: getMask(mask, maskInside), blend: this.getBlend(), }); this.colorModel = model; diff --git a/packages/renderer/src/regl/ReglModel.ts b/packages/renderer/src/regl/ReglModel.ts index 54dc8bc7cb..4a099090d6 100644 --- a/packages/renderer/src/regl/ReglModel.ts +++ b/packages/renderer/src/regl/ReglModel.ts @@ -1,6 +1,7 @@ import { gl, IAttribute, + IBlendOptions, IElements, IModel, IModelDrawOptions, @@ -49,8 +50,6 @@ export default class ReglModel implements IModel { count, elements, depth, - blend, - stencil, cull, instances, } = options; @@ -74,7 +73,28 @@ export default class ReglModel implements IModel { frag: fs, uniforms: reglUniforms, vert: vs, - blend: {}, + blend: { + // @ts-ignore + enable: reGl.prop('blend.enable'), + // @ts-ignore + func: reGl.prop('blend.func'), + // @ts-ignore + equation: reGl.prop('blend.equation'), + // @ts-ignore + color: reGl.prop('blend.color'), + }, + stencil: { + // @ts-ignore + enable: reGl.prop('stencil.enable'), + // @ts-ignore + mask: reGl.prop('stencil.mask'), + // @ts-ignore + func: reGl.prop('stencil.func'), + // @ts-ignore + opFront: reGl.prop('stencil.opFront'), + // @ts-ignore + opBack: reGl.prop('stencil.opBack'), + }, primitive: primitiveMap[primitive === undefined ? gl.TRIANGLES : primitive], }; @@ -92,22 +112,10 @@ export default class ReglModel implements IModel { } this.initDepthDrawParams({ depth }, drawParams); - this.initBlendDrawParams({ blend }, drawParams); - this.initStencilDrawParams({ stencil }, drawParams); + // this.initBlendDrawParams({ blend }, drawParams); + // this.initStencilDrawParams({ stencil }, drawParams); this.initCullDrawParams({ cull }, drawParams); - this.drawCommand = reGl(drawParams); - - if (pick) { - const pickDrawParams = cloneDeep(drawParams); - - pickDrawParams.blend = { - ...pickDrawParams.blend, - enable: false, - }; - - this.drawPickCommand = reGl(pickDrawParams); - } this.drawParams = drawParams; } @@ -123,15 +131,6 @@ export default class ReglModel implements IModel { this.drawParams.elements = (elements as ReglElements).get(); this.drawCommand = this.reGl(this.drawParams); - if (this.options.pick) { - const pickDrawParams = cloneDeep(this.drawParams); - pickDrawParams.blend = { - ...pickDrawParams.blend, - enable: false, - }; - - this.drawPickCommand = this.reGl(pickDrawParams); - } } public updateAttributes(attributes: { [key: string]: IAttribute }) { @@ -181,6 +180,7 @@ export default class ReglModel implements IModel { | regl.Texture2D | number | number[] + | Partial | boolean; } = {}; Object.keys(uniforms).forEach((uniformName: string) => { @@ -202,16 +202,20 @@ export default class ReglModel implements IModel { ).get(); } }); + // 更新 blend + // @ts-ignore + reglDrawProps.blend = pick + ? this.getBlendDrawParams({ + blend: { enable: false }, + }) + : this.getBlendDrawParams(options); + + // 更新stentil 配置 + // @ts-ignore + reglDrawProps.stencil = this.getStencilDrawParams(options); + // 在进行拾取操作的绘制中，不应该使用叠加模式 - picking 根据拾取的颜色作为判断的输入，而叠加模式会产生新的，在 id 序列中不存在的颜色 - if (!pick) { - this.drawCommand(reglDrawProps); - } else { - if (this.drawPickCommand) { - this.drawPickCommand(reglDrawProps); - } - } - // this.drawCommand(reglDrawProps); - // this.drawPickCommand(reglDrawProps); + this.drawCommand(reglDrawProps); } public destroy() { @@ -243,80 +247,70 @@ export default class ReglModel implements IModel { } } - /** - * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#blending - */ - private initBlendDrawParams( - { blend }: Pick, - drawParams: regl.DrawConfig, - ) { - if (blend) { - const { enable, func, equation, color = [0, 0, 0, 0] } = blend; - // @ts-ignore - drawParams.blend = { - enable: !!enable, - func: { - srcRGB: blendFuncMap[(func && func.srcRGB) || gl.SRC_ALPHA], - srcAlpha: blendFuncMap[(func && func.srcAlpha) || gl.SRC_ALPHA], - dstRGB: blendFuncMap[(func && func.dstRGB) || gl.ONE_MINUS_SRC_ALPHA], - dstAlpha: - blendFuncMap[(func && func.dstAlpha) || gl.ONE_MINUS_SRC_ALPHA], - }, - equation: { - rgb: blendEquationMap[(equation && equation.rgb) || gl.FUNC_ADD], - alpha: blendEquationMap[(equation && equation.alpha) || gl.FUNC_ADD], - }, - color, - }; - } + private getBlendDrawParams({ + blend, + }: Pick) { + const { enable, func, equation, color = [0, 0, 0, 0] } = blend || {}; + // @ts-ignore + return { + enable: !!enable, + func: { + srcRGB: blendFuncMap[(func && func.srcRGB) || gl.SRC_ALPHA], + srcAlpha: blendFuncMap[(func && func.srcAlpha) || gl.SRC_ALPHA], + dstRGB: blendFuncMap[(func && func.dstRGB) || gl.ONE_MINUS_SRC_ALPHA], + dstAlpha: + blendFuncMap[(func && func.dstAlpha) || gl.ONE_MINUS_SRC_ALPHA], + }, + equation: { + rgb: blendEquationMap[(equation && equation.rgb) || gl.FUNC_ADD], + alpha: blendEquationMap[(equation && equation.alpha) || gl.FUNC_ADD], + }, + color, + }; } - /** * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#stencil */ - private initStencilDrawParams( - { stencil }: Pick, - drawParams: regl.DrawConfig, - ) { - if (stencil) { - const { - enable, - mask = -1, - func = { - cmp: gl.ALWAYS, - ref: 0, - mask: -1, - }, - opFront = { - fail: gl.KEEP, - zfail: gl.KEEP, - zpass: gl.KEEP, - }, - opBack = { - fail: gl.KEEP, - zfail: gl.KEEP, - zpass: gl.KEEP, - }, - } = stencil; - drawParams.stencil = { - enable: !!enable, - mask, - func: { - ...func, - cmp: stencilFuncMap[func.cmp], - }, - opFront: { - fail: stencilOpMap[opFront.fail], - zfail: stencilOpMap[opFront.zfail], - zpass: stencilOpMap[opFront.zpass], - }, - opBack: { - fail: stencilOpMap[opBack.fail], - zfail: stencilOpMap[opBack.zfail], - zpass: stencilOpMap[opBack.zpass], - }, - }; - } + private getStencilDrawParams({ + stencil, + }: Pick) { + const { + enable, + mask = -1, + func = { + cmp: gl.ALWAYS, + ref: 0, + mask: -1, + }, + opFront = { + fail: gl.KEEP, + zfail: gl.KEEP, + zpass: gl.KEEP, + }, + opBack = { + fail: gl.KEEP, + zfail: gl.KEEP, + zpass: gl.KEEP, + }, + } = stencil || {}; + return { + enable: !!enable, + mask, + func: { + ...func, + cmp: stencilFuncMap[func.cmp], + }, + opFront: { + fail: stencilOpMap[opFront.fail], + zfail: stencilOpMap[opFront.zfail], + zpass: stencilOpMap[opFront.zpass], + }, + opBack: { + fail: stencilOpMap[opBack.fail], + zfail: stencilOpMap[opBack.zfail], + zpass: stencilOpMap[opBack.zpass], + }, + }; } /**