move wboit from layer to effect

examples/experimental/wboit/app.js

@@ -1,6 +1,7 @@
 import {Deck} from '@deck.gl/core';
 import geojson from 'data/sf.zip.geo.json';
-import WBOITLayer from './wboit-layer/wboit-layer';
+import SolidPolygonLayer from './solid-polygon-layer/solid-polygon-layer';
+import WBOITEffect from './wboit-effect/wboit-effect';
 
 const INITIAL_VIEW_STATE = {
   latitude: 37.78,
@@ -13,18 +14,20 @@ const INITIAL_VIEW_STATE = {
 export const deck = new Deck({
   initialViewState: INITIAL_VIEW_STATE,
   controller: true,
+  effects: [new WBOITEffect()],
   layers: [
-    new WBOITLayer({
+    new SolidPolygonLayer({
       data: geojson.features,
       getPolygon: f => f.geometry.coordinates,
       getFillColor: f => [200 + Math.random() * 55, 0, 0],
       getLineColor: f => [0, 0, 0, 255],
       getLineDashArray: f => [20, 0],
       getLineWidth: f => 20,
       getElevation: f => Math.random() * 1000,
+      autoHighlight: true,
       extruded: true,
       opacity: 0.5,
-      pickable: false
+      pickable: true
     })
   ]
 });

examples/experimental/wboit/wboit-layer/wboit-layer-fragment.glsl.js → examples/experimental/wboit/solid-polygon-layer/solid-polygon-layer-fragment.glsl.js

@@ -28,31 +28,14 @@ precision highp float;
 in vec4 vColor;
 in float isValid;
 
-layout(location=0) out vec4 accumColor;
-layout(location=1) out float accumAlpha;
-
-float weight1(float z, float a) {
-  return a;
-}
-
-float weight2(float z, float a) {
-  return clamp(pow(min(1.0, a * 10.0) + 0.01, 3.0) * 1e8 * pow(1.0 - z * 0.9, 3.0), 1e-2, 3e3);
-}
-
-float weight3(float z, float a) {
-  return a * (1.0 - z * 0.9) * 10.0;
-}
+layout(location=0) out vec4 color;
 
 void main(void) {
   if (isValid < 0.5) {
     discard;
   }
 
-  vec4 color = vColor;
+  color = vColor;
   DECKGL_FILTER_COLOR(color, geometry);
-  color.rgb *= color.a;
-  float w = weight3(gl_FragCoord.z, color.a);
-  accumColor = vec4(color.rgb * w, color.a);
-  accumAlpha = color.a * w;
 }
 `;

examples/experimental/wboit/wboit-layer/wboit-layer-vertex-side.glsl.js → examples/experimental/wboit/solid-polygon-layer/solid-polygon-layer-vertex-side.glsl.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import main from './wboit-layer-vertex-main.glsl';
+import main from './solid-polygon-layer-vertex-main.glsl';
 
 export default `\
 #version 300 es

examples/experimental/wboit/wboit-layer/wboit-layer-vertex-top.glsl.js → examples/experimental/wboit/solid-polygon-layer/solid-polygon-layer-vertex-top.glsl.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import main from './wboit-layer-vertex-main.glsl';
+import main from './solid-polygon-layer-vertex-main.glsl';
 
 export default `\
 #version 300 es

examples/experimental/wboit/solid-polygon-layer/solid-polygon-layer.js

@@ -0,0 +1,38 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// 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.
+
+// SolidPolygonLayer, but using es 3.0 shaders
+import {SolidPolygonLayer} from '@deck.gl/layers';
+
+import vsTop from './solid-polygon-layer-vertex-top.glsl';
+import vsSide from './solid-polygon-layer-vertex-side.glsl';
+import fs from './solid-polygon-layer-fragment.glsl';
+
+export default class SolidPolygonLayer2 extends SolidPolygonLayer {
+  getShaders(vs) {
+    const shaders = super.getShaders(vs);
+    shaders.vs =
+      vs.indexOf('SHADER_NAME solid-polygon-layer-vertex-shader-side') > 0 ? vsSide : vsTop;
+    shaders.fs = fs;
+    return shaders;
+  }
+}
+
+SolidPolygonLayer2.layerName = 'SolidPolygonLayer';

examples/experimental/wboit/wboit-effect/wboit-effect.js

@@ -0,0 +1,183 @@
+import GL from '@luma.gl/constants';
+import {
+  ProgramManager,
+  Model,
+  Framebuffer,
+  Texture2D,
+  Buffer,
+  withParameters,
+  clear
+} from '@luma.gl/core';
+import {PostProcessEffect} from '@deck.gl/core';
+
+import wboitModule from './wboit-shader-module';
+
+// TODO: make effect system more generic
+export default class WBOITEffect extends PostProcessEffect {
+  constructor(props) {
+    super(wboitModule, props);
+  }
+
+  prepare(gl, params) {
+    if (!this.resources) {
+      this.resources = createResources(gl, params);
+    }
+    if (!this.programManager) {
+      this.programManager = ProgramManager.getDefaultProgramManager(gl);
+      this.programManager.addDefaultModule(wboitModule);
+    }
+    const {accumulationFramebuffer} = this.resources;
+
+    accumulationFramebuffer.resize({
+      width: gl.drawingBufferWidth,
+      height: gl.drawingBufferHeight
+    });
+
+    return {
+      parameters: {
+        blendFunc: [GL.ONE, GL.ONE, GL.ZERO, GL.ONE_MINUS_SRC_ALPHA],
+        blend: true,
+        depthMask: false,
+        clearColor: [0, 0, 0, 1],
+        clearDepth: 1,
+        cull: false,
+        framebuffer: this.resources.accumulationFramebuffer
+      }
+    };
+  }
+
+  render(params) {
+    const {oitModel} = this.resources;
+    const {gl} = oitModel;
+
+    withParameters(
+      gl,
+      {
+        blendFunc: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA],
+        blend: true,
+        depthTest: false,
+        framebuffer: params.target || params.outputBuffer
+      },
+      () => {
+        clear(gl, {color: true});
+        this.resources.oitModel.draw();
+      }
+    );
+    return params;
+  }
+
+  cleanup() {
+    if (this.resources) {
+      const {
+        accumulationTexture,
+        accumulationDepthTexture,
+        revealageTexture,
+        accumulationFramebuffer
+      } = this.resources;
+
+      accumulationFramebuffer.delete();
+      accumulationTexture.delete();
+      accumulationDepthTexture.delete();
+      revealageTexture.delete();
+
+      this.resources = null;
+    }
+    if (this.programManager) {
+      this.programManager.removeDefaultModule(wboitModule);
+      this.programManager = null;
+    }
+  }
+}
+
+const oitBlendVs = `\
+#version 300 es
+in vec4 positions;
+
+void main() {
+    gl_Position = positions;
+}
+`;
+
+const oitBlendFs = `\
+#version 300 es
+precision highp float;
+uniform sampler2D uAccumulate;
+uniform sampler2D uAccumulateAlpha;
+out vec4 fragColor;
+
+void main() {
+    ivec2 fragCoord = ivec2(gl_FragCoord.xy);
+    vec4 accum = texelFetch(uAccumulate, fragCoord, 0);
+    float a = 1.0 - accum.a;
+    accum.a = texelFetch(uAccumulateAlpha, fragCoord, 0).r;
+    // fragColor = vec4(a * accum.rgb / clamp(accum.a, 0.001, 100.0), a);
+    fragColor = vec4(accum.rgb, a);
+}
+`;
+
+function createResources(gl) {
+  const textureOpts = {
+    type: gl.FLOAT,
+    width: gl.drawingBufferWidth,
+    height: gl.drawingBufferHeight,
+    mipmaps: false,
+    parameters: {
+      [GL.TEXTURE_MIN_FILTER]: GL.NEAREST,
+      [GL.TEXTURE_MAG_FILTER]: GL.NEAREST,
+      [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
+      [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
+    }
+  };
+
+  const accumulationTexture = new Texture2D(gl, {
+    ...textureOpts,
+    format: gl.RGBA32F
+  });
+
+  const revealageTexture = new Texture2D(gl, {
+    ...textureOpts,
+    format: gl.R32F
+  });
+
+  const accumulationDepthTexture = new Texture2D(gl, {
+    ...textureOpts,
+    format: GL.DEPTH_COMPONENT32F,
+    dataFormat: GL.DEPTH_COMPONENT
+  });
+
+  const accumulationFramebuffer = new Framebuffer(gl, {
+    id: 'accumulation',
+    width: gl.drawingBufferWidth,
+    height: gl.drawingBufferHeight,
+    attachments: {
+      [GL.COLOR_ATTACHMENT0]: accumulationTexture,
+      [GL.COLOR_ATTACHMENT1]: revealageTexture,
+      [GL.DEPTH_ATTACHMENT]: accumulationDepthTexture
+    }
+  });
+
+  // TODO - using the default program manager would add the default shader modules to this model
+  const programManager = new ProgramManager(gl);
+  const oitModel = new Model(gl, {
+    vs: oitBlendVs,
+    fs: oitBlendFs,
+    programManager,
+    drawMode: GL.TRIANGLE_STRIP,
+    attributes: {
+      positions: [new Buffer(gl, new Float32Array([-1, 1, -1, -1, 1, 1, 1, -1])), {size: 2}]
+    },
+    vertexCount: 4,
+    uniforms: {
+      uAccumulate: accumulationTexture,
+      uAccumulateAlpha: revealageTexture
+    }
+  });
+
+  return {
+    accumulationTexture,
+    accumulationDepthTexture,
+    revealageTexture,
+    accumulationFramebuffer,
+    oitModel
+  };
+}

examples/experimental/wboit/wboit-effect/wboit-shader-module.js

@@ -0,0 +1,32 @@
+import {createModuleInjection} from '@luma.gl/core';
+
+const wboitModule = {
+  name: 'wboit',
+  fs: `
+layout(location=1) out float wboit_alpha;
+
+float weight1(float z, float a) {
+  return a;
+}
+
+float weight2(float z, float a) {
+  return clamp(pow(min(1.0, a * 10.0) + 0.01, 3.0) * 1e8 * pow(1.0 - z * 0.9, 3.0), 1e-2, 3e3);
+}
+
+float weight3(float z, float a) {
+  return a * a * (1.0 - z * 0.9) * 10.0;
+}
+`
+};
+
+createModuleInjection('wboit', {
+  hook: 'fs:DECKGL_FILTER_COLOR',
+  injection: `
+float w = weight3(gl_FragCoord.z, color.a);
+float a = color.a * w;
+color.rgb *= a;
+wboit_alpha = a;
+  `
+});
+
+export default wboitModule;