Skip to content

Commit

Permalink
clean up render passes (#3733)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pessimistress
Pessimistress committed Oct 3, 2019
1 parent 0755d5c commit 7e54a90
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 144 deletions.
4 changes: 1 addition & 3 deletions modules/core/src/lib/deck-picker.js
View file
Expand Up @@ -50,9 +50,6 @@ export default class DeckPicker {
if ('layerFilter' in props) {
this.layerFilter = props.layerFilter;
}
this.pickLayersPass.setProps({
layerFilter: this.layerFilter
});
}

finalize() {
Expand Down Expand Up @@ -320,6 +317,7 @@ export default class DeckPicker {

this.pickLayersPass.render({
layers,
layerFilter: this.layerFilter,
viewports,
onViewportActive,
pickingFBO,
Expand Down
52 changes: 20 additions & 32 deletions modules/core/src/lib/deck-renderer.js
View file
Expand Up @@ -21,46 +21,33 @@ export default class DeckRenderer {
}

setProps(props) {
if ('layerFilter' in props) {
if (this.layerFilter !== props.layerFilter) {
this.layerFilter = props.layerFilter;
this._needsRedraw = 'layerFilter changed';
}
if ('layerFilter' in props && this.layerFilter !== props.layerFilter) {
this.layerFilter = props.layerFilter;
this._needsRedraw = 'layerFilter changed';
}

if ('drawPickingColors' in props) {
if (this.drawPickingColors !== props.drawPickingColors) {
this.drawPickingColors = props.drawPickingColors;
this._needsRedraw = 'drawPickingColors changed';
}
if ('drawPickingColors' in props && this.drawPickingColors !== props.drawPickingColors) {
this.drawPickingColors = props.drawPickingColors;
this._needsRedraw = 'drawPickingColors changed';
}

const {layerFilter} = this;

this.drawLayersPass.setProps({
layerFilter
});
this.pickLayersPass.setProps({
layerFilter
});
}

renderLayers({
layers,
viewports,
activateViewport,
onViewportActive,
views,
redrawReason = 'unknown reason',
clearCanvas = true,
redrawReason,
clearCanvas,
effects = [],
pass,
stats
}) {
const layerPass = this.drawPickingColors ? this.pickLayersPass : this.drawLayersPass;
const effectProps = this.prepareEffects({
const effectProps = this._prepareEffects({
layers,
viewports,
onViewportActive: activateViewport,
onViewportActive,
views,
effects
});
Expand All @@ -70,23 +57,24 @@ export default class DeckRenderer {

const renderStats = layerPass.render({
layers,
layerFilter: this.layerFilter,
viewports,
views,
onViewportActive: activateViewport,
onViewportActive,
redrawReason,
clearCanvas,
effects,
effectProps,
outputBuffer
});

this.postRender(effects);
this._postRender(effects);

this.renderCount++;

if (log.priority >= LOG_PRIORITY_DRAW) {
renderStats.forEach(status => {
this.logRenderStats({status, pass, redrawReason, stats, renderStats});
this._logRenderStats({status, pass, redrawReason, stats, renderStats});
});
}
}
Expand All @@ -111,7 +99,7 @@ export default class DeckRenderer {
}

// Private
prepareEffects(params) {
_prepareEffects(params) {
const {effects} = params;
const effectProps = {};
this.lastPostProcessEffect = null;
Expand All @@ -124,13 +112,13 @@ export default class DeckRenderer {
}

if (this.lastPostProcessEffect) {
this.prepareRenderBuffers();
this._prepareRenderBuffers();
}

return effectProps;
}

prepareRenderBuffers() {
_prepareRenderBuffers() {
if (!this.screenBuffer) {
this.screenBuffer = new Framebuffer(this.gl);
}
Expand All @@ -142,7 +130,7 @@ export default class DeckRenderer {
this.offscreenBuffer.resize();
}

postRender(effects) {
_postRender(effects) {
let params = {inputBuffer: this.screenBuffer, outputBuffer: this.offscreenBuffer, target: null};
for (const effect of effects) {
if (effect instanceof PostProcessEffect) {
Expand All @@ -156,7 +144,7 @@ export default class DeckRenderer {
}
}

logRenderStats({renderStats, pass, redrawReason, stats}) {
_logRenderStats({renderStats, pass, redrawReason, stats}) {
const {totalCount, visibleCount, compositeCount, pickableCount} = renderStats;
const primitiveCount = totalCount - compositeCount;
const hiddenCount = primitiveCount - visibleCount;
Expand Down
7 changes: 2 additions & 5 deletions modules/core/src/lib/deck.js
View file
Expand Up @@ -645,15 +645,12 @@ export default class Deck {

this.props.onBeforeRender({gl});

const layers = this.layerManager.getLayers();
const activateViewport = this.layerManager.activateViewport;

this.deckRenderer.renderLayers(
Object.assign(
{
layers,
layers: this.layerManager.getLayers(),
viewports: this.viewManager.getViewports(),
activateViewport,
onViewportActive: this.layerManager.activateViewport,
views: this.viewManager.getViews(),
pass: 'screen',
redrawReason,
Expand Down
136 changes: 46 additions & 90 deletions modules/core/src/passes/layers-pass.js
View file
Expand Up @@ -3,53 +3,37 @@ import Pass from './pass';
import {clear, setParameters, withParameters, cssToDeviceRatio} from '@luma.gl/core';

export default class LayersPass extends Pass {
render(params) {
render(props) {
const gl = this.gl;

return withParameters(gl, {framebuffer: params.outputBuffer}, () => this.drawLayers(params));
return withParameters(gl, {framebuffer: props.outputBuffer}, () => this.drawLayers(props));
}

// PRIVATE
// Draw a list of layers in a list of viewports
drawLayers({
layers,
viewports,
views,
onViewportActive,
deviceRect = null,
parameters = {},
pass = 'draw',
redrawReason = '',
clearCanvas = true,
effects,
effectProps
}) {
drawLayers(props) {
const {viewports, views, onViewportActive, clearCanvas = true} = props;

const gl = this.gl;
if (clearCanvas) {
this.clearCanvas(gl);
clearGLCanvas(gl);
}

const renderStats = [];

viewports.forEach((viewportOrDescriptor, i) => {
const viewport = this.getViewportFromDescriptor(viewportOrDescriptor);
// Get a viewport from a viewport descriptor (which can be a plain viewport)
const viewport = viewportOrDescriptor.viewport || viewportOrDescriptor;
const view = views && views[viewport.id];

// Update context to point to this viewport
onViewportActive(viewport);

props.viewport = viewport;
props.view = view;

// render this viewport
const stats = this.drawLayersInViewport(gl, {
layers,
viewport,
view,
deviceRect,
parameters,
pass,
redrawReason,
effects,
effectProps
});
const stats = this.drawLayersInViewport(gl, props);
renderStats.push(stats);
});
return renderStats;
Expand All @@ -60,19 +44,9 @@ export default class LayersPass extends Pass {
// intersect with the picking rect
drawLayersInViewport(
gl,
{
layers,
viewport,
view,
deviceRect = null,
parameters = {},
pass = 'draw',
redrawReason = '',
effects,
effectProps
}
{layers, layerFilter, viewport, view, parameters, pass = 'draw', effects, effectProps}
) {
const glViewport = this.getGLViewport(gl, {viewport});
const glViewport = getGLViewport(gl, {viewport});

if (view && view.props.clear) {
const clearOpts = view.props.clear === true ? {color: true, depth: true} : view.props.clear;
Expand All @@ -99,7 +73,7 @@ export default class LayersPass extends Pass {
// render layers in normal colors
layers.forEach((layer, layerIndex) => {
// Check if we should draw layer
const shouldDrawLayer = this.shouldDrawLayer(layer, viewport);
const shouldDrawLayer = this.shouldDrawLayer(layer, viewport, layerFilter);

// Calculate stats
if (shouldDrawLayer && layer.props.pickable) {
Expand All @@ -113,40 +87,22 @@ export default class LayersPass extends Pass {
if (shouldDrawLayer) {
renderStatus.visibleCount++;

this.drawLayerInViewport({
gl,
layer,
layerIndex,
glViewport,
parameters,
effects,
effectProps
const moduleParameters = this.getModuleParameters(layer, effects, effectProps);
const uniforms = Object.assign({}, layer.context.uniforms, {layerIndex});
const layerParameters = this.getLayerParameters(layer, layerIndex, glViewport, parameters);

layer.drawLayer({
moduleParameters,
uniforms,
parameters: layerParameters
});
}
});

return renderStatus;
}

drawLayerInViewport({gl, layer, layerIndex, glViewport, parameters, effects, effectProps}) {
const moduleParameters = this.getModuleParameters(layer, effects, effectProps);
const uniforms = Object.assign({}, layer.context.uniforms, {layerIndex});
const layerParameters = this.getLayerParameters(layer, layerIndex, glViewport, parameters);

layer.drawLayer({
moduleParameters,
uniforms,
parameters: layerParameters
});
}

// Get a viewport from a viewport descriptor (which can be a plain viewport)
getViewportFromDescriptor(viewportOrDescriptor) {
return viewportOrDescriptor.viewport ? viewportOrDescriptor.viewport : viewportOrDescriptor;
}

shouldDrawLayer(layer, viewport) {
const layerFilter = this.props.layerFilter;
shouldDrawLayer(layer, viewport, layerFilter) {
let shouldDrawLayer = !layer.isComposite && layer.props.visible;

if (shouldDrawLayer && layerFilter) {
Expand Down Expand Up @@ -175,29 +131,29 @@ export default class LayersPass extends Pass {
});
return layerParameters;
}
}

// Convert viewport top-left CSS coordinates to bottom up WebGL coordinates
function getGLViewport(gl, {viewport}) {
// TODO - dummy default for node
// Fallback to width/height when clientWidth/clientHeight are 0 or undefined.
const height = gl.canvas ? gl.canvas.clientHeight || gl.canvas.height : 100;
// Convert viewport top-left CSS coordinates to bottom up WebGL coordinates
getGLViewport(gl, {viewport}) {
// TODO - dummy default for node
// Fallback to width/height when clientWidth/clientHeight are 0 or undefined.
const height = gl.canvas ? gl.canvas.clientHeight || gl.canvas.height : 100;
// Convert viewport top-left CSS coordinates to bottom up WebGL coordinates
const dimensions = viewport;
const pixelRatio = cssToDeviceRatio(this.gl);
return [
dimensions.x * pixelRatio,
(height - dimensions.y - dimensions.height) * pixelRatio,
dimensions.width * pixelRatio,
dimensions.height * pixelRatio
];
}
const dimensions = viewport;
const pixelRatio = cssToDeviceRatio(gl);
return [
dimensions.x * pixelRatio,
(height - dimensions.y - dimensions.height) * pixelRatio,
dimensions.width * pixelRatio,
dimensions.height * pixelRatio
];
}

clearCanvas(gl) {
const width = gl.drawingBufferWidth;
const height = gl.drawingBufferHeight;
// clear depth and color buffers, restoring transparency
withParameters(gl, {viewport: [0, 0, width, height]}, () => {
gl.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);
});
}
function clearGLCanvas(gl) {
const width = gl.drawingBufferWidth;
const height = gl.drawingBufferHeight;
// clear depth and color buffers, restoring transparency
withParameters(gl, {viewport: [0, 0, width, height]}, () => {
gl.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);
});
}

0 comments on commit 7e54a90

Please sign in to comment.