diff --git a/docs/api-reference/test-utils/snapshot-test-runner.md b/docs/api-reference/test-utils/snapshot-test-runner.md index fb4466ea419..84f382a43e5 100644 --- a/docs/api-reference/test-utils/snapshot-test-runner.md +++ b/docs/api-reference/test-utils/snapshot-test-runner.md @@ -126,6 +126,7 @@ The test renderer and each test case may choose to override the default image di * `tolerance` * `threshold` * `includeAA` +* `includeEmpty` * `createDiffImage` * `saveOnFail` * `saveAs` diff --git a/modules/aggregation-layers/src/utils/aggregation-operation-utils.js b/modules/aggregation-layers/src/utils/aggregation-operation-utils.js index 4d227629cbd..9e1d4ea2df3 100644 --- a/modules/aggregation-layers/src/utils/aggregation-operation-utils.js +++ b/modules/aggregation-layers/src/utils/aggregation-operation-utils.js @@ -63,7 +63,7 @@ export function getMin(pts, accessor) { // Function to convert from aggregation/accessor props (like colorAggregation and getColorWeight) to getValue prop (like getColorValue) export function getValueFunc(aggregation, accessor) { - const op = AGGREGATION_OPERATION[aggregation.toUpperCase()] || AGGREGATION_OPERATION.SUM; + const op = AGGREGATION_OPERATION[aggregation] || AGGREGATION_OPERATION.SUM; switch (op) { case AGGREGATION_OPERATION.MIN: return pts => getMin(pts, accessor); diff --git a/modules/core/package.json b/modules/core/package.json index b0a3f2b7c61..3fe9f2bf4c2 100644 --- a/modules/core/package.json +++ b/modules/core/package.json @@ -39,6 +39,6 @@ "gl-matrix": "^3.0.0", "math.gl": "^3.1.2", "mjolnir.js": "^2.3.0", - "probe.gl": "^3.2.0" + "probe.gl": "^3.2.1" } } diff --git a/modules/test-utils/package.json b/modules/test-utils/package.json index ac6a0bfe4c6..cd314f52213 100644 --- a/modules/test-utils/package.json +++ b/modules/test-utils/package.json @@ -27,7 +27,7 @@ "@deck.gl/core": "^8.0.0", "@luma.gl/test-utils": "^8.0.1", "@luma.gl/webgl": "^8.0.1", - "@probe.gl/test-utils": "^3.2.0" + "@probe.gl/test-utils": "^3.2.1" }, "scripts": {} } diff --git a/package.json b/package.json index 45b2249583f..5337d8a401a 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,8 @@ "@loaders.gl/polyfills": "^2.0.2", "@luma.gl/engine": "^8.0.1", "@luma.gl/test-utils": "^8.0.1", - "@probe.gl/bench": "^3.2.0", - "@probe.gl/test-utils": "^3.2.0", + "@probe.gl/bench": "^3.2.1", + "@probe.gl/test-utils": "^3.2.1", "babel-loader": "^8.0.0", "babel-plugin-inline-webgl-constants": "^1.0.2", "babel-plugin-remove-glsl-comments": "^0.1.0", diff --git a/scripts/print-golden-image.js b/scripts/print-golden-image.js new file mode 100644 index 00000000000..25e71088e2f --- /dev/null +++ b/scripts/print-golden-image.js @@ -0,0 +1,38 @@ +/* + Script to retrieve failed screenshot from CI + - In render test, enable `saveOnFail` + - node scripts/print-golden-image.js + - Copy the printed base64 string + - Use `restore` function in this file to convert string back to image + */ +const {PNG} = require('pngjs'); +const fs = require('fs'); +const path = require('path'); + +const INPUT_FILE = path.resolve('./test/render/golden-images', process.argv[2]); +const OUTPUT_FILE = 'out.png'; + +const SOURCE_X = Number(process.argv[3]) || 0; +const SOURCE_Y = Number(process.argv[4]) || 0; +const WIDTH = Number(process.argv[5]) || 800; +const HEIGHT = Number(process.argv[6]) || 450; + +fs.createReadStream(INPUT_FILE) + .pipe(new PNG()) + .on('parsed', function() { + const dst = new PNG({width: WIDTH, height: HEIGHT}); + // copy to destination + this.bitblt(dst, SOURCE_X, SOURCE_Y, WIDTH, HEIGHT, 0, 0); + + dst.pack().pipe(fs.createWriteStream('out.png')) + .on('close', function() { + const buffer = fs.readFileSync('out.png'); + console.log(buffer.toString('base64')); + }); + }); + +// Call to convert base64 back to file +function restore(base64, width, height) { + const buffer = Buffer.from(base64, 'base64'); + fs.writeFileSync('out.png', buffer); +} diff --git a/test/render/icon-atlas.png b/test/data/icon-atlas.png similarity index 100% rename from test/render/icon-atlas.png rename to test/data/icon-atlas.png diff --git a/test/render/icon-marker.png b/test/data/icon-marker.png similarity index 100% rename from test/render/icon-marker.png rename to test/data/icon-marker.png diff --git a/test/render/icon-warning.png b/test/data/icon-warning.png similarity index 100% rename from test/render/icon-warning.png rename to test/data/icon-warning.png diff --git a/test/data/s2-sf.json b/test/data/s2-sf.json deleted file mode 100644 index 5df5ab8f49c..00000000000 --- a/test/data/s2-sf.json +++ /dev/null @@ -1,523 +0,0 @@ -[{ - "token": "80858004", - "value": 0.5979242952642347 -}, { - "token": "8085800c", - "value": 0.5446256069712141 -}, { - "token": "80858014", - "value": 0.1187171597109975 -}, { - "token": "8085801c", - "value": 0.2859146314037557 -}, { - "token": "80858024", - "value": 0.19549012367504126 -}, { - "token": "80858034", - "value": 0.3373452974230604 -}, { - "token": "8085803c", - "value": 0.9218176408795662 -}, { - "token": "80858044", - "value": 0.23470692356446143 -}, { - "token": "8085804c", - "value": 0.1580509670379684 -}, { - "token": "80858054", - "value": 0.15992745628743954 -}, { - "token": "8085805c", - "value": 0.08396995862593659 -}, { - "token": "80858064", - "value": 0.8528624994099137 -}, { - "token": "8085806c", - "value": 0.644205644051216 -}, { - "token": "80858074", - "value": 0.7327824575390218 -}, { - "token": "8085807c", - "value": 0.03206116368501655 -}, { - "token": "80858084", - "value": 0.13521469550102694 -}, { - "token": "8085808c", - "value": 0.8535530864046055 -}, { - "token": "80858094", - "value": 0.3021071656292911 -}, { - "token": "8085809c", - "value": 0.3145135386133331 -}, { - "token": "808580a4", - "value": 0.22221972654594113 -}, { - "token": "808580ac", - "value": 0.2089824755550702 -}, { - "token": "808580b4", - "value": 0.21568217472680673 -}, { - "token": "808580bc", - "value": 0.9930882437101516 -}, { - "token": "808580c4", - "value": 0.6771468010341937 -}, { - "token": "808580cc", - "value": 0.06254546149649509 -}, { - "token": "808580d4", - "value": 0.0898475989412637 -}, { - "token": "808580dc", - "value": 0.49162678093756096 -}, { - "token": "808580e4", - "value": 0.051892796689529286 -}, { - "token": "808580ec", - "value": 0.7656423773539729 -}, { - "token": "808580f4", - "value": 0.4176961681646778 -}, { - "token": "808580fc", - "value": 0.4764575762690464 -}, { - "token": "80858104", - "value": 0.875560663474253 -}, { - "token": "8085811c", - "value": 0.3209959013941124 -}, { - "token": "80858124", - "value": 0.9676094014498655 -}, { - "token": "8085812c", - "value": 0.8003506574355166 -}, { - "token": "80858134", - "value": 0.034891461780171884 -}, { - "token": "80858644", - "value": 0.8488347081373842 -}, { - "token": "8085864c", - "value": 0.5411597765580489 -}, { - "token": "80858654", - "value": 0.3020505133285931 -}, { - "token": "8085865c", - "value": 0.44053851810796885 -}, { - "token": "80858664", - "value": 0.018102931578807713 -}, { - "token": "8085866c", - "value": 0.4708610883744251 -}, { - "token": "80858674", - "value": 0.8445041920035186 -}, { - "token": "8085867c", - "value": 0.7392562454515113 -}, { - "token": "8085868c", - "value": 0.39347130067527725 -}, { - "token": "80858694", - "value": 0.44498309263850944 -}, { - "token": "808586bc", - "value": 0.7950865956130442 -}, { - "token": "808586c4", - "value": 0.7385232599770808 -}, { - "token": "808586cc", - "value": 0.018430696365115518 -}, { - "token": "808586d4", - "value": 0.6976876914703944 -}, { - "token": "808586dc", - "value": 0.25548321522154827 -}, { - "token": "808586e4", - "value": 0.41907812568703373 -}, { - "token": "808586ec", - "value": 0.7290899222794696 -}, { - "token": "808586f4", - "value": 0.4876522132550285 -}, { - "token": "808586fc", - "value": 0.9791814942123487 -}, { - "token": "80858704", - "value": 0.1564051237695645 -}, { - "token": "8085870c", - "value": 0.744495038306515 -}, { - "token": "80858714", - "value": 0.5636255749919985 -}, { - "token": "8085871c", - "value": 0.7177669940621756 -}, { - "token": "80858724", - "value": 0.935541364441353 -}, { - "token": "8085872c", - "value": 0.23813259699989464 -}, { - "token": "80858734", - "value": 0.20646398267504473 -}, { - "token": "8085873c", - "value": 0.2302231506207013 -}, { - "token": "80858744", - "value": 0.8146528937322526 -}, { - "token": "8085874c", - "value": 0.16250640847801878 -}, { - "token": "80858754", - "value": 0.8559251431793231 -}, { - "token": "8085875c", - "value": 0.5518084918736605 -}, { - "token": "80858764", - "value": 0.3724154636273309 -}, { - "token": "8085876c", - "value": 0.012832647697721411 -}, { - "token": "80858774", - "value": 0.5610069108638975 -}, { - "token": "8085877c", - "value": 0.4776581643572013 -}, { - "token": "80858784", - "value": 0.12728544885717574 -}, { - "token": "8085878c", - "value": 0.47893591531516466 -}, { - "token": "80858794", - "value": 0.3063337875935812 -}, { - "token": "8085879c", - "value": 0.9073800330927748 -}, { - "token": "808587a4", - "value": 0.5379301824132303 -}, { - "token": "808587ac", - "value": 0.011113123736386621 -}, { - "token": "808587b4", - "value": 0.33081342331714514 -}, { - "token": "808587bc", - "value": 0.16191641631003306 -}, { - "token": "808f78ac", - "value": 0.5216683954302226 -}, { - "token": "808f78b4", - "value": 0.5285279357501274 -}, { - "token": "808f7c24", - "value": 0.24964281774378816 -}, { - "token": "808f7c2c", - "value": 0.5328015885099198 -}, { - "token": "808f7c34", - "value": 0.5819767316967777 -}, { - "token": "808f7c3c", - "value": 0.5896441351697632 -}, { - "token": "808f7c44", - "value": 0.5765363622666126 -}, { - "token": "808f7c4c", - "value": 0.8149459687907068 -}, { - "token": "808f7c54", - "value": 0.12107787886389243 -}, { - "token": "808f7cfc", - "value": 0.8526502486482175 -}, { - "token": "808f7d04", - "value": 0.28623779830815255 -}, { - "token": "808f7d0c", - "value": 0.10419603053055027 -}, { - "token": "808f7d14", - "value": 0.2520231652562299 -}, { - "token": "808f7d1c", - "value": 0.8877852826515231 -}, { - "token": "808f7d64", - "value": 0.2516990408971258 -}, { - "token": "808f7d6c", - "value": 0.7886336898433268 -}, { - "token": "808f7d74", - "value": 0.3308357482421824 -}, { - "token": "808f7d7c", - "value": 0.9954698798360961 -}, { - "token": "808f7d84", - "value": 0.28199844123382434 -}, { - "token": "808f7d8c", - "value": 0.32430099417470504 -}, { - "token": "808f7d94", - "value": 0.5984402085884064 -}, { - "token": "808f7d9c", - "value": 0.6793472057782628 -}, { - "token": "808f7da4", - "value": 0.033929426787699724 -}, { - "token": "808f7dac", - "value": 0.7678834799175067 -}, { - "token": "808f7db4", - "value": 0.9941391037002041 -}, { - "token": "808f7dbc", - "value": 0.36675213183092303 -}, { - "token": "808f7dc4", - "value": 0.40066088856840576 -}, { - "token": "808f7dcc", - "value": 0.7263378406177063 -}, { - "token": "808f7dd4", - "value": 0.04477271874976996 -}, { - "token": "808f7ddc", - "value": 0.7104685877059944 -}, { - "token": "808f7de4", - "value": 0.13419724684085477 -}, { - "token": "808f7dec", - "value": 0.7547222857615965 -}, { - "token": "808f7df4", - "value": 0.9280683006322386 -}, { - "token": "808f7dfc", - "value": 0.8220141360591591 -}, { - "token": "808f7e04", - "value": 0.9963272967038985 -}, { - "token": "808f7e0c", - "value": 0.1555577515936848 -}, { - "token": "808f7e14", - "value": 0.5631111145510213 -}, { - "token": "808f7e1c", - "value": 0.48498738652813933 -}, { - "token": "808f7e24", - "value": 0.6390846622343107 -}, { - "token": "808f7e2c", - "value": 0.7713411346164771 -}, { - "token": "808f7e34", - "value": 0.30300925574785986 -}, { - "token": "808f7e3c", - "value": 0.558699849050589 -}, { - "token": "808f7e44", - "value": 0.09988990383867447 -}, { - "token": "808f7e4c", - "value": 0.3069067328730657 -}, { - "token": "808f7e54", - "value": 0.43128853083719343 -}, { - "token": "808f7e5c", - "value": 0.5928264763933375 -}, { - "token": "808f7e64", - "value": 0.16117572767428334 -}, { - "token": "808f7e6c", - "value": 0.230861193468473 -}, { - "token": "808f7e74", - "value": 0.2536209599928523 -}, { - "token": "808f7e7c", - "value": 0.6134003809540043 -}, { - "token": "808f7e84", - "value": 0.7833849551129455 -}, { - "token": "808f7e8c", - "value": 0.45498849941513386 -}, { - "token": "808f7e94", - "value": 0.08962987759426433 -}, { - "token": "808f7e9c", - "value": 0.005011873959296365 -}, { - "token": "808f7ea4", - "value": 0.5784665723163016 -}, { - "token": "808f7ebc", - "value": 0.5191309233303725 -}, { - "token": "808f7ec4", - "value": 0.39905530113616816 -}, { - "token": "808f7ed4", - "value": 0.13825169595521447 -}, { - "token": "808f7edc", - "value": 0.8204175340623787 -}, { - "token": "808f7ee4", - "value": 0.622697450596031 -}, { - "token": "808f7eec", - "value": 0.9123428024448095 -}, { - "token": "808f7ef4", - "value": 0.7929627313491234 -}, { - "token": "808f7efc", - "value": 0.14057925336084875 -}, { - "token": "808f7f04", - "value": 0.03307304375084663 -}, { - "token": "808f7f0c", - "value": 0.5610326125073675 -}, { - "token": "808f7f14", - "value": 0.4322570558764176 -}, { - "token": "808f7f1c", - "value": 0.0503145116262389 -}, { - "token": "808f7f24", - "value": 0.16401887959047734 -}, { - "token": "808f7f2c", - "value": 0.4751520317382516 -}, { - "token": "808f7f34", - "value": 0.23500681721624983 -}, { - "token": "808f7f3c", - "value": 0.33015285910199244 -}, { - "token": "808f7f44", - "value": 0.45842014371901474 -}, { - "token": "808f7f4c", - "value": 0.06578565472002951 -}, { - "token": "808f7f54", - "value": 0.6186564073897249 -}, { - "token": "808f7f5c", - "value": 0.6773939262080393 -}, { - "token": "808f7f64", - "value": 0.11266112875578238 -}, { - "token": "808f7f6c", - "value": 0.24580063451598888 -}, { - "token": "808f7f74", - "value": 0.9769378264780044 -}, { - "token": "808f7f7c", - "value": 0.8704465762998475 -}, { - "token": "808f7f84", - "value": 0.3917742365841228 -}, { - "token": "808f7f8c", - "value": 0.9262572914676896 -}, { - "token": "808f7f94", - "value": 0.9053184108632224 -}, { - "token": "808f7f9c", - "value": 0.302183769904139 -}, { - "token": "808f7fa4", - "value": 0.29824837147682115 -}, { - "token": "808f7fac", - "value": 0.6758105057539954 -}, { - "token": "808f7fb4", - "value": 0.15327743161577612 -}, { - "token": "808f7fbc", - "value": 0.9308212467506611 -}, { - "token": "808f7fc4", - "value": 0.7937065369136609 -}, { - "token": "808f7fcc", - "value": 0.6043745575751156 -}, { - "token": "808f7fd4", - "value": 0.7455648234651862 -}, { - "token": "808f7fdc", - "value": 0.7621016332623176 -}, { - "token": "808f7fe4", - "value": 0.079259268233 -}, { - "token": "808f7fec", - "value": 0.42279838014027704 -}, { - "token": "808f7ff4", - "value": 0.9807399010025764 -}, { - "token": "808f7ffc", - "value": 0.3514178008689648 -}] \ No newline at end of file diff --git a/test/modules/aggregation-layers/utils/aggregation-operation-utils.spec.js b/test/modules/aggregation-layers/utils/aggregation-operation-utils.spec.js index 2040beca959..2efa3cbca72 100644 --- a/test/modules/aggregation-layers/utils/aggregation-operation-utils.spec.js +++ b/test/modules/aggregation-layers/utils/aggregation-operation-utils.spec.js @@ -28,19 +28,19 @@ const accessor = x => x; const TEST_CASES = [ { name: 'Min Function', - op: 'min', + op: 'MIN', data, expected: -3 }, { name: 'Max Function', - op: 'Max', + op: 'MAX', data, expected: 16 }, { name: 'Sum Function', - op: 'sUM', + op: 'SUM', data, expected: 37.2 }, diff --git a/test/modules/geo-layers/s2-layer.spec.js b/test/modules/geo-layers/s2-layer.spec.js index ea182598fee..01a6be7fc3b 100644 --- a/test/modules/geo-layers/s2-layer.spec.js +++ b/test/modules/geo-layers/s2-layer.spec.js @@ -22,7 +22,7 @@ import test from 'tape-catch'; import {testLayer, generateLayerTests} from '@deck.gl/test-utils'; import {S2Layer} from '@deck.gl/geo-layers'; import {getS2QuadKey, getS2Polygon} from '@deck.gl/geo-layers/s2-layer/s2-utils'; -import data from 'deck.gl-test/data/s2-sf.json'; +import {s2cells as data} from 'deck.gl-test/data'; import {S2} from 's2-geometry'; import Long from 'long'; diff --git a/test/render/constants.js b/test/render/constants.js new file mode 100644 index 00000000000..6d2b36ef876 --- /dev/null +++ b/test/render/constants.js @@ -0,0 +1,16 @@ +export const WIDTH = 800; +export const HEIGHT = 450; + +// Different Platforms render text differently. The golden images +// are currently generated on Mac OS X +/* global navigator */ +let OS; +if (navigator.platform.startsWith('Mac')) { + OS = 'Mac'; +} else if (navigator.platform.startsWith('Win')) { + OS = 'Windows'; +} else { + OS = 'Other'; +} + +export {OS}; diff --git a/test/render/golden-images/column-shadow-lnglat.png b/test/render/golden-images/column-shadow-lnglat.png deleted file mode 100644 index bfe3a5e10d7..00000000000 Binary files a/test/render/golden-images/column-shadow-lnglat.png and /dev/null differ diff --git a/test/render/golden-images/first-person.png b/test/render/golden-images/first-person.png index 291784ba9ff..badcbed486f 100644 Binary files a/test/render/golden-images/first-person.png and b/test/render/golden-images/first-person.png differ diff --git a/test/render/golden-images/grid-lnglat-side.png b/test/render/golden-images/grid-lnglat-side.png new file mode 100644 index 00000000000..eedc454b5fe Binary files /dev/null and b/test/render/golden-images/grid-lnglat-side.png differ diff --git a/test/render/golden-images/grid-lnglat.png b/test/render/golden-images/grid-lnglat.png index 4dee64ca0f3..4133df51ad4 100644 Binary files a/test/render/golden-images/grid-lnglat.png and b/test/render/golden-images/grid-lnglat.png differ diff --git a/test/render/golden-images/jupyter-widget-failed-function.png b/test/render/golden-images/jupyter-widget-failed-function.png index 760937df930..8ad11c56929 100644 Binary files a/test/render/golden-images/jupyter-widget-failed-function.png and b/test/render/golden-images/jupyter-widget-failed-function.png differ diff --git a/test/render/golden-images/jupyter-widget-geojsonlayer.png b/test/render/golden-images/jupyter-widget-geojsonlayer.png index c3600b17cc0..80f49f06e96 100644 Binary files a/test/render/golden-images/jupyter-widget-geojsonlayer.png and b/test/render/golden-images/jupyter-widget-geojsonlayer.png differ diff --git a/test/render/golden-images/jupyter-widget-hexagon-layer-function-syntax.png b/test/render/golden-images/jupyter-widget-hexagon-layer-function-syntax.png index 107781b3cca..8ea0038083d 100644 Binary files a/test/render/golden-images/jupyter-widget-hexagon-layer-function-syntax.png and b/test/render/golden-images/jupyter-widget-hexagon-layer-function-syntax.png differ diff --git a/test/render/golden-images/jupyter-widget-scatterplot-and-text.png b/test/render/golden-images/jupyter-widget-scatterplot-and-text.png index 808e9712665..e0b31da7b3c 100644 Binary files a/test/render/golden-images/jupyter-widget-scatterplot-and-text.png and b/test/render/golden-images/jupyter-widget-scatterplot-and-text.png differ diff --git a/test/render/golden-images/jupyter-widget-scatterplot.png b/test/render/golden-images/jupyter-widget-scatterplot.png index 64b5274da9d..6c23ddce185 100644 Binary files a/test/render/golden-images/jupyter-widget-scatterplot.png and b/test/render/golden-images/jupyter-widget-scatterplot.png differ diff --git a/test/render/golden-images/line-lnglat.png b/test/render/golden-images/line-lnglat.png index 26c2ac152d6..47af8115e31 100644 Binary files a/test/render/golden-images/line-lnglat.png and b/test/render/golden-images/line-lnglat.png differ diff --git a/test/render/golden-images/path-billboard.png b/test/render/golden-images/path-billboard.png index 1393fbadf10..6a4bfcb8af2 100644 Binary files a/test/render/golden-images/path-billboard.png and b/test/render/golden-images/path-billboard.png differ diff --git a/test/render/golden-images/path-lnglat.png b/test/render/golden-images/path-lnglat.png index 567ecf36bed..b23e3a3a6c2 100644 Binary files a/test/render/golden-images/path-lnglat.png and b/test/render/golden-images/path-lnglat.png differ diff --git a/test/render/golden-images/path-maker.png b/test/render/golden-images/path-maker.png deleted file mode 100644 index 1e15820ea08..00000000000 Binary files a/test/render/golden-images/path-maker.png and /dev/null differ diff --git a/test/render/golden-images/path-meter.png b/test/render/golden-images/path-meter.png index e2cdf9006d3..a8008eb5456 100644 Binary files a/test/render/golden-images/path-meter.png and b/test/render/golden-images/path-meter.png differ diff --git a/test/render/golden-images/path-outline.png b/test/render/golden-images/path-outline.png deleted file mode 100644 index 5d3ccbd92d6..00000000000 Binary files a/test/render/golden-images/path-outline.png and /dev/null differ diff --git a/test/render/golden-images/path-rounded.png b/test/render/golden-images/path-rounded.png new file mode 100644 index 00000000000..959a980bc0c Binary files /dev/null and b/test/render/golden-images/path-rounded.png differ diff --git a/test/render/golden-images/pointcloud-identity.png b/test/render/golden-images/pointcloud-identity.png index e10e3ed6826..7d95fc07445 100644 Binary files a/test/render/golden-images/pointcloud-identity.png and b/test/render/golden-images/pointcloud-identity.png differ diff --git a/test/render/golden-images/post-process-effects.png b/test/render/golden-images/post-process-effects.png index f74257c5bcd..429ad6cdf55 100644 Binary files a/test/render/golden-images/post-process-effects.png and b/test/render/golden-images/post-process-effects.png differ diff --git a/test/render/golden-images/shadow-effect.png b/test/render/golden-images/shadow-effect.png new file mode 100644 index 00000000000..b34a43f0140 Binary files /dev/null and b/test/render/golden-images/shadow-effect.png differ diff --git a/test/render/golden-images/text-layer-auto-wrapping.png b/test/render/golden-images/text-layer-auto-wrapping.png index ecc86a2623f..4526ef59684 100644 Binary files a/test/render/golden-images/text-layer-auto-wrapping.png and b/test/render/golden-images/text-layer-auto-wrapping.png differ diff --git a/test/render/golden-images/text-layer-background.png b/test/render/golden-images/text-layer-background.png index e64c4e0d798..6d2415b9d83 100644 Binary files a/test/render/golden-images/text-layer-background.png and b/test/render/golden-images/text-layer-background.png differ diff --git a/test/render/golden-images/text-layer-multi-lines.png b/test/render/golden-images/text-layer-multi-lines.png index 8451a227ae6..ce2e79520c2 100644 Binary files a/test/render/golden-images/text-layer-multi-lines.png and b/test/render/golden-images/text-layer-multi-lines.png differ diff --git a/test/render/golden-images/text-layer.png b/test/render/golden-images/text-layer.png index b932ba490d6..824cc03f349 100644 Binary files a/test/render/golden-images/text-layer.png and b/test/render/golden-images/text-layer.png differ diff --git a/test/render/golden-images/trips.png b/test/render/golden-images/trips.png index bbdada32173..88f83a2399e 100644 Binary files a/test/render/golden-images/trips.png and b/test/render/golden-images/trips.png differ diff --git a/test/render/index.js b/test/render/index.js index aa457e7921d..4e1a7f464cb 100644 --- a/test/render/index.js +++ b/test/render/index.js @@ -17,9 +17,9 @@ // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. - import test from 'tape'; -import {TEST_CASES, WIDTH, HEIGHT} from './test-cases'; +import TEST_CASES from './test-cases'; +import {WIDTH, HEIGHT} from './constants'; import {SnapshotTestRunner} from '@deck.gl/test-utils'; import './jupyter-widget'; @@ -36,7 +36,8 @@ test('Render Test', t => { onTestFail: (testCase, result) => t.fail(result.error || `match: ${result.matchPercentage}`), imageDiffOptions: { - threshold: 0.99 + threshold: 0.99, + includeEmpty: false // uncomment to save screenshot to disk // , saveOnFail: true // uncomment `saveAs` to overwrite current golden images diff --git a/test/render/jupyter-widget.js b/test/render/jupyter-widget.js index fcf4edce97d..3da374f9d63 100644 --- a/test/render/jupyter-widget.js +++ b/test/render/jupyter-widget.js @@ -1,8 +1,7 @@ /* global window,document */ -import test from 'tape-catch'; +import test from 'tape-promise/tape'; -const WIDTH = 800; -const HEIGHT = 450; +import {WIDTH, HEIGHT} from './constants'; const TEST_CASES = [ { @@ -11,7 +10,7 @@ const TEST_CASES = [ viewState: { longitude: 0, latitude: 0, - zoom: 12 + zoom: 13 }, layers: [ { @@ -54,7 +53,7 @@ const TEST_CASES = [ rgb: [123, 159, 53] } ], - getColor: '@@=rgb', + getFillColor: '@@=rgb', getPosition: '@@=position', getRadius: 100 }, @@ -74,7 +73,7 @@ const TEST_CASES = [ getColor: [0, 0, 255], getPosition: '@@=position', getTextAnchor: 'start', - fontFamily: 'Times, Times New Roman, Georgia, serif' + fontFamily: 'Times' } ] }, @@ -87,7 +86,7 @@ const TEST_CASES = [ viewState: { longitude: -122.45, latitude: 37.8, - zoom: 0 + zoom: 1 }, layers: [ { @@ -130,9 +129,9 @@ const TEST_CASES = [ viewState: { longitude: 0, latitude: 0, - zoom: 5, + zoom: 6, pitch: 40.5, - bearing: -27.396674584323023 + bearing: -27 }, views: [ { @@ -199,9 +198,9 @@ const TEST_CASES = [ viewState: { longitude: 0, latitude: 0, - zoom: 5, + zoom: 6, pitch: 40.5, - bearing: -27.396674584323023 + bearing: -27 }, views: [ { @@ -287,6 +286,7 @@ const TEST_CASES = [ {lat: 1.2, lon: 1.2} ], getPosition: '@@=[lon, lat]', + radiusPixels: 100, colorRange: [ [1, 152, 189], [73, 227, 206], @@ -300,47 +300,48 @@ const TEST_CASES = [ }, goldenImage: './test/render/golden-images/jupyter-widget-failed-function.png' } -]; +].filter(Boolean); -test('jupyter-widget Render Test', t => { +async function loadPage() { const iframe = document.createElement('iframe'); iframe.width = WIDTH; iframe.height = HEIGHT; iframe.style.border = 'none'; Object.assign(iframe.style, { - position: 'absolute', + position: 'fixed', top: 0, left: 0 }); + document.body.appendChild(iframe); - let testIndex = 0; - - function runTest(testCase) { - return new Promise(resolve => { - t.comment(testCase.name); - - iframe.contentWindow.postMessage({ - json: testCase.json - }); + return new Promise(resolve => { + iframe.onload = () => resolve(iframe); + iframe.src = '/test/render/jupyter-widget-test.html'; + }); +} - window.onmessage = event => { - if (event.data === 'done') { - resolve(); - } - }; +async function runTest(iframe, testCase) { + return new Promise(resolve => { + iframe.contentWindow.postMessage({ + json: testCase.json }); - } - function nextTest() { - const testCase = TEST_CASES[testIndex++]; + window.onmessage = event => { + if (event.data === 'done') { + resolve(); + } + }; + }); +} + +test('jupyter-widget Render Test', async t => { + const iframe = await loadPage(); - if (!testCase) { - iframe.remove(); - t.end(); - return; - } + for (const testCase of TEST_CASES) { + t.comment(testCase.name); + await runTest(iframe, testCase); - const diffOptions = { + const result = await window.browserTestDriver_captureAndDiffScreen({ // uncomment to save screenshot to disk // saveOnFail: true, threshold: 0.99, @@ -352,21 +353,16 @@ test('jupyter-widget Render Test', t => { height: HEIGHT }, goldenImage: testCase.goldenImage - }; + }); - runTest(testCase) - .then(() => window.browserTestDriver_captureAndDiffScreen(diffOptions)) - .then(result => { - if (result.success) { - t.pass(`match: ${result.matchPercentage}`); - } else { - t.fail(result.error || `match: ${result.matchPercentage}`); - } - nextTest(); - }); + if (result.success) { + t.pass(`match: ${result.matchPercentage}`); + } else { + t.fail(result.error || `match: ${result.matchPercentage}`); + } } - iframe.src = '/test/render/jupyter-widget-test.html'; - iframe.onload = nextTest; - document.body.appendChild(iframe); + iframe.remove(); + + t.end(); }); diff --git a/test/render/test-cases.js b/test/render/test-cases.js deleted file mode 100644 index d99ca39dc4a..00000000000 --- a/test/render/test-cases.js +++ /dev/null @@ -1,2032 +0,0 @@ -/* eslint-disable callback-return */ -/* global window */ -import * as dataSamples from '../../examples/layer-browser/src/data-samples'; -import {parseColor, setOpacity} from '../../examples/layer-browser/src/utils/color'; -import { - GPUGridLayer, - GridLayer - // AGGREGATION_OPERATION -} from '@deck.gl/aggregation-layers'; -import { - COORDINATE_SYSTEM, - MapView, - OrbitView, - OrthographicView, - FirstPersonView, - PostProcessEffect, - LightingEffect, - AmbientLight, - DirectionalLight -} from '@deck.gl/core'; -import {noise, vignette} from '@luma.gl/shadertools'; -import {CubeGeometry} from '@luma.gl/core'; -const cube = new CubeGeometry(); - -import {Fp64Extension, PathStyleExtension} from '@deck.gl/extensions'; -import {SimpleMeshLayer} from '@deck.gl/mesh-layers'; -import {Matrix4} from 'math.gl'; - -const effect1 = new PostProcessEffect(noise); -const effect2 = new PostProcessEffect(vignette); - -const ICON_ATLAS = './test/render/icon-atlas.png'; - -import { - ScatterplotLayer, - BitmapLayer, - PolygonLayer, - SolidPolygonLayer, - PathLayer, - ArcLayer, - LineLayer, - IconLayer, - GeoJsonLayer, - GridCellLayer, - ColumnLayer, - PointCloudLayer, - TextLayer -} from '@deck.gl/layers'; -import { - ContourLayer, - ScreenGridLayer, - CPUGridLayer, - HexagonLayer, - HeatmapLayer -} from '@deck.gl/aggregation-layers'; -import {H3HexagonLayer, H3ClusterLayer, S2Layer, TripsLayer} from '@deck.gl/geo-layers'; - -import * as h3 from 'h3-js'; - -const IS_HEADLESS = Boolean(window.browserTestDriver_isHeadless); - -const MARKER_SIZE_MAP = { - small: 200, - medium: 500, - large: 1000 -}; - -const GRID_LAYER_INFO = { - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - props: { - data: dataSamples.points, - cellSize: 200, - extruded: true, - pickable: true, - getPosition: d => d.COORDINATES - }, - goldenImage: './test/render/golden-images/grid-lnglat.png' -}; - -const HEXAGON_LAYER_INFO = { - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 20, - bearing: 0 - }, - props: { - data: dataSamples.points, - extruded: true, - pickable: true, - radius: 1000, - elevationScale: 1, - elevationRange: [0, 3000], - coverage: 1, - getPosition: d => d.COORDINATES - } -}; - -const POINTCLOUD = dataSamples.getPointCloud(); - -function getMean(pts, key) { - const filtered = pts.filter(pt => Number.isFinite(pt[key])); - - return filtered.length - ? filtered.reduce((accu, curr) => accu + curr[key], 0) / filtered.length - : null; -} - -function getMax(pts, key) { - const filtered = pts.filter(pt => Number.isFinite(pt[key])); - - return filtered.length - ? filtered.reduce((accu, curr) => (curr[key] > accu ? curr[key] : accu), -Infinity) - : null; -} - -function getColorValue(points) { - return getMean(points, 'SPACES'); -} - -function getColorWeight(point) { - return point.SPACES; -} - -const colorAggregation = 'mean'; - -function getElevationValue(points) { - return getMax(points, 'SPACES'); -} - -function getElevationWeight(point) { - return point.SPACES; -} - -const elevationAggregation = 'max'; - -export const WIDTH = 800; -export const HEIGHT = 450; - -// Max color delta in the YIQ difference metric for two pixels to be considered the same -export const COLOR_DELTA_THRESHOLD = 255 * 0.05; -// Percentage of pixels that must be the same for the test to pass -export const TEST_PASS_THRESHOLD = 0.99; -const screenSpaceData = [ - [0, -100], - [0, -110], - [0, -115], - [10, -100], - [0, 100], - [0, 105], - [-100, -100], - [-100, -100], - [100, 10], - [100, 12], - [100, 100], - [110, 90] -]; - -// prettier-ignore -const BINARY_DATA = [ - 0.7, 0.2, 0, 0, 0, 0, - 0.8, 0.6, 0, 0, 5, 0, - 0.3, 0.5, 0, 5, 5, 0, - 0, 0.8, 0.6, 5, 10, 0, - 0, 0.5, 0.7, 10, 10, 0, - 0.3, 0, 0.8, 10, 15, 0, - 0.8, 0, 0.6, 15, 15, 0 -]; - -export const TEST_CASES = [ - // First person - { - name: 'first-person', - views: [ - new FirstPersonView({ - fovy: 75, - near: 10, - far: 100000, - focalDistance: 10 - }) - ], - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - altitude: 20, - bearing: 270 - }, - layers: [ - new GeoJsonLayer({ - id: 'geojson-lnglat', - data: dataSamples.geojson, - opacity: 0.8, - getRadius: f => MARKER_SIZE_MAP[f.properties['marker-size']], - getFillColor: f => parseColor(f.properties.fill || f.properties['marker-color']), - getLineColor: f => parseColor(f.properties.stroke), - extruded: true, - wireframe: true, - getElevation: 500, - lineWidthScale: 10, - lineWidthMinPixels: 1 - }) - ], - goldenImage: './test/render/golden-images/first-person.png' - }, - // Info vis - { - name: 'orthographic-64bit', - views: new OrthographicView(), - viewState: { - target: [10000 - 122.4, 10000 + 37.75, 0], - zoom: 14 - }, - layers: [ - new ScatterplotLayer({ - id: 'orthographic-64', - opacity: 0.1, - coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, - data: dataSamples.getPoints100K().map(p => [p[0] + 10000, p[1] + 10000]), - getPosition: d => d, - getRadius: 0, - radiusMinPixels: 6 - }) - ], - goldenImage: './test/render/golden-images/orthographic-64.png' - }, - { - name: 'pointcloud-identity', - views: [ - new OrbitView({ - fov: 30, - orbitAxis: 'Y' - }) - ], - viewState: { - rotationX: 15, - rotationOrbit: 30 - }, - layers: [ - new PointCloudLayer({ - id: 'pointcloud-identity', - data: [{position: [0, 100, 0]}, {position: [-100, -100, 0]}, {position: [100, -100, 0]}], - opacity: 0.8, - coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, - getPosition: d => d.position, - getNormal: d => [0, 0.5, 0.2], - getColor: d => [255, 255, 0, 128], - pointSize: 50 - }) - ], - goldenImage: './test/render/golden-images/pointcloud-identity.png' - }, - { - name: 'screengrid-infoviz', - views: [new OrthographicView()], - viewState: { - left: -WIDTH / 2, - top: -HEIGHT / 2, - right: WIDTH / 2, - bottom: HEIGHT / 2 - }, - layers: [ - new ScreenGridLayer({ - id: 'screengrid-infoviz', - data: screenSpaceData, - coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, - opacity: 0.8, - getPosition: d => d, - cellSizePixels: 40, - pickable: false - }) - ], - goldenImage: './test/render/golden-images/screengrid-infoviz.png' - }, - { - name: 'contour-infoviz', - views: [new OrthographicView()], - viewState: { - left: -WIDTH / 2, - top: -HEIGHT / 2, - right: WIDTH / 2, - bottom: HEIGHT / 2, - zoom: 0.1 - }, - layers: [ - new ContourLayer({ - id: 'contour-infoviz', - data: screenSpaceData, - getPosition: d => d, - coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, - cellSize: 40, - contours: [ - {threshold: 1, color: [50, 50, 50]}, - {threshold: 2, color: [100, 100, 100]}, - {threshold: 3, color: [150, 150, 150]} - ], - gpuAggregation: true - }) - ], - goldenImage: './test/render/golden-images/contour-infoviz.png' - }, - { - name: 'contour-isobands-infoviz', - views: [new OrthographicView()], - viewState: { - left: -WIDTH / 2, - top: -HEIGHT / 2, - right: WIDTH / 2, - bottom: HEIGHT / 2 - }, - layers: [ - new ContourLayer({ - id: 'contour-isobands-infoviz', - data: screenSpaceData, - getPosition: d => d, - coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, - cellSize: 40, - contours: [ - {threshold: [1, 2], color: [150, 0, 0]}, - {threshold: [2, 5], color: [0, 150, 0]} - ], - gpuAggregation: false - }) - ], - goldenImage: './test/render/golden-images/contour-infoviz_border_ref.png' - }, - - // GEOSPATIAL - { - name: 'polygon-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new PolygonLayer({ - id: 'polygon-lnglat', - data: dataSamples.polygons, - getPolygon: f => f, - getFillColor: [200, 0, 0], - getLineColor: [0, 0, 0], - opacity: 0.8, - lineWidthMinPixels: 1 - }) - ], - goldenImage: './test/render/golden-images/polygon-lnglat.png' - }, - { - name: 'polygon-lnglat-64', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new PolygonLayer({ - id: 'polygon-lnglat-64', - data: dataSamples.polygons, - coordinateSystem: COORDINATE_SYSTEM.LNGLAT, - getPolygon: f => f, - getFillColor: [200, 0, 0], - getLineColor: [0, 0, 0], - opacity: 0.8, - lineWidthMinPixels: 1, - extensions: [new Fp64Extension()] - }) - ], - goldenImage: './test/render/golden-images/polygon-lnglat.png' - }, - { - name: 'polygon-dash', - views: new OrthographicView(), - viewState: { - target: [0, 0, 0], - zoom: 0 - }, - layers: [ - new PolygonLayer({ - id: 'polygon-lnglat', - coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, - data: [[[-100, -100], [-100, 100], [100, 100], [100, -100]]], - getPolygon: f => f, - filled: false, - stroked: true, - getLineColor: [0, 0, 0], - getDashArray: [6, 3], - getLineWidth: 10, - opacity: 1, - dashJustified: true, - extensions: [new PathStyleExtension({dash: true})] - }) - ], - goldenImage: './test/render/golden-images/polygon-dash.png' - }, - { - name: 'path-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new PathLayer({ - id: 'path-lnglat', - data: dataSamples.zigzag, - opacity: 0.6, - getPath: f => f.path, - getColor: f => [128, 0, 0], - getWidth: f => 100, - widthMinPixels: 1, - pickable: true - }) - ], - goldenImage: './test/render/golden-images/path-lnglat.png' - }, - { - name: 'path-lnglat-binary', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new PathLayer({ - id: 'path-lnglat', - data: { - length: dataSamples.zigzag.length, - startIndices: dataSamples.zigzag.reduce( - (acc, d) => { - acc.push(acc[acc.length - 1] + d.path.length); - return acc; - }, - [0] - ), - attributes: { - getPath: { - value: new Float64Array(dataSamples.zigzag.flatMap(d => d.path.flat())), - size: 2 - }, - getColor: { - value: new Uint8Array( - dataSamples.zigzag.flatMap(d => d.path.flatMap(p => [128, 0, 0])) - ), - size: 3 - } - } - }, - getWidth: 100, - opacity: 0.6, - widthMinPixels: 1 - }) - ], - goldenImage: './test/render/golden-images/path-lnglat.png' - }, - { - name: 'path-billboard', - viewState: { - latitude: 37.7518488, - longitude: -122.427699, - zoom: 16.5, - pitch: 55, - bearing: -20 - }, - layers: [ - new PathLayer({ - id: 'path-lnglat', - data: dataSamples.zigzag3D, - opacity: 0.6, - billboard: true, - getPath: f => f.path, - getColor: f => [128, 0, 0], - getWidth: f => 10 - }) - ], - goldenImage: './test/render/golden-images/path-billboard.png' - }, - { - name: 'path-offset', - viewState: { - latitude: 37.71, - longitude: -122.405, - zoom: 13 - }, - layers: [ - new PathLayer({ - id: 'path-offset', - data: [ - {path: [[-122.39, 37.7], [-122.42, 37.7], [-122.42, 37.72]], color: [255, 180, 0]}, - {path: [[-122.42, 37.72], [-122.42, 37.7], [-122.39, 37.7]], color: [80, 0, 255]} - ], - getPath: f => f.path, - getColor: f => f.color, - getWidth: 100, - getOffset: 1, - extensions: [new PathStyleExtension({offset: true})] - }) - ], - goldenImage: './test/render/golden-images/path-offset.png' - }, - { - name: 'scatterplot-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new ScatterplotLayer({ - id: 'scatterplot-lnglat', - data: dataSamples.points, - getPosition: d => d.COORDINATES, - getFillColor: d => [255, 128, 0], - getRadius: d => d.SPACES, - pickable: true, - radiusScale: 30, - radiusMinPixels: 1, - radiusMaxPixels: 30 - }) - ], - goldenImage: './test/render/golden-images/scatterplot-lnglat.png' - }, - { - name: 'scatterplot-lnglat-64', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new ScatterplotLayer({ - id: 'scatterplot-lnglat', - data: dataSamples.points, - coordinateSystem: COORDINATE_SYSTEM.LNGLAT, - getPosition: d => d.COORDINATES, - getFillColor: d => [255, 128, 0], - getRadius: d => d.SPACES, - pickable: true, - radiusScale: 30, - radiusMinPixels: 1, - radiusMaxPixels: 30, - extensions: [new Fp64Extension()] - }) - ], - goldenImage: './test/render/golden-images/scatterplot-lnglat.png' - }, - { - name: 'arc-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 20, - bearing: 0 - }, - layers: [ - new ArcLayer({ - id: 'arc-lnglat', - data: dataSamples.routes, - opacity: 0.8, - getWidth: 2, - getSourcePosition: d => d.START, - getTargetPosition: d => d.END, - getSourceColor: d => [64, 255, 0], - getTargetColor: d => [0, 128, 200] - }) - ], - goldenImage: './test/render/golden-images/arc-lnglat.png', - imageDiffOptions: !IS_HEADLESS && { - threshold: 0.985 - } - }, - { - name: 'arc-lnglat-3d', - viewState: { - latitude: 37.788, - longitude: -122.45, - zoom: 13, - pitch: 60, - bearing: 0 - }, - layers: [ - new ArcLayer({ - id: 'arc-lnglat-3d', - data: [ - {source: [-122.46, 37.77, -150], target: [-122.44, 37.77, 450], height: 0.5}, - {source: [-122.46, 37.77, -150], target: [-122.44, 37.77, 450], height: 1}, - {source: [-122.46, 37.77, -150], target: [-122.44, 37.77, 450], height: 2}, - {source: [-122.46, 37.78, 600], target: [-122.44, 37.78, 0], height: 0.5}, - {source: [-122.46, 37.78, 600], target: [-122.44, 37.78, 0], height: 1}, - {source: [-122.46, 37.78, 600], target: [-122.44, 37.78, 0], height: 2} - ], - opacity: 0.8, - getWidth: 4, - getSourcePosition: d => d.source, - getTargetPosition: d => d.target, - getHeight: d => d.height, - getSourceColor: d => [255, 255, 0], - getTargetColor: d => [255, 0, 0] - }) - ], - goldenImage: './test/render/golden-images/arc-lnglat-3d.png', - imageDiffOptions: !IS_HEADLESS && { - threshold: 0.985 - } - }, - { - name: 'line-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new LineLayer({ - id: 'line-lnglat', - data: dataSamples.routes, - opacity: 0.8, - getWidth: 0, - widthMinPixels: 2, - getSourcePosition: d => d.START, - getTargetPosition: d => d.END, - getColor: d => (d.SERVICE === 'WEEKDAY' ? [255, 64, 0] : [255, 200, 0]), - pickable: true - }) - ], - goldenImage: './test/render/golden-images/line-lnglat.png' - }, - { - name: 'icon-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - // rendering times - layers: [ - new IconLayer({ - id: 'icon-lnglat', - data: dataSamples.points, - iconAtlas: ICON_ATLAS, - iconMapping: dataSamples.iconAtlas, - sizeScale: 12, - getPosition: d => d.COORDINATES, - getColor: d => [64, 64, 72], - getIcon: d => (d.PLACEMENT === 'SW' ? 'marker' : 'marker-warning'), - getSize: d => (d.RACKS > 2 ? 2 : 1), - opacity: 0.8, - pickable: true - }) - ], - onAfterRender: ({layers, done}) => { - if (layers[0].state.iconManager.getTexture()) { - done(); - } - }, - goldenImage: './test/render/golden-images/icon-lnglat.png' - }, - { - name: 'icon-lnglat-external-buffer', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - // rendering times - layers: [ - new IconLayer({ - id: 'icon-lnglat', - data: { - length: dataSamples.points.length, - attributes: { - getPosition: { - value: new Float32Array(dataSamples.points.flatMap(d => d.COORDINATES)), - size: 2 - }, - getSize: new Float32Array(dataSamples.points.flatMap(d => (d.RACKS > 2 ? 2 : 1))), - getIcon: { - value: new Uint8Array( - dataSamples.points.flatMap(d => (d.PLACEMENT === 'SW' ? 1 : 2)) - ), - size: 1 - } - } - }, - iconAtlas: ICON_ATLAS, - iconMapping: {1: dataSamples.iconAtlas.marker, 2: dataSamples.iconAtlas['marker-warning']}, - sizeScale: 12, - getColor: [64, 64, 72], - opacity: 0.8, - pickable: true - }) - ], - onAfterRender: ({layers, done}) => { - if (layers[0].state.iconManager.getTexture()) { - done(); - } - }, - goldenImage: './test/render/golden-images/icon-lnglat.png' - }, - { - name: 'icon-lnglat-facing-up', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 60, - bearing: 0 - }, - layers: [ - new IconLayer({ - id: 'icon-lnglat', - data: dataSamples.points, - iconAtlas: ICON_ATLAS, - billboard: false, - iconMapping: dataSamples.iconAtlas, - sizeScale: 12, - getPosition: d => d.COORDINATES, - getColor: d => [64, 64, 72], - getIcon: d => (d.PLACEMENT === 'SW' ? 'marker' : 'marker-warning'), - getSize: d => (d.RACKS > 2 ? 2 : 1), - opacity: 0.8, - pickable: true - }) - ], - onAfterRender: ({layers, done}) => { - if (layers[0].state.iconManager.getTexture()) { - done(); - } - }, - goldenImage: './test/render/golden-images/icon-lnglat-facing-up.png' - }, - { - name: 'icon-lnglat-auto', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 12, - pitch: 0, - bearing: 0 - }, - layers: [ - new IconLayer({ - id: 'icon-lnglat-auto', - data: dataSamples.points, - updateTriggers: { - getIcon: 1 - }, - sizeScale: 24, - opacity: 0.8, - pickable: true, - getSize: d => (d.RACKS > 2 ? 2 : 1), - getPosition: d => d.COORDINATES, - getColor: d => [64, 64, 72], - getIcon: d => { - if (d.PLACEMENT === 'SW') { - return Object.assign({}, dataSamples.iconAtlas.marker, { - url: './test/render/icon-marker.png' - }); - } - return Object.assign({}, dataSamples.iconAtlas['marker-warning'], { - url: './test/render/icon-warning.png' - }); - } - }) - ], - onAfterRender: ({layers, done}) => { - if (layers[0].state.iconManager.loaded) { - // data is loaded - done(); - } - }, - goldenImage: './test/render/golden-images/icon-lnglat-large.png' - }, - // This is based on last test case - // use the same layer id 'icon-lnglat-auto' as last test case to trigger the layer update and test texture resize logic - { - name: 'icon-lnglat-auto-2', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 12, - pitch: 0, - bearing: 0 - }, - layers: [ - new IconLayer({ - id: 'icon-lnglat-auto', - data: dataSamples.points, - updateTriggers: { - getIcon: 2 - }, - sizeScale: 24, - opacity: 0.8, - pickable: true, - getSize: d => (d.RACKS > 2 ? 2 : 1), - getPosition: d => d.COORDINATES, - getColor: d => [64, 64, 72], - getIcon: d => { - if (d.PLACEMENT === 'SW') { - return Object.assign({}, dataSamples.iconAtlas.marker, { - url: './test/render/icon-marker.png', - id: 'marker-large', - width: 256, - height: 256 - }); - } - return Object.assign({}, dataSamples.iconAtlas['marker-warning'], { - id: 'warning-large', - url: './test/render/icon-warning.png', - width: 1024, - height: 1024 - }); - } - }) - ], - onAfterRender: ({layers, done}) => { - if (layers[0].state.iconManager.loaded) { - // data is loaded - done(); - } - }, - goldenImage: './test/render/golden-images/icon-lnglat-resize-texture.png' - }, - { - name: 'icon-meters', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - // rendering times - renderingTimes: 2, - layers: [ - new IconLayer({ - id: 'icon-meters', - data: dataSamples.points, - iconAtlas: ICON_ATLAS, - iconMapping: dataSamples.iconAtlas, - sizeScale: 256, - sizeUnits: 'meters', - getPosition: d => d.COORDINATES, - getColor: d => [64, 64, 72], - getIcon: d => (d.PLACEMENT === 'SW' ? 'marker' : 'marker-warning'), - getSize: d => (d.RACKS > 2 ? 2 : 1), - opacity: 0.8, - pickable: true - }) - ], - onAfterRender: ({layers, done}) => { - if (layers[0].state.iconManager.getTexture()) { - done(); - } - }, - goldenImage: './test/render/golden-images/icon-lnglat.png' - }, - { - name: 'geojson-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new GeoJsonLayer({ - id: 'geojson-lnglat', - data: dataSamples.geojson, - opacity: 0.8, - getRadius: f => MARKER_SIZE_MAP[f.properties['marker-size']], - getFillColor: f => { - const color = parseColor(f.properties.fill || f.properties['marker-color']); - const opacity = (f.properties['fill-opacity'] || 1) * 255; - return setOpacity(color, opacity); - }, - getLineColor: f => { - const color = parseColor(f.properties.stroke); - const opacity = (f.properties['stroke-opacity'] || 1) * 255; - return setOpacity(color, opacity); - }, - getLineWidth: f => f.properties['stroke-width'], - getElevation: f => 500, - lineWidthScale: 10, - lineWidthMinPixels: 1, - pickable: true - }) - ], - goldenImage: './test/render/golden-images/geojson-lnglat.png' - }, - { - name: 'geojson-extruded-lnglat', - viewState: { - latitude: 37.78, - longitude: -122.45, - zoom: 12, - pitch: 0, - bearing: 0 - }, - layers: [ - new GeoJsonLayer({ - id: 'geojson-extruded-lnglat', - data: dataSamples.geojson, - opacity: 0.8, - extruded: true, - wireframe: true, - getRadius: f => MARKER_SIZE_MAP[f.properties['marker-size']], - getFillColor: f => { - const color = parseColor(f.properties.fill || f.properties['marker-color']); - const opacity = (f.properties['fill-opacity'] || 1) * 255; - return setOpacity(color, opacity); - }, - getLineColor: f => { - const color = parseColor(f.properties.stroke); - const opacity = (f.properties['stroke-opacity'] || 1) * 255; - return setOpacity(color, opacity); - }, - getLineWidth: f => f.properties['stroke-width'], - getElevation: f => 500, - lineWidthScale: 10, - lineWidthMinPixels: 1, - pickable: true - }) - ], - goldenImage: './test/render/golden-images/geojson-extruded-lnglat.png' - }, - { - name: 'geojson-large', - viewState: { - longitude: -95, - latitude: 60, - zoom: 3 - }, - layers: [ - new GeoJsonLayer({ - id: 'geojson-layer-large', - data: dataSamples.geojsonLarge, - stroked: false, - filled: true, - opacity: 0.5, - getFillColor: [200, 0, 0] - }) - ], - goldenImage: './test/render/golden-images/geojson-large.png' - }, - { - name: 'gridcell-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new GridCellLayer({ - id: 'gridcell-lnglat', - data: dataSamples.worldGrid.data, - cellSize: dataSamples.worldGrid.cellSize, - extruded: true, - pickable: true, - getFillColor: g => [245, 166, g.value * 255, 255], - getElevation: h => h.value * 5000 - }) - ], - goldenImage: './test/render/golden-images/gridcell-lnglat.png' - }, - { - name: 'cpu-grid-layer:quantile', - viewState: GRID_LAYER_INFO.viewState, - layers: [ - new CPUGridLayer( - Object.assign({}, GRID_LAYER_INFO.props, { - id: 'cpu-grid-layer:quantile', - getColorValue, - getElevationValue, - colorScaleType: 'quantile' - }) - ) - ], - goldenImage: './test/render/golden-images/cpu-layer-quantile.png' - }, - { - name: 'cpu-grid-layer:ordinal', - viewState: GRID_LAYER_INFO.viewState, - layers: [ - new CPUGridLayer( - Object.assign({}, GRID_LAYER_INFO.props, { - id: 'cpu-grid-layer:ordinal', - getColorValue, - getElevationValue, - colorScaleType: 'ordinal' - }) - ) - ], - goldenImage: './test/render/golden-images/cpu-layer-ordinal.png' - }, - { - name: 'grid-lnglat', - viewState: GRID_LAYER_INFO.viewState, - layers: [ - new CPUGridLayer( - Object.assign({}, GRID_LAYER_INFO.props, { - id: 'grid-lnglat', - getColorValue, - getElevationValue - }) - ) - ], - goldenImage: GRID_LAYER_INFO.goldenImage - }, - { - name: 'grid-lnglat-2', - viewState: GRID_LAYER_INFO.viewState, - layers: [ - new CPUGridLayer( - Object.assign({}, GRID_LAYER_INFO.props, { - id: 'grid-lnglat', - getColorWeight, - colorAggregation, - getElevationWeight, - elevationAggregation - }) - ) - ], - goldenImage: GRID_LAYER_INFO.goldenImage - }, - { - name: 'new-grid-lnglat-cpu', - viewState: GRID_LAYER_INFO.viewState, - layers: [ - new GridLayer( - Object.assign({}, GRID_LAYER_INFO.props, { - id: 'new-grid-lnglat-cpu', - getColorWeight: x => x.SPACES, - colorAggregation: 'MEAN', - getElevationWeight: x => x.SPACES, - elevationAggregation: 'MAX', - gpuAggregation: false - }) - ) - ], - goldenImage: GRID_LAYER_INFO.goldenImage - }, - { - name: 'new-grid-lnglat-gpu', - viewState: GRID_LAYER_INFO.viewState, - layers: [ - new GridLayer( - Object.assign({}, GRID_LAYER_INFO.props, { - id: 'new-grid-lnglat-gpu', - getColorWeight: x => x.SPACES, - colorAggregation: 'MEAN', - getElevationWeight: x => x.SPACES, - elevationAggregation: 'MAX', - gpuAggregation: true - }) - ) - ], - goldenImage: GRID_LAYER_INFO.goldenImage - }, - { - name: 'screengrid-lnglat-cpu-aggregation', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new ScreenGridLayer({ - id: 'screengrid-lnglat-cpu-aggregation', - data: dataSamples.points, - opacity: 0.8, - getPosition: d => d.COORDINATES, - cellSizePixels: 40, - pickable: false, - gpuAggregation: false - }) - ], - goldenImage: './test/render/golden-images/screengrid-lnglat-colorRange.png' - }, - { - name: 'screengrid-lnglat-colorRange', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new ScreenGridLayer({ - id: 'screengrid-lnglat-colorRange', - data: dataSamples.points, - opacity: 0.8, - getPosition: d => d.COORDINATES, - cellSizePixels: 40, - pickable: false - }) - ], - goldenImage: './test/render/golden-images/screengrid-lnglat-colorRange.png' - }, - { - name: 'column-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 30, - bearing: 0, - orthographic: true - }, - layers: [ - new ColumnLayer({ - id: 'column-lnglat', - data: dataSamples.hexagons, - radius: 250, - angle: Math.PI / 2, - coverage: 1, - extruded: true, - pickable: true, - getPosition: h => h.centroid, - getFillColor: h => [48, 128, h.value * 255, 255], - getElevation: h => h.value * 5000 - }) - ], - goldenImage: './test/render/golden-images/column-lnglat.png' - }, - { - name: 'column-shadow-lnglat', - effects: [ - new LightingEffect({ - ambientLight: new AmbientLight({ - color: [255, 255, 255], - intensity: 1.0 - }), - dirLight: new DirectionalLight({ - color: [255, 255, 255], - intensity: 1.0, - direction: [-10, 2, -15], - _shadow: true - }) - }) - ], - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 30, - bearing: 0, - orthographic: true - }, - layers: [ - new ColumnLayer({ - id: 'column-lnglat', - data: dataSamples.hexagons, - radius: 250, - angle: Math.PI / 2, - coverage: 1, - extruded: true, - pickable: true, - shadowEnabled: false, - getPosition: h => h.centroid, - getFillColor: h => [48, 128, h.value * 255, 255], - getElevation: h => h.value * 5000 - }), - new HexagonLayer( - Object.assign({}, HEXAGON_LAYER_INFO.props, { - id: 'hexagon-lnglat', - getColorValue, - getElevationValue - }) - ) - ], - goldenImage: './test/render/golden-images/column-shadow-lnglat.png' - }, - { - name: 'column-lnglat-stroke', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0, - orthographic: true - }, - layers: [ - new ColumnLayer({ - id: 'column-lnglat', - data: dataSamples.hexagons, - radius: 250, - angle: Math.PI / 2, - coverage: 1, - extruded: false, - stroked: true, - pickable: true, - lineWidthUnits: 'pixels', - getPosition: h => h.centroid, - getFillColor: h => [48, 128, h.value * 255, 255], - getLineColor: [255, 255, 255], - getLineWidth: 4 - }) - ], - goldenImage: './test/render/golden-images/column-lnglat-stroke.png' - }, - { - name: 'hexagon-lnglat', - viewState: HEXAGON_LAYER_INFO.viewState, - layers: [ - new HexagonLayer( - Object.assign({}, HEXAGON_LAYER_INFO.props, { - id: 'hexagon-lnglat', - getColorValue, - getElevationValue - }) - ) - ], - goldenImage: './test/render/golden-images/hexagon-lnglat.png' - }, - { - name: 'hexagon-lnglat-2', - viewState: HEXAGON_LAYER_INFO.viewState, - layers: [ - new HexagonLayer( - Object.assign({}, HEXAGON_LAYER_INFO.props, { - id: 'hexagon-lnglat', - getColorWeight, - colorAggregation, - getElevationWeight, - elevationAggregation - }) - ) - ], - goldenImage: './test/render/golden-images/hexagon-lnglat.png' - }, - { - name: 'heatmap-lnglat', - viewState: { - latitude: 37.75, - longitude: -122.44, - zoom: 11.5, - pitch: 30, - bearing: 0 - }, - layers: [ - new HeatmapLayer({ - id: 'heatmap-lnglat', - data: dataSamples.points, - opacity: 0.8, - pickable: false, - getPosition: d => d.COORDINATES, - radiusPixels: 35, - threshold: 0.1 - }) - ], - goldenImage: './test/render/golden-images/heatmap-lnglat.png' - }, - { - name: 'heatmap-lnglat-high-zoom', - viewState: { - latitude: 37.76, - longitude: -122.42, - zoom: 14, - pitch: 30, - bearing: 0 - }, - layers: [ - new HeatmapLayer({ - id: 'heatmap-lnglat-2', - data: dataSamples.points, - opacity: 0.8, - pickable: false, - getPosition: d => d.COORDINATES, - radiusPixels: 35, - threshold: 0.1 - }) - ], - goldenImage: './test/render/golden-images/heatmap-lnglat-high-zoom.png' - }, - { - name: 'pointcloud-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 13, - pitch: 0, - bearing: 0 - }, - layers: [ - new PointCloudLayer({ - id: 'pointcloud-lnglat', - data: POINTCLOUD, - coordinateSystem: COORDINATE_SYSTEM.LNGLAT_OFFSETS, - coordinateOrigin: dataSamples.positionOrigin, - getPosition: d => [d.position[0] * 1e-5, d.position[1] * 1e-5, d.position[2]], - getNormal: d => d.normal, - getColor: d => d.color, - pointSize: 2, - pickable: true - }) - ], - goldenImage: './test/render/golden-images/pointcloud-lnglat.png' - }, - { - name: 'pointcloud-meter', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 13, - pitch: 0, - bearing: 0 - }, - layers: [ - new PointCloudLayer({ - id: 'pointcloud-meter', - data: { - length: POINTCLOUD.length, - attributes: { - getPosition: new Float32Array(POINTCLOUD.flatMap(d => d.position)), - getNormal: new Float32Array(POINTCLOUD.flatMap(d => d.normal)), - getColor: {value: new Uint8Array(POINTCLOUD.flatMap(d => d.color)), size: 3} - } - }, - coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS, - coordinateOrigin: dataSamples.positionOrigin, - pointSize: 2, - pickable: true - }) - ], - goldenImage: './test/render/golden-images/pointcloud-meter.png' - }, - { - name: 'path-meter', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new PathLayer({ - id: 'path-meter', - data: dataSamples.meterPaths, - getColor: f => [255, 0, 0], - getWidth: f => 10, - widthMinPixels: 1, - pickable: false, - widthScale: 100, - autoHighlight: false, - highlightColor: [255, 255, 255, 255], - sizeScale: 200, - rounded: false, - getMarkerPercentages: () => [], - coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS, - coordinateOrigin: dataSamples.positionOrigin - }) - ], - goldenImage: './test/render/golden-images/path-meter.png' - }, - { - name: 'text-layer', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new TextLayer({ - id: 'text-layer', - data: dataSamples.points.slice(0, 50), - opacity: 0.8, - fontFamily: 'Arial', - getText: x => `${x.PLACEMENT}-${x.YR_INSTALLED}`, - getPosition: x => x.COORDINATES, - getColor: x => [153, 0, 0], - getSize: x => 16, - getAngle: x => 0, - sizeScale: 1, - getTextAnchor: x => 'start', - getAlignmentBaseline: x => 'center', - getPixelOffset: x => [10, 0] - }) - ], - goldenImage: './test/render/golden-images/text-layer.png' - }, - { - name: 'text-layer-meters', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new TextLayer({ - id: 'text-layer', - data: dataSamples.points.slice(0, 50), - opacity: 0.8, - fontFamily: 'Arial', - getText: x => `${x.PLACEMENT}-${x.YR_INSTALLED}`, - getPosition: x => x.COORDINATES, - getColor: x => [153, 0, 0], - getSize: x => 16, - getAngle: x => 0, - sizeScale: 21, - sizeUnits: 'meters', - getTextAnchor: x => 'start', - getAlignmentBaseline: x => 'center', - getPixelOffset: x => [10, 0] - }) - ], - goldenImage: './test/render/golden-images/text-layer.png' - }, - { - name: 'text-layer-multi-lines', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new TextLayer({ - id: 'text-layer', - data: dataSamples.points.slice(0, 10), - opacity: 0.8, - fontFamily: 'Arial', - getText: x => `${x.PLACEMENT}\n${x.YR_INSTALLED}`, - getPosition: x => x.COORDINATES, - getColor: x => [153, 0, 0], - getSize: x => 16, - getAngle: x => 0, - sizeScale: 1, - getTextAnchor: x => 'middle', - getAlignmentBaseline: x => 'center', - getPixelOffset: x => [10, 0] - }) - ], - goldenImage: './test/render/golden-images/text-layer-multi-lines.png' - }, - { - name: 'text-layer-auto-wrapping', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new TextLayer({ - id: 'text-layer', - data: dataSamples.points.slice(0, 3), - opacity: 0.8, - fontFamily: 'Arial', - wordBreak: 'break-word', - width: 1000, - getText: x => `${x.LOCATION_NAME}\n${x.ADDRESS}`, - getPosition: x => x.COORDINATES, - getColor: x => [153, 0, 0], - getSize: x => 16, - getAngle: x => 0, - sizeScale: 1, - getTextAnchor: x => 'middle', - getAlignmentBaseline: x => 'center', - getPixelOffset: x => [10, 0] - }) - ], - goldenImage: './test/render/golden-images/text-layer-auto-wrapping.png' - }, - { - name: 'text-layer-background', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new TextLayer({ - id: 'text-layer', - data: dataSamples.points.slice(0, 50), - opacity: 0.8, - fontFamily: 'Arial', - backgroundColor: [0.0, 255.0, 0.0, 200.0], - getText: x => `${x.PLACEMENT}-${x.YR_INSTALLED}`, - getPosition: x => x.COORDINATES, - getColor: x => [153, 0, 0], - getSize: x => 16, - getAngle: x => 0, - sizeScale: 21, - sizeUnits: 'meters', - getTextAnchor: x => 'start', - getAlignmentBaseline: x => 'center', - getPixelOffset: x => [10, 0] - }) - ], - goldenImage: './test/render/golden-images/text-layer-background.png' - }, - { - name: 'gpu-grid-lnglat', - viewState: GRID_LAYER_INFO.viewState, - layers: [ - new GPUGridLayer( - Object.assign({}, GRID_LAYER_INFO.props, { - id: 'gpu-grid-lnglat', - gpuAggregation: true - }) - ) - ], - goldenImage: './test/render/golden-images/gpu-grid-lnglat.png' - }, - { - name: 'contour-lnglat-cpu-aggregation', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new ContourLayer({ - id: 'contour-lnglat-cpu-aggregation', - data: dataSamples.points, - cellSize: 200, - getPosition: d => d.COORDINATES, - contours: [ - {threshold: 1, color: [255, 0, 0], strokeWidth: 6}, - {threshold: 5, color: [0, 255, 0], strokeWidth: 3}, - {threshold: 15, color: [0, 0, 255]} - ], - gpuAggregation: false - }) - ], - goldenImage: './test/render/golden-images/contour-lnglat.png' - }, - { - name: 'contour-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new ContourLayer({ - id: 'contour-lnglat', - data: dataSamples.points, - cellSize: 200, - getPosition: d => d.COORDINATES, - contours: [ - {threshold: 1, color: [255, 0, 0], strokeWidth: 6}, - {threshold: 5, color: [0, 255, 0], strokeWidth: 3}, - {threshold: 15, color: [0, 0, 255]} - ], - gpuAggregation: true - }) - ], - goldenImage: './test/render/golden-images/contour-lnglat.png' - }, - { - name: 'contour-isobands-lnglat', - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new ContourLayer({ - id: 'contour-isobands-lnglat', - data: dataSamples.points, - cellSize: 200, - getPosition: d => d.COORDINATES, - contours: [ - {threshold: [1, 5], color: [255, 0, 0], strokeWidth: 6}, - {threshold: [5, 15], color: [0, 255, 0], strokeWidth: 3}, - {threshold: [15, 1000], color: [0, 0, 255]} - ], - gpuAggregation: true - }) - ], - goldenImage: './test/render/golden-images/contour-isobands-lnglat.png' - }, - { - name: 'h3-hexagon-layer', - viewState: { - latitude: 37.78, - longitude: -122.45, - zoom: 11, - pitch: 30, - bearing: 0 - }, - layers: [ - new H3HexagonLayer({ - data: h3.kRing('882830829bfffff', 4), - opacity: 0.8, - getHexagon: d => d, - getFillColor: (d, {index}) => [255, index * 5, 0], - getElevation: (d, {index}) => index * 100 - }) - ], - goldenImage: './test/render/golden-images/h3-hexagon.png' - }, - { - name: 'h3-hexagon-layer-high-precision', - viewState: { - latitude: 50.103, - longitude: -143.478, - zoom: 13, - pitch: 0, - bearing: 0 - }, - layers: [ - new H3HexagonLayer({ - data: h3.kRing('891c0000003ffff', 4), - opacity: 0.8, - getHexagon: d => d, - getFillColor: (d, {index}) => [255, index * 5, 0], - getElevation: (d, {index}) => index * 10 - }) - ], - goldenImage: './test/render/golden-images/h3-hexagon-high-precision.png' - }, - { - name: 'h3-hexagon-layer-flat', - viewState: { - latitude: 37.78, - longitude: -122.45, - zoom: 12, - pitch: 0, - bearing: 0 - }, - layers: [ - new H3HexagonLayer({ - data: h3.kRing('882830829bfffff', 4), - opacity: 0.8, - getHexagon: d => d, - extruded: false, - stroked: true, - getFillColor: (d, {index}) => [255, index * 5, 0], - getLineColor: [255, 255, 255], - lineWidthMinPixels: 2 - }) - ], - goldenImage: './test/render/golden-images/h3-hexagon-flat.png' - }, - { - name: 'h3-hexagon-layer-flat-high-precision', - viewState: { - latitude: 37.78, - longitude: -122.45, - zoom: 12, - pitch: 0, - bearing: 0 - }, - layers: [ - new H3HexagonLayer({ - data: h3.kRing('882830829bfffff', 4), - opacity: 0.8, - getHexagon: d => d, - extruded: false, - stroked: true, - highPrecision: true, - getFillColor: (d, {index}) => [255, index * 5, 0], - getLineColor: [255, 255, 255], - lineWidthMinPixels: 2 - }) - ], - goldenImage: './test/render/golden-images/h3-hexagon-flat.png' - }, - { - name: 'h3-hexagon-layer-low-zoom', - viewState: { - latitude: 0, - longitude: 0, - zoom: 0, - pitch: 0, - bearing: 0 - }, - layers: [ - new H3HexagonLayer({ - data: h3.getRes0Indexes(), - opacity: 0.8, - getHexagon: d => d, - extruded: false, - filled: false, - stroked: true, - getLineColor: [0, 0, 0], - lineWidthMinPixels: 2 - }) - ], - goldenImage: './test/render/golden-images/h3-hexagon-low-zoom.png' - }, - { - name: 'h3-cluster-layer', - viewState: { - latitude: 37.78, - longitude: -122.45, - zoom: 11, - pitch: 0, - bearing: 0 - }, - layers: [ - new H3ClusterLayer({ - data: ['882830829bfffff'], - opacity: 0.8, - getHexagons: d => h3.kRing(d, 6), - getLineWidth: 100, - stroked: true, - filled: false - }) - ], - goldenImage: './test/render/golden-images/h3-cluster.png' - }, - { - name: 'bitmap-layer', - viewState: { - latitude: 37.75, - longitude: -122.4, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new BitmapLayer({ - opacity: 0.8, - bounds: [-122.45, 37.7, -122.35, 37.8], - image: ICON_ATLAS - }) - ], - onAfterRender: ({layers, done}) => { - if (layers[0].state.bitmapTexture) { - done(); - } - }, - goldenImage: './test/render/golden-images/bitmap.png' - }, - { - name: 'trips-layer-3d', - viewState: { - latitude: 37.75, - longitude: -122.45, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new TripsLayer({ - id: 'trips-3d', - data: dataSamples.trips, - opacity: 0.8, - getPath: d => [d[0].begin_shape].concat(d.map(leg => leg.end_shape)), - getTimestamps: d => [d[0].begin_time].concat(d.map(leg => leg.end_time)), - getColor: [253, 128, 93], - widthMinPixels: 4, - rounded: true, - trailLength: 500, - currentTime: 500 - }) - ], - goldenImage: './test/render/golden-images/trips.png' - }, - { - name: 'post-process-effects', - effects: [effect1, effect2], - viewState: { - latitude: 37.751537058389985, - longitude: -122.42694203247012, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new ScatterplotLayer({ - id: 'post-process-effects', - data: dataSamples.points, - getPosition: d => d.COORDINATES, - getFillColor: d => [255, 128, 0], - getRadius: d => d.SPACES, - pickable: true, - radiusScale: 30, - radiusMinPixels: 1, - radiusMaxPixels: 30 - }) - ], - goldenImage: './test/render/golden-images/post-process-effects.png' - }, - { - name: 's2-layer', - viewState: { - latitude: 37.75, - longitude: -122.45, - zoom: 11.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new S2Layer({ - data: dataSamples.s2cells, - opacity: 0.8, - filled: true, - stroked: false, - getS2Token: f => f.token, - getFillColor: f => [f.value * 255, (1 - f.value) * 255, (1 - f.value) * 128], - pickable: true - }) - ], - goldenImage: './test/render/golden-images/s2-layer.png' - }, - { - name: 's2-layer-l2', - viewState: { - latitude: 40, - longitude: -100, - zoom: 1.5, - pitch: 0, - bearing: 0 - }, - layers: [ - new S2Layer({ - data: ['4b', '4d', '53', '55', '81', '87', '89', '8b'], - opacity: 0.6, - getS2Token: f => f, - filled: false, - stroked: true, - lineWidthMinPixels: 4, - pickable: true - }) - ], - goldenImage: './test/render/golden-images/s2-layer-l2.png' - }, - { - name: 'simple-mesh-layer-lnglat', - viewState: { - latitude: 37.75, - longitude: -122.45, - zoom: 14, - pitch: 0, - bearing: 0 - }, - layers: [ - new SimpleMeshLayer({ - id: 'simple-mesh-layer-lnglat', - data: dataSamples.meshSampleData, - mesh: cube, - sizeScale: 30, - modelMatrix: new Matrix4().translate([0, 0, 1000]), - coordinateOrigin: [-122.45, 37.75, 0], - coordinateSystem: COORDINATE_SYSTEM.LNGLAT_OFFSETS, - getPosition: d => [d.position[0] / 1e5, d.position[1] / 1e5, 10], - getColor: d => d.color, - getOrientation: d => d.orientation - }) - ], - goldenImage: './test/render/golden-images/simple-mesh-layer-lnglat.png' - }, - { - name: 'simple-mesh-layer-cartesian', - viewState: { - target: [0, 0, 0], - rotationX: 0, - rotationOrbit: 0, - orbitAxis: 'Y', - fov: 30, - zoom: -1.5 - }, - views: [ - new OrbitView({ - near: 0.1, - far: 2 - }) - ], - layers: [ - new SimpleMeshLayer({ - id: 'simple-mesh-layer-cartesian', - data: dataSamples.meshSampleData, - mesh: cube, - sizeScale: 30, - coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, - modelMatrix: new Matrix4().rotateX((-45 / 180) * Math.PI), - getPosition: d => d.position, - getColor: d => d.color, - getOrientation: d => d.orientation - }) - ], - goldenImage: './test/render/golden-images/simple-mesh-layer-cartesian.png' - }, - { - name: 'simple-mesh-layer-meter-offsets', - viewState: { - latitude: 37.75, - longitude: -122.45, - zoom: 14, - pitch: 0, - bearing: 0 - }, - layers: [ - new SimpleMeshLayer({ - id: 'simple-mesh-layer-meter-offsets', - data: dataSamples.meshSampleData, - mesh: cube, - sizeScale: 30, - coordinateOrigin: [-122.45, 37.75, 0], - coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS, - modelMatrix: new Matrix4().rotateX((-45 / 180) * Math.PI), - getPosition: d => d.position, - getColor: d => d.color, - getOrientation: d => d.orientation - }) - ], - goldenImage: './test/render/golden-images/simple-mesh-layer-meter-offsets.png' - }, - { - name: 'binary', - views: new OrthographicView(), - viewState: { - target: [7, 7, 0], - zoom: 4.5 - }, - layers: [ - new SolidPolygonLayer({ - id: 'binary-polygons', - data: { - length: 2, - startIndices: [0, 3], - attributes: { - indices: new Uint16Array([0, 1, 2, 3, 4, 5, 4, 5, 6]), - getPolygon: {value: new Float64Array(BINARY_DATA), size: 3, offset: 24, stride: 48}, - getFillColor: { - value: new Float32Array(BINARY_DATA), - size: 3, - stride: 24, - normalized: false - } - } - }, - _normalize: false, - getWidth: 0.5 - }), - - new PathLayer({ - id: 'binary-paths', - data: { - length: 2, - startIndices: [0, 3], - attributes: { - getPath: {value: new Float32Array(BINARY_DATA), size: 3, offset: 12, stride: 24}, - getColor: {value: new Float32Array(BINARY_DATA), size: 3, stride: 24, normalized: false} - } - }, - _pathType: 'open', - getWidth: 0.5 - }), - - new ScatterplotLayer({ - id: 'binary-points', - data: { - length: 7, - attributes: { - getPosition: {value: new Float64Array(BINARY_DATA), size: 3, offset: 24, stride: 48}, - getFillColor: { - value: new Float32Array(BINARY_DATA), - size: 3, - stride: 24, - normalized: false - } - } - }, - getRadius: 1 - }) - ], - goldenImage: './test/render/golden-images/binary.png' - }, - { - name: 'map-repeat', - views: new MapView({repeat: true}), - viewState: { - latitude: 0, - longitude: 0, - zoom: 0, - pitch: 0, - bearing: 0 - }, - layers: [ - new ScatterplotLayer({ - data: h3.getRes0Indexes(), - getPosition: d => h3.h3ToGeo(d).reverse(), - radiusMinPixels: 4, - getFillColor: [255, 0, 0] - }) - ], - goldenImage: './test/render/golden-images/map-repeat.png' - } -]; diff --git a/test/render/test-cases/column-layer.js b/test/render/test-cases/column-layer.js new file mode 100644 index 00000000000..23c348ec540 --- /dev/null +++ b/test/render/test-cases/column-layer.js @@ -0,0 +1,79 @@ +import {ColumnLayer, GridCellLayer} from '@deck.gl/layers'; +import {hexagons, worldGrid} from 'deck.gl-test/data'; + +export default [ + { + name: 'gridcell-lnglat', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new GridCellLayer({ + id: 'gridcell-lnglat', + data: worldGrid.data, + cellSize: worldGrid.cellSize, + extruded: true, + getFillColor: g => [245, 166, g.value * 255, 255], + getElevation: h => h.value * 5000 + }) + ], + goldenImage: './test/render/golden-images/gridcell-lnglat.png' + }, + { + name: 'column-lnglat', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 30, + bearing: 0, + orthographic: true + }, + layers: [ + new ColumnLayer({ + id: 'column-lnglat', + data: hexagons, + radius: 250, + angle: Math.PI / 2, + coverage: 1, + extruded: true, + getPosition: h => h.centroid, + getFillColor: h => [48, 128, h.value * 255, 255], + getElevation: h => h.value * 5000 + }) + ], + goldenImage: './test/render/golden-images/column-lnglat.png' + }, + { + name: 'column-lnglat-stroke', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0, + orthographic: true + }, + layers: [ + new ColumnLayer({ + id: 'column-lnglat', + data: hexagons, + radius: 250, + angle: Math.PI / 2, + coverage: 1, + extruded: false, + stroked: true, + lineWidthUnits: 'pixels', + getPosition: h => h.centroid, + getFillColor: h => [48, 128, h.value * 255, 255], + getLineColor: [255, 255, 255], + getLineWidth: 4 + }) + ], + goldenImage: './test/render/golden-images/column-lnglat-stroke.png' + } +]; diff --git a/test/render/test-cases/contour-layer.js b/test/render/test-cases/contour-layer.js new file mode 100644 index 00000000000..01ebb31a8d4 --- /dev/null +++ b/test/render/test-cases/contour-layer.js @@ -0,0 +1,136 @@ +import {OrthographicView, COORDINATE_SYSTEM} from '@deck.gl/core'; +import {ContourLayer} from '@deck.gl/aggregation-layers'; +import {points} from 'deck.gl-test/data'; + +import {WIDTH, HEIGHT} from '../constants'; +import {screenSpaceData} from './screen-grid-layer'; + +export default [ + { + name: 'contour-infoviz', + views: [new OrthographicView()], + viewState: { + left: -WIDTH / 2, + top: -HEIGHT / 2, + right: WIDTH / 2, + bottom: HEIGHT / 2, + zoom: 0.1 + }, + layers: [ + new ContourLayer({ + id: 'contour-infoviz', + data: screenSpaceData, + getPosition: d => d, + coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, + cellSize: 40, + contours: [ + {threshold: 1, color: [50, 50, 50]}, + {threshold: 2, color: [100, 100, 100]}, + {threshold: 3, color: [150, 150, 150]} + ], + gpuAggregation: true + }) + ], + goldenImage: './test/render/golden-images/contour-infoviz.png' + }, + { + name: 'contour-isobands-infoviz', + views: [new OrthographicView()], + viewState: { + left: -WIDTH / 2, + top: -HEIGHT / 2, + right: WIDTH / 2, + bottom: HEIGHT / 2 + }, + layers: [ + new ContourLayer({ + id: 'contour-isobands-infoviz', + data: screenSpaceData, + getPosition: d => d, + coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, + cellSize: 40, + contours: [ + {threshold: [1, 2], color: [150, 0, 0]}, + {threshold: [2, 5], color: [0, 150, 0]} + ], + gpuAggregation: false + }) + ], + goldenImage: './test/render/golden-images/contour-infoviz_border_ref.png' + }, + { + name: 'contour-lnglat-cpu-aggregation', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new ContourLayer({ + id: 'contour-lnglat-cpu-aggregation', + data: points, + cellSize: 200, + getPosition: d => d.COORDINATES, + contours: [ + {threshold: 1, color: [255, 0, 0], strokeWidth: 6}, + {threshold: 5, color: [0, 255, 0], strokeWidth: 3}, + {threshold: 15, color: [0, 0, 255]} + ], + gpuAggregation: false + }) + ], + goldenImage: './test/render/golden-images/contour-lnglat.png' + }, + { + name: 'contour-lnglat', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new ContourLayer({ + id: 'contour-lnglat', + data: points, + cellSize: 200, + getPosition: d => d.COORDINATES, + contours: [ + {threshold: 1, color: [255, 0, 0], strokeWidth: 6}, + {threshold: 5, color: [0, 255, 0], strokeWidth: 3}, + {threshold: 15, color: [0, 0, 255]} + ], + gpuAggregation: true + }) + ], + goldenImage: './test/render/golden-images/contour-lnglat.png' + }, + { + name: 'contour-isobands-lnglat', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new ContourLayer({ + id: 'contour-isobands-lnglat', + data: points, + cellSize: 200, + getPosition: d => d.COORDINATES, + contours: [ + {threshold: [1, 5], color: [255, 0, 0], strokeWidth: 6}, + {threshold: [5, 15], color: [0, 255, 0], strokeWidth: 3}, + {threshold: [15, 1000], color: [0, 0, 255]} + ], + gpuAggregation: true + }) + ], + goldenImage: './test/render/golden-images/contour-isobands-lnglat.png' + } +]; diff --git a/test/render/test-cases/core-layers.js b/test/render/test-cases/core-layers.js new file mode 100644 index 00000000000..b71eef0ed0e --- /dev/null +++ b/test/render/test-cases/core-layers.js @@ -0,0 +1,239 @@ +/* eslint-disable callback-return */ +import {COORDINATE_SYSTEM, OrthographicView} from '@deck.gl/core'; +import { + ScatterplotLayer, + BitmapLayer, + SolidPolygonLayer, + PathLayer, + ArcLayer, + LineLayer +} from '@deck.gl/layers'; + +import {Fp64Extension} from '@deck.gl/extensions'; +import * as dataSamples from 'deck.gl-test/data'; + +// prettier-ignore +const BINARY_DATA = [ + 0.7, 0.2, 0, 0, 0, 0, + 0.8, 0.6, 0, 0, 5, 0, + 0.3, 0.5, 0, 5, 5, 0, + 0, 0.8, 0.6, 5, 10, 0, + 0, 0.5, 0.7, 10, 10, 0, + 0.3, 0, 0.8, 10, 15, 0, + 0.8, 0, 0.6, 15, 15, 0 +]; + +export default [ + { + name: 'scatterplot-lnglat', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new ScatterplotLayer({ + id: 'scatterplot-lnglat', + data: dataSamples.points, + getPosition: d => d.COORDINATES, + getFillColor: d => [255, 128, 0], + getRadius: d => d.SPACES, + pickable: true, + radiusScale: 30, + radiusMinPixels: 1, + radiusMaxPixels: 30 + }) + ], + goldenImage: './test/render/golden-images/scatterplot-lnglat.png' + }, + { + name: 'scatterplot-lnglat-64', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new ScatterplotLayer({ + id: 'scatterplot-lnglat', + data: dataSamples.points, + coordinateSystem: COORDINATE_SYSTEM.LNGLAT, + getPosition: d => d.COORDINATES, + getFillColor: d => [255, 128, 0], + getRadius: d => d.SPACES, + pickable: true, + radiusScale: 30, + radiusMinPixels: 1, + radiusMaxPixels: 30, + extensions: [new Fp64Extension()] + }) + ], + goldenImage: './test/render/golden-images/scatterplot-lnglat.png' + }, + { + name: 'arc-lnglat', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 20, + bearing: 0 + }, + layers: [ + new ArcLayer({ + id: 'arc-lnglat', + data: dataSamples.routes, + opacity: 0.8, + getWidth: 2, + getSourcePosition: d => d.START, + getTargetPosition: d => d.END, + getSourceColor: d => [64, 255, 0], + getTargetColor: d => [0, 128, 200] + }) + ], + goldenImage: './test/render/golden-images/arc-lnglat.png' + }, + { + name: 'arc-lnglat-3d', + viewState: { + latitude: 37.788, + longitude: -122.45, + zoom: 13, + pitch: 60, + bearing: 0 + }, + layers: [ + new ArcLayer({ + id: 'arc-lnglat-3d', + data: [ + {source: [-122.46, 37.77, -150], target: [-122.44, 37.77, 450], height: 0.5}, + {source: [-122.46, 37.77, -150], target: [-122.44, 37.77, 450], height: 1}, + {source: [-122.46, 37.77, -150], target: [-122.44, 37.77, 450], height: 2}, + {source: [-122.46, 37.78, 600], target: [-122.44, 37.78, 0], height: 0.5}, + {source: [-122.46, 37.78, 600], target: [-122.44, 37.78, 0], height: 1}, + {source: [-122.46, 37.78, 600], target: [-122.44, 37.78, 0], height: 2} + ], + opacity: 0.8, + getWidth: 4, + getSourcePosition: d => d.source, + getTargetPosition: d => d.target, + getHeight: d => d.height, + getSourceColor: d => [255, 255, 0], + getTargetColor: d => [255, 0, 0] + }) + ], + goldenImage: './test/render/golden-images/arc-lnglat-3d.png' + }, + { + name: 'line-lnglat', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new LineLayer({ + id: 'line-lnglat', + data: dataSamples.routes, + opacity: 0.8, + getWidth: 0, + widthMinPixels: 2, + getSourcePosition: d => d.START, + getTargetPosition: d => d.END, + getColor: d => (d.SERVICE === 'WEEKDAY' ? [255, 64, 0] : [255, 200, 0]), + pickable: true + }) + ], + goldenImage: './test/render/golden-images/line-lnglat.png' + }, + { + name: 'bitmap-layer', + viewState: { + latitude: 37.75, + longitude: -122.4, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new BitmapLayer({ + opacity: 0.8, + bounds: [-122.45, 37.7, -122.35, 37.8], + image: './test/data/icon-atlas.png' + }) + ], + onAfterRender: ({layers, done}) => { + if (layers[0].state.bitmapTexture) { + done(); + } + }, + goldenImage: './test/render/golden-images/bitmap.png' + }, + { + name: 'binary', + views: new OrthographicView(), + viewState: { + target: [7, 7, 0], + zoom: 4.5 + }, + layers: [ + new SolidPolygonLayer({ + id: 'binary-polygons', + data: { + length: 2, + startIndices: [0, 3], + attributes: { + indices: new Uint16Array([0, 1, 2, 3, 4, 5, 4, 5, 6]), + getPolygon: {value: new Float64Array(BINARY_DATA), size: 3, offset: 24, stride: 48}, + getFillColor: { + value: new Float32Array(BINARY_DATA), + size: 3, + stride: 24, + normalized: false + } + } + }, + _normalize: false, + getWidth: 0.5 + }), + + new PathLayer({ + id: 'binary-paths', + data: { + length: 2, + startIndices: [0, 3], + attributes: { + getPath: {value: new Float32Array(BINARY_DATA), size: 3, offset: 12, stride: 24}, + getColor: {value: new Float32Array(BINARY_DATA), size: 3, stride: 24, normalized: false} + } + }, + _pathType: 'open', + getWidth: 0.5 + }), + + new ScatterplotLayer({ + id: 'binary-points', + data: { + length: 7, + attributes: { + getPosition: {value: new Float64Array(BINARY_DATA), size: 3, offset: 24, stride: 48}, + getFillColor: { + value: new Float32Array(BINARY_DATA), + size: 3, + stride: 24, + normalized: false + } + } + }, + getRadius: 1 + }) + ], + goldenImage: './test/render/golden-images/binary.png' + } +]; diff --git a/test/render/test-cases/effects.js b/test/render/test-cases/effects.js new file mode 100644 index 00000000000..3e37b9c8182 --- /dev/null +++ b/test/render/test-cases/effects.js @@ -0,0 +1,92 @@ +import {PostProcessEffect, LightingEffect, AmbientLight, DirectionalLight} from '@deck.gl/core'; +import {zoomBlur, vignette} from '@luma.gl/shadertools'; +import {hexagons, points} from 'deck.gl-test/data'; + +import {ScatterplotLayer, ColumnLayer} from '@deck.gl/layers'; +import {SimpleMeshLayer} from '@deck.gl/mesh-layers'; + +import {CubeGeometry} from '@luma.gl/core'; +const cube = new CubeGeometry(); + +export default [ + { + name: 'shadow-effect', + effects: [ + new LightingEffect({ + ambientLight: new AmbientLight({ + color: [255, 255, 255], + intensity: 1.0 + }), + dirLight: new DirectionalLight({ + color: [255, 255, 255], + intensity: 1.0, + direction: [-10, 2, -15], + _shadow: true + }) + }) + ], + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 30, + bearing: 0, + orthographic: true + }, + layers: [ + new ColumnLayer({ + id: 'column-layer', + data: hexagons, + radius: 250, + angle: Math.PI / 2, + coverage: 1, + extruded: true, + pickable: true, + getPosition: h => h.centroid, + getFillColor: h => [48, 128, h.value * 255, 255], + getElevation: h => h.value * 5000 + }), + new SimpleMeshLayer({ + id: 'mesh-layer', + data: points.slice(0, 50), + mesh: cube, + sizeScale: 150, + shadowEnabled: false, + getPosition: d => d.COORDINATES, + getColor: [200, 200, 200], + getTranslation: d => [0, 0, d.RACKS * 500], + getOrientation: d => [45, 0, d.SPACES * 10] + }) + ], + goldenImage: './test/render/golden-images/shadow-effect.png' + }, + + { + name: 'post-process-effects', + effects: [new PostProcessEffect(zoomBlur, {strength: 0.6}), new PostProcessEffect(vignette)], + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new ScatterplotLayer({ + id: 'post-process-effects', + data: points, + getPosition: d => d.COORDINATES, + getFillColor: d => [255, 128, 0], + getRadius: d => d.SPACES, + pickable: true, + radiusScale: 30, + radiusMinPixels: 1, + radiusMaxPixels: 30 + }) + ], + imageDiffOptions: { + threshold: 0.985 + }, + goldenImage: './test/render/golden-images/post-process-effects.png' + } +]; diff --git a/test/render/test-cases/geojson-layer.js b/test/render/test-cases/geojson-layer.js new file mode 100644 index 00000000000..170a0ea75be --- /dev/null +++ b/test/render/test-cases/geojson-layer.js @@ -0,0 +1,101 @@ +import {GeoJsonLayer} from '@deck.gl/layers'; +import {geojson, geojsonLarge} from 'deck.gl-test/data'; +import {parseColor, setOpacity} from '../../../examples/layer-browser/src/utils/color'; + +const MARKER_SIZE_MAP = { + small: 200, + medium: 500, + large: 1000 +}; + +export default [ + { + name: 'geojson-lnglat', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new GeoJsonLayer({ + id: 'geojson-lnglat', + data: geojson, + opacity: 0.8, + getRadius: f => MARKER_SIZE_MAP[f.properties['marker-size']], + getFillColor: f => { + const color = parseColor(f.properties.fill || f.properties['marker-color']); + const opacity = (f.properties['fill-opacity'] || 1) * 255; + return setOpacity(color, opacity); + }, + getLineColor: f => { + const color = parseColor(f.properties.stroke); + const opacity = (f.properties['stroke-opacity'] || 1) * 255; + return setOpacity(color, opacity); + }, + getLineWidth: f => f.properties['stroke-width'], + getElevation: f => 500, + lineWidthScale: 10, + lineWidthMinPixels: 1, + pickable: true + }) + ], + goldenImage: './test/render/golden-images/geojson-lnglat.png' + }, + { + name: 'geojson-extruded-lnglat', + viewState: { + latitude: 37.78, + longitude: -122.45, + zoom: 12, + pitch: 0, + bearing: 0 + }, + layers: [ + new GeoJsonLayer({ + id: 'geojson-extruded-lnglat', + data: geojson, + opacity: 0.8, + extruded: true, + wireframe: true, + getRadius: f => MARKER_SIZE_MAP[f.properties['marker-size']], + getFillColor: f => { + const color = parseColor(f.properties.fill || f.properties['marker-color']); + const opacity = (f.properties['fill-opacity'] || 1) * 255; + return setOpacity(color, opacity); + }, + getLineColor: f => { + const color = parseColor(f.properties.stroke); + const opacity = (f.properties['stroke-opacity'] || 1) * 255; + return setOpacity(color, opacity); + }, + getLineWidth: f => f.properties['stroke-width'], + getElevation: f => 500, + lineWidthScale: 10, + lineWidthMinPixels: 1, + pickable: true + }) + ], + goldenImage: './test/render/golden-images/geojson-extruded-lnglat.png' + }, + { + name: 'geojson-large', + viewState: { + longitude: -95, + latitude: 60, + zoom: 3 + }, + layers: [ + new GeoJsonLayer({ + id: 'geojson-layer-large', + data: geojsonLarge, + stroked: false, + filled: true, + opacity: 0.5, + getFillColor: [200, 0, 0] + }) + ], + goldenImage: './test/render/golden-images/geojson-large.png' + } +]; diff --git a/test/render/test-cases/grid-layer.js b/test/render/test-cases/grid-layer.js new file mode 100644 index 00000000000..4bc1a0c642d --- /dev/null +++ b/test/render/test-cases/grid-layer.js @@ -0,0 +1,190 @@ +import {GPUGridLayer, GridLayer, CPUGridLayer} from '@deck.gl/aggregation-layers'; +import * as dataSamples from 'deck.gl-test/data'; + +const VIEW_STATE = { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 +}; + +const VIEW_STATE_SIDE = { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 80, + bearing: 0 +}; + +const PROPS = { + data: dataSamples.points, + cellSize: 200, + extruded: true, + getPosition: d => d.COORDINATES +}; + +const GOLDEN_IMAGE = './test/render/golden-images/grid-lnglat.png'; +const GOLDEN_IMAGE_SIDE = './test/render/golden-images/grid-lnglat-side.png'; + +export function getMean(pts, key) { + const filtered = pts.filter(pt => Number.isFinite(pt[key])); + + return filtered.length + ? filtered.reduce((accu, curr) => accu + curr[key], 0) / filtered.length + : null; +} + +export function getMax(pts, key) { + const filtered = pts.filter(pt => Number.isFinite(pt[key])); + + return filtered.length + ? filtered.reduce((accu, curr) => (curr[key] > accu ? curr[key] : accu), -Infinity) + : null; +} + +export default [ + { + name: 'cpu-grid-layer:quantile', + viewState: VIEW_STATE, + layers: [ + new CPUGridLayer( + Object.assign({}, PROPS, { + id: 'cpu-grid-layer:quantile', + getColorValue: points => getMean(points, 'SPACES'), + getElevationValue: points => getMax(points, 'SPACES'), + colorScaleType: 'quantile' + }) + ) + ], + goldenImage: './test/render/golden-images/cpu-layer-quantile.png' + }, + { + name: 'cpu-grid-layer:ordinal', + viewState: VIEW_STATE, + layers: [ + new CPUGridLayer( + Object.assign({}, PROPS, { + id: 'cpu-grid-layer:ordinal', + getColorValue: points => getMean(points, 'SPACES'), + getElevationValue: points => getMax(points, 'SPACES'), + colorScaleType: 'ordinal' + }) + ) + ], + goldenImage: './test/render/golden-images/cpu-layer-ordinal.png' + }, + { + name: 'cpu-grid-layer:value-accessors', + viewState: VIEW_STATE, + layers: [ + new CPUGridLayer( + Object.assign({}, PROPS, { + id: 'cpu-grid-layer:value-accessors', + getColorValue: points => getMean(points, 'SPACES'), + getElevationValue: points => getMax(points, 'SPACES') + }) + ) + ], + goldenImage: GOLDEN_IMAGE + }, + { + name: 'cpu-grid-layer:weight-accessors and operation', + viewState: VIEW_STATE, + layers: [ + new CPUGridLayer( + Object.assign({}, PROPS, { + id: 'cpu-grid-layer:weight-accessors and operation', + getColorWeight: x => x.SPACES, + colorAggregation: 'MEAN', + getElevationWeight: x => x.SPACES, + elevationAggregation: 'MAX' + }) + ) + ], + goldenImage: GOLDEN_IMAGE + }, + { + name: 'grid-layer:cpu', + viewState: VIEW_STATE, + layers: [ + new GridLayer( + Object.assign({}, PROPS, { + id: 'grid-layer:cpu', + getColorWeight: x => x.SPACES, + colorAggregation: 'MEAN', + getElevationWeight: x => x.SPACES, + elevationAggregation: 'MAX', + gpuAggregation: false + }) + ) + ], + goldenImage: GOLDEN_IMAGE + }, + { + name: 'grid-layer:gpu', + viewState: VIEW_STATE, + layers: [ + new GridLayer( + Object.assign({}, PROPS, { + id: 'grid-layer:gpu', + getColorWeight: x => x.SPACES, + colorAggregation: 'MEAN', + getElevationWeight: x => x.SPACES, + elevationAggregation: 'MAX', + gpuAggregation: true + }) + ) + ], + goldenImage: GOLDEN_IMAGE + }, + { + name: 'grid-layer:cpu-side', + viewState: VIEW_STATE_SIDE, + layers: [ + new GridLayer( + Object.assign({}, PROPS, { + id: 'grid-layer:cpu-side', + getColorWeight: x => x.SPACES, + colorAggregation: 'MEAN', + getElevationWeight: x => x.SPACES, + elevationAggregation: 'MAX', + gpuAggregation: false, + elevationScale: 5 + }) + ) + ], + goldenImage: GOLDEN_IMAGE_SIDE + }, + { + name: 'grid-layer:gpu-side', + viewState: VIEW_STATE_SIDE, + layers: [ + new GridLayer( + Object.assign({}, PROPS, { + id: 'grid-layer:gpu-side', + getColorWeight: x => x.SPACES, + colorAggregation: 'MEAN', + getElevationWeight: x => x.SPACES, + elevationAggregation: 'MAX', + gpuAggregation: true, + elevationScale: 5 + }) + ) + ], + goldenImage: GOLDEN_IMAGE_SIDE + }, + { + name: 'gpu-grid-lnglat', + viewState: VIEW_STATE, + layers: [ + new GPUGridLayer( + Object.assign({}, PROPS, { + id: 'gpu-grid-lnglat', + gpuAggregation: true + }) + ) + ], + goldenImage: './test/render/golden-images/gpu-grid-lnglat.png' + } +]; diff --git a/test/render/test-cases/h3-layers.js b/test/render/test-cases/h3-layers.js new file mode 100644 index 00000000000..22eb31c43ea --- /dev/null +++ b/test/render/test-cases/h3-layers.js @@ -0,0 +1,137 @@ +import {H3HexagonLayer, H3ClusterLayer} from '@deck.gl/geo-layers'; + +import * as h3 from 'h3-js'; + +export default [ + { + name: 'h3-hexagon-layer', + viewState: { + latitude: 37.78, + longitude: -122.45, + zoom: 11, + pitch: 30, + bearing: 0 + }, + layers: [ + new H3HexagonLayer({ + data: h3.kRing('882830829bfffff', 4), + opacity: 0.8, + getHexagon: d => d, + getFillColor: (d, {index}) => [255, index * 5, 0], + getElevation: (d, {index}) => index * 100 + }) + ], + goldenImage: './test/render/golden-images/h3-hexagon.png' + }, + { + name: 'h3-hexagon-layer-high-precision', + viewState: { + latitude: 50.103, + longitude: -143.478, + zoom: 13, + pitch: 0, + bearing: 0 + }, + layers: [ + new H3HexagonLayer({ + data: h3.kRing('891c0000003ffff', 4), + opacity: 0.8, + getHexagon: d => d, + getFillColor: (d, {index}) => [255, index * 5, 0], + getElevation: (d, {index}) => index * 10 + }) + ], + goldenImage: './test/render/golden-images/h3-hexagon-high-precision.png' + }, + { + name: 'h3-hexagon-layer-flat', + viewState: { + latitude: 37.78, + longitude: -122.45, + zoom: 12, + pitch: 0, + bearing: 0 + }, + layers: [ + new H3HexagonLayer({ + data: h3.kRing('882830829bfffff', 4), + opacity: 0.8, + getHexagon: d => d, + extruded: false, + stroked: true, + getFillColor: (d, {index}) => [255, index * 5, 0], + getLineColor: [255, 255, 255], + lineWidthMinPixels: 2 + }) + ], + goldenImage: './test/render/golden-images/h3-hexagon-flat.png' + }, + { + name: 'h3-hexagon-layer-flat-high-precision', + viewState: { + latitude: 37.78, + longitude: -122.45, + zoom: 12, + pitch: 0, + bearing: 0 + }, + layers: [ + new H3HexagonLayer({ + data: h3.kRing('882830829bfffff', 4), + opacity: 0.8, + getHexagon: d => d, + extruded: false, + stroked: true, + highPrecision: true, + getFillColor: (d, {index}) => [255, index * 5, 0], + getLineColor: [255, 255, 255], + lineWidthMinPixels: 2 + }) + ], + goldenImage: './test/render/golden-images/h3-hexagon-flat.png' + }, + { + name: 'h3-hexagon-layer-low-zoom', + viewState: { + latitude: 0, + longitude: 0, + zoom: 0, + pitch: 0, + bearing: 0 + }, + layers: [ + new H3HexagonLayer({ + data: h3.getRes0Indexes(), + opacity: 0.8, + getHexagon: d => d, + extruded: false, + filled: false, + stroked: true, + getLineColor: [0, 0, 0], + lineWidthMinPixels: 2 + }) + ], + goldenImage: './test/render/golden-images/h3-hexagon-low-zoom.png' + }, + { + name: 'h3-cluster-layer', + viewState: { + latitude: 37.78, + longitude: -122.45, + zoom: 11, + pitch: 0, + bearing: 0 + }, + layers: [ + new H3ClusterLayer({ + data: ['882830829bfffff'], + opacity: 0.8, + getHexagons: d => h3.kRing(d, 6), + getLineWidth: 100, + stroked: true, + filled: false + }) + ], + goldenImage: './test/render/golden-images/h3-cluster.png' + } +]; diff --git a/test/render/test-cases/heatmap-layer.js b/test/render/test-cases/heatmap-layer.js new file mode 100644 index 00000000000..144548100ea --- /dev/null +++ b/test/render/test-cases/heatmap-layer.js @@ -0,0 +1,49 @@ +import {HeatmapLayer} from '@deck.gl/aggregation-layers'; +import {points} from 'deck.gl-test/data'; + +export default [ + { + name: 'heatmap-lnglat', + viewState: { + latitude: 37.75, + longitude: -122.44, + zoom: 11.5, + pitch: 30, + bearing: 0 + }, + layers: [ + new HeatmapLayer({ + id: 'heatmap-lnglat', + data: points, + opacity: 0.8, + pickable: false, + getPosition: d => d.COORDINATES, + radiusPixels: 35, + threshold: 0.1 + }) + ], + goldenImage: './test/render/golden-images/heatmap-lnglat.png' + }, + { + name: 'heatmap-lnglat-high-zoom', + viewState: { + latitude: 37.76, + longitude: -122.42, + zoom: 14, + pitch: 30, + bearing: 0 + }, + layers: [ + new HeatmapLayer({ + id: 'heatmap-lnglat-2', + data: points, + opacity: 0.8, + pickable: false, + getPosition: d => d.COORDINATES, + radiusPixels: 35, + threshold: 0.1 + }) + ], + goldenImage: './test/render/golden-images/heatmap-lnglat-high-zoom.png' + } +]; diff --git a/test/render/test-cases/hexagon-layer.js b/test/render/test-cases/hexagon-layer.js new file mode 100644 index 00000000000..3f39b77661b --- /dev/null +++ b/test/render/test-cases/hexagon-layer.js @@ -0,0 +1,57 @@ +import {HexagonLayer} from '@deck.gl/aggregation-layers'; +import * as dataSamples from 'deck.gl-test/data'; + +import {getMean, getMax} from './grid-layer'; + +const VIEW_STATE = { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 20, + bearing: 0 +}; + +const PROPS = { + data: dataSamples.points, + extruded: true, + radius: 1000, + elevationScale: 1, + elevationRange: [0, 3000], + coverage: 1, + getPosition: d => d.COORDINATES +}; + +const GOLDEN_IMAGE = './test/render/golden-images/hexagon-lnglat.png'; + +export default [ + { + name: 'hexagon-lnglat:value-accessors', + viewState: VIEW_STATE, + layers: [ + new HexagonLayer( + Object.assign({}, PROPS, { + id: 'hexagon-lnglat:value-accessors', + getColorValue: points => getMean(points, 'SPACES'), + getElevationValue: points => getMax(points, 'SPACES') + }) + ) + ], + goldenImage: GOLDEN_IMAGE + }, + { + name: 'hexagon:weight-accessors and operation', + viewState: VIEW_STATE, + layers: [ + new HexagonLayer( + Object.assign({}, PROPS, { + id: 'hexagon-lnglat:weight-accessors and operation', + getColorWeight: x => x.SPACES, + colorAggregation: 'MEAN', + getElevationWeight: x => x.SPACES, + elevationAggregation: 'MAX' + }) + ) + ], + goldenImage: GOLDEN_IMAGE + } +]; diff --git a/test/render/test-cases/icon-layer.js b/test/render/test-cases/icon-layer.js new file mode 100644 index 00000000000..eef50e1bec1 --- /dev/null +++ b/test/render/test-cases/icon-layer.js @@ -0,0 +1,234 @@ +/* eslint-disable callback-return */ +import {IconLayer} from '@deck.gl/layers'; +import {points, iconAtlas as iconMapping} from 'deck.gl-test/data'; + +const ICON_ATLAS = './test/data/icon-atlas.png'; + +export default [ + { + name: 'icon-lnglat', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + // rendering times + layers: [ + new IconLayer({ + id: 'icon-lnglat', + data: points, + iconAtlas: ICON_ATLAS, + iconMapping, + sizeScale: 12, + getPosition: d => d.COORDINATES, + getColor: d => [64, 64, 72], + getIcon: d => (d.PLACEMENT === 'SW' ? 'marker' : 'marker-warning'), + getSize: d => (d.RACKS > 2 ? 2 : 1), + opacity: 0.8 + }) + ], + onAfterRender: ({layers, done}) => { + if (layers[0].state.iconManager.getTexture()) { + done(); + } + }, + goldenImage: './test/render/golden-images/icon-lnglat.png' + }, + { + name: 'icon-lnglat-external-buffer', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + // rendering times + layers: [ + new IconLayer({ + id: 'icon-lnglat', + data: { + length: points.length, + attributes: { + getPosition: { + value: new Float32Array(points.flatMap(d => d.COORDINATES)), + size: 2 + }, + getSize: new Float32Array(points.flatMap(d => (d.RACKS > 2 ? 2 : 1))), + getIcon: { + value: new Uint8Array(points.flatMap(d => (d.PLACEMENT === 'SW' ? 1 : 2))), + size: 1 + } + } + }, + iconAtlas: ICON_ATLAS, + iconMapping: {1: iconMapping.marker, 2: iconMapping['marker-warning']}, + sizeScale: 12, + getColor: [64, 64, 72], + opacity: 0.8 + }) + ], + onAfterRender: ({layers, done}) => { + if (layers[0].state.iconManager.getTexture()) { + done(); + } + }, + goldenImage: './test/render/golden-images/icon-lnglat.png' + }, + { + name: 'icon-lnglat-facing-up', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 60, + bearing: 0 + }, + layers: [ + new IconLayer({ + id: 'icon-lnglat', + data: points, + iconAtlas: ICON_ATLAS, + billboard: false, + iconMapping, + sizeScale: 12, + getPosition: d => d.COORDINATES, + getColor: d => [64, 64, 72], + getIcon: d => (d.PLACEMENT === 'SW' ? 'marker' : 'marker-warning'), + getSize: d => (d.RACKS > 2 ? 2 : 1), + opacity: 0.8 + }) + ], + onAfterRender: ({layers, done}) => { + if (layers[0].state.iconManager.getTexture()) { + done(); + } + }, + goldenImage: './test/render/golden-images/icon-lnglat-facing-up.png' + }, + { + name: 'icon-lnglat-auto', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 12, + pitch: 0, + bearing: 0 + }, + layers: [ + new IconLayer({ + id: 'icon-lnglat-auto', + data: points, + updateTriggers: { + getIcon: 1 + }, + sizeScale: 24, + opacity: 0.8, + getSize: d => (d.RACKS > 2 ? 2 : 1), + getPosition: d => d.COORDINATES, + getColor: d => [64, 64, 72], + getIcon: d => { + if (d.PLACEMENT === 'SW') { + return Object.assign({}, iconMapping.marker, { + url: './test/data/icon-marker.png' + }); + } + return Object.assign({}, iconMapping['marker-warning'], { + url: './test/data/icon-warning.png' + }); + } + }) + ], + onAfterRender: ({layers, done}) => { + if (layers[0].state.iconManager.loaded) { + // data is loaded + done(); + } + }, + goldenImage: './test/render/golden-images/icon-lnglat-large.png' + }, + // This is based on last test case + // use the same layer id 'icon-lnglat-auto' as last test case to trigger the layer update and test texture resize logic + { + name: 'icon-lnglat-auto-2', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 12, + pitch: 0, + bearing: 0 + }, + layers: [ + new IconLayer({ + id: 'icon-lnglat-auto', + data: points, + updateTriggers: { + getIcon: 2 + }, + sizeScale: 24, + opacity: 0.8, + getSize: d => (d.RACKS > 2 ? 2 : 1), + getPosition: d => d.COORDINATES, + getColor: d => [64, 64, 72], + getIcon: d => { + if (d.PLACEMENT === 'SW') { + return Object.assign({}, iconMapping.marker, { + url: './test/data/icon-marker.png', + id: 'marker-large', + width: 256, + height: 256 + }); + } + return Object.assign({}, iconMapping['marker-warning'], { + id: 'warning-large', + url: './test/data/icon-warning.png', + width: 1024, + height: 1024 + }); + } + }) + ], + onAfterRender: ({layers, done}) => { + if (layers[0].state.iconManager.loaded) { + // data is loaded + done(); + } + }, + goldenImage: './test/render/golden-images/icon-lnglat-resize-texture.png' + }, + { + name: 'icon-meters', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + // rendering times + renderingTimes: 2, + layers: [ + new IconLayer({ + id: 'icon-meters', + data: points, + iconAtlas: ICON_ATLAS, + iconMapping, + sizeScale: 256, + sizeUnits: 'meters', + getPosition: d => d.COORDINATES, + getColor: d => [64, 64, 72], + getIcon: d => (d.PLACEMENT === 'SW' ? 'marker' : 'marker-warning'), + getSize: d => (d.RACKS > 2 ? 2 : 1), + opacity: 0.8 + }) + ], + onAfterRender: ({layers, done}) => { + if (layers[0].state.iconManager.getTexture()) { + done(); + } + }, + goldenImage: './test/render/golden-images/icon-lnglat.png' + } +]; diff --git a/test/render/test-cases/index.js b/test/render/test-cases/index.js new file mode 100644 index 00000000000..45d08700eed --- /dev/null +++ b/test/render/test-cases/index.js @@ -0,0 +1,46 @@ +// core layers +import coreLayersTests from './core-layers'; +import columnLayerTests from './column-layer'; +import geojsonLayerTests from './geojson-layer'; +import pathLayerTests from './path-layer'; +import pointCloudLayerTests from './point-cloud-layer'; +import polygonLayerTests from './polygon-layer'; +import iconLayerTests from './icon-layer'; +import textLayerTests from './text-layer'; +// aggregation-layers +import contourLayerTests from './contour-layer'; +import gridLayerTests from './grid-layer'; +import screenGridLayerTests from './screen-grid-layer'; +import heatmapLayerTests from './heatmap-layer'; +import hexagonLayerTests from './hexagon-layer'; +// geo-layers +import h3LayersTests from './h3-layers'; +import s2LayerTests from './s2-layer'; +import tripsLayerTests from './trips-layer'; +// mesh-layers +import simpleMeshLayerTests from './simple-mesh-layer'; +// other +import viewsTests from './views'; +import effectsTests from './effects'; + +export default [].concat( + coreLayersTests, + columnLayerTests, + geojsonLayerTests, + pathLayerTests, + pointCloudLayerTests, + polygonLayerTests, + iconLayerTests, + textLayerTests, + contourLayerTests, + gridLayerTests, + hexagonLayerTests, + screenGridLayerTests, + heatmapLayerTests, + h3LayersTests, + s2LayerTests, + tripsLayerTests, + simpleMeshLayerTests, + viewsTests, + effectsTests +); diff --git a/test/render/test-cases/path-layer.js b/test/render/test-cases/path-layer.js new file mode 100644 index 00000000000..58b544ba604 --- /dev/null +++ b/test/render/test-cases/path-layer.js @@ -0,0 +1,164 @@ +import {COORDINATE_SYSTEM} from '@deck.gl/core'; +import {PathLayer} from '@deck.gl/layers'; +import {PathStyleExtension} from '@deck.gl/extensions'; +import {zigzag, zigzag3D, meterPaths, positionOrigin} from 'deck.gl-test/data'; + +export default [ + { + name: 'path-miter', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new PathLayer({ + id: 'path-lnglat', + data: zigzag, + opacity: 0.6, + getPath: f => f.path, + getColor: f => [255, 0, 0], + getWidth: f => 200, + miterLimit: 0, + widthMinPixels: 1 + }) + ], + goldenImage: './test/render/golden-images/path-lnglat.png' + }, + { + name: 'path-rounded', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new PathLayer({ + id: 'path-lnglat', + data: zigzag, + opacity: 0.6, + getPath: f => f.path, + getColor: f => [255, 0, 0], + getWidth: f => 200, + rounded: true, + widthMinPixels: 1 + }) + ], + goldenImage: './test/render/golden-images/path-rounded.png' + }, + { + name: 'path-lnglat-binary', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new PathLayer({ + id: 'path-lnglat', + data: { + length: zigzag.length, + startIndices: zigzag.reduce( + (acc, d) => { + acc.push(acc[acc.length - 1] + d.path.length); + return acc; + }, + [0] + ), + attributes: { + getPath: { + value: new Float64Array(zigzag.flatMap(d => d.path.flat())), + size: 2 + }, + getColor: { + value: new Uint8Array(zigzag.flatMap(d => d.path.flatMap(p => [255, 0, 0]))), + size: 3 + } + } + }, + getWidth: 200, + miterLimit: 0, + opacity: 0.6, + widthMinPixels: 1 + }) + ], + goldenImage: './test/render/golden-images/path-lnglat.png' + }, + { + name: 'path-billboard', + viewState: { + latitude: 37.7518488, + longitude: -122.427699, + zoom: 16.5, + pitch: 55, + bearing: -20 + }, + layers: [ + new PathLayer({ + id: 'path-lnglat', + data: zigzag3D, + opacity: 0.6, + billboard: true, + getPath: f => f.path, + getColor: f => [128, 0, 0], + getWidth: f => 10 + }) + ], + goldenImage: './test/render/golden-images/path-billboard.png' + }, + { + name: 'path-meter', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new PathLayer({ + id: 'path-meter', + data: meterPaths, + getColor: f => [255, 0, 0], + getWidth: f => 10, + widthMinPixels: 1, + widthScale: 100, + sizeScale: 200, + rounded: false, + getMarkerPercentages: () => [], + coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS, + coordinateOrigin: positionOrigin + }) + ], + goldenImage: './test/render/golden-images/path-meter.png' + }, + { + name: 'path-offset', + viewState: { + latitude: 37.71, + longitude: -122.405, + zoom: 13 + }, + layers: [ + new PathLayer({ + id: 'path-offset', + data: [ + {path: [[-122.39, 37.7], [-122.42, 37.7], [-122.42, 37.72]], color: [255, 180, 0]}, + {path: [[-122.42, 37.72], [-122.42, 37.7], [-122.39, 37.7]], color: [80, 0, 255]} + ], + getPath: f => f.path, + getColor: f => f.color, + getWidth: 100, + getOffset: 1, + extensions: [new PathStyleExtension({offset: true})] + }) + ], + goldenImage: './test/render/golden-images/path-offset.png' + } +]; diff --git a/test/render/test-cases/point-cloud-layer.js b/test/render/test-cases/point-cloud-layer.js new file mode 100644 index 00000000000..6ff73f2652c --- /dev/null +++ b/test/render/test-cases/point-cloud-layer.js @@ -0,0 +1,86 @@ +import {OrbitView, COORDINATE_SYSTEM} from '@deck.gl/core'; +import {PointCloudLayer} from '@deck.gl/layers'; +import {getPointCloud, positionOrigin} from 'deck.gl-test/data'; + +const POINTCLOUD = getPointCloud(); + +export default [ + { + name: 'pointcloud-identity', + views: [ + new OrbitView({ + fov: 30, + orbitAxis: 'Y' + }) + ], + viewState: { + rotationX: 15, + rotationOrbit: 30 + }, + layers: [ + new PointCloudLayer({ + id: 'pointcloud-identity', + data: [{position: [0, 100, 0]}, {position: [-100, -100, 0]}, {position: [100, -100, 0]}], + opacity: 0.8, + coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, + getPosition: d => d.position, + getNormal: d => [0, 0.5, 0.2], + getColor: d => [255, 255, 0, 128], + pointSize: 50 + }) + ], + goldenImage: './test/render/golden-images/pointcloud-identity.png' + }, + { + name: 'pointcloud-lnglat', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 13, + pitch: 0, + bearing: 0 + }, + layers: [ + new PointCloudLayer({ + id: 'pointcloud-lnglat', + data: POINTCLOUD, + coordinateSystem: COORDINATE_SYSTEM.LNGLAT_OFFSETS, + coordinateOrigin: positionOrigin, + getPosition: d => [d.position[0] * 1e-5, d.position[1] * 1e-5, d.position[2]], + getNormal: d => d.normal, + getColor: d => d.color, + pointSize: 2, + pickable: true + }) + ], + goldenImage: './test/render/golden-images/pointcloud-lnglat.png' + }, + { + name: 'pointcloud-meter', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 13, + pitch: 0, + bearing: 0 + }, + layers: [ + new PointCloudLayer({ + id: 'pointcloud-meter', + data: { + length: POINTCLOUD.length, + attributes: { + getPosition: new Float32Array(POINTCLOUD.flatMap(d => d.position)), + getNormal: new Float32Array(POINTCLOUD.flatMap(d => d.normal)), + getColor: {value: new Uint8Array(POINTCLOUD.flatMap(d => d.color)), size: 3} + } + }, + coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS, + coordinateOrigin: positionOrigin, + pointSize: 2, + pickable: true + }) + ], + goldenImage: './test/render/golden-images/pointcloud-meter.png' + } +]; diff --git a/test/render/test-cases/polygon-layer.js b/test/render/test-cases/polygon-layer.js new file mode 100644 index 00000000000..6b6bf5685e2 --- /dev/null +++ b/test/render/test-cases/polygon-layer.js @@ -0,0 +1,79 @@ +import {OrthographicView, COORDINATE_SYSTEM} from '@deck.gl/core'; +import {PolygonLayer} from '@deck.gl/layers'; +import {Fp64Extension, PathStyleExtension} from '@deck.gl/extensions'; + +import {polygons} from 'deck.gl-test/data'; + +export default [ + { + name: 'polygon-lnglat', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new PolygonLayer({ + id: 'polygon-lnglat', + data: polygons, + getPolygon: f => f, + getFillColor: [200, 0, 0], + getLineColor: [0, 0, 0], + opacity: 0.8, + lineWidthMinPixels: 1 + }) + ], + goldenImage: './test/render/golden-images/polygon-lnglat.png' + }, + { + name: 'polygon-lnglat-64', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new PolygonLayer({ + id: 'polygon-lnglat-64', + data: polygons, + coordinateSystem: COORDINATE_SYSTEM.LNGLAT, + getPolygon: f => f, + getFillColor: [200, 0, 0], + getLineColor: [0, 0, 0], + opacity: 0.8, + lineWidthMinPixels: 1, + extensions: [new Fp64Extension()] + }) + ], + goldenImage: './test/render/golden-images/polygon-lnglat.png' + }, + { + name: 'polygon-dash', + views: new OrthographicView(), + viewState: { + target: [0, 0, 0], + zoom: 0 + }, + layers: [ + new PolygonLayer({ + id: 'polygon-lnglat', + coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, + data: [[[-100, -100], [-100, 100], [100, 100], [100, -100]]], + getPolygon: f => f, + filled: false, + stroked: true, + getLineColor: [0, 0, 0], + getDashArray: [6, 3], + getLineWidth: 10, + opacity: 1, + dashJustified: true, + extensions: [new PathStyleExtension({dash: true})] + }) + ], + goldenImage: './test/render/golden-images/polygon-dash.png' + } +]; diff --git a/test/render/test-cases/s2-layer.js b/test/render/test-cases/s2-layer.js new file mode 100644 index 00000000000..0f1243fe838 --- /dev/null +++ b/test/render/test-cases/s2-layer.js @@ -0,0 +1,49 @@ +import {S2Layer} from '@deck.gl/geo-layers'; +import {s2cells} from 'deck.gl-test/data'; + +export default [ + { + name: 's2-layer', + viewState: { + latitude: 37.75, + longitude: -122.45, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new S2Layer({ + data: s2cells, + opacity: 0.8, + filled: true, + stroked: false, + getS2Token: f => f.token, + getFillColor: f => [f.value * 255, (1 - f.value) * 255, (1 - f.value) * 128], + pickable: true + }) + ], + goldenImage: './test/render/golden-images/s2-layer.png' + }, + { + name: 's2-layer-l2', + viewState: { + latitude: 40, + longitude: -100, + zoom: 1.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new S2Layer({ + data: ['4b', '4d', '53', '55', '81', '87', '89', '8b'], + opacity: 0.6, + getS2Token: f => f, + filled: false, + stroked: true, + lineWidthMinPixels: 4, + pickable: true + }) + ], + goldenImage: './test/render/golden-images/s2-layer-l2.png' + } +]; diff --git a/test/render/test-cases/screen-grid-layer.js b/test/render/test-cases/screen-grid-layer.js new file mode 100644 index 00000000000..d84555ac161 --- /dev/null +++ b/test/render/test-cases/screen-grid-layer.js @@ -0,0 +1,88 @@ +import {OrthographicView, COORDINATE_SYSTEM} from '@deck.gl/core'; +import {ScreenGridLayer} from '@deck.gl/aggregation-layers'; +import {points} from 'deck.gl-test/data'; + +import {WIDTH, HEIGHT} from '../constants'; + +export const screenSpaceData = [ + [0, -100], + [0, -110], + [0, -115], + [10, -100], + [0, 100], + [0, 105], + [-100, -100], + [-100, -100], + [100, 10], + [100, 12], + [100, 100], + [110, 90] +]; + +export default [ + { + name: 'screengrid-infoviz', + views: [new OrthographicView()], + viewState: { + left: -WIDTH / 2, + top: -HEIGHT / 2, + right: WIDTH / 2, + bottom: HEIGHT / 2 + }, + layers: [ + new ScreenGridLayer({ + id: 'screengrid-infoviz', + data: screenSpaceData, + coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, + opacity: 0.8, + getPosition: d => d, + cellSizePixels: 40, + pickable: false + }) + ], + goldenImage: './test/render/golden-images/screengrid-infoviz.png' + }, + { + name: 'screengrid-lnglat-cpu-aggregation', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new ScreenGridLayer({ + id: 'screengrid-lnglat-cpu-aggregation', + data: points, + opacity: 0.8, + getPosition: d => d.COORDINATES, + cellSizePixels: 40, + pickable: false, + gpuAggregation: false + }) + ], + goldenImage: './test/render/golden-images/screengrid-lnglat-colorRange.png' + }, + { + name: 'screengrid-lnglat-colorRange', + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new ScreenGridLayer({ + id: 'screengrid-lnglat-colorRange', + data: points, + opacity: 0.8, + getPosition: d => d.COORDINATES, + cellSizePixels: 40, + pickable: false + }) + ], + goldenImage: './test/render/golden-images/screengrid-lnglat-colorRange.png' + } +]; diff --git a/test/render/test-cases/simple-mesh-layer.js b/test/render/test-cases/simple-mesh-layer.js new file mode 100644 index 00000000000..4a06585d87b --- /dev/null +++ b/test/render/test-cases/simple-mesh-layer.js @@ -0,0 +1,91 @@ +import {OrbitView, COORDINATE_SYSTEM} from '@deck.gl/core'; +import {SimpleMeshLayer} from '@deck.gl/mesh-layers'; +import {Matrix4} from 'math.gl'; +import {CubeGeometry} from '@luma.gl/core'; +const cube = new CubeGeometry(); + +import {meshSampleData} from 'deck.gl-test/data'; + +export default [ + { + name: 'simple-mesh-layer-lnglat', + viewState: { + latitude: 37.75, + longitude: -122.45, + zoom: 14, + pitch: 0, + bearing: 0 + }, + layers: [ + new SimpleMeshLayer({ + id: 'simple-mesh-layer-lnglat', + data: meshSampleData, + mesh: cube, + sizeScale: 30, + modelMatrix: new Matrix4().translate([0, 0, 1000]), + coordinateOrigin: [-122.45, 37.75, 0], + coordinateSystem: COORDINATE_SYSTEM.LNGLAT_OFFSETS, + getPosition: d => [d.position[0] / 1e5, d.position[1] / 1e5, 10], + getColor: d => d.color, + getOrientation: d => d.orientation + }) + ], + goldenImage: './test/render/golden-images/simple-mesh-layer-lnglat.png' + }, + { + name: 'simple-mesh-layer-cartesian', + viewState: { + target: [0, 0, 0], + rotationX: 0, + rotationOrbit: 0, + orbitAxis: 'Y', + fov: 30, + zoom: -1.5 + }, + views: [ + new OrbitView({ + near: 0.1, + far: 2 + }) + ], + layers: [ + new SimpleMeshLayer({ + id: 'simple-mesh-layer-cartesian', + data: meshSampleData, + mesh: cube, + sizeScale: 30, + coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, + modelMatrix: new Matrix4().rotateX((-45 / 180) * Math.PI), + getPosition: d => d.position, + getColor: d => d.color, + getOrientation: d => d.orientation + }) + ], + goldenImage: './test/render/golden-images/simple-mesh-layer-cartesian.png' + }, + { + name: 'simple-mesh-layer-meter-offsets', + viewState: { + latitude: 37.75, + longitude: -122.45, + zoom: 14, + pitch: 0, + bearing: 0 + }, + layers: [ + new SimpleMeshLayer({ + id: 'simple-mesh-layer-meter-offsets', + data: meshSampleData, + mesh: cube, + sizeScale: 30, + coordinateOrigin: [-122.45, 37.75, 0], + coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS, + modelMatrix: new Matrix4().rotateX((-45 / 180) * Math.PI), + getPosition: d => d.position, + getColor: d => d.color, + getOrientation: d => d.orientation + }) + ], + goldenImage: './test/render/golden-images/simple-mesh-layer-meter-offsets.png' + } +]; diff --git a/test/render/test-cases/text-layer.js b/test/render/test-cases/text-layer.js new file mode 100644 index 00000000000..7b9f92621ea --- /dev/null +++ b/test/render/test-cases/text-layer.js @@ -0,0 +1,146 @@ +import {COORDINATE_SYSTEM} from '@deck.gl/core'; +import {TextLayer} from '@deck.gl/layers'; +import {points} from 'deck.gl-test/data'; + +import {OS} from '../constants'; + +export default (OS === 'Mac' + ? [ + { + name: 'text-layer', + viewState: { + latitude: 37.751, + longitude: -122.427, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new TextLayer({ + id: 'text-layer', + data: points.slice(0, 50), + fontFamily: 'Arial', + getText: x => `${x.PLACEMENT}-${x.YR_INSTALLED}`, + getPosition: x => x.COORDINATES, + getColor: x => [255, 0, 0], + getSize: x => 32, + getAngle: x => 0, + sizeScale: 1, + getTextAnchor: x => 'start', + getAlignmentBaseline: x => 'center', + getPixelOffset: x => [10, 0] + }) + ], + goldenImage: './test/render/golden-images/text-layer.png' + }, + { + name: 'text-layer-meter-size', + viewState: { + latitude: 37.751, + longitude: -122.427, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new TextLayer({ + id: 'text-layer', + data: points.slice(0, 50), + fontFamily: 'Arial', + getText: x => `${x.PLACEMENT}-${x.YR_INSTALLED}`, + getPosition: x => x.COORDINATES, + getColor: x => [255, 0, 0], + getSize: x => 32, + getAngle: x => 0, + sizeScale: 21.343755, + sizeUnits: 'meters', + getTextAnchor: x => 'start', + getAlignmentBaseline: x => 'center', + getPixelOffset: x => [10, 0] + }) + ], + goldenImage: './test/render/golden-images/text-layer.png' + }, + { + name: 'text-layer-multi-lines', + viewState: { + latitude: 37.75, + longitude: -122.44, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new TextLayer({ + id: 'text-layer', + data: points.slice(0, 10), + coordinateOrigin: [-122.44, 37.75], + coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS, + fontFamily: 'Arial', + getText: x => `${x.ADDRESS}\n${x.SPACES}`, + getPosition: (_, {index}) => [0, (index - 5) * 1000], + getColor: [255, 0, 0], + getSize: 32, + getTextAnchor: 'middle', + getAlignmentBaseline: 'center' + }) + ], + goldenImage: './test/render/golden-images/text-layer-multi-lines.png' + }, + { + name: 'text-layer-auto-wrapping', + viewState: { + latitude: 37.75, + longitude: -122.44, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new TextLayer({ + id: 'text-layer', + data: points.slice(0, 5), + coordinateOrigin: [-122.44, 37.75], + coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS, + fontFamily: 'Arial', + wordBreak: 'break-word', + maxWidth: 1000, + getText: x => `${x.LOCATION_NAME} ${x.ADDRESS}`, + getPosition: (_, {index}) => [0, (index - 2) * 2000], + getColor: [255, 0, 0], + getSize: 32, + getTextAnchor: 'middle', + getAlignmentBaseline: 'center' + }) + ], + goldenImage: './test/render/golden-images/text-layer-auto-wrapping.png' + }, + { + name: 'text-layer-background', + viewState: { + latitude: 37.75, + longitude: -122.44, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new TextLayer({ + id: 'text-layer', + data: points.slice(0, 10), + coordinateOrigin: [-122.44, 37.75], + coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS, + fontFamily: 'Arial', + backgroundColor: [255, 255, 0, 200], + getText: x => `${x.ADDRESS}-${x.SPACES}`, + getPosition: (_, {index}) => [0, (index - 5) * 1000], + getColor: [255, 0, 0], + getSize: 32, + getTextAnchor: 'start', + getAlignmentBaseline: 'center' + }) + ], + goldenImage: './test/render/golden-images/text-layer-background.png' + } + ] + : []); diff --git a/test/render/test-cases/trips-layer.js b/test/render/test-cases/trips-layer.js new file mode 100644 index 00000000000..eaf065d36f9 --- /dev/null +++ b/test/render/test-cases/trips-layer.js @@ -0,0 +1,30 @@ +import {TripsLayer} from '@deck.gl/geo-layers'; +import {trips} from 'deck.gl-test/data'; + +export default [ + { + name: 'trips-layer-3d', + viewState: { + latitude: 37.75, + longitude: -122.45, + zoom: 11.5, + pitch: 0, + bearing: 0 + }, + layers: [ + new TripsLayer({ + id: 'trips-3d', + data: trips, + opacity: 0.8, + getPath: d => [d[0].begin_shape].concat(d.map(leg => leg.end_shape)), + getTimestamps: d => [d[0].begin_time].concat(d.map(leg => leg.end_time)), + getColor: [253, 128, 93], + widthMinPixels: 4, + rounded: true, + trailLength: 500, + currentTime: 500 + }) + ], + goldenImage: './test/render/golden-images/trips.png' + } +]; diff --git a/test/render/test-cases/views.js b/test/render/test-cases/views.js new file mode 100644 index 00000000000..94fda9df554 --- /dev/null +++ b/test/render/test-cases/views.js @@ -0,0 +1,82 @@ +import {COORDINATE_SYSTEM, OrthographicView, MapView, FirstPersonView} from '@deck.gl/core'; +import {ScatterplotLayer, GeoJsonLayer} from '@deck.gl/layers'; +import {parseColor} from '../../../examples/layer-browser/src/utils/color'; + +import * as dataSamples from 'deck.gl-test/data'; +import * as h3 from 'h3-js'; + +export default [ + { + name: 'first-person', + views: [ + new FirstPersonView({ + fovy: 75, + near: 10, + far: 100000, + focalDistance: 10 + }) + ], + viewState: { + latitude: 37.751537058389985, + longitude: -122.42694203247012, + altitude: 20, + bearing: 270 + }, + layers: [ + new GeoJsonLayer({ + id: 'first-person', + data: dataSamples.geojson, + opacity: 0.8, + getRadius: 500, + getFillColor: f => parseColor(f.properties.fill), + getLineColor: f => parseColor(f.properties.stroke), + extruded: true, + wireframe: true, + getElevation: 500, + lineWidthScale: 10, + lineWidthMinPixels: 1 + }) + ], + goldenImage: './test/render/golden-images/first-person.png' + }, + { + name: 'orthographic-64bit', + views: new OrthographicView(), + viewState: { + target: [10000 - 122.4, 10000 + 37.75, 0], + zoom: 14 + }, + layers: [ + new ScatterplotLayer({ + id: 'orthographic-64', + opacity: 0.1, + coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, + data: dataSamples.getPoints100K().map(p => [p[0] + 10000, p[1] + 10000]), + getPosition: d => d, + getRadius: 0, + radiusMinPixels: 6 + }) + ], + goldenImage: './test/render/golden-images/orthographic-64.png' + }, + { + name: 'map-repeat', + views: new MapView({repeat: true}), + viewState: { + latitude: 0, + longitude: 0, + zoom: 0, + pitch: 0, + bearing: 0 + }, + layers: [ + new ScatterplotLayer({ + data: h3.getRes0Indexes(), + getPosition: d => h3.h3ToGeo(d).reverse(), + radiusMinPixels: 4, + getFillColor: [255, 0, 0] + }) + ], + goldenImage: './test/render/golden-images/map-repeat.png' + } +]; diff --git a/yarn.lock b/yarn.lock index dedce359709..49cd217a4b1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1975,29 +1975,29 @@ "@phosphor/signaling" "^1.3.1" "@phosphor/virtualdom" "^1.2.0" -"@probe.gl/bench@^3.2.0": - version "3.2.0" - resolved "https://registry.yarnpkg.com/@probe.gl/bench/-/bench-3.2.0.tgz#323cf42e1b3fb33a93d0e5282c49fd050a3b063f" - integrity sha512-nAEeRQIpo5eEBSmQ9O0RNp2I6jxrAVEzZnpPBa5Bkc1TrD40S9Eu/EqCUkxcQDTwNMKZIK6A4EIIIph5Qj3Rlg== +"@probe.gl/bench@^3.2.1": + version "3.2.1" + resolved "https://registry.yarnpkg.com/@probe.gl/bench/-/bench-3.2.1.tgz#c3bb2ff1dc397b786bed631bee1e5061a5256ac3" + integrity sha512-WWTEG4eR9bvdHaV4s9FTslxvn63hy+9acZKKdDJ1KWiFssQlap8I5fXX4ZzNqnuAp/6krcroJ2ZtJTHtHlcr4w== dependencies: "@babel/runtime" "^7.0.0" - probe.gl "3.2.0" + probe.gl "3.2.1" -"@probe.gl/stats@3.2.0": - version "3.2.0" - resolved "https://registry.yarnpkg.com/@probe.gl/stats/-/stats-3.2.0.tgz#642005c308d768db2ace859482fd89942cbbfc31" - integrity sha512-Imo1NZwvV3B9jzVZDXz9Fl1rnhR54wb2YG41Ey25QrHQVH6sFqe2gUutFEY2T/sLLVkbFGNWuZU7jVqCRCJTdw== +"@probe.gl/stats@3.2.1": + version "3.2.1" + resolved "https://registry.yarnpkg.com/@probe.gl/stats/-/stats-3.2.1.tgz#4e95c75513229ebb01384045e89524a466c022eb" + integrity sha512-tXe5krgbodxtVdUVWG4oIicMoCHNGp7QYkaHSDrUeTfJVqYuZz99T6r7qmn0bCo4wQlzn936jJ+QiAltHxatig== dependencies: "@babel/runtime" "^7.0.0" -"@probe.gl/test-utils@^3.2.0": - version "3.2.0" - resolved "https://registry.yarnpkg.com/@probe.gl/test-utils/-/test-utils-3.2.0.tgz#abca814fab2977d65f44fd2e0a987f58118546b1" - integrity sha512-vsRH/noJnmeqtEoeIPBJbDd8bwJxlrVS8sUhlln9oFIKAok/mfwlSuf3MIwab9KxBGMBIUS2uRoAYz1XrJIHAQ== +"@probe.gl/test-utils@^3.2.1": + version "3.2.1" + resolved "https://registry.yarnpkg.com/@probe.gl/test-utils/-/test-utils-3.2.1.tgz#4af5d1d202873f39a3789d78ce564b1d1671dde9" + integrity sha512-Mnip0Q/H8oEoX0n2CJZ1txOQfFaO2SL2dldwXr5KQeoXjhgbtaQJhOKUPocqaWKxyAw6S630uogtfKM3txFPUQ== dependencies: "@babel/runtime" "^7.0.0" pixelmatch "^4.0.2" - probe.gl "3.2.0" + probe.gl "3.2.1" puppeteer "^1.16.0" "@types/backbone@^1.4.1": @@ -7552,22 +7552,6 @@ node-libs-browser@^2.2.1: util "^0.11.0" vm-browserify "^1.0.1" -node-pre-gyp@*: - version "0.14.0" - resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83" - integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA== - dependencies: - detect-libc "^1.0.2" - mkdirp "^0.5.1" - needle "^2.2.1" - nopt "^4.0.1" - npm-packlist "^1.1.6" - npmlog "^4.0.2" - rc "^1.2.7" - rimraf "^2.6.1" - semver "^5.3.0" - tar "^4.4.2" - node-pre-gyp@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.11.0.tgz#db1f33215272f692cd38f03238e3e9b47c5dd054" @@ -8508,13 +8492,13 @@ private@^0.1.6: resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg== -probe.gl@3.2.0, probe.gl@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/probe.gl/-/probe.gl-3.2.0.tgz#f5368a5bc963ec12e19645e2b6ce0294f682f31f" - integrity sha512-rJPW92vyl3cf0xpg1xwZPUKWqF0j7sktsmQQ0ILbpXDtEeHFXGC+VeBYpDZc/l1mlj6ft6fum0NP/rLr36HirA== +probe.gl@3.2.1, probe.gl@^3.2.0, probe.gl@^3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/probe.gl/-/probe.gl-3.2.1.tgz#c92db3e89df6c45a9fe0377890c6b0ded35d2974" + integrity sha512-ax0flZWVcrw3FF9MMt84mqfIckjkB7ItGer9rr8zlUbkIyzt66ypeJVLQlC28dJ/RBZtriflt2sVAhjENFohQA== dependencies: "@babel/runtime" "^7.0.0" - "@probe.gl/stats" "3.2.0" + "@probe.gl/stats" "3.2.1" process-nextick-args@~2.0.0: version "2.0.1" @@ -10115,7 +10099,7 @@ tar-stream@^2.0.0: inherits "^2.0.3" readable-stream "^3.1.1" -tar@^4, tar@^4.4.10, tar@^4.4.12, tar@^4.4.2, tar@^4.4.8: +tar@^4, tar@^4.4.10, tar@^4.4.12, tar@^4.4.8: version "4.4.13" resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525" integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==