SummationByParts/main.js

280 lines
8.7 KiB
JavaScript
Raw Normal View History

2020-01-27 20:20:34 +00:00
import { EulerUniverse, MaxwellUniverse, default as init, set_panic_hook as setPanicHook } from "./sbp.js";
2019-04-07 20:13:09 +00:00
2019-12-10 17:53:14 +00:00
/**
* Initialises and runs the Maxwell solver,
* plotting the solution to a canvas using webgl
*/
(async function run() {
2020-01-27 20:20:34 +00:00
const wasm = await init("./sbp_bg.wasm");
2019-12-10 17:53:14 +00:00
setPanicHook();
2019-12-10 21:03:42 +00:00
const DIAMOND = false;
2020-01-26 14:46:54 +00:00
const UPWIND = true;
2019-03-27 21:19:52 +00:00
2019-03-27 21:51:03 +00:00
const canvas = document.getElementById("glCanvas");
2019-03-27 21:19:52 +00:00
const gl = canvas.getContext("webgl");
if (gl === null) {
console.error("Unable to initialise WebGL");
return;
2019-07-21 11:26:26 +00:00
}
2019-03-27 21:19:52 +00:00
2019-12-08 22:48:53 +00:00
const vsSource = String.raw`
#version 100
attribute mediump float aX;
attribute mediump float aY;
attribute mediump float aField;
2019-03-27 21:19:52 +00:00
2019-12-08 22:48:53 +00:00
uniform vec4 uBbox;
2019-12-08 22:48:53 +00:00
varying mediump float vField;
2019-03-27 21:19:52 +00:00
void main() {
2019-12-08 22:48:53 +00:00
vField = aField;
mediump float x = (aX - uBbox.x)*uBbox.y;
mediump float y = (aY - uBbox.z)*uBbox.w;
gl_Position = vec4(2.0*x - 1.0, 2.0*y - 1.0, 1.0, 1.0);
2019-03-27 21:19:52 +00:00
}
`;
const fsSource = String.raw`
2019-12-08 22:48:53 +00:00
#version 100
varying mediump float vField;
2019-03-27 21:19:52 +00:00
2019-08-09 17:54:58 +00:00
uniform int uChosenField;
2019-03-28 19:21:52 +00:00
2019-03-27 21:19:52 +00:00
void main() {
2019-08-09 17:54:58 +00:00
mediump float r = 0.0;
mediump float g = 0.0;
mediump float b = 0.0;
2019-12-08 22:48:53 +00:00
if (uChosenField == 0) {
r = vField + 0.5;
} else if (uChosenField == 1) {
2020-01-25 19:40:55 +00:00
g = 2.5*(vField - 1.0) + 0.5;
2019-12-08 22:48:53 +00:00
} else {
b = vField + 0.5;
2019-08-09 17:54:58 +00:00
}
gl_FragColor = vec4(r, g, b, 1.0);
2019-03-27 21:19:52 +00:00
}
`;
const vsShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vsShader, vsSource);
gl.compileShader(vsShader);
if (!gl.getShaderParameter(vsShader, gl.COMPILE_STATUS)) {
2019-12-10 17:53:14 +00:00
console.error(`Could not compile shader: ${gl.getShaderInfoLog(vsShader)}`);
2019-03-27 21:19:52 +00:00
return;
}
const fsShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fsShader, fsSource);
gl.compileShader(fsShader);
if (!gl.getShaderParameter(fsShader, gl.COMPILE_STATUS)) {
2019-12-10 17:53:14 +00:00
console.error(`Could not compile shader: ${gl.getShaderInfoLog(fsShader)}`);
2019-03-27 21:19:52 +00:00
return;
}
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vsShader);
gl.attachShader(shaderProgram, fsShader);
gl.linkProgram(shaderProgram);
gl.validateProgram(shaderProgram);
2019-03-27 21:19:52 +00:00
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
2019-12-10 17:53:14 +00:00
console.error(`Unable to link shader program: ${gl.getProgramInfoLog(shaderProgram)}`);
2019-03-27 21:19:52 +00:00
return;
}
gl.useProgram(shaderProgram);
2019-03-27 21:19:52 +00:00
2019-12-10 17:53:14 +00:00
// A nice pink to show missing values
gl.clearColor(1.0, 0.753, 0.796, 1.0);
2019-12-08 22:48:53 +00:00
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.disable(gl.CULL_FACE);
console.info("Successfully set OpenGL state");
const width = 40;
const height = 50;
2019-03-27 21:19:52 +00:00
2019-12-08 22:48:53 +00:00
2019-12-10 17:53:14 +00:00
const x = new Float32Array(width * height);
const y = new Float32Array(width * height);
for (let j = 0; j < height; j += 1) {
for (let i = 0; i < width; i += 1) {
2019-12-08 22:48:53 +00:00
const n = width*j + i;
2020-01-27 18:49:51 +00:00
x[n] = 20.0*(i / (width - 1.0) - 0.5);
y[n] = 20.0*(j / (height - 1.0) - 0.5);
2019-12-10 21:03:42 +00:00
if (DIAMOND) {
const xx = x[n];
const yy = y[n];
x[n] = xx - yy;
y[n] = xx + yy;
}
2019-12-08 22:48:53 +00:00
}
}
2020-01-25 19:40:55 +00:00
const universe = new EulerUniverse(height, width, x, y);
2019-12-08 22:48:53 +00:00
// Transfer x, y to cpu, prepare fBuffer
const xBuffer = gl.createBuffer();
const yBuffer = gl.createBuffer();
const fBuffer = gl.createBuffer();
{
2019-12-08 22:48:53 +00:00
const numcomp = 1;
const type = gl.FLOAT;
const normalise = false;
const stride = 0;
const offset = 0;
2019-03-27 21:19:52 +00:00
2019-12-10 17:53:14 +00:00
let loc = gl.getAttribLocation(shaderProgram, "aX");
2019-12-08 22:48:53 +00:00
gl.bindBuffer(gl.ARRAY_BUFFER, xBuffer);
gl.vertexAttribPointer(loc, numcomp, type, normalise, stride, offset);
gl.enableVertexAttribArray(loc);
gl.bufferData(gl.ARRAY_BUFFER, x, gl.STATIC_DRAW);
2019-12-10 17:53:14 +00:00
loc = gl.getAttribLocation(shaderProgram, "aY");
2019-12-08 22:48:53 +00:00
gl.bindBuffer(gl.ARRAY_BUFFER, yBuffer);
gl.vertexAttribPointer(loc, numcomp, type, normalise, stride, offset);
gl.enableVertexAttribArray(loc);
gl.bufferData(gl.ARRAY_BUFFER, y, gl.STATIC_DRAW);
2019-12-10 17:53:14 +00:00
loc = gl.getAttribLocation(shaderProgram, "aField");
2019-12-08 22:48:53 +00:00
gl.bindBuffer(gl.ARRAY_BUFFER, fBuffer);
gl.vertexAttribPointer(loc, numcomp, type, normalise, stride, offset);
2019-12-10 17:53:14 +00:00
gl.enableVertexAttribArray(loc);
2019-08-09 19:00:15 +00:00
}
2019-08-09 17:54:58 +00:00
2019-12-08 22:48:53 +00:00
// Create triangles covering the domain
2019-12-10 17:53:14 +00:00
const positions = new Int16Array((width-1)*(height-1)*2*3);
for (let j = 0; j < height - 1; j += 1) {
for (let i = 0; i < width - 1; i += 1) {
2019-12-08 22:48:53 +00:00
const n = 2*3*((width-1)*j + i);
positions[n+0] = width*j + i;
positions[n+1] = width*j + i+1;
positions[n+2] = width*(j+1) + i;
positions[n+3] = width*j + i+1;
positions[n+4] = width*(j+1) + i;
positions[n+5] = width*(j+1) + i+1;
}
}
2019-03-28 19:21:52 +00:00
2019-12-08 22:48:53 +00:00
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, positions, gl.STATIC_DRAW);
2019-03-28 19:21:52 +00:00
2019-12-10 17:53:14 +00:00
const bbox = [+Number(Infinity), -Number(Infinity), +Number(Infinity), -Number(Infinity)];
for (let i = 0; i < width*height; i += 1) {
2019-12-08 22:48:53 +00:00
bbox[0] = Math.min(bbox[0], x[i]);
bbox[1] = Math.max(bbox[1], x[i]);
bbox[2] = Math.min(bbox[2], y[i]);
bbox[3] = Math.max(bbox[3], y[i]);
}
2019-03-28 19:21:52 +00:00
2019-12-08 22:48:53 +00:00
{
2019-12-10 17:53:14 +00:00
const loc = gl.getUniformLocation(shaderProgram, "uBbox");
2019-12-08 22:48:53 +00:00
gl.uniform4f(loc, bbox[0], 1.0/(bbox[1] - bbox[0]), bbox[2], 1.0/(bbox[3] - bbox[2]));
}
2019-03-28 19:21:52 +00:00
2019-11-09 12:07:42 +00:00
const TIMEFACTOR = 10000.0;
2020-01-27 18:49:51 +00:00
const MAX_DT = Math.min(1.0/width, 1.0/height)*0.2;
2019-09-03 17:41:20 +00:00
let t = 0;
2019-12-10 17:53:14 +00:00
let firstDraw = true;
let warnTime = -1;
2019-12-08 22:48:53 +00:00
const chosenField = {
2019-12-10 17:53:14 +00:00
"uLocation": gl.getUniformLocation(shaderProgram, "uChosenField"),
"value": 0,
"cycle": function cycle() {
if (this.value === 0) {
2019-12-08 22:48:53 +00:00
this.value = 1;
2019-12-10 17:53:14 +00:00
} else if (this.value === 1) {
2019-12-08 22:48:53 +00:00
this.value = 2;
} else {
this.value = 0;
}
gl.uniform1i(this.uLocation, this.value);
2019-12-10 17:53:14 +00:00
}
2019-12-08 22:48:53 +00:00
};
chosenField.cycle();
2019-09-03 17:41:20 +00:00
2020-01-27 18:49:51 +00:00
universe.init(0, 0);
2019-07-21 13:47:01 +00:00
2019-12-10 17:53:14 +00:00
/**
* Integrates and draws the next iteration
* @param {Time} timeOfDraw Time of drawing
*/
function drawMe(timeOfDraw) {
2019-03-27 21:51:03 +00:00
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
2020-01-26 15:46:57 +00:00
let dt = 0.01;
2019-07-17 20:49:36 +00:00
2019-12-10 17:53:14 +00:00
let fieldPtr;
if (chosenField.value === 0) {
2020-01-25 19:40:55 +00:00
fieldPtr = universe.get_rho_ptr();
2019-12-10 17:53:14 +00:00
} else if (chosenField.value === 1) {
2020-01-25 19:40:55 +00:00
fieldPtr = universe.get_rhou_ptr();
} else if (chosenField.value == 2) {
fieldPtr = universe.get_rhov_ptr();
2019-12-08 22:48:53 +00:00
} else {
2020-01-25 19:40:55 +00:00
fieldPtr = universe.get_e_ptr();
};
2019-12-10 17:53:14 +00:00
const field = new Float32Array(wasm.memory.buffer, fieldPtr, width*height);
2019-12-08 22:48:53 +00:00
gl.bufferData(gl.ARRAY_BUFFER, field, gl.DYNAMIC_DRAW);
2020-01-26 14:46:54 +00:00
// console.log(field.reduce((min, v) => v < min ? v : min));
// console.log(field.reduce((max, v) => v > max ? v : max));
2019-03-27 21:19:52 +00:00
{
const offset = 0;
2019-12-08 22:48:53 +00:00
const type = gl.UNSIGNED_SHORT;
const vertexCount = positions.length;
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
}
2019-07-17 20:49:36 +00:00
2020-01-26 14:46:54 +00:00
if (UPWIND) {
2020-01-27 18:49:51 +00:00
universe.advance_upwind(MAX_DT);
universe.advance_upwind(MAX_DT);
2020-01-26 14:46:54 +00:00
} else {
2020-01-27 18:49:51 +00:00
universe.advance(MAX_DT);
universe.advance(MAX_DT);
2020-01-26 14:46:54 +00:00
}
2019-12-11 18:32:03 +00:00
2019-07-17 20:49:36 +00:00
window.requestAnimationFrame(drawMe);
2019-03-27 21:19:52 +00:00
}
2019-03-27 21:51:03 +00:00
// https://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport#8486324
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
}
2019-03-27 21:19:52 +00:00
2019-12-10 17:53:14 +00:00
window.addEventListener("keyup", event => {
if (event.key === "c") {
2019-12-08 22:48:53 +00:00
chosenField.cycle();
2019-08-09 17:54:58 +00:00
}
2019-12-10 17:53:14 +00:00
}, {"passive": true});
window.addEventListener("resize", resizeCanvas, false);
window.addEventListener("click", event => {
2019-12-08 22:48:53 +00:00
// Must adjust for bbox and transformations for x/y
2019-08-09 19:34:39 +00:00
const mousex = event.clientX / window.innerWidth;
const mousey = event.clientY / window.innerHeight;
2020-01-26 14:46:54 +00:00
const normx = mousex;
const normy = 1.0 - mousey;
universe.init(
(bbox[1] - bbox[0])*normx + bbox[0],
(bbox[3] - bbox[2])*normy + bbox[2],
);
2019-12-10 17:53:14 +00:00
}, {"passive": true});
2019-08-09 19:34:39 +00:00
2019-03-27 21:51:03 +00:00
resizeCanvas();
2019-07-17 20:49:36 +00:00
window.requestAnimationFrame(drawMe);
2019-12-10 17:53:14 +00:00
}());