Try things

lib/render/gat.ts

@@ -8,15 +8,47 @@ import fragmentSource from "./gat.frag";
 /* @ts-ignore */
 import vertexSource from "./gat.vert";
 
+const ORIGIN = vec4.fromValues(0, 0, 0, 1);
 const UP = vec3.fromValues(0, 1, 0);
 
-export const renderGAT = (gl: WebGLRenderingContext, gat: GAT) => {
-  console.log("gat", gat);
+const printMat4 = (name: string, m: mat4) => {
+  console.log(name);
+  console.log([m[0], m[1], m[2], m[3]]);
+  console.log([m[4], m[5], m[6], m[7]]);
+  console.log([m[8], m[9], m[10], m[11]]);
+  console.log([m[12], m[13], m[14], m[15]]);
+};
 
-  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+// Function to download data to a file
+function download(data: BlobPart, filename: string, type: string) {
+  var file = new Blob([data], { type: type });
+  // Others
+  var a = document.createElement("a"),
+    url = URL.createObjectURL(file);
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(function () {
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  }, 0);
+}
+
+const exportObj = (vertices: number[]): string => {
+  let obj = "";
+  for (let i = 0; i < vertices.length / 3; ++i) {
+    obj += `v ${vertices[i]} ${vertices[i + 1]} ${vertices[i + 2]}\n`;
+  }
+  for (let i = 0; i < vertices.length / (3 * 2); ++i) {
+    obj += `f ${i + 1} ${i + 2} ${i + 3}\n`;
+    obj += `f ${i + 4} ${i + 5} ${i + 6}\n`;
+  }
+  return obj;
+};
 
-  gl.clearColor(0, 0, 0, 1);
-  gl.clear(gl.COLOR_BUFFER_BIT);
+export const renderGAT = (gl: WebGLRenderingContext, gat: GAT) => {
+  console.log("gat", gat);
 
   const fragmentShader = createShader(gl, ShaderType.FRAGMENT, fragmentSource);
   const vertexShader = createShader(gl, ShaderType.VERTEX, vertexSource);
@@ -43,10 +75,16 @@ export const renderGAT = (gl: WebGLRenderingContext, gat: GAT) => {
 
   const model = mat4.create();
   mat4.identity(model);
-  mat4.translate(model, model, vec3.fromValues(-centerX, 0, -centerZ));
+  mat4.translate(
+    model,
+    model,
+    vec3.fromValues(-centerX, -maxAltitude - 10, -centerZ)
+  );
 
   const view = mat4.create();
-  mat4.lookAt(view, camera, center, UP);
+  mat4.identity(view);
+  mat4.rotateX(view, view, -Math.PI / 2);
+  // mat4.lookAt(view, camera, center, UP);
 
   const perspective = mat4.create();
   const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
@@ -54,15 +92,20 @@ export const renderGAT = (gl: WebGLRenderingContext, gat: GAT) => {
 
   const matrix = mat4.create();
   mat4.multiply(matrix, view, model);
+  printMat4("view * model", matrix);
   mat4.multiply(matrix, perspective, matrix);
 
   const matrixLoc = gl.getUniformLocation(program, "u_matrix");
   gl.uniformMatrix4fv(matrixLoc, false, matrix);
 
-  console.log("model", model);
-  console.log("view", view);
-  console.log("projection", perspective);
-  console.log("matrix", matrix);
+  printMat4("model", model);
+  printMat4("view", view);
+  printMat4("projection", perspective);
+  printMat4("matrix", matrix);
+
+  const origin = vec4.create();
+  vec4.transformMat4(origin, ORIGIN, matrix);
+  console.log("origin", origin);
 
   const vertices: number[] = [];
 
@@ -85,31 +128,37 @@ export const renderGAT = (gl: WebGLRenderingContext, gat: GAT) => {
     );
   });
 
-  let failCount = 0;
-  for (let i = 0; i < vertices.length / 3; ++i) {
-    const vec = vec3.fromValues(vertices[i], vertices[i + 1], vertices[i + 2]);
-    const result = checkPixelCoord(vec, matrix);
-    if (result) {
-      if (failCount < 10) {
-        console.log(vec);
-        console.log(result);
-      }
-      failCount++;
-    }
-  }
-  console.log("failCount", failCount);
-  console.log("totalCount", vertices.length / 3);
-
-  const positionLoc = gl.getAttribLocation(program, "a_position");
+  console.log("# vertices", vertices.length / 3);
+
+  // download(exportObj(vertices), "heightmap.obj", "text/plain");
+
+  // let failCount = 0;
+  // for (let i = 0; i < vertices.length / 3; ++i) {
+  //   const vec = vec3.fromValues(vertices[i], vertices[i + 1], vertices[i + 2]);
+  //   const result = checkPixelCoord(vec, matrix);
+  //   if (result) {
+  //     if (failCount < 10) {
+  //       // console.log(vec);
+  //       // console.log(result);
+  //     }
+  //     failCount++;
+  //   }
+  // }
+  // console.log("failCount", failCount);
+  // console.log("totalCount", vertices.length / 3);
 
   const vertexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
 
-  gl.enableVertexAttribArray(positionLoc);
-
+  const positionLoc = gl.getAttribLocation(program, "a_position");
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0);
+  gl.enableVertexAttribArray(positionLoc);
+
+  gl.clearColor(0, 0, 0, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
   gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);
 };

lib/render/gat.vert

@@ -3,5 +3,5 @@ attribute vec3 a_position;
 uniform mat4 u_matrix;
 
 void main() {
-    gl_Position = u_matrix * vec4(a_position, 1.0);
+    gl_Position = vec4(a_position, 1.0);
 }