25:["$","title",null,{"children":"DeckGL multiview attempt | mheard03 | Observable"}] 49:T5f7,deckgl = { // const myFBO = this.device.createFramebuffer({colorAttachments: ['rgba8unorm']}), const deckgl = new deck.DeckGL({ views: [ new deck.MapView({ id: 'main', repeat: true }), new deck.MapView({ id: 'mask', repeat: true, viewState: 'main' }) ], layerFilter: (({layer, viewport}) => { const isRect = layer.id == 'rect'; return (viewport.id == "mask") ? isRect : !isRect }), container, controller: true, initialViewState: { id: 'main', longitude: 0, latitude: 35, zoom: 1 }, layers: [ new deck.GeoJsonLayer({ id: 'countries', data: countries.features, _subLayerProps: { 'polygons-stroke': { type: InnerBorderLayer } }, stroked: true, filled: true, extruded: false, wrapLongitude: true, autoHighlight: true, lineWidthUnits: 'common', lineJointRounded: true, lineWidthMinPixels: 1, lineWidthMaxPixels: 10, getLineWidth: 1, getFillColor: f => [128, 128, 128], getLineColor: f => [255, 0, 0, 128], maskId: 'rect' }), new deck.GeoJsonLayer({ id: 'rect', data: square, stroked: false, filled: true, getFillColor: f => [80, 80, 80] }) ] }); invalidation.then(() => { try { deckgl.finalize(); } catch (e) { console.log('error finalizing deckgl instance', e); } container.innerHTML = ""; }); return deckgl; }4a:T8d8,OutlineMaskExtension = { class OutlineMaskExtension extends deck.LayerExtension { static { OutlineMaskExtension.extensionName = "OutlineMaskExtension"; OutlineMaskExtension.defaultProps = { maskId: '', maskByInstance: undefined, maskInverted: false } } initializeState() { this.context.deck?._addDefaultEffect(new OutlineMaskEffect()); } getShaders() { // Infer by geometry if 'maskByInstance' prop isn't explictly set let maskByInstance = 'instancePositions' in this.getAttributeManager().attributes; // Users can override by setting the `maskByInstance` prop if (this.props.maskByInstance !== undefined) { maskByInstance = Boolean(this.props.maskByInstance); } this.state.maskByInstance = maskByInstance; return { modules: [outlineMaskShaders] }; } /* eslint-disable camelcase */ draw({uniforms, context, moduleParameters}) { uniforms.mask_maskByInstance = this.state.maskByInstance; const {maskId, maskInverted} = this.props; const {maskChannels} = moduleParameters; const {viewport} = context; if (maskChannels && maskChannels[maskId]) { const {index, bounds, coordinateOrigin: fromCoordinateOrigin} = maskChannels[maskId]; let {coordinateSystem: fromCoordinateSystem} = maskChannels[maskId]; uniforms.mask_enabled = true; uniforms.mask_channel = index; uniforms.mask_inverted = maskInverted; if (fromCoordinateSystem === deck.COORDINATE_SYSTEM.DEFAULT) { fromCoordinateSystem = viewport.isGeospatial ? deck.COORDINATE_SYSTEM.LNGLAT : deck.COORDINATE_SYSTEM.CARTESIAN; } const opts = {modelMatrix: null, fromCoordinateOrigin, fromCoordinateSystem}; const bl = this.projectPosition([bounds[0], bounds[1], 0], opts); const tr = this.projectPosition([bounds[2], bounds[3], 0], opts); uniforms.mask_bounds = [bl[0], bl[1], tr[0], tr[1]]; } else { if (maskId) { console.warn(`Could not find a mask layer with id: ${maskId}`)(); } uniforms.mask_enabled = false; } } } return OutlineMaskExtension; }4b:T1e8f,OutlineMaskEffect = { const { joinLayerBounds, getViewportBounds, makeViewport, getRenderBounds, arraysEqual } = omeUtil; /* type Mask = { index: number; bounds: Bounds; coordinateOrigin: [number, number, number]; coordinateSystem: CoordinateSystem; }; type Channel = { id: string; index: number; layers: Layer[]; bounds: Bounds | null; maskBounds: Bounds; layerBounds: Bounds[]; coordinateOrigin: [number, number, number]; coordinateSystem: CoordinateSystem; }; export type MaskPreRenderStats = { didRender: boolean; }; */ // Class to manage mask effect class OutlineMaskEffect { constructor() { this.id = 'outline-mask-effect'; this.props = null; this.useInPicking = true; this.order = 0; this.channels = []; } preRender(device, preRenderOptions) { const {layers, layerFilter, viewports, onViewportActive, views, isPicking} = preRenderOptions let didRender = false; if (!this.dummyMaskMap) { this.dummyMaskMap = device.createTexture({ width: 1, height: 1 }); } if (isPicking) { // Do not update on picking pass return {didRender}; } // TODO const maskLayers = layers.filter(l => l.props.visible && l.props.operation.includes('mask')); if (maskLayers.length === 0) { this.masks = null; this.channels.length = 0; return {didRender}; } this.masks = {}; if (!this.maskPass) { this.maskPass = new OutlineMaskPass(device, {id: 'default-mask'}); this.maskMap = this.maskPass.maskMap; } // Map layers to channels const channelMap = this._sortMaskChannels(maskLayers); // TODO - support multiple views const viewport = viewports[0]; const viewportChanged = !this.lastViewport || !this.lastViewport.equals(viewport); if (viewport.resolution !== undefined) { console.warn('MaskExtension is not supported in GlobeView')(); return {didRender}; } for (const maskId in channelMap) { const result = this._renderChannel(channelMap[maskId], { layerFilter, onViewportActive, views, viewport, viewportChanged }); didRender ||= result; } // debugFBO(this.maskMap, {opaque: true}); return {didRender}; } /* eslint-disable-next-line complexity */ _renderChannel( channelInfo, { layerFilter, onViewportActive, views, viewport, viewportChanged } ) { let didRender = false; const oldChannelInfo = this.channels[channelInfo.index]; if (!oldChannelInfo) { return didRender; } const maskChanged = // If a channel is new channelInfo === oldChannelInfo || // If sublayers have changed channelInfo.layers.length !== oldChannelInfo.layers.length || channelInfo.layers.some( (layer, i) => // Layer instance is updated // Layer props might have changed // Undetermined props could have an effect on the output geometry of a mask layer, // for example getRadius+updateTriggers, radiusScale, modelMatrix layer !== oldChannelInfo.layers[i] || // Some prop is in transition layer.props.transitions ) || // If a sublayer's positions have been updated, the cached bounds will change shallowly channelInfo.layerBounds.some((b, i) => b !== oldChannelInfo.layerBounds[i]); channelInfo.bounds = oldChannelInfo.bounds; channelInfo.maskBounds = oldChannelInfo.maskBounds; this.channels[channelInfo.index] = channelInfo; if (maskChanged || viewportChanged) { // Recalculate mask bounds this.lastViewport = viewport; const layerBounds = joinLayerBounds(channelInfo.layers, viewport); channelInfo.bounds = layerBounds && getRenderBounds(layerBounds, viewport); if (maskChanged || !arraysEqual(channelInfo.bounds, oldChannelInfo.bounds)) { // Rerender mask FBO const {maskPass, maskMap} = this; const maskViewport = layerBounds && makeViewport({ bounds: channelInfo.bounds, viewport, width: maskMap.width, height: maskMap.height, border: 1 }); channelInfo.maskBounds = maskViewport ? maskViewport.getBounds() : [0, 0, 1, 1]; // @ts-ignore (2532) This method is only called from preRender where maskPass is defined maskPass.render({ pass: 'mask', channel: channelInfo.index, layers: channelInfo.layers, layerFilter, viewports: maskViewport ? [maskViewport] : [], onViewportActive, views, moduleParameters: { devicePixelRatio: 1 } }); didRender = true; } } // @ts-ignore (2532) This method is only called from preRender where masks is defined this.masks[channelInfo.id] = { index: channelInfo.index, bounds: channelInfo.maskBounds, coordinateOrigin: channelInfo.coordinateOrigin, coordinateSystem: channelInfo.coordinateSystem }; return didRender; } /** * Find a channel to render each mask into * If a maskId already exists, diff and update the existing channel * Otherwise replace a removed mask * Otherwise create a new channel * Returns a map from mask layer id to channel info */ _sortMaskChannels(maskLayers) { const channelMap = {}; let channelCount = 0; for (const layer of maskLayers) { const {id} = layer.root; let channelInfo = channelMap[id]; if (!channelInfo) { if (++channelCount > 4) { console.warn('Too many mask layers. The max supported is 4')(); continue; // eslint-disable-line no-continue } channelInfo = { id, index: this.channels.findIndex(c => c?.id === id), layers: [], layerBounds: [], coordinateOrigin: layer.root.props.coordinateOrigin, coordinateSystem: layer.root.props.coordinateSystem }; channelMap[id] = channelInfo; } channelInfo.layers.push(layer); channelInfo.layerBounds.push(layer.getBounds()); } for (let i = 0; i < 4; i++) { const channelInfo = this.channels[i]; if (!channelInfo || !(channelInfo.id in channelMap)) { // The mask id at this channel no longer exists this.channels[i] = null; } } for (const maskId in channelMap) { const channelInfo = channelMap[maskId]; if (channelInfo.index < 0) { channelInfo.index = this.channels.findIndex(c => !c); this.channels[channelInfo.index] = channelInfo; } } return channelMap; } getModuleParameters({ maskMap, maskChannels }) { return { maskMap: this.masks ? this.maskMap : this.dummyMaskMap, maskChannels: this.masks }; } cleanup() { if (this.dummyMaskMap) { this.dummyMaskMap.delete(); this.dummyMaskMap = undefined; } if (this.maskPass) { this.maskPass.delete(); this.maskPass = undefined; this.maskMap = undefined; } this.lastViewport = undefined; this.masks = null; this.channels.length = 0; } } return OutlineMaskEffect; }4c:T5ca,OutlineMaskPass = { const { GL, withParameters } = luma; class OutlineMaskPass extends deck._LayersPass { constructor(device, props) { let {id, mapSize} = props; super(device, props); mapSize ||= 2048; debugger; this.maskMap = device.createTexture({ format: 'rgba8unorm', width: mapSize, height: mapSize, sampler: { minFilter: 'linear', magFilter: 'linear', addressModeU: 'clamp-to-edge', addressModeV: 'clamp-to-edge' } }); this.maskMap.width = mapSize; this.maskMap.height = mapSize; this.fbo = device.createFramebuffer({ id: 'maskmap', width: mapSize, height: mapSize, colorAttachments: [this.maskMap] }); } render(options) { const colorMask = [false, false, false, false]; colorMask[options.channel] = true; return this.withGLParameters( this.device, { clearColor: [255, 255, 255, 255], blend: true, blendFunc: [GL.ZERO, GL.ONE], blendEquation: GL.FUNC_SUBTRACT, colorMask, depthTest: false }, () => super.render({...options, target: this.fbo, pass: 'mask'}) ); } shouldDrawLayer(layer) { return layer.props.operation.includes('mask'); } delete() { this.fbo.delete(); this.maskMap.delete(); } } return OutlineMaskPass; } 4d:T807,outlineMaskShaders = { const vs = ` uniform vec4 mask_bounds; uniform bool mask_maskByInstance; vec2 mask_getCoords(vec4 position) { return (position.xy - mask_bounds.xy) / (mask_bounds.zw - mask_bounds.xy); } `; const fs = ` uniform sampler2D mask_texture; uniform int mask_channel; uniform bool mask_enabled; uniform bool mask_inverted; bool mask_isInBounds(vec2 texCoords) { if (!mask_enabled) { return true; } vec4 maskColor = texture2D(mask_texture, texCoords); float maskValue = 1.0; if (mask_channel == 0) { maskValue = maskColor.r; } else if (mask_channel == 1) { maskValue = maskColor.g; } else if (mask_channel == 2) { maskValue = maskColor.b; } else if (mask_channel == 3) { maskValue = maskColor.a; } if (mask_inverted) { return maskValue >= 0.5; } else { return maskValue < 0.5; } } `; const inject = { 'vs:#decl': ` varying vec2 mask_texCoords; `, 'vs:#main-end': ` vec4 mask_common_position; if (mask_maskByInstance) { mask_common_position = project_position(vec4(geometry.worldPosition, 1.0)); } else { mask_common_position = geometry.position; } mask_texCoords = mask_getCoords(mask_common_position); `, 'fs:#decl': ` varying vec2 mask_texCoords; `, 'fs:#main-start': ` if (mask_enabled) { bool mask = mask_isInBounds(mask_texCoords); // Debug: show extent of render target // gl_FragColor = vec4(mask_texCoords, 0.0, 1.0); gl_FragColor = texture2D(mask_texture, mask_texCoords); if (!mask) discard; } ` }; /* eslint-disable camelcase */ const getMaskUniforms = (opts) => { if (opts && 'maskMap' in opts) { return { mask_texture: opts.maskMap }; } return {}; }; return { name: 'mask', dependencies: [deck.project], vs, fs, inject, getUniforms: getMaskUniforms }; }4e:T15b4,omeUtil = { function joinLayerBounds(layers, viewport) { // Join the bounds of layer data const bounds = [Infinity, Infinity, -Infinity, -Infinity]; for (const layer of layers) { const layerBounds = layer.getBounds(); if (layerBounds) { const bottomLeftCommon = layer.projectPosition(layerBounds[0], {viewport, autoOffset: false}); const topRightCommon = layer.projectPosition(layerBounds[1], {viewport, autoOffset: false}); bounds[0] = Math.min(bounds[0], bottomLeftCommon[0]); bounds[1] = Math.min(bounds[1], bottomLeftCommon[1]); bounds[2] = Math.max(bounds[2], topRightCommon[0]); bounds[3] = Math.max(bounds[3], topRightCommon[1]); } } if (Number.isFinite(bounds[0])) { return bounds; } return null; } function getViewportBounds(viewport, zRange) { // Viewport bounds in world coordinates let viewportBoundsWorld; if (zRange && zRange.length === 2) { const [minZ, maxZ] = zRange; const bounds0 = viewport.getBounds({z: minZ}); const bounds1 = viewport.getBounds({z: maxZ}); viewportBoundsWorld = [ Math.min(bounds0[0], bounds1[0]), Math.min(bounds0[1], bounds1[1]), Math.max(bounds0[2], bounds1[2]), Math.max(bounds0[3], bounds1[3]) ]; } else { viewportBoundsWorld = viewport.getBounds(); } // Viewport bounds in cartesian coordinates const viewportBottomLeftCommon = viewport.projectPosition(viewportBoundsWorld.slice(0, 2)); const viewportTopRightCommon = viewport.projectPosition(viewportBoundsWorld.slice(2, 4)); return [ viewportBottomLeftCommon[0], viewportBottomLeftCommon[1], viewportTopRightCommon[0], viewportTopRightCommon[1] ]; } function makeViewport(opts) { debugger; const {bounds, viewport, border = 0} = opts; const {isGeospatial} = viewport; if (bounds[2] <= bounds[0] || bounds[3] <= bounds[1]) { return null; } const centerWorld = viewport.unprojectPosition([ (bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2, 0 ]); let {width, height, zoom} = opts; if (zoom === undefined) { // Use width and height to determine zoom width = width - border * 2; height = height - border * 2; const scale = Math.min(width / (bounds[2] - bounds[0]), height / (bounds[3] - bounds[1])); zoom = Math.min(Math.log2(scale), 20); } else if (!width || !height) { // Use zoom to determine width and height const scale = 2 ** zoom; width = Math.round(Math.abs(bounds[2] - bounds[0]) * scale); height = Math.round(Math.abs(bounds[3] - bounds[1]) * scale); const maxSize = deck.MAX_VIEWPORT_SIZE - border * 2; if (width > maxSize || height > maxSize) { const r = maxSize / Math.max(width, height); width = Math.round(width * r); height = Math.round(height * r); zoom += Math.log2(r); } } // TODO - find a more generic way to construct this viewport // Geospatial viewports may not be web-mercator return isGeospatial ? new deck.WebMercatorViewport({ id: viewport.id, x: border, y: border, width, height, longitude: centerWorld[0], latitude: centerWorld[1], zoom, orthographic: true }) : new deck.OrthographicViewport({ id: viewport.id, x: border, y: border, width, height, target: centerWorld, zoom, flipY: false }); } function doubleBounds(bounds) { const dx = bounds[2] - bounds[0]; const dy = bounds[3] - bounds[1]; const centerX = (bounds[0] + bounds[2]) / 2; const centerY = (bounds[1] + bounds[3]) / 2; return [centerX - dx, centerY - dy, centerX + dx, centerY + dy]; } function getRenderBounds(layerBounds, viewport, zRange) { if (!layerBounds) { return [0, 0, 1, 1]; } const viewportBounds = getViewportBounds(viewport, zRange); // Expand viewport bounds by 2X. Heurestically chosen to avoid masking // errors when mask is partially out of view const paddedBounds = doubleBounds(viewportBounds); // When bounds of the layers are smaller than the viewport bounds simply use // mask bounds, so as to maximize resolution & avoid rerenders if ( layerBounds[2] - layerBounds[0] <= paddedBounds[2] - paddedBounds[0] && layerBounds[3] - layerBounds[1] <= paddedBounds[3] - paddedBounds[1] ) { return layerBounds; } // As viewport shrinks, to avoid pixelation along mask edges // we need to reduce the bounds and only render the visible portion // of the mask. // We pad the viewport bounds to capture the section // of the mask just outside the viewport to correctly maskByInstance. // Intersect mask & padded viewport bounds return [ Math.max(layerBounds[0], paddedBounds[0]), Math.max(layerBounds[1], paddedBounds[1]), Math.min(layerBounds[2], paddedBounds[2]), Math.min(layerBounds[3], paddedBounds[3]) ]; } function arraysEqual(a, b) { if (!a || !b || a.length != b.length) return false; if (a.length === 0) return true; for (let i = 0; i < a.length; i++) { if (a[i] !== b[i]) return false; } return true; } return { makeViewport, joinLayerBounds, getViewportBounds, getRenderBounds, arraysEqual } }4f:T559,class FeaturesLayer extends deck.CompositeLayer { static { FeaturesLayer.layerName = "FeaturesLayer"; FeaturesLayer.defaultProps = Object.assign({}, deck.GeoJsonLayer.defaultProps, { stroked: true, filled: true, extruded: false, wrapLongitude: true, autoHighlight: true, lineWidthUnits: 'common', lineJointRounded: true, lineWidthMinPixels: 1, lineWidthMaxPixels: 10, getLineWidth: 1, getFillColor: f => [128, 128, 128], getLineColor: f => [255, 0, 0], getOffset: f => 0.5, extensions: [new deck.PathStyleExtension({offset: true})], getFeatureId: f => f.properties.name }); } getForwardedProps() { const forwarded = { updateTriggers: {} }; for (let key of Object.keys(deck.GeoJsonLayer.defaultProps)) { if (key in this.props) forwarded[key] = this.props[key]; if (key in this.props.updateTriggers) forwarded.updateTriggers[key] = this.props.updateTriggers[key]; } return forwarded; } renderLayers() { const layers = []; for (let feature of this.props.data ?? []) { const id = this.props.getFeatureId(feature); const layer = new deck.GeoJsonLayer(this.getForwardedProps(), this.getSubLayerProps({ id }), { data: feature }); layers.push(layer); } return layers; } }50:[] 29:{"id":"47794c69e8ce3bc3","slug":null,"title":"DeckGL multiview attempt","thumbnail":"af36e1ddf3659a140f783b998db549903afb05dcedf1b592b730e4488616a93e","access_level":"public","create_time":"$D2023-11-26T19:26:09.115Z","update_time":"$D2023-11-26T19:26:09.115Z","view_time":null,"first_public_time":"$D2023-11-26T19:26:09.115Z","has_unpublished_edits":null,"fork":{"id":"ed7ca216d595fad3","slug":null,"title":"DeckGL","owner":{"id":"02d4ccf8951f2f02","login":"mheard03","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"02d4ccf8951f2f02","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":"starter_2024","bio":"","following":false},"version":1149,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6afb6cac5f188ec0","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6afb6cac5f188ec0","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"DeckGL multiview attempt","cells":[{"id":0,"value":"# DeckGL multiview attempt","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"deckgl.layerManager.layers","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"square = turf.polygon([[[-20, -20], [-20, 20], [20, 20], [20, -20], [-20, -20]]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"### OutlineMaskExtension","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":960,"value":"deckgl.deckRenderer.pickLayersPass","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"luma.Framebuffer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"window.luma","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"luma","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"### Old Attempts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":700,"value":"class InnerBorderLayer extends deck.PathLayer {\n static {\n InnerBorderLayer.defaultProps = _.cloneDeep(deck.PathLayer.defaultProps);\n InnerBorderLayer.layerName = 'InnerBorderLayer';\n }\n\n getShaders() {\n // vPathPosition.x - position along the width of the path, between [-1, 1]. 0 is the center line.\n const result = {\n ...super.getShaders(),\n inject: { \"fs:#main-end\": \"\\nif (vPathPosition.x >= 0.0) discard;\\n\" }\n }\n return result;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"countries = fetch('https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson')\n .then(resp => resp.json())\n .then(geo => d3.geoStitch(geo))\n .then(result => {\n // Join results\n const countries = new Map();\n for (const feature of result.features) {\n const name = feature.properties.sr_subunit;\n if (!countries.has(name)) countries.set(name, []);\n countries.get(name).push(feature);\n }\n const features = Array.from(countries.entries())\n .map(([name, features], i) => {\n // const color = [55 + i / 200, 55 + i % 200, 128];\n return (features.length === 1)\n ? turf.polygon(features[0].geometry.coordinates, {name})\n : turf.multiPolygon(features.map(f => f.geometry.coordinates), {name});\n // turf.coordEach(feature, c => c[2] = i);\n });\n const fc = turf.featureCollection(features);\n return d3.geoStitch(fc);\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3\", \"d3-geo\", \"d3-geo-projection\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"deck = require('deck.gl@8.9/dist.min.js');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"luma = {\n await deck;\n const version = window.luma.VERSION;\n window.luma.GL = WebGL2RenderingContext;\n return window.luma;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"w8r = {\n const Offset = (await import('https://cdn.skypack.dev/polygon-offset@0.3.2?min')).default;\n const { intersection, diff, union, xor } = await import('https://cdn.skypack.dev/martinez-polygon-clipping@0.7.3?min');\n return { Offset, intersection, diff, union, xor };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"/*\nlumaVersion = {\n await deck;\n return window.luma.VERSION;\n}\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"// import('https://cdn.skypack.dev/@luma.gl/webgl@8.5.21?min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"// import('https://cdn.skypack.dev/@luma.gl/core@8.5.21?min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"turf = require('@turf/turf@6.5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null