Skip to content

Commit 31204d8

Browse files
apercuibgreen
apercu
authored and
ibgreen
committed
Replace glslify with brfs (visgl#236)
* Replace glslify with brfs Improve DX by enabling hot reload of vertex and fragments shaders. Ease usage outside of Browserify. Related to visgl#231. * Merge imports & order, unify enhanced choropleth
1 parent fd946ee commit 31204d8

38 files changed

Lines changed: 237 additions & 189 deletions

‎.babelrc‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
{
22
"presets": ["es2015", "stage-2", "react"],
33
"plugins": [
4-
"glslify",
5-
"static-fs",
4+
"static-fs",
65
"transform-class-properties",
76
"transform-decorators-legacy"
87
],

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@ TODO
1313
_docs
1414
examples/winds/data/*.html
1515
node_modules
16-
npm-debug.log
16+
*.log
1717
.exit_code

‎demo/src/javascripts/components/demos/trips-layer/trips-layer.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Layer, assembleShaders} from '../../../../../../index';
22
import {Model, Program, Geometry, glGetDebugInfo} from 'luma.gl';
3-
4-
const glslify = require('glslify');
3+
import {readFileSync} from 'fs';
4+
import {join} from 'path';
55

66
export default class TripsLayer extends Layer {
77
/**
@@ -48,8 +48,8 @@ export default class TripsLayer extends Layer {
4848
getModel(gl) {
4949
return new Model({
5050
program: new Program(gl, assembleShaders(gl, {
51-
vs: glslify('./trips-layer-vertex.glsl'),
52-
fs: glslify('./trips-layer-fragment.glsl')
51+
vs: readFileSync(join(__dirname, './trips-layer-vertex.glsl')),
52+
fs: readFileSync(join(__dirname, './trips-layer-fragment.glsl'))
5353
})),
5454
geometry: new Geometry({
5555
id: this.props.id,

‎demo/src/javascripts/constants/mapbox-token‎

Whitespace-only changes.

‎demo/src/static/code-markdown/trips.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ trips-layer.js:
6868
```
6969
import {Layer, assembleShaders} from 'deck.gl';
7070
import {Model, Program, Geometry, glGetDebugInfo} from 'luma.gl';
71-
72-
const glslify = require('glslify');
71+
import {readFileSync} from 'fs';
72+
import {join} from 'path';
7373
7474
export default class TripsLayer extends Layer {
7575
/**
@@ -116,8 +116,8 @@ export default class TripsLayer extends Layer {
116116
getModel(gl) {
117117
return new Model({
118118
program: new Program(gl, assembleShaders(gl, {
119-
vs: glslify('./trips-layer-vertex.glsl'),
120-
fs: glslify('./trips-layer-fragment.glsl')
119+
vs: readFileSync(join(__dirname, './trips-layer-vertex.glsl')),
120+
fs: readFileSync(join(__dirname, './trips-layer-fragment.glsl'))
121121
})),
122122
geometry: new Geometry({
123123
id: this.props.id,
@@ -127,11 +127,14 @@ export default class TripsLayer extends Layer {
127127
isIndexed: true,
128128
onBeforeRender: () => {
129129
gl.enable(gl.BLEND);
130+
gl.enable(gl.POLYGON_OFFSET_FILL);
131+
gl.polygonOffset(2.0, 1.0);
130132
gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
131133
gl.blendEquation(gl.FUNC_ADD);
132134
},
133135
onAfterRender: () => {
134136
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
137+
gl.disable(gl.POLYGON_OFFSET_FILL);
135138
}
136139
});
137140
}

‎dist-demo/code-markdown/trips.md‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,10 @@ export default class HeroDemo extends Component {
6666
trips-layer.js:
6767

6868
```
69-
import {Layer, assembleShaders} from 'deck.gl';
7069
import {Model, Program, Geometry, glGetDebugInfo} from 'luma.gl';
71-
72-
const glslify = require('glslify');
70+
import {Layer, assembleShaders} from 'deck.gl';
71+
import {readFileSync} from 'fs';
72+
import {join} from 'path';
7373
7474
export default class TripsLayer extends Layer {
7575
/**
@@ -116,8 +116,8 @@ export default class TripsLayer extends Layer {
116116
getModel(gl) {
117117
return new Model({
118118
program: new Program(gl, assembleShaders(gl, {
119-
vs: glslify('./trips-layer-vertex.glsl'),
120-
fs: glslify('./trips-layer-fragment.glsl')
119+
vs: readFileSync(join(__dirname, './trips-layer-vertex.glsl')),
120+
fs: readFileSync(join(__dirname, './trips-layer-fragment.glsl'))
121121
})),
122122
geometry: new Geometry({
123123
id: this.props.id,
@@ -127,11 +127,14 @@ export default class TripsLayer extends Layer {
127127
isIndexed: true,
128128
onBeforeRender: () => {
129129
gl.enable(gl.BLEND);
130+
gl.enable(gl.POLYGON_OFFSET_FILL);
131+
gl.polygonOffset(2.0, 1.0);
130132
gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
131133
gl.blendEquation(gl.FUNC_ADD);
132134
},
133135
onAfterRender: () => {
134136
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
137+
gl.disable(gl.POLYGON_OFFSET_FILL);
135138
}
136139
});
137140
}

‎dist-demo/docs/using-with-react.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,15 +111,17 @@ Arguments:
111111
- `info` - the `info` object of the topmost
112112
- `pickedInfos` - an array of info objects for all visible layers that
113113
matched the picked coordinate, in top to bottom order.
114+
- `event` - the original MouseEvent object
114115

115116
##### `onLayerClick` (Function, optional)
116117

117-
Callback - called when the mouse moves over the layers.
118+
Callback - called when clicking on the layer.
118119

119120
Arguments:
120121
- `info` - the `info` object of the topmost
121122
- `pickedInfos` - an array of info objects for all visible layers that
122123
matched the picked coordinate, in top to bottom order.
124+
- `event` - the original MouseEvent object
123125

124126
## Remarks
125127

@@ -130,4 +132,3 @@ matched the picked coordinate, in top to bottom order.
130132
documentation of each layer.
131133
* Picking happens in top-to-bottom order (reverse of rendering), i.e.
132134
deck.gl traverses the layer list backwards during picking.
133-

‎package.json‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
"geojson-normalize": "0.0.1",
3232
"get-pixels": "^3.3.0",
3333
"gl-matrix": "^2.3.2",
34-
"glslify": "^6.0.0",
3534
"lodash.flattendeep": "^4.4.0",
3635
"save-pixels": "^2.3.0",
3736
"viewport-mercator-project": "3.0.0-beta3",
@@ -41,7 +40,6 @@
4140
"babel-cli": "^6.3.15",
4241
"babel-core": "^6.7.7",
4342
"babel-eslint": "^6.0.0",
44-
"babel-plugin-glslify": "^2.0.0",
4543
"babel-plugin-static-fs": "^1.1.0",
4644
"babel-plugin-transform-class-properties": "^6.18.0",
4745
"babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -98,15 +96,15 @@
9896
"build-dist": "npm run build-clean && npm run build-src && npm run build-shaderlib",
9997
"build-src": "babel src -d dist --source-maps inline --copy-files",
10098
"build-shaderlib": "babel shaderlib -d dist/shaderlib --source-maps inline --copy-files",
101-
"build-script": "browserify src/bundle.js -t babelify -t glslify | uglifyjs > dist/deckgl.min.js",
99+
"build-script": "browserify src/bundle.js -t babelify -t brfs-babel | uglifyjs > dist/deckgl.min.js",
102100
"build-watch": "npm run build-clean && npm run build-src-watch && npm run build-shaderlib-watch",
103101
"build-src-watch": "babel src -d dist --source-maps inline --copy-files --watch &",
104102
"build-shaderlib-watch": "babel shaderlib -d dist/shaderlib --source-maps inline --copy-files --watch &",
105-
"demo-start": "npm run demo-build-copy && budo demo/src/javascripts/main.js:main.min.js --dir dist-demo/ --open -- -t babelify -t sassify -t glslify",
103+
"demo-start": "npm run demo-build-copy && budo demo/src/javascripts/main.js:main.min.js --dir dist-demo/ --open -- -t babelify -t sassify -t brfs-babel",
106104
"demo-build": "npm run demo-build-clean && npm run demo-build-copy && npm run demo-build-script",
107105
"demo-build-clean": "rm -fr dist-demo && mkdir -p dist-demo",
108106
"demo-build-copy": " mkdir -p dist-demo/docs && cp -R demo/src/static/* dist-demo/ && cp -R docs dist-demo",
109-
"demo-build-script": "NODE_ENV=production browserify demo/src/javascripts/main.js -o -t babelify -t sassify -t glslify | uglifyjs > dist-demo/main.min.js",
107+
"demo-build-script": "NODE_ENV=production browserify demo/src/javascripts/main.js -o -t babelify -t sassify -t brfs-babel | uglifyjs > dist-demo/main.min.js",
110108
"demo-gh-pages": "git subtree push --prefix dist-demo origin gh-pages",
111109
"demo-gh-pages-force": "git push origin `git subtree split --prefix dist-demo master`:gh-pages --force",
112110
"demo-publish": "npm run build && npm run demo-build && git add dist-demo -f && git commit -m 'UPDATE DOCS' --no-verify && npm run demo-gh-pages",
@@ -118,10 +116,10 @@
118116
"test-fast": "npm run lint && npm run test-headless",
119117
"test-headless": "node dist/test/headless.js",
120118
"test-headless-src": "babel-node --only=deck.gl/test,deck.gl/src,deck.gl/shaderlib src/test/headless.js",
121-
"test-browser": "budo src/test/browser.js:build/test-bundle.js --dir test --live --open --port 3001 --watch-glob '**/*.{html,css,scss,js,glsl}' -- -t babelify -t glslify",
119+
"test-browser": "budo src/test/browser.js:build/test-bundle.js --dir test --live --open --port 3001 --watch-glob '**/*.{html,css,scss,js,glsl}' -- -t babelify -t brfs-babel",
122120
"test-electron": "browserify dist/test/electron.js | testron | faucet",
123-
"test-shader": "npm run build-dist && budo src/test/shader.js:build/test-bundle.js --dir test --live --open --port 3001 --watch-glob '**/*.{html,css,scss,js,glsl}' -- -t babelify -t glslify",
124-
"profile-disc": "browserify src/bundle.js --full-paths -t babelify -t glslify | uglifyjs | discify --open",
121+
"test-shader": "npm run build-dist && budo src/test/shader.js:build/test-bundle.js --dir test --live --open --port 3001 --watch-glob '**/*.{html,css,scss,js,glsl}' -- -t babelify -t brfs-babel",
122+
"profile-disc": "browserify src/bundle.js --full-paths -t babelify -t brfs-babel | uglifyjs | discify --open",
125123
"start": "npm run build-watch && budo example/main.js:example/bundle.js --live --open --port 3000 --css example/main.css --title 'deck.gl' --watch-glob '**/*.{html,css,js,glsl}' -- -t brfs-babel -t babelify -t envify"
126124
}
127125
}

‎src/layers/core/arc-layer/arc-layer-fragment.glsl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
1818
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
1919
// THE SOFTWARE.
20+
2021
#define SHADER_NAME arc-layer-fragment-shader
2122

2223
#ifdef GL_ES

‎src/layers/core/arc-layer/arc-layer-vertex.glsl‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,8 @@
1717
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
1818
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
1919
// THE SOFTWARE.
20-
#define SHADER_NAME arc-layer-vertex-shader
2120

22-
// #pragma glslify: preproject = require(../../../../shaderlib/preproject)
23-
// #pragma glslify: scale = require(../../../../shaderlib/scale)
24-
// #pragma glslify: project = require(../../../../shaderlib/project)
21+
#define SHADER_NAME arc-layer-vertex-shader
2522

2623
const float N = 49.0;
2724

0 commit comments

Comments
 (0)