用于自定义 WebGL 图层视图的细分助手

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    const CustomLayerView2D = BaseLayerViewGL2D.createSubclass({
      ...
      constructor: function() {
        ...
        const requestUpdate = function() {
          this.promises = [];
          this.layer.graphics.forEach(this.processGraphic.bind(this));
          promiseUtils.all(this.promises).then((meshes) => {
            this.meshes = meshes;
            this.needsUpdate = true;
            this.requestRender();
          });
        }.bind(this);

        this.watcher = watchUtils.on(
          this,
          "layer.graphics",
          "change",
          requestUpdate,
          requestUpdate,
          requestUpdate
        );
        ...
      }
      ...
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    processGraphic: function (g) {
      switch (g.geometry.type) {
        case "extent":
          // Call this.tessellateExtent()...
          break;
        case "point":
          // Call this.tessellatePoint()...
          break;
        case "multipoint":
          // Call this.tessellateMultipoint()...
          break;
        case "polyline":
          this.promises.push(
            this.tessellatePolyline(
              g.geometry,
              (g.attributes && g.attributes.width != null) ? g.attributes.width : 20
            ).then(function (mesh) {
              return {
                mesh: mesh,
                attributes: g.attributes
              };
            })
          );
          break;
        case "polygon":
          // Call this.tessellatePolygon()...
          break;
      }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    updatePositions: function(renderParameters) {
      ...
      for (let meshIndex = 0; meshIndex < this.meshes.length; ++meshIndex) {
        ...
        const upright = (item.attributes && item.attributes.upright) ? 1 : 0;
        ...
        for (let i = 0; i < mesh.vertices.length; ++i) {
          let v = mesh.vertices[i];
          vertexData[currentVertex * 8 + 0] = v.x - this.centerAtLastUpdate[0];
          vertexData[currentVertex * 8 + 1] = v.y - this.centerAtLastUpdate[1];
          vertexData[currentVertex * 8 + 2] = v.xOffset;
          vertexData[currentVertex * 8 + 3] = v.yOffset;
          vertexData[currentVertex * 8 + 4] = v.uTexcoord;
          vertexData[currentVertex * 8 + 5] = v.vTexcoord;
          vertexData[currentVertex * 8 + 6] = v.distance;
          vertexData[currentVertex * 8 + 7] = upright;
          currentVertex++;
        }
      }

      gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
      ...
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    precision highp float;

    uniform mat3 u_transform;
    uniform mat3 u_rotation;
    uniform mat3 u_display;

    attribute vec2 a_position;
    attribute vec2 a_offset;
    attribute vec2 a_texcoord;
    attribute float a_distance;
    attribute float a_upright;

    varying vec2 v_texcoord;

    void main(void) {
        vec3 transformedOffset = mix(u_rotation * vec3(a_offset, 0.0), vec3(a_offset, 0.0), a_upright);
        gl_Position.xy = (u_display * (u_transform * vec3(a_position, 1.0) + transformedOffset)).xy;
        gl_Position.zw = vec2(0.0, 1.0);
        v_texcoord = a_texcoord;
    }

1
2
3
4
5
6
    precision highp float;
    varying vec2 v_texcoord;

    void main(void) {
        gl_FragColor = vec4(v_texcoord, 0.0, 1.0);
    }