fix pick

demos/03_choropleths_polygon.html

@@ -94,7 +94,7 @@ scene.on('loaded', () => {
       .style({
         opacity: 1.0
        })
-      .render();
+      //.render();
     
     console.log(citylayer);
     citylayer.on('click',(e)=>{

src/core/engine/picking/pickingMaterial.js

@@ -1,13 +1,13 @@
 import Material from '../../../geom/material/material';
 import picking_frag from './picking_frag.glsl';
-import picking_vert from './picking_vert.glsl';
+// import picking_vert from './picking_vert.glsl';
 
 export default function PickingMaterial(options) {
   const material = new Material({
     uniforms: {
       u_zoom: { value: options.u_zoom || 1 }
     },
-    vertexShader: picking_vert,
+    vertexShader: options.vs,
     fragmentShader: picking_frag,
     transparent: false
   });

src/core/layer.js

@@ -6,7 +6,8 @@ import Base from './base';
 import * as THREE from './three';
 import ColorUtil from '../attr/color-util';
 import source from './source';
-import PickingMaterial from '../core/engine/picking/pickingMaterial';
+import pickingFragmentShader from '../core/engine/picking/picking_frag.glsl';
+// import PickingMaterial from '../core/engine/picking/pickingMaterial';
 import Attr from '../attr/index';
 import Util from '../util';
 import Global from '../global';
@@ -458,9 +459,12 @@ export default class Layer extends Base {
     // });
 
     this.addToPicking(this._pickingMesh);
-    const pickmaterial = new PickingMaterial({
+    const pickmaterial = mesh.material.clone();
-      u_zoom: this.scene.getZoom()
+    pickmaterial.fragmentShader = pickingFragmentShader;
-    });
+    // const pickmaterial = new PickingMaterial({
+    //   u_zoom: this.scene.getZoom(),
+    //   vs: mesh.material.
+    // });
 
     const pickingMesh = new THREE[mesh.type](mesh.geometry, pickmaterial);
     pickingMesh.name = this.layerId;

src/geom/material/pointMaterial.js

@@ -1,7 +1,6 @@
 import * as THREE from '../../core/three';
 import Material from './material';
-import point_frag from '../shader/point_frag.glsl';
+import { getModule } from '../../util/shaderModule';
-import point_vert from '../shader/point_vert.glsl';
 
 export default class PointMaterial extends Material {
   getDefaultParameters() {
@@ -20,12 +19,12 @@ export default class PointMaterial extends Material {
   constructor(_uniforms, _defines, parameters) {
     super(parameters);
     const { uniforms, defines } = this.getDefaultParameters();
-
+    const { vs, fs } = getModule('point');
     this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
     this.defines = Object.assign(defines, _defines);
     this.type = 'PointMaterial';
-    this.vertexShader = point_vert;
+    this.vertexShader = vs;
-    this.fragmentShader = point_frag;
+    this.fragmentShader = fs;
     this.transparent = true;
     if (!_uniforms.shape) { this.blending = THREE.AdditiveBlending; }
     if (_uniforms.u_texture) {

src/geom/shader/index.js

@@ -4,9 +4,10 @@ import polygon_frag from '../shader/polygon_frag.glsl';
 import polygon_vert from '../shader/polygon_vert.glsl';
 import common from './common.glsl';
 import { registerModule } from '../../util/shaderModule';
-
+import pick_color from './shaderChunks/pick_color.glsl';
 export function compileBuiltinModules() {
   registerModule('point', { vs: point_vert, fs: point_frag });
   registerModule('common', { vs: common, fs: common });
+  registerModule('pick_color', { vs: pick_color, fs: pick_color });
   registerModule('polygon', { vs: polygon_vert, fs: polygon_frag });
 }

src/geom/shader/point_frag.glsl

@@ -13,13 +13,11 @@ varying vec2 v_rs;
 varying vec2 v_uv;
 varying vec4 v_color;
 varying float v_shape;
-
 const float u_buffer = 0.75;
 // const float u_gamma = 2.0 * 1.4142 / 10.0;
 const float u_gamma = 0.08;
 // const float u_scale = 128.0;
 const vec3 halo = vec3( 1.0 ); 
-
 void main() {
     // 纹理坐标
     #ifdef TEXCOORD_0
@@ -74,5 +72,6 @@ void main() {
             gl_FragColor= pcolor;
         }
     gl_FragColor *= u_opacity;
+    
 }
 

src/geom/shader/point_vert.glsl

@@ -11,7 +11,8 @@ varying vec4 v_color;
 varying vec2 v_rs;
 varying vec2 v_uv;
 varying float v_shape;
-
+varying vec4 worldId;
+#include pick_color
 void main() {
   mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
    v_color = a_color;
@@ -26,5 +27,6 @@ void main() {
     #ifdef SHAPE
       v_shape = a_shape;
     #endif
+    worldId = id_toPickColor(pickingId);
 }
 

src/geom/shader/polygon_frag.glsl

@@ -12,6 +12,7 @@ varying vec2 v_texCoord;
 varying  vec4 v_color;
 varying float v_lightWeight;
 varying float v_size;
+varying vec4 worldId;
 
 vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) {
     float s = step(hot, n);
@@ -106,7 +107,7 @@ void main() {
         gl_FragColor = vec4(foggedColor,1.0); 
      }
    #else
-       gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);
+      gl_FragColor = vec4(v_color.xyz , v_color.w * u_opacity);
    #endif
  
 }

src/geom/shader/polygon_vert.glsl

@@ -1,4 +1,5 @@
 precision highp float;
+attribute float pickingId;
 #define ambientRatio 0.5
 #define diffuseRatio 0.4
 #define specularRatio 0.1
@@ -11,10 +12,13 @@ varying vec2 v_texCoord;
 varying  vec4 v_color;
 varying float v_lightWeight;
 varying float v_size;
+varying vec4 worldId;
+#pragma include "pick_color"
 
 void main() {
    float scale = pow(2.0,(20.0 - u_zoom));
-  mat4 matModelViewProjection = projectionMatrix * modelViewMatrix * 100.;
+  mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
+  worldId = id_toPickColor(pickingId);
   vec3 newposition =  position;
   // newposition.x -= 128.0;
    #ifdef SHAPE 
@@ -45,4 +49,6 @@ void main() {
   // v_size = a_size;
   v_color =vec4(a_color.rgb*lightWeight, a_color.w); 
   gl_Position =  matModelViewProjection * vec4(newposition, 1.0);
+  
+
 }

src/geom/shader/shaderChunks/pick_color.glsl

@@ -1,7 +1,7 @@
-    vec4 id_topickColor(float pickingId) {
+vec4 id_toPickColor(float pickingId) {
-      float id = step(0.,pickingId) * pickingId;
+    float id = step(0.,pickingId) * pickingId;
-      vec3 a = fract(vec3(1.0/255.0, 1.0/(255.0*255.0), 1.0/(255.0*255.0*255.0)) * id);
+    vec3 a = fract(vec3(1.0/255.0, 1.0/(255.0*255.0), 1.0/(255.0*255.0*255.0)) * id);
-      a -= a.xxy * vec3(0.0, 1.0/255.0, 1.0/255.0);
+    a -= a.xxy * vec3(0.0, 1.0/255.0, 1.0/255.0);
-      vec4 worldId = vec4(a,1);
+    vec4 worldColor = vec4(a,1);
-      return worldId
+    return worldColor;
-    }
+}

src/util/shaderModule.js

@@ -6,6 +6,7 @@ const moduleCache = {};
 const rawContentCache = {};
 const precisionRegExp = /precision\s+(high|low|medium)p\s+float/;
 const globalDefaultprecision = '#ifdef GL_FRAGMENT_PRECISION_HIGH\n precision highp float;\n #else\n precision mediump float;\n#endif\n';
+// const globalDefaultAttribute = 'attribute float pickingId;\n varying vec4 worldId;\n';
 const includeRegExp = /#pragma include (["^+"]?["\ "[a-zA-Z_0-9](.*)"]*?)/g;
 
 function processModule(rawContent, includeList, type) {