xcsf's Blog

function calculatorEdgeDelta(geometry, edge) {
    let mat = new THREE.Matrix4()
    let deltaV = 0;
    //计算Q1+Q2
    let q1 = calculatorVertexDelta(geometry, edge.a).elements
    let q2 = calculatorVertexDelta(geometry, edge.b).elements
    mat.elements = q1.map((e, i) => {
        return e + q2[i]
    })
    edge.midv = calculatorVertexPos(geometry, edge)
    //计算vT (Q1+Q2) v 得到边的代价(cost)deltaV
    for (let j = 0; j < 4; j++) {
        let t = 0;
        for (let k = 0; k < 4; k++) {
            // console.log(edge.v.getComponent(k))
            t += edge.midv.getComponent(k) * mat.elements[j * 4 + k];
        }
        deltaV += t * edge.midv.getComponent(j)
    }
    edge.deltaV = deltaV
    return edge
}


//计算顶点Q矩阵
//传入一个顶点  找到与其关联的边 再找到 面  求Kp二次基本误差矩阵PTP之和Q 并返回 
function calculatorVertexDelta(geometry, vIndex) {
    let result = new THREE.Matrix4()
    result.elements[0] = 0
    result.elements[5] = 0
    result.elements[10] = 0
    result.elements[15] = 0
    let tmp = new THREE.Vector4()
    let f = findFaceWithVindex(geometry, vIndex)
    //找出与顶点vIndex关联的面 得到其平面方程[a,b,c,d] 计算Kp矩阵之和Q
    f.map(face => {
        //计算平面方程系数abcd 即 法向量(a,b,c)
        //d = -(ax+by+cz)
        let { x, y, z } = face.normal;
        let d = -geometry.vertices[face.a].dot(face.normal)
        tmp.set(x, y, z, d)
        for (let j = 0; j < 4; j++) {
            for (let k = 0; k < 4; k++) {
                result.elements[j * 4 + k] += tmp.getComponent(j) * tmp.getComponent(k);
            }
        }
    })
    return result;
}

var file = document.getElementById("file");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = "rgba(0,0,0,1)";
var width = canvas.width;
var height = canvas.height;

function readAsArrayBuffer(e) {
  context.clearRect(0, 0, width, height);
  var shp = file.files[0];
  var reader = new FileReader();
  reader.readAsArrayBuffer(shp);
  reader.onload = function (f) {
    var dataView = new DataView(this.result);
    var pos = 0;
    var header = parseHeader(dataView, pos);
    pos = header.pos;
    while (pos < header.byteLength) {
      try {
        var shape = parseShape(dataView, pos);
        pos = shape.pos;
        darwShape(header, shape);
      } catch (e) {
        console.log(e);
        break;
      }
    }
  };
}

function darwShape(header, shape) {
  var xWidth = header.maxX - header.minX;
  var yHeight = header.maxY - header.minY;
  var i = 0;
  var x, y;
  context.fillStyle = "rgba(255,0,0,0.6)";
  switch (shape.type) {
    case 1: // Point
    case 11: // PointZ
    case 21: // PointM
      var point = shape.coordinates;
      if (header.maxX == header.minX || header.maxY == header.minY) {
        context.fillRect(width / 2, height / 2, 10, 10);
      } else {
        x = ((point[0] - header.minX) / xWidth) * width;
        y = ((yHeight - (point[1] - header.minY)) / yHeight) * height;
        context.fillRect(x - 5, y - 5, 10, 10);
      }
      break;
    case 8: // MultiPoint
    case 18: // MultiPointZ
    case 28: // MultiPointM
      var points = shape.coordinates;
      for (; i < points.length; i++) {
        x = ((points[i][0] - header.minX) / xWidth) * width;
        y = ((yHeight - (points[i][1] - header.minY)) / yHeight) * height;
        context.fillRect(x - 5, y - 5, 10, 10);
      }
      break;
    case 3: // Polyline
    case 13: // PolylineZ
    case 23: // PolylineM
      var paths = shape.coordinates;
      for (; i < paths.length; i++) {
        context.beginPath();
        for (var j = 0; j < paths[i].length; j++) {
          x = ((paths[i][j][0] - header.minX) / xWidth) * width;
          y = ((yHeight - (paths[i][j][1] - header.minY)) / yHeight) * height;
          if (j == 0) {
            context.moveTo(x, y);
          } else {
            context.lineTo(x, y);
          }
        }
        context.stroke();
      }
      break;
    case 5: // Polygon
    case 15: // PolygonZ
    case 25: // PolygonM
      var rings = shape.coordinates.slice(0);
      // Judging that the previous polygon has been drawed
      for (; i < rings.length; i++) {
        var clockwise = isClockwise(rings[i]);
        if (!clockwise) {
          var gCenter = calcGravityCenter(rings[i]);
          x = ((gCenter[0] - header.minX) / xWidth) * width;
          y = ((yHeight - (gCenter[1] - header.minY)) / yHeight) * height;
          var pickData = context.getImageData(x, y, 1, 1).data;
          if (
            pickData[0] != 0 ||
            pickData[1] != 0 ||
            pickData[2] != 0 ||
            pickData[3] != 0
          ) {
            rings.splice(i, 1);
            i--;
          }
        }
      }

      i = 0;
      for (; i < rings.length; i++) {
        var clockwise = isClockwise(rings[i]);
        if (clockwise) {
          context.beginPath();
          for (var j = 0; j < rings[i].length; j++) {
            x = ((rings[i][j][0] - header.minX) / xWidth) * width;
            y = ((yHeight - (rings[i][j][1] - header.minY)) / yHeight) * height;
            if (j == 0) {
              context.moveTo(x, y);
            } else {
              context.lineTo(x, y);
            }
          }
          context.closePath();
          context.stroke();
          context.fill();
        }
      }
      context.globalCompositeOperation = "destination-out";
      context.fillStyle = "rgba(255,255,255,1)";
      i = 0;
      for (; i < rings.length; i++) {
        var clockwise = isClockwise(rings[i]);
        if (!clockwise) {
          context.beginPath();
          for (var j = 0; j < rings[i].length; j++) {
            x = ((rings[i][j][0] - header.minX) / xWidth) * width;
            y = ((yHeight - (rings[i][j][1] - header.minY)) / yHeight) * height;
            if (j == 0) {
              context.moveTo(x, y);
            } else {
              context.lineTo(x, y);
            }
          }
          context.closePath();
          context.stroke();
          context.fill();
        }
      }
      context.globalCompositeOperation = "source-over";
      break;
  }
}

function isClockwise(ring) {
  if (ring.length < 3) {
    return -1;
  }
  var i = 0,
    j = 0;
  var area = 0;
  for (; i < ring.length; i++) {
    j = (i + 1) % ring.length;
    area += ring[i][0] * ring[j][1];
    area -= ring[j][0] * ring[i][1];
  }
  return area < 0;
}

function calcGravityCenter(ring) {
  var xmin = Number.MAX_VALUE;
  var ymin = Number.MAX_VALUE;
  var i = 0;
  for (; i < ring.length; i++) {
    if (ring[i][0] < xmin) {
      xmin = ring[i][0];
    }
    if (ring[i][1] < ymin) {
      ymin = ring[i][1];
    }
  }
  var momentX = 0;
  var momentY = 0;
  var weight = 0;
  i = 0;
  for (; i < ring.length; i++) {
    var p1 = ring[i];
    var p2;
    if (i == ring.length - 1) {
      p2 = ring[0];
    } else {
      p2 = ring[i + 1];
    }
    var dWeight =
      (p1[0] - xmin) * (p2[1] - p1[1]) -
      ((p1[0] - xmin) * (ymin - p1[1])) / 2 -
      ((p2[0] - xmin) * (p2[1] - ymin)) / 2 -
      ((p1[0] - p2[0]) * (p2[1] - p1[1])) / 2;
    weight += dWeight;
    var pTmp = [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
    var gravityX = xmin + ((pTmp[0] - xmin) * 2) / 3;
    var gravityY = ymin + ((pTmp[1] - ymin) * 2) / 3;
    momentX += gravityX * dWeight;
    momentY += gravityY * dWeight;
  }
  return [momentX / weight, momentY / weight];
}

/**
 * read the shp header info .
 *
 * @param dataView The DataView containing the main shapefile.
 * @param pos The start position of DataView.
 */
function parseHeader(dataView, pos) {
  var header = {};
  header.fileCode = dataView.getInt32(pos, false);
  if (header.fileCode != 0x0000270a) {
    throw new Error("Unknown file code: " + header.fileCode);
  }
  pos += 4;
  pos += 5 * 4; //unused
  var wordLength = dataView.getInt32(pos, false); //bigEndian  the total length of the file in 16-bit words
  header.byteLength = wordLength * 2;
  pos += 4;
  header.version = dataView.getInt32(pos, true); //littleEndian
  pos += 4;
  header.shapeType = dataView.getInt32(pos, true);
  pos += 4;
  header.minX = dataView.getFloat64(pos, true);
  header.minY = dataView.getFloat64(pos + 8, true);
  header.maxX = dataView.getFloat64(pos + 16, true);
  header.maxY = dataView.getFloat64(pos + 24, true);
  header.minZ = dataView.getFloat64(pos + 32, true);
  header.maxZ = dataView.getFloat64(pos + 40, true);
  header.minM = dataView.getFloat64(pos + 48, true);
  header.maxM = dataView.getFloat64(pos + 56, true);
  pos += 8 * 8;
  header.pos = pos;
  return header;
}

/**
 * read the shp content.
 *
 * @param dataView The DataView containing the main shapefile.
 * @param pos The start position of DataView.
 */
function parseShape(dataView, pos) {
  var shape = {};
  shape.number = dataView.getInt32(pos, false); //bigEndian
  pos += 4;
  shape.length = dataView.getInt32(pos, false) * 2; //bigEndian
  pos += 4;
  shape.type = dataView.getInt32(pos, true); //littleEndian
  pos += 4;

  var i = 0;
  var coordinates = [];
  switch (shape.type) {
    case 0: // Null
      break;
    case 1: // Point (x,y)
    case 11: // PointZ (X, Y, Z, M)
    case 21: // PointM (X, Y, M)
      var point = [
        dataView.getFloat64(pos, true),
        dataView.getFloat64(pos + 8, true),
      ];
      pos += 16;
      coordinates = point;
      if (shape.type == 11) {
        pos += 8; //read z value float64
        pos += 8; //read m value float64
      }
      if (shape.type == 21) {
        pos += 8; //read m value float64
      }
      shape.coordinates = coordinates;
      break;
    case 8: // MultiPoint (MBR, pointCount, points)
    case 18: // MultiPointZ
    case 28: // MultiPointM
      var minX = dataView.getFloat64(pos, true);
      var minY = dataView.getFloat64(pos + 8, true);
      var maxX = dataView.getFloat64(pos + 16, true);
      var maxY = dataView.getFloat64(pos + 24, true);
      var pointCount = dataView.getInt32(pos + 32, true); //x y
      pos += 36; //8*4+4
      for (i = 0; i < pointCount; i++) {
        var point = [
          dataView.getFloat64(pos, true),
          dataView.getFloat64(pos + 8, true),
        ];
        pos += 16;
        coordinates.push(point);
      }
      if (shape.type == 18) {
        pos += 8; //zmin
        pos += 8; //zmax
        pos += pointCount * 8; //read z values float64

        pos += 8; //mmin
        pos += 8; //mmax
        pos += pointCount * 8; //read m values float64
      }
      if (shape.type == 28) {
        pos += 8; //mmin
        pos += 8; //mmax
        pos += pointCount * 8; //read m values float64
      }
      shape.extent = {
        minX: minX,
        minY: minY,
        maxX: maxX,
        maxY: maxY,
      };
      shape.coordinates = coordinates;
      break;
    case 3: // Polyline
    case 13: // PolylineZ
    case 23: // PolylineM
    case 5: // Polygon
    case 15: // PolygonZ
    case 25: // PolygonM
      var minX = dataView.getFloat64(pos, true);
      var minY = dataView.getFloat64(pos + 8, true);
      var maxX = dataView.getFloat64(pos + 16, true);
      var maxY = dataView.getFloat64(pos + 24, true);
      var parts = new Int32Array(dataView.getInt32(pos + 32, true));
      var pointCount = dataView.getInt32(pos + 36, true); //x y
      pos += 40; //8*4+4+4

      for (i = 0; i < parts.length; i++) {
        parts[i] = dataView.getInt32(pos, true);
        pos += 4;
        coordinates.push([]);
      }
      var p = 1;
      for (i = 0; i < pointCount; i++) {
        var point = [
          dataView.getFloat64(pos, true),
          dataView.getFloat64(pos + 8, true),
        ];
        pos += 16;
        if (p >= parts.length) {
          coordinates[p - 1].push(point);
        } else {
          if (i < parts[p]) {
            coordinates[p - 1].push(point);
          } else {
            p++;
          }
        }
      }
      if (shape.type == 15 || shape.type == 13) {
        pos += 8; //zmin
        pos += 8; //zmax
        pos += pointCount * 8; //read z values float64

        pos += 8; //mmin
        pos += 8; //mmax
        pos += pointCount * 8; //read m values float64
      }
      if (shape.type == 25 || shape.type == 23) {
        pos += 8; //mmin
        pos += 8; //mmax
        pos += pointCount * 8; //read m values float64
      }
      shape.extent = {
        minX: minX,
        minY: minY,
        maxX: maxX,
        maxY: maxY,
      };
      shape.coordinates = coordinates;
      break;
    case 31: // MultiPatch
      throw new Error("Shape type not supported: " + shape.type);
    default:
      throw new Error("Unknown shape type at " + (pos - 4) + ": " + shape.type);
  }
  shape.pos = pos;
  return shape;
}

//页面可以自动同步state
//一个state的追踪函数 onStateChanged()
//当state改变时更新页面
onStateChanged(() => {
  view = render(state)
})
//它内部大概是实现
let update, state
const onStateChanged = _update => {
  update = _update
}
//接受一个newState,更新oldState，然后调用update()
//React中每次去setState就好
const setState = newState => {
  state = newState
  update()
}
setState({ a: 5 })

//Vue or Angular 直接访问state.a
state.a = 5
//Ang使用的是脏检查，而Vue中每一个state变得reactive（使用object.defineProperty）

function observe(obj){
  Object.keys(obj).forEach((key)=>{
    let temp = obj[key]
    Object.defineProperty(obj,key,{
      get:function(){
        console.log('get count is :', temp)
        return temp;
      },
      set:function(newvalue){
        temp = newvalue;
        console.log('set count is: ',temp)
      }
    })
  })
}

window.Dep = class Dep {
  constructor(){
    this.subscribers = new Set()
  }
  depend(){
    if(activeUpdate){
      this.subscribers.add(activeUpdate)
    }
    console.log('is depended')
  }
  notify(){
    this.subscribers.forEach((subscriber)=>{subscriber()})
  }
}
let activeUpdate;
function autorun (update) {
  //这里使用一个WrappedUpdate包裹住update，运行时update中调用的depend可以
  //拿到activeUpdate，而且这样做我们可以知道当前正在执行的是哪一个update()
  function WrappedUpdate() {
    activeUpdate = WrappedUpdate
    update()
    activeUpdate = null
  }
  WrappedUpdate()
}

Matrix4.prototype.setOrtho = function(left, right, bottom, top, near, far) {
  var e, rw, rh, rd;

  if (left === right || bottom === top || near === far) {
    throw 'null frustum';
  }
  rw = 1 / (right - left);
  rh = 1 / (top - bottom);
  rd = 1 / (far - near);

  e = this.elements;

  e[0]  = 2 * rw;
  e[1]  = 0;
  e[2]  = 0;
  e[3]  = 0;

  e[4]  = 0;
  e[5]  = 2 * rh;
  e[6]  = 0;
  e[7]  = 0;

  e[8]  = 0;
  e[9]  = 0;
  e[10] = -2 * rd;
  e[11] = 0;

  e[12] = -(right + left) * rw;
  e[13] = -(top + bottom) * rh;
  e[14] = -(far + near) * rd;
  e[15] = 1;

  return this;
};

gl.createShader(type) //1.创建着色器对象
gl.shaderSource(shader, source) //2.向着色器对象中填充着色器程序源代码
gl.compileShader(shader) //3.编译着色器
---------
gl.createProgram() //4.创建程序对象
gl.attachShader(program, shader) //5.为程序对象分配着色器
gl.linkProgram(program) //6.连接程序对象
gl.useProgram(program) //7.使用程序对象