Skip to content

Commit

Permalink
Make shaders customizable. Scatterplot32 instanceRadius, fixes #238.
Browse files Browse the repository at this point in the history
  • Loading branch information
Ib Green committed Nov 30, 2016
1 parent 055f7ed commit 90cfec7
Show file tree
Hide file tree
Showing 19 changed files with 158 additions and 104 deletions.
4 changes: 1 addition & 3 deletions .babelrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
"presets": ["es2015", "stage-2", "react"],
"plugins": [
"static-fs",
"transform-class-properties",
"transform-decorators-legacy"
],
"compact": "false"
]
}
5 changes: 1 addition & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,13 @@
"gl-matrix": "^2.3.2",
"lodash.flattendeep": "^4.4.0",
"save-pixels": "^2.3.0",
"viewport-mercator-project": "3.0.0-beta3",
"webgl-obj-loader": "^0.1.1"
"viewport-mercator-project": "3.0.0-beta3"
},
"devDependencies": {
"babel-cli": "^6.3.15",
"babel-core": "^6.7.7",
"babel-eslint": "^6.0.0",
"babel-plugin-static-fs": "^1.1.0",
"babel-plugin-transform-class-properties": "^6.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
Expand All @@ -68,7 +66,6 @@
"luma.gl": "^2.10.0",
"marked": "^0.3.6",
"react": "^15.3.2",
"react-addons-pure-render-mixin": "^15.3.2",
"react-addons-test-utils": "^15.0.2",
"react-dom": "^15.3.2",
"react-map-gl": "^1.7.2",
Expand Down
14 changes: 9 additions & 5 deletions src/layers/core/arc-layer/arc-layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@

import {Layer, assembleShaders} from '../../..';
import {GL, Model, Geometry} from 'luma.gl';
import {join} from 'path';
import {readFileSync} from 'fs';
import {join} from 'path';

const DEFAULT_COLOR = [0, 0, 255, 255];

Expand Down Expand Up @@ -90,6 +90,13 @@ export default class ArcLayer extends Layer {
gl.lineWidth(1.0);
}

getShaders() {
return {
vs: readFileSync(join(__dirname, './arc-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './arc-layer-fragment.glsl'))
};
}

_createModel(gl) {
let positions = [];
const NUM_SEGMENTS = 50;
Expand All @@ -99,10 +106,7 @@ export default class ArcLayer extends Layer {

return new Model({
gl,
...assembleShaders(gl, {
vs: readFileSync(join(__dirname, './arc-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './arc-layer-fragment.glsl'))
}),
...assembleShaders(gl, this.getShaders()),
geometry: new Geometry({
drawMode: GL.LINE_STRIP,
positions: new Float32Array(positions)
Expand Down
14 changes: 9 additions & 5 deletions src/layers/core/choropleth-layer/choropleth-layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ import {Layer, assembleShaders} from '../../..';
import {GL, Model, Geometry} from 'luma.gl';
import flattenDeep from 'lodash.flattendeep';
import normalize from 'geojson-normalize';
import earcut from 'earcut';
import {readFileSync} from 'fs';
import {join} from 'path';
import earcut from 'earcut';

const DEFAULT_COLOR = [0, 0, 255, 255];

Expand Down Expand Up @@ -112,14 +112,18 @@ export default class ChoroplethLayer extends Layer {
info.object = feature;
}

getShaders() {
return {
vs: readFileSync(join(__dirname, './choropleth-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './choropleth-layer-fragment.glsl'))
};
}

getModel(gl) {
return new Model({
gl,
id: this.props.id,
...assembleShaders(gl, {
vs: readFileSync(join(__dirname, './choropleth-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './choropleth-layer-fragment.glsl'))
}),
...assembleShaders(gl, this.getShaders()),
geometry: new Geometry({
drawMode: this.props.drawContour ? GL.LINES : GL.TRIANGLES
}),
Expand Down
12 changes: 8 additions & 4 deletions src/layers/core/line-layer/line-layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,16 +83,20 @@ export default class LineLayer extends Layer {
gl.lineWidth(1.0);
}

getShaders() {
return {
vs: readFileSync(join(__dirname, './line-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './line-layer-fragment.glsl'))
};
}

createModel(gl) {
const positions = [0, 0, 0, 1, 1, 1];

return new Model({
gl,
id: this.props.id,
...assembleShaders(gl, {
vs: readFileSync(join(__dirname, './line-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './line-layer-fragment.glsl'))
}),
...assembleShaders(gl, this.getShaders()),
geometry: new Geometry({
drawMode: GL.LINE_STRIP,
positions: new Float32Array(positions)
Expand Down
9 changes: 5 additions & 4 deletions src/layers/core/scatterplot-layer/scatterplot-layer-vertex.glsl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@

attribute vec3 positions;

attribute vec4 instancePositions;
attribute vec3 instancePositions;
attribute float instanceRadius;
attribute vec4 instanceColors;
attribute vec3 instancePickingColors;

Expand All @@ -35,16 +36,16 @@ uniform float renderPickingBuffer;
varying vec4 vColor;

void main(void) {
vec3 center = project_position(instancePositions.xyz);
vec3 center = project_position(instancePositions);
float radiusPixels = clamp(
project_scale(radius * instancePositions.w),
project_scale(radius * instanceRadius),
radiusMinPixels, radiusMaxPixels
);
vec3 vertex = positions * radiusPixels;
gl_Position = project_to_clipspace(vec4(center + vertex, 1.0));

vec4 color = vec4(instanceColors.rgb, instanceColors.a * opacity) / 255.;
vec4 pickingColor = vec4(instancePickingColors / 255., 1.);

vColor = mix(
color,
pickingColor,
Expand Down
43 changes: 27 additions & 16 deletions src/layers/core/scatterplot-layer/scatterplot-layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,8 @@ export default class ScatterplotLayer extends Layer {

const {attributeManager} = this.state;
attributeManager.addInstanced({
instancePositions: {size: 4, update: this.calculateInstancePositions},
calculateInstancePositions: {size: 3, update: this.calculateInstancePositions},
instanceRadius: {size: 1, update: this.calculateInstanceRadius},
instanceColors: {
type: GL.UNSIGNED_BYTE,
size: 4,
Expand Down Expand Up @@ -109,27 +110,28 @@ export default class ScatterplotLayer extends Layer {
gl.lineWidth(1.0);
}

getShaders(id) {
return {
vs: readFileSync(join(__dirname, './scatterplot-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './scatterplot-layer-fragment.glsl'))
};
}

_getModel(gl) {
const NUM_SEGMENTS = 16;
const PI2 = Math.PI * 2;

let positions = [];
const positions = [];
for (let i = 0; i < NUM_SEGMENTS; i++) {
positions = [
...positions,
Math.cos(PI2 * i / NUM_SEGMENTS),
Math.sin(PI2 * i / NUM_SEGMENTS),
positions.push(
Math.cos(Math.PI * 2 * i / NUM_SEGMENTS),
Math.sin(Math.PI * 2 * i / NUM_SEGMENTS),
0
];
);
}

return new Model({
gl,
id: 'scatterplot',
...assembleShaders(gl, {
vs: readFileSync(join(__dirname, './scatterplot-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './scatterplot-layer-fragment.glsl'))
}),
...assembleShaders(gl, this.getShaders()),
geometry: new Geometry({
drawMode: GL.TRIANGLE_FAN,
positions: new Float32Array(positions)
Expand All @@ -139,16 +141,25 @@ export default class ScatterplotLayer extends Layer {
}

calculateInstancePositions(attribute) {
const {data, getPosition, getRadius} = this.props;
const {data, getPosition} = this.props;
const {value, size} = attribute;
let i = 0;
for (const point of data) {
const position = getPosition(point);
const radius = getRadius(point) || 1;
value[i + 0] = position[0] || 0;
value[i + 1] = position[1] || 0;
value[i + 2] = position[2] || 0;
value[i + 3] = radius || 1;
i += size;
}
}

calculateInstanceRadius(attribute) {
const {data, getRadius} = this.props;
const {value, size} = attribute;
let i = 0;
for (const point of data) {
const radius = getRadius(point) || 1;
value[i + 0] = radius || 1;
i += size;
}
}
Expand Down
14 changes: 9 additions & 5 deletions src/layers/core/screen-grid-layer/screen-grid-layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@

import {Layer, assembleShaders} from '../../..';
import {GL, Model, Geometry} from 'luma.gl';
import {join} from 'path';
import {readFileSync} from 'fs';
import {join} from 'path';

export default class ScreenGridLayer extends Layer {

Expand Down Expand Up @@ -77,14 +77,18 @@ export default class ScreenGridLayer extends Layer {
model.render({...uniforms, minColor, maxColor, cellScale, maxCount});
}

getShaders() {
return {
vs: readFileSync(join(__dirname, './screen-grid-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './screen-grid-layer-fragment.glsl'))
};
}

getModel(gl) {
return new Model({
gl,
id: this.props.id,
...assembleShaders(gl, {
vs: readFileSync(join(__dirname, './screen-grid-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './screen-grid-layer-fragment.glsl'))
}),
...assembleShaders(gl, this.getShaders()),
geometry: new Geometry({
drawMode: GL.TRIANGLE_FAN,
vertices: new Float32Array([0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0])
Expand Down
30 changes: 20 additions & 10 deletions src/layers/fp64/arc-layer/arc-layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
import {Layer, assembleShaders} from '../../..';
import {fp64ify} from '../../../lib/utils/fp64';
import {GL, Model, Geometry} from 'luma.gl';
import {join} from 'path';
import {readFileSync} from 'fs';
import {join} from 'path';

const DEFAULT_COLOR = [0, 0, 255, 255];

Expand Down Expand Up @@ -64,6 +64,14 @@ export default class ArcLayer64 extends Layer {
const {attributeManager} = this.state;

attributeManager.addInstanced({
instanceSourcePositionsFP64: {
size: 4,
update: this.calculateInstanceSourcePositions
},
instanceTargetPositionsFP64: {
size: 4,
update: this.calculateInstanceTargetPositions
},
instanceSourceColors: {
size: 4,
type: GL.UNSIGNED_BYTE,
Expand All @@ -73,9 +81,7 @@ export default class ArcLayer64 extends Layer {
size: 4,
type: GL.UNSIGNED_BYTE,
update: this.calculateInstanceTargetColors
},
instanceSourcePositionsFP64: {size: 4, update: this.calculateInstanceSourcePositions},
instanceTargetPositionsFP64: {size: 4, update: this.calculateInstanceTargetPositions}
}
});

this.setState({model: this.createModel(gl)});
Expand All @@ -93,6 +99,15 @@ export default class ArcLayer64 extends Layer {
gl.lineWidth(1.0);
}

getShaders() {
return {
vs: readFileSync(join(__dirname, './arc-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './arc-layer-fragment.glsl')),
fp64: true,
project64: true
};
}

createModel(gl) {
let positions = [];
const NUM_SEGMENTS = 50;
Expand All @@ -102,12 +117,7 @@ export default class ArcLayer64 extends Layer {
return new Model({
gl,
id: this.props.id,
...assembleShaders(gl, {
vs: readFileSync(join(__dirname, './arc-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './arc-layer-fragment.glsl')),
fp64: true,
project64: true
}),
...assembleShaders(gl, this.getShaders()),
geometry: new Geometry({
drawMode: GL.LINE_STRIP,
positions: new Float32Array(positions)
Expand Down
18 changes: 11 additions & 7 deletions src/layers/fp64/choropleth-layer/choropleth-layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ import {fp64ify} from '../../../lib/utils/fp64';
import {GL, Model, Geometry} from 'luma.gl';
import flattenDeep from 'lodash.flattendeep';
import normalize from 'geojson-normalize';
import earcut from 'earcut';
import {readFileSync} from 'fs';
import {join} from 'path';
import earcut from 'earcut';

const DEFAULT_COLOR = [0, 0, 255, 255];

Expand Down Expand Up @@ -110,16 +110,20 @@ export default class ChoroplethLayer64 extends Layer {
info.object = feature;
}

getShaders() {
return {
vs: readFileSync(join(__dirname, './choropleth-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './choropleth-layer-fragment.glsl')),
fp64: true,
project64: true
};
}

getModel(gl) {
return new Model({
gl,
id: this.props.id,
...assembleShaders(gl, {
vs: readFileSync(join(__dirname, './choropleth-layer-vertex.glsl')),
fs: readFileSync(join(__dirname, './choropleth-layer-fragment.glsl')),
fp64: true,
project64: true
}),
...assembleShaders(gl, this.getShaders()),
geometry: new Geometry({
drawMode: this.props.drawContour ? GL.LINES : GL.TRIANGLES
}),
Expand Down
Loading

0 comments on commit 90cfec7

Please sign in to comment.