Skip to content

Commit

Permalink
Merge 999e169 into ec86cc3
Browse files Browse the repository at this point in the history
  • Loading branch information
Pessimistress committed Oct 3, 2019
2 parents ec86cc3 + 999e169 commit fff9e62
Show file tree
Hide file tree
Showing 11 changed files with 154 additions and 113 deletions.
4 changes: 4 additions & 0 deletions docs/api-reference/deck.md
Expand Up @@ -203,6 +203,10 @@ gl context, will be autocreated if not supplied.

Additional options used when creating the WebGLContext. See [WebGL context attributes](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext).

##### `_framebuffer` (Object, optional)

(Experimental) Render to a custom frame buffer other than to screen.

##### `parameters` (Object, optional)

Expects an object with WebGL settings. This object will be passed to luma.gl's `setParameters` function to configure the WebGL context, e.g. to disable depth testing, change blending modes etc.
Expand Down
10 changes: 6 additions & 4 deletions modules/core/src/lib/deck-renderer.js
Expand Up @@ -33,6 +33,7 @@ export default class DeckRenderer {
}

renderLayers({
framebuffer,
layers,
viewports,
onViewportActive,
Expand All @@ -51,9 +52,10 @@ export default class DeckRenderer {
views,
effects
});
const outputBuffer = this.lastPostProcessEffect
? this.screenBuffer
: Framebuffer.getDefaultFramebuffer(this.gl);

const target =
framebuffer ||
(this.lastPostProcessEffect ? this.screenBuffer : Framebuffer.getDefaultFramebuffer(this.gl));

const renderStats = layerPass.render({
layers,
Expand All @@ -65,7 +67,7 @@ export default class DeckRenderer {
clearCanvas,
effects,
effectProps,
outputBuffer
target
});

this._postRender(effects);
Expand Down
4 changes: 3 additions & 1 deletion modules/core/src/lib/deck.js
Expand Up @@ -85,7 +85,7 @@ function getPropTypes(PropTypes) {
drawPickingColors: PropTypes.bool,

// Experimental props

_framebuffer: PropTypes.object,
// Forces a redraw every animation frame
_animate: PropTypes.bool
};
Expand All @@ -106,6 +106,7 @@ const defaultProps = {
controller: null, // Rely on external controller, e.g. react-map-gl
useDevicePixels: true,
touchAction: 'none',
_framebuffer: null,
_animate: false,

onWebGLInitialized: noop,
Expand Down Expand Up @@ -648,6 +649,7 @@ export default class Deck {
this.deckRenderer.renderLayers(
Object.assign(
{
framebuffer: this.props._framebuffer,
layers: this.layerManager.getLayers(),
viewports: this.viewManager.getViewports(),
onViewportActive: this.layerManager.activateViewport,
Expand Down
8 changes: 4 additions & 4 deletions modules/core/src/passes/layers-pass.js
Expand Up @@ -6,12 +6,12 @@ export default class LayersPass extends Pass {
render(props) {
const gl = this.gl;

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

// PRIVATE
// Draw a list of layers in a list of viewports
drawLayers(props) {
_drawLayers(props) {
const {viewports, views, onViewportActive, clearCanvas = true} = props;

const gl = this.gl;
Expand All @@ -33,7 +33,7 @@ export default class LayersPass extends Pass {
props.view = view;

// render this viewport
const stats = this.drawLayersInViewport(gl, props);
const stats = this._drawLayersInViewport(gl, props);
renderStats.push(stats);
});
return renderStats;
Expand All @@ -42,7 +42,7 @@ export default class LayersPass extends Pass {
// Draws a list of layers in one viewport
// TODO - when picking we could completely skip rendering viewports that dont
// intersect with the picking rect
drawLayersInViewport(
_drawLayersInViewport(
gl,
{layers, layerFilter, viewport, view, parameters, pass = 'draw', effects, effectProps}
) {
Expand Down
8 changes: 4 additions & 4 deletions modules/core/src/passes/pick-layers-pass.js
Expand Up @@ -4,7 +4,7 @@ import {withParameters, cssToDeviceRatio} from '@luma.gl/core';
export default class PickLayersPass extends LayersPass {
render(props) {
if (props.pickingFBO) {
this.drawPickingBuffer(props);
this._drawPickingBuffer(props);
} else {
super.render(props);
}
Expand All @@ -13,7 +13,7 @@ export default class PickLayersPass extends LayersPass {
// Private
// Draws list of layers and viewports into the picking buffer
// Note: does not sample the buffer, that has to be done by the caller
drawPickingBuffer({
_drawPickingBuffer({
layers,
layerFilter,
viewports,
Expand All @@ -35,7 +35,6 @@ export default class PickLayersPass extends LayersPass {
return withParameters(
gl,
{
framebuffer: pickingFBO,
scissorTest: true,
scissor: [x, y, width, height],
clearColor: [0, 0, 0, 0],
Expand All @@ -59,7 +58,8 @@ export default class PickLayersPass extends LayersPass {
parameters.blend = false;
}

this.drawLayers({
super.render({
target: pickingFBO,
layers,
layerFilter,
viewports,
Expand Down
2 changes: 1 addition & 1 deletion modules/core/src/passes/shadow-pass.js
Expand Up @@ -61,7 +61,7 @@ export default class ShadowPass extends LayersPass {
target.resize({width, height});
}

super.render(Object.assign(params, {outputBuffer: target}));
super.render(Object.assign(params, {target}));
}
);
}
Expand Down
1 change: 1 addition & 0 deletions test/apps/framebuffer/README.md
@@ -0,0 +1 @@
Test rendering to a frame buffer.
77 changes: 77 additions & 0 deletions test/apps/framebuffer/app.js
@@ -0,0 +1,77 @@
import {Deck} from '@deck.gl/core';
import {BitmapLayer, GeoJsonLayer} from '@deck.gl/layers';
import {Framebuffer, Texture2D} from '@luma.gl/core';
import GL from '@luma.gl/constants';

import sfZipcodes from '../../../examples/layer-browser/data/sf.zip.geo.json';

let framebuffer;

const deck = new Deck({
onWebGLInitialized: onInitialize,
onLoad,
initialViewState: {
longitude: -122.45,
latitude: 37.76,
zoom: 11,
bearing: 0,
pitch: 30
},
controller: true
});

function noop() {}

function onInitialize(gl) {
framebuffer = new Framebuffer(gl);
framebuffer.attach({
[GL.COLOR_ATTACHMENT0]: new Texture2D(gl, {
mipmaps: false,
parameters: {
[GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
[GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
[GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
[GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
}
})
});
}

function onLoad() {
framebuffer.resize();

deck.setProps({
layers: [
new GeoJsonLayer({
data: sfZipcodes,
opacity: 0.5,
extruded: true,
getFillColor: [255, 0, 0],
getElevation: d => Math.random() * 3000
})
],
_framebuffer: framebuffer,
onAfterRender
});
}

function onAfterRender() {
const texture = framebuffer.color;
framebuffer.attach({
[GL.COLOR_ATTACHMENT0]: null
});

deck.setProps({
layers: [
new BitmapLayer({
bounds: [-122.519, 37.7045, -122.355, 37.829],
image: texture
})
],
_framebuffer: null,
onAfterRender: noop
});
}

/* global document */
document.body.style.margin = '0px';
21 changes: 21 additions & 0 deletions test/apps/framebuffer/package.json
@@ -0,0 +1,21 @@
{
"name": "video",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start-local": "webpack-dev-server --env.local --progress --hot --open",
"start": "webpack-dev-server --progress --hot --open"
},
"dependencies": {
"deck.gl": "^7.3.0"
},
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^4.0.0-beta.5",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.1"
}
}
32 changes: 32 additions & 0 deletions test/apps/framebuffer/webpack.config.js
@@ -0,0 +1,32 @@
// NOTE: To use this example standalone (e.g. outside of deck.gl repo)
// delete the local development overrides at the bottom of this file
const HTMLWebpackPlugin = require('html-webpack-plugin');

const CONFIG = {
mode: 'development',

entry: {
app: './app.js'
},

output: {
library: 'App'
},

module: {
rules: [
{
// Transpile ES6 to ES5 with babel
// Remove if your app does not use JSX or you don't need to support old browsers
test: /\.js$/,
loader: 'babel-loader',
exclude: [/node_modules/]
}
]
},

plugins: [new HTMLWebpackPlugin()]
};

// This line enables bundling against src in this repo rather than installed module
module.exports = env => (env ? require('../webpack.config.local')(CONFIG)(env) : CONFIG);
100 changes: 1 addition & 99 deletions test/apps/webpack.config.local.js
@@ -1,99 +1 @@
// This file contains webpack configuration settings that allow
// examples to be built against the deck.gl source code in this repo instead
// of building against their installed version of deck.gl.
//
// This enables using the examples to debug the main deck.gl library source
// without publishing or npm linking, with conveniences such hot reloading etc.

// avoid destructuring for older Node version support
const resolve = require('path').resolve;
const webpack = require('webpack');

const LIB_DIR = resolve(__dirname, '../..');
const SRC_DIR = resolve(LIB_DIR, 'modules');

const ALIASES = require('ocular-dev-tools/config/ocular.config')({
root: resolve(__dirname, '../..')
}).aliases;

// Support for hot reloading changes to the deck.gl library:
function makeLocalDevConfig(EXAMPLE_DIR = LIB_DIR) {
return {
// TODO - Uncomment when all examples use webpack 4 for faster bundling
// mode: 'development',

// suppress warnings about bundle size
devServer: {
stats: {
warnings: false
}
},

devtool: 'source-map',

resolve: {
alias: Object.assign({}, ALIASES, {
// Use luma.gl specified by root package.json
'luma.gl': resolve(LIB_DIR, './node_modules/luma.gl'),
// Important: ensure shared dependencies come from the main node_modules dir
// Versions will be controlled by the deck.gl top level package.json
'math.gl': resolve(LIB_DIR, './node_modules/math.gl'),
'viewport-mercator-project': resolve(LIB_DIR, './node_modules/viewport-mercator-project'),
seer: resolve(LIB_DIR, './node_modules/seer'),
react: resolve(LIB_DIR, './node_modules/react')
})
},
module: {
rules: [
{
// Unfortunately, webpack doesn't import library sourcemaps on its own...
test: /\.js$/,
use: ['source-map-loader'],
enforce: 'pre'
},
{
// Compile source using babel. This is not necessary for src to run in the browser
// However class inheritance cannot happen between transpiled/non-transpiled code
// Which affects some examples
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['@babel/env']
},
include: [SRC_DIR]
}
]
},
// Optional: Enables reading mapbox token from environment variable
plugins: [new webpack.EnvironmentPlugin(['MapboxAccessToken'])]
};
}

function addLocalDevSettings(config, exampleDir) {
const LOCAL_DEV_CONFIG = makeLocalDevConfig(exampleDir);
config = Object.assign({}, LOCAL_DEV_CONFIG, config);
config.resolve = config.resolve || {};
config.resolve.alias = config.resolve.alias || {};
Object.assign(config.resolve.alias, LOCAL_DEV_CONFIG.resolve.alias);

config.module = config.module || {};
Object.assign(config.module, {
rules: (config.module.rules || []).concat(LOCAL_DEV_CONFIG.module.rules)
});
return config;
}

module.exports = (config, exampleDir) => env => {
// npm run start-local now transpiles the lib
if (env && env.local) {
config = addLocalDevSettings(config, exampleDir);
}

// npm run start-es6 does not transpile the lib
if (env && env.es6) {
config = addLocalDevSettings(config, exampleDir);
}

// console.warn(JSON.stringify(config, null, 2)); // uncomment to debug config
return config;
};
module.exports = require('../../examples/webpack.config.local');

0 comments on commit fff9e62

Please sign in to comment.