Browse Source

Try things

master
Forest Belton 2 years ago
parent
commit
76c05e1ae0
2 changed files with 79 additions and 30 deletions
  1. +78
    -29
      lib/render/gat.ts
  2. +1
    -1
      lib/render/gat.vert

+ 78
- 29
lib/render/gat.ts View File

@ -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);
};

+ 1
- 1
lib/render/gat.vert View File

@ -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);
}

Loading…
Cancel
Save