refactor(heatmap): composer heatmap

src/core/engine/CopyShader.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from '../three';
 
 /**
  * @author alteredq / http://alteredqualia.com/
@@ -51,4 +51,3 @@ var CopyShader = {
 };
 
 export default CopyShader;
-THREE.CopyShader = CopyShader;

src/core/engine/MaskPass.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from '../three';
 
 /**
  * @author alteredq / http://alteredqualia.com/
@@ -92,6 +92,3 @@ ClearMaskPass.prototype = {
 
 export default MaskPass;
 export {ClearMaskPass as ClearMaskPass};
-
-THREE.MaskPass = MaskPass;
-THREE.ClearMaskPass = ClearMaskPass;

src/core/engine/ShaderPass.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from '../three';
 
 /**
  * @author alteredq / http://alteredqualia.com/
@@ -37,7 +37,7 @@ var ShaderPass = function( shader, textureID ) {
 
 	this.enabled = true;
 	this.needsSwap = true;
-	this.clear = false;
+	this.clear = true;
 
 
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
@@ -51,28 +51,24 @@ var ShaderPass = function( shader, textureID ) {
 ShaderPass.prototype = {
 
 	render: function( renderer, writeBuffer, readBuffer, delta ) {
-
 		if ( this.uniforms[ this.textureID ] ) {
-
-			this.uniforms[ this.textureID ].value = readBuffer;
+			this.uniforms[ this.textureID ].value = readBuffer.texture;
 
 		}
-
+    renderer.autoClear = false;
 		this.quad.material = this.material;
 
 		if ( this.renderToScreen ) {
-
 			renderer.render( this.scene, this.camera );
 
 		} else {
 
 			renderer.render( this.scene, this.camera, writeBuffer, this.clear );
 
 		}
-
+		renderer.autoClear = true;
 	}
 
 };
 
 export default ShaderPass;
-THREE.ShaderPass = ShaderPass;

src/core/engine/composer.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from '../three';
 import CopyShader from './CopyShader';
 import ShaderPass from './ShaderPass';
 import MaskPass, {ClearMaskPass} from './MaskPass';
@@ -50,7 +50,8 @@ EffectComposer.prototype = {
 		this.writeBuffer = tmp;
 
 	},
-
+	visible:true,
+	type:'composer',
 	addPass: function ( pass ) {
 
 		this.passes.push( pass );
@@ -71,7 +72,6 @@ EffectComposer.prototype = {
 		var maskActive = false;
 
 		var pass, i, il = this.passes.length;
-
 		for ( i = 0; i < il; i ++ ) {
 
 			pass = this.passes[ i ];
@@ -147,4 +147,3 @@ EffectComposer.prototype = {
 };
 
 export default EffectComposer;
-THREE.EffectComposer = EffectComposer;

src/core/engine/index.js

@@ -16,14 +16,16 @@ export default class Engine extends EventEmitter {
     this._scene.add(this.world);
     this._picking = Picking(this._world, this._renderer, this._camera, this._scene);
     this.clock = new THREE.Clock();
+    this.composerLayers = [];
   }
   _initPostProcessing() {
-
+    this.composerLayers.forEach(layer => {
+      layer.visible && layer.render();
+    });
   }
   update() {
-
     this._renderer.render(this._scene, this._camera);
-
+    this._initPostProcessing();
   }
   destroy() {
 

src/core/engine/renderpass.js

@@ -1,45 +1,61 @@
+// jscs:disable
+/* eslint-disable */
+
 import * as THREE from '../three';
 
-export default class RenderPass {
-  constructor(cfg) {
-    this.scene;
-    this.camera = cfg.camera;
-    this.renderer = cfg.renderer;
-    this.clearColor = cfg.clear.clearColor;
-    this.clearAlpha = cfg.clear.clearAlpha;
-    this.size = cfg.size ? cfg.size : cfg.renderer.getSize();
-    const defaultRenderCfg = {
-      minFilter: THREE.NearestFilter,
-      magFilter: THREE.NearestFilter,
-      format: THREE.RGBAFormat,
-      stencilBuffer: false,
-      depthBuffer: false
-    };
-    this.renderCfg = cfg.renderCfg ? cfg.renderCfg : defaultRenderCfg;
-    this._init(cfg);
-  }
-
-  _init() {
-    this.scene = new THREE.Scene();
-    this.pass = new THREE.WebGLRenderTarget(this.size.width, this.size.height, this.renderCfg);
-    this.originClearColor = this.renderer.getClearColor();
-    this.originClearAlpha = this.renderer.getClearAlpha();
-    this.texture = this.pass.texture;
-  }
-
-  add(mesh) {
-    this.scene.add(mesh);
-  }
-
-  remove(mesh) {
-    this.scene.remove(mesh);
-  }
-
-  render() {
-
-    this.renderer.setClearColor(this.clearColor, this.clearAlpha);
-    this.renderer.render(this.scene, this.camera, this.pass, true);
-    this.renderer.setRenderTarget(null);
-    this.renderer.setClearColor(this.originClearColor, this.originClearAlpha);
-  }
-}
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+var RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
+
+	this.scene = scene;
+	this.camera = camera;
+
+	this.overrideMaterial = overrideMaterial;
+
+	this.clearColor = clearColor;
+	this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1;
+
+	this.oldClearColor = new THREE.Color();
+	this.oldClearAlpha = 1;
+
+	this.enabled = true;
+	this.clear = false;
+	this.needsSwap = false;
+
+};
+
+RenderPass.prototype = {
+
+	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+
+    this.scene.overrideMaterial = this.overrideMaterial;
+    const oldAutoClear = renderer.autoClear;
+    // renderer.autoClear = false;
+		if ( this.clearColor ) {
+
+			this.oldClearColor.copy( renderer.getClearColor() );
+			this.oldClearAlpha = renderer.getClearAlpha();
+
+			renderer.setClearColor( this.clearColor, this.clearAlpha );
+
+		}
+
+    renderer.render( this.scene, this.camera, readBuffer, this.clear );
+    // if(this.clear)renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
+
+		if ( this.clearColor ) {
+
+			renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
+
+		}
+
+    this.scene.overrideMaterial = null;
+    renderer.autoClear = oldAutoClear;
+
+	}
+
+};
+
+export default RenderPass;

src/core/layer.js

@@ -79,8 +79,14 @@ export default class Layer extends Base {
     * @param {*} type mesh类型是区别是填充还是边线
    */
   add(object, type = 'fill') {
-    type === 'fill' ? this.layerMesh = object : this.layerLineMesh = object;
+     // composer合图层绘制
+    if (object.type === 'composer') {
+      this._object3D = object;
+      this.scene._engine.composerLayers.push(object);
+      return;
+    }
 
+    type === 'fill' ? this.layerMesh = object : this.layerLineMesh = object;
     this._visibleWithZoom();
     this._zoomchangeHander = this._visibleWithZoom.bind(this);
     this.scene.on('zoomchange', this._zoomchangeHander);
@@ -105,6 +111,12 @@ export default class Layer extends Base {
     }
   }
   remove(object) {
+    if (object.type === 'composer') {
+      this.scene._engine.composerLayers = this.scene._engine.composerLayers.filter(layer => {
+        return (layer !== object);
+      });
+      return;
+    }
     this._object3D.remove(object);
   }
   _getUniqueId() {
@@ -601,6 +613,11 @@ export default class Layer extends Base {
    */
   destroy() {
     this.removeAllListeners();
+    if (this._object3D.type === 'composer') {
+      this.remove(this._object3D);
+
+      return;
+    }
     if (this._object3D && this._object3D.children) {
       let child;
       for (let i = 0; i < this._object3D.children.length; i++) {

src/core/source.js

@@ -58,7 +58,6 @@ export default class Source extends Base {
   createScale(field) {
     const data = this.data.dataArray;
     const scales = this.get('scales');
-    console.log(scales);
     let scale = scales[field];
     const scaleController = this.get('scaleController');
     if (!scale) {

src/core/three.js

@@ -16,6 +16,7 @@ export { OrthographicCamera } from 'three/src/cameras/OrthographicCamera.js';
 export { BufferGeometry } from 'three/src/core/BufferGeometry.js';
 export { PlaneBufferGeometry } from 'three/src/geometries/PlaneGeometry.js';
 export { Raycaster } from 'three/src/core/Raycaster.js';
+export { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils.js';
 export { Matrix4 } from 'three/src/math/Matrix4.js';
 export { Matrix3 } from 'three/src/math/Matrix3.js';
 export { Line } from 'three/src/objects/Line.js';

src/geom/material/heatmapMateial.js

@@ -13,6 +13,7 @@ export function HeatmapIntensityMaterial(opt) {
     vertexShader: vs,
     fragmentShader: fs,
     transparent: true,
+    depthTest: false,
     blending: THREE.AdditiveBlending
   });
   return material;

src/layer/heatmapLayer.js

@@ -2,7 +2,7 @@ import Layer from '../core/layer';
 import gridBuffer from '../geom/buffer/heatmap/grid';
 import DrawGrid from './render/heatmap/gird';
 import DrawHexagon from './render/heatmap/hexagon';
-import { drawHeatmap, updateIntensityPass } from './render/heatmap/heatmap';
+import { drawHeatmap } from './render/heatmap/heatmap';
 import hexagonBuffer from '../geom/buffer/heatmap/hexagon';
 
 export default class HeatMapLayer extends Layer {
@@ -56,10 +56,10 @@ export default class HeatMapLayer extends Layer {
     this.add(girdMesh);
   }
 
-  afterRender() {
-    if (this.shapeType !== 'grid' && this.shapeType !== 'hexagon') {
-      updateIntensityPass(this);
-    }
-  }
+  // afterRender() {
+  //   if (this.shapeType !== 'grid' && this.shapeType !== 'hexagon') {
+  //     updateIntensityPass(this);
+  //   }
+  // }
 
 }