fix(core): correct opacity in interleaved mode (#9642)

Author: felixpalmer

examples/layer-browser/src/app.tsx

@@ -88,6 +88,7 @@ export default class App extends PureComponent {
         useDevicePixels: true,
         pickingRadius: 0,
         drawPickingColors: false,
+        interleaved: true,
 
         // Model matrix manipulation
         separation: 0,

examples/layer-browser/src/map.jsx

@@ -5,7 +5,8 @@
 /* global window */
 
 import React, {PureComponent} from 'react';
-import {Map} from 'react-map-gl/maplibre';
+import {Map, useControl} from 'react-map-gl/maplibre';
+import {MapboxOverlay} from '@deck.gl/mapbox';
 import autobind from 'react-autobind';
 
 import {DeckGL} from '@deck.gl/react';
@@ -42,10 +43,16 @@ const INITIAL_VIEW_STATES = {
   }
 };
 
-const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
+const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
 
 const ViewportLabel = props => <div style={VIEW_LABEL_STYLES}>{props.children}</div>;
 
+function DeckGLOverlay(props) {
+  const overlay = useControl(() => new MapboxOverlay(props));
+  overlay.setProps(props);
+  return null;
+}
+
 export default class DeckMap extends PureComponent {
   constructor(props) {
     super(props);
@@ -55,7 +62,6 @@ export default class DeckMap extends PureComponent {
       hoveredItem: null,
       clickedItem: null,
       queriedItems: null,
-
       enableDepthPickOnClick: false,
       metrics: null
     };
@@ -132,45 +138,36 @@ export default class DeckMap extends PureComponent {
       layers,
       views,
       effects,
-      settings: {pickingRadius, drawPickingColors, useDevicePixels}
+      settings: {pickingRadius, drawPickingColors, useDevicePixels, interleaved}
     } = this.props;
 
     return (
-      <div style={{backgroundColor: '#eeeeee'}}>
+      <div style={{backgroundColor: '#eeeeee', height: '100vh', width: '100vw'}}>
         <div style={{position: 'absolute', top: '10px', left: '100px', zIndex: 999}}>
           <RenderMetrics metrics={this.state.metrics} />
         </div>
-        <DeckGL
-          ref={this.deckRef}
-          id="default-deckgl-overlay"
-          layers={layers}
-          layerFilter={this._layerFilter}
-          views={views}
-          initialViewState={INITIAL_VIEW_STATES}
-          effects={effects}
-          pickingRadius={pickingRadius}
-          onHover={this._onHover}
-          onClick={this._onClick}
-          useDevicePixels={useDevicePixels}
-          debug={true}
-          drawPickingColors={drawPickingColors}
-          _onMetrics={this._onMetrics}
+        <Map
+          key={`map-${interleaved}`}
+          mapStyle={MAP_STYLE}
+          initialViewState={INITIAL_VIEW_STATES.basemap}
         >
-          <View id="basemap">
-            <Map key="map" mapStyle={MAP_STYLE} />
-            <ViewportLabel key="label">Map View</ViewportLabel>
-          </View>
-
-          <View id="first-person">
-            <ViewportLabel>First Person View</ViewportLabel>
-          </View>
-
-          <View id="infovis">
-            <ViewportLabel>Orbit View (PlotLayer only, No Navigation)</ViewportLabel>
-          </View>
-
+          <DeckGLOverlay
+            layers={layers.map(l => l.clone({beforeId: 'watername_ocean'}))}
+            initialViewState={INITIAL_VIEW_STATES}
+            layerFilter={this._layerFilter}
+            {...(!interleaved && {views})}
+            effects={effects}
+            pickingRadius={pickingRadius}
+            onHover={this._onHover}
+            onClick={this._onClick}
+            useDevicePixels={useDevicePixels}
+            debug={true}
+            drawPickingColors={drawPickingColors}
+            _onMetrics={this._onMetrics}
+            interleaved={interleaved}
+          />
           <LayerInfo hovered={hoveredItem} clicked={clickedItem} queried={queriedItems} />
-        </DeckGL>
+        </Map>
       </div>
     );
   }

modules/carto/src/layers/raster-layer.ts

@@ -145,18 +145,7 @@ export default class RasterLayer<DataT = any, ExtraProps = {}> extends Composite
         offset,
         lineWidthScale, // Re-use widthScale prop to pass cell scale,
         highlightedObjectIndex,
-        highlightColor,
-
-        // RTT requires blending otherwise opacity < 1 blends with black
-        // render target
-        parameters: {
-          blendColorSrcFactor: 'one',
-          blendAlphaSrcFactor: 'one',
-          blendColorDstFactor: 'zero',
-          blendAlphaDstFactor: 'zero',
-          blendColorOperation: 'add',
-          blendAlphaOperation: 'add'
-        }
+        highlightColor
       }
     );
   }

modules/core/src/lib/deck-renderer.ts

@@ -83,13 +83,19 @@ export default class DeckRenderer {
     }
 
     const outputBuffer = this.lastPostProcessEffect ? this.renderBuffers[0] : renderOpts.target;
+
     if (this.lastPostProcessEffect) {
       renderOpts.clearColor = [0, 0, 0, 0];
       renderOpts.clearCanvas = true;
     }
     const renderStats = layerPass.render({...renderOpts, target: outputBuffer});
 
     if (renderOpts.effects) {
+      if (this.lastPostProcessEffect) {
+        // Interleaved basemap rendering requires clearCanvas to be false
+        renderOpts.clearCanvas = opts.clearCanvas === undefined ? true : opts.clearCanvas;
+      }
+
       this._postRender(renderOpts.effects, renderOpts);
     }
 

modules/core/src/passes/screen-pass.ts

@@ -5,7 +5,7 @@
 // Attribution: This class and the multipass system were inspired by
 // the THREE.js EffectComposer and *Pass classes
 
-import type {Device, Framebuffer} from '@luma.gl/core';
+import type {Device, Framebuffer, RenderPipelineParameters} from '@luma.gl/core';
 import {ClipSpace} from '@luma.gl/engine';
 import type {ShaderModule} from '@luma.gl/shadertools';
 import Pass from './pass';
@@ -31,7 +31,18 @@ export default class ScreenPass extends Pass {
   constructor(device: Device, props: ScreenPassProps) {
     super(device, props);
     const {module, fs, id} = props;
-    const parameters = {depthWriteEnabled: false, depthCompare: 'always' as const};
+    const parameters: RenderPipelineParameters = {
+      depthWriteEnabled: false,
+      depthCompare: 'always' as const,
+      depthBias: 0,
+      blend: true,
+      blendColorSrcFactor: 'one',
+      blendColorDstFactor: 'one-minus-src-alpha',
+      blendAlphaSrcFactor: 'one',
+      blendAlphaDstFactor: 'one-minus-src-alpha',
+      blendColorOperation: 'add',
+      blendAlphaOperation: 'add'
+    };
     this.model = new ClipSpace(device, {id, fs, modules: [module, screenUniforms], parameters});
   }