From a8621e7ada836ab0b3b737b014e6c66afaccea51 Mon Sep 17 00:00:00 2001 From: Jian Huang Date: Mon, 1 Apr 2019 11:43:29 -0700 Subject: [PATCH] integrate phong lighting to mesh layer (#2864) --- examples/layer-browser/src/app.js | 1 - .../src/gpu-grid-layer/gpu-grid-cell-layer.js | 2 +- modules/core/package.json | 2 +- modules/core/src/shaderlib/index.js | 15 ++++- .../layers/src/column-layer/column-layer.js | 2 +- .../point-cloud-layer/point-cloud-layer.js | 2 +- .../solid-polygon-layer.js | 2 +- .../simple-mesh-layer-fragment.glsl.js | 6 +- .../simple-mesh-layer-vertex.glsl.js | 13 +++-- .../simple-mesh-layer/simple-mesh-layer.js | 3 +- yarn.lock | 56 +++++++++++++++++++ 11 files changed, 86 insertions(+), 18 deletions(-) diff --git a/examples/layer-browser/src/app.js b/examples/layer-browser/src/app.js index 044cc810619..4f9bd21872a 100644 --- a/examples/layer-browser/src/app.js +++ b/examples/layer-browser/src/app.js @@ -26,7 +26,6 @@ import LayerSelector from './components/layer-selector'; import LayerControls from './components/layer-controls'; import LAYER_CATEGORIES from './examples'; -import '@luma.gl/debug'; /* eslint-disable no-process-env */ const MapboxAccessToken = diff --git a/modules/aggregation-layers/src/gpu-grid-layer/gpu-grid-cell-layer.js b/modules/aggregation-layers/src/gpu-grid-layer/gpu-grid-cell-layer.js index a97504e553c..905ad61b93f 100644 --- a/modules/aggregation-layers/src/gpu-grid-layer/gpu-grid-cell-layer.js +++ b/modules/aggregation-layers/src/gpu-grid-layer/gpu-grid-cell-layer.js @@ -47,7 +47,7 @@ const defaultProps = { export default class GPUGridCellLayer extends Layer { getShaders() { - return {vs, fs, modules: ['project32', 'phong-lighting', 'picking', 'fp64']}; + return {vs, fs, modules: ['project32', 'gouraud-lighting', 'picking', 'fp64']}; } initializeState() { diff --git a/modules/core/package.json b/modules/core/package.json index 69a00f44a48..e386cf1754a 100644 --- a/modules/core/package.json +++ b/modules/core/package.json @@ -31,7 +31,7 @@ }, "dependencies": { "gl-matrix": "^3.0.0", - "@luma.gl/core": "7.0.0-alpha.24", + "@luma.gl/core": "7.0.0-alpha.25", "math.gl": "^2.2.0", "mjolnir.js": "^2.0.2", "probe.gl": "^3.0.0-alpha.6", diff --git a/modules/core/src/shaderlib/index.js b/modules/core/src/shaderlib/index.js index 8582e568996..9b28d56ab01 100644 --- a/modules/core/src/shaderlib/index.js +++ b/modules/core/src/shaderlib/index.js @@ -19,17 +19,26 @@ // THE SOFTWARE. import {registerShaderModules, setDefaultShaderModules} from '@luma.gl/core'; -import {fp32, fp64, picking, phonglighting} from '@luma.gl/core'; +import {fp32, fp64, picking, gouraudlighting, phonglighting} from '@luma.gl/core'; import project from '../shaderlib/project/project'; import project32 from '../shaderlib/project32/project32'; import project64 from '../shaderlib/project64/project64'; export function initializeShaderModules() { - registerShaderModules([fp32, fp64, project, project32, project64, phonglighting, picking]); + registerShaderModules([ + fp32, + fp64, + project, + project32, + project64, + gouraudlighting, + phonglighting, + picking + ]); setDefaultShaderModules([project]); } initializeShaderModules(); -export {fp32, fp64, picking, project, project64, phonglighting}; +export {fp32, fp64, picking, project, project64, gouraudlighting, phonglighting}; diff --git a/modules/layers/src/column-layer/column-layer.js b/modules/layers/src/column-layer/column-layer.js index f913be3c4b3..e76e9bfdbaa 100644 --- a/modules/layers/src/column-layer/column-layer.js +++ b/modules/layers/src/column-layer/column-layer.js @@ -50,7 +50,7 @@ const defaultProps = { export default class ColumnLayer extends Layer { getShaders() { const projectModule = this.use64bitProjection() ? 'project64' : 'project32'; - return {vs, fs, modules: [projectModule, 'phong-lighting', 'picking']}; + return {vs, fs, modules: [projectModule, 'gouraud-lighting', 'picking']}; } /** diff --git a/modules/layers/src/point-cloud-layer/point-cloud-layer.js b/modules/layers/src/point-cloud-layer/point-cloud-layer.js index 6dbbff2b84e..2a1ec8593f5 100644 --- a/modules/layers/src/point-cloud-layer/point-cloud-layer.js +++ b/modules/layers/src/point-cloud-layer/point-cloud-layer.js @@ -48,7 +48,7 @@ const defaultProps = { export default class PointCloudLayer extends Layer { getShaders(id) { const projectModule = this.use64bitProjection() ? 'project64' : 'project32'; - return {vs, fs, modules: [projectModule, 'phong-lighting', 'picking']}; + return {vs, fs, modules: [projectModule, 'gouraud-lighting', 'picking']}; } initializeState() { diff --git a/modules/layers/src/solid-polygon-layer/solid-polygon-layer.js b/modules/layers/src/solid-polygon-layer/solid-polygon-layer.js index 3228acf913d..269026acea7 100644 --- a/modules/layers/src/solid-polygon-layer/solid-polygon-layer.js +++ b/modules/layers/src/solid-polygon-layer/solid-polygon-layer.js @@ -67,7 +67,7 @@ export default class SolidPolygonLayer extends Layer { return { vs, fs, - modules: [projectModule, 'phong-lighting', 'picking'] + modules: [projectModule, 'gouraud-lighting', 'picking'] }; } diff --git a/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-fragment.glsl.js b/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-fragment.glsl.js index b949edd52aa..5b37649bc38 100644 --- a/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-fragment.glsl.js +++ b/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-fragment.glsl.js @@ -8,11 +8,15 @@ uniform sampler2D sampler; uniform vec4 color; varying vec2 vTexCoord; +varying vec3 cameraPosition; +varying vec3 normals_commonspace; +varying vec4 position_commonspace; varying vec4 vColor; void main(void) { vec4 color = hasTexture ? texture2D(sampler, vTexCoord) : vColor / 255.; - gl_FragColor = vec4(color.rgb, color.a); + vec3 lightColor = lighting_getLightColor(color.rgb * 255., cameraPosition, position_commonspace.xyz, normals_commonspace); + gl_FragColor = vec4(lightColor / 255., color.a); // use highlight color if this fragment belongs to the selected object. gl_FragColor = picking_filterHighlightColor(gl_FragColor); diff --git a/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-vertex.glsl.js b/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-vertex.glsl.js index 31f4a63231c..750fa2a9928 100644 --- a/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-vertex.glsl.js +++ b/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-vertex.glsl.js @@ -19,20 +19,21 @@ attribute vec3 instanceTranslation; // Outputs to fragment shader varying vec2 vTexCoord; +varying vec3 cameraPosition; +varying vec3 normals_commonspace; +varying vec4 position_commonspace; varying vec4 vColor; void main(void) { vec3 pos = (instanceModelMatrix * positions) * sizeScale + instanceTranslation; pos = project_size(pos); - vec4 position_commonspace; - gl_Position = project_position_to_clipspace(instancePositions, instancePositions64xy, pos, position_commonspace); - - // TODO - transform normals - vTexCoord = texCoords; + cameraPosition = project_uCameraPosition; + normals_commonspace = project_normal(instanceModelMatrix * normals); vColor = instanceColors; - // vLightWeight = lighting_getLightWeight(position_commonspace.xyz, project_normal(normals)); + + gl_Position = project_position_to_clipspace(instancePositions, instancePositions64xy, pos, position_commonspace); picking_setPickingColor(instancePickingColors); } diff --git a/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer.js b/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer.js index 6ebf06aefb5..134b62ca437 100644 --- a/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer.js +++ b/modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer.js @@ -127,8 +127,7 @@ const defaultProps = { export default class SimpleMeshLayer extends Layer { getShaders() { const projectModule = this.use64bitProjection() ? 'project64' : 'project32'; - // TODO: add phong-lighting when merged in luma.gl - return {vs, fs, modules: [projectModule, 'picking']}; + return {vs, fs, modules: [projectModule, 'phong-lighting', 'picking']}; } initializeState() { diff --git a/yarn.lock b/yarn.lock index 9cfd1410bc9..0994d7d27f5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -753,6 +753,11 @@ resolved "https://registry.yarnpkg.com/@luma.gl/constants/-/constants-7.0.0-alpha.24.tgz#753c015e449dc44217453166ac5cea4d134343e9" integrity sha512-OeH/kpCnHLiSQz3Wt9B8IWqPCR8y0AoSISPGKYqGCZTS4TJ5XqWxmS/9Mj1B7QZ6H8v7pyZx/h0MnwGypY5Q2g== +"@luma.gl/constants@7.0.0-alpha.25": + version "7.0.0-alpha.25" + resolved "https://registry.yarnpkg.com/@luma.gl/constants/-/constants-7.0.0-alpha.25.tgz#82bb09ede7bb16cb8cd628a3ca95cb4f599811a2" + integrity sha512-icd+/Qpe92q9dxghgdRYm9F5BJy2cC+9r2kF40rdilW4yr8PyXUrC7owpKYcHGrOZQ45gNznvcy2fGO+aaZGQQ== + "@luma.gl/constants@^7.0.0-alpha.6": version "7.0.0-alpha.19" resolved "https://registry.yarnpkg.com/@luma.gl/constants/-/constants-7.0.0-alpha.19.tgz#f9dcb21ebb53d1736be27aad68073c1562bc3d81" @@ -773,6 +778,21 @@ probe.gl "3.0.0-alpha.7" seer "^0.2.4" +"@luma.gl/core@7.0.0-alpha.25": + version "7.0.0-alpha.25" + resolved "https://registry.yarnpkg.com/@luma.gl/core/-/core-7.0.0-alpha.25.tgz#91443c0af1f0006f721711edcbdf3ea45e112224" + integrity sha512-NcA/3Zyy67NQAaC0BIorXkDiohn42dGxCkaNQhjLimkgw7z9SpbbgMvogl2Yt0DrgTCs6U5YVB2ITacRxsCejg== + dependencies: + "@babel/runtime" "^7.0.0" + "@luma.gl/constants" "7.0.0-alpha.25" + "@luma.gl/shadertools" "7.0.0-alpha.25" + "@luma.gl/webgl" "7.0.0-alpha.25" + "@luma.gl/webgl-state-tracker" "7.0.0-alpha.25" + "@luma.gl/webgl2-polyfill" "7.0.0-alpha.25" + math.gl "^2.3.0-beta.2" + probe.gl "3.0.0-alpha.7" + seer "^0.2.4" + "@luma.gl/shadertools@7.0.0-alpha.24": version "7.0.0-alpha.24" resolved "https://registry.yarnpkg.com/@luma.gl/shadertools/-/shadertools-7.0.0-alpha.24.tgz#6705ef9be2fcc982b3ef1a506d061b0618db1a24" @@ -781,6 +801,14 @@ "@luma.gl/constants" "7.0.0-alpha.24" math.gl "^2.3.0-beta.2" +"@luma.gl/shadertools@7.0.0-alpha.25": + version "7.0.0-alpha.25" + resolved "https://registry.yarnpkg.com/@luma.gl/shadertools/-/shadertools-7.0.0-alpha.25.tgz#a58c76bee4d62509fa48283b0284cf3b94f37c28" + integrity sha512-vI/afR8Gfogc89fS9QNaEBOaYjDmyfRYZ59LErSQuMVGiQ9cdGocR/BziKuUlGRoZ6RPGulrCz4r5NqTx+BCQA== + dependencies: + "@luma.gl/constants" "7.0.0-alpha.25" + math.gl "^2.3.0-beta.2" + "@luma.gl/webgl-state-tracker@7.0.0-alpha.24": version "7.0.0-alpha.24" resolved "https://registry.yarnpkg.com/@luma.gl/webgl-state-tracker/-/webgl-state-tracker-7.0.0-alpha.24.tgz#40dd5a8f7c93c21df4c7c511ade4dbed427826e7" @@ -789,6 +817,14 @@ "@babel/runtime" "^7.0.0" "@luma.gl/constants" "7.0.0-alpha.24" +"@luma.gl/webgl-state-tracker@7.0.0-alpha.25": + version "7.0.0-alpha.25" + resolved "https://registry.yarnpkg.com/@luma.gl/webgl-state-tracker/-/webgl-state-tracker-7.0.0-alpha.25.tgz#b4cdf1455c4bd043f55d6f5e6890848e1462168f" + integrity sha512-aOcalHFCLB6+kzqlo/X786j1lqdpbcJFWk7tgEGwJ8Ynx/xpkahxMvB2OQDBSjWdo/uMMt5Slc4K+VmbRBlQHA== + dependencies: + "@babel/runtime" "^7.0.0" + "@luma.gl/constants" "7.0.0-alpha.25" + "@luma.gl/webgl2-polyfill@7.0.0-alpha.24": version "7.0.0-alpha.24" resolved "https://registry.yarnpkg.com/@luma.gl/webgl2-polyfill/-/webgl2-polyfill-7.0.0-alpha.24.tgz#9c1947ab8e1e1e181182c095029e3527433537af" @@ -797,6 +833,14 @@ "@babel/runtime" "^7.0.0" "@luma.gl/constants" "7.0.0-alpha.24" +"@luma.gl/webgl2-polyfill@7.0.0-alpha.25": + version "7.0.0-alpha.25" + resolved "https://registry.yarnpkg.com/@luma.gl/webgl2-polyfill/-/webgl2-polyfill-7.0.0-alpha.25.tgz#07b16d03c837731b00787b77ef9c03a5ba4c2d84" + integrity sha512-s10c72kc9kg+y+PJogavA4xmj+MluMvp7Dl5IF6QxpEUZPPQzQTcLs7pGXg9W3IZE+i8F5yi2REWchGyN897WA== + dependencies: + "@babel/runtime" "^7.0.0" + "@luma.gl/constants" "7.0.0-alpha.25" + "@luma.gl/webgl@7.0.0-alpha.24": version "7.0.0-alpha.24" resolved "https://registry.yarnpkg.com/@luma.gl/webgl/-/webgl-7.0.0-alpha.24.tgz#0b1277aa28c155a4c27ea6e7e0b697a9e908cdbc" @@ -809,6 +853,18 @@ probe.gl "3.0.0-alpha.6" seer "^0.2.4" +"@luma.gl/webgl@7.0.0-alpha.25": + version "7.0.0-alpha.25" + resolved "https://registry.yarnpkg.com/@luma.gl/webgl/-/webgl-7.0.0-alpha.25.tgz#652f2d453b87cea15c2c432b6082c3186b215920" + integrity sha512-8TGKQLbWwE7qmwWDUMjGRceNuitq/SxX4ZbyBdGAAh4tsT6YGjpqzV/ra+wyeIbtlr/Zz2pU4AFWfln95ife9A== + dependencies: + "@babel/runtime" "^7.0.0" + "@luma.gl/constants" "7.0.0-alpha.25" + "@luma.gl/webgl-state-tracker" "7.0.0-alpha.25" + "@luma.gl/webgl2-polyfill" "7.0.0-alpha.25" + probe.gl "3.0.0-alpha.6" + seer "^0.2.4" + "@mapbox/geojson-area@0.2.2": version "0.2.2" resolved "https://registry.yarnpkg.com/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz#18d7814aa36bf23fbbcc379f8e26a22927debf10"