move to main directory
This commit is contained in:
Magnus Ulimoen
parent
a6c2adf0f0
commit
2989acfcce
|
|
@ -1,282 +0,0 @@
|
|||
import { EulerUniverse, default as init, set_panic_hook as setPanicHook } from "../sbp_web.js";
|
||||
|
||||
/**
|
||||
* Initialises and runs the Euler solver,
|
||||
* plotting the solution to a canvas using webgl
|
||||
*/
|
||||
(async function run() {
|
||||
const wasm = await init("../sbp_web_bg.wasm");
|
||||
setPanicHook();
|
||||
const DIAMOND = false;
|
||||
const UPWIND = true;
|
||||
const MEASURE = false;
|
||||
|
||||
const canvas = document.getElementById("glCanvas");
|
||||
|
||||
const gl = canvas.getContext("webgl");
|
||||
if (gl === null) {
|
||||
console.error("Unable to initialise WebGL");
|
||||
return;
|
||||
}
|
||||
|
||||
const vsSource = String.raw`
|
||||
#version 100
|
||||
attribute mediump float aX;
|
||||
attribute mediump float aY;
|
||||
attribute mediump float aField;
|
||||
|
||||
uniform vec4 uBbox;
|
||||
|
||||
varying mediump float vField;
|
||||
|
||||
void main() {
|
||||
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);
|
||||
}
|
||||
`;
|
||||
|
||||
const fsSource = String.raw`
|
||||
#version 100
|
||||
varying mediump float vField;
|
||||
|
||||
uniform int uChosenField;
|
||||
|
||||
void main() {
|
||||
mediump float r = 0.0;
|
||||
mediump float g = 0.0;
|
||||
mediump float b = 0.0;
|
||||
|
||||
if (uChosenField == 0) {
|
||||
r = vField + 0.5;
|
||||
} else if (uChosenField == 1) {
|
||||
g = 2.5*(vField - 1.0) + 0.5;
|
||||
} else {
|
||||
b = vField + 0.5;
|
||||
}
|
||||
gl_FragColor = vec4(r, g, b, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const vsShader = gl.createShader(gl.VERTEX_SHADER);
|
||||
gl.shaderSource(vsShader, vsSource);
|
||||
gl.compileShader(vsShader);
|
||||
if (!gl.getShaderParameter(vsShader, gl.COMPILE_STATUS)) {
|
||||
console.error(`Could not compile shader: ${gl.getShaderInfoLog(vsShader)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const fsShader = gl.createShader(gl.FRAGMENT_SHADER);
|
||||
gl.shaderSource(fsShader, fsSource);
|
||||
gl.compileShader(fsShader);
|
||||
if (!gl.getShaderParameter(fsShader, gl.COMPILE_STATUS)) {
|
||||
console.error(`Could not compile shader: ${gl.getShaderInfoLog(fsShader)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const shaderProgram = gl.createProgram();
|
||||
gl.attachShader(shaderProgram, vsShader);
|
||||
gl.attachShader(shaderProgram, fsShader);
|
||||
gl.linkProgram(shaderProgram);
|
||||
gl.validateProgram(shaderProgram);
|
||||
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
|
||||
console.error(`Unable to link shader program: ${gl.getProgramInfoLog(shaderProgram)}`);
|
||||
return;
|
||||
}
|
||||
gl.useProgram(shaderProgram);
|
||||
|
||||
// A nice pink to show missing values
|
||||
gl.clearColor(1.0, 0.753, 0.796, 1.0);
|
||||
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;
|
||||
|
||||
|
||||
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) {
|
||||
const n = width*j + i;
|
||||
x[n] = 20.0*(i / (width - 1.0) - 0.5);
|
||||
y[n] = 20.0*(j / (height - 1.0) - 0.5);
|
||||
|
||||
|
||||
if (DIAMOND) {
|
||||
const xx = x[n];
|
||||
const yy = y[n];
|
||||
x[n] = xx - yy;
|
||||
y[n] = xx + yy;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const universe = new EulerUniverse(height, width, x, y);
|
||||
|
||||
|
||||
// Transfer x, y to cpu, prepare fBuffer
|
||||
const xBuffer = gl.createBuffer();
|
||||
const yBuffer = gl.createBuffer();
|
||||
const fBuffer = gl.createBuffer();
|
||||
{
|
||||
const numcomp = 1;
|
||||
const type = gl.FLOAT;
|
||||
const normalise = false;
|
||||
const stride = 0;
|
||||
const offset = 0;
|
||||
|
||||
let loc = gl.getAttribLocation(shaderProgram, "aX");
|
||||
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);
|
||||
|
||||
loc = gl.getAttribLocation(shaderProgram, "aY");
|
||||
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);
|
||||
|
||||
loc = gl.getAttribLocation(shaderProgram, "aField");
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, fBuffer);
|
||||
gl.vertexAttribPointer(loc, numcomp, type, normalise, stride, offset);
|
||||
gl.enableVertexAttribArray(loc);
|
||||
}
|
||||
|
||||
// Create triangles covering the domain
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
const indexBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
|
||||
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, positions, gl.STATIC_DRAW);
|
||||
|
||||
const bbox = [+Number(Infinity), -Number(Infinity), +Number(Infinity), -Number(Infinity)];
|
||||
for (let i = 0; i < width*height; i += 1) {
|
||||
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]);
|
||||
}
|
||||
|
||||
{
|
||||
const loc = gl.getUniformLocation(shaderProgram, "uBbox");
|
||||
gl.uniform4f(loc, bbox[0], 1.0/(bbox[1] - bbox[0]), bbox[2], 1.0/(bbox[3] - bbox[2]));
|
||||
}
|
||||
|
||||
const TIMEFACTOR = 10000.0;
|
||||
const MAX_DT = Math.min(1.0/width, 1.0/height)*0.2;
|
||||
|
||||
let t = 0;
|
||||
let firstDraw = true;
|
||||
let warnTime = -1;
|
||||
const chosenField = {
|
||||
"uLocation": gl.getUniformLocation(shaderProgram, "uChosenField"),
|
||||
"value": 0,
|
||||
"cycle": function cycle() {
|
||||
if (this.value === 0) {
|
||||
this.value = 1;
|
||||
} else if (this.value === 1) {
|
||||
this.value = 2;
|
||||
} else {
|
||||
this.value = 0;
|
||||
}
|
||||
gl.uniform1i(this.uLocation, this.value);
|
||||
}
|
||||
};
|
||||
chosenField.cycle();
|
||||
|
||||
universe.init(0, 0);
|
||||
|
||||
/**
|
||||
* Integrates and draws the next iteration
|
||||
* @param {Time} timeOfDraw Time of drawing
|
||||
*/
|
||||
function drawMe(timeOfDraw) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
|
||||
let fieldPtr;
|
||||
if (chosenField.value === 0) {
|
||||
fieldPtr = universe.get_rho_ptr();
|
||||
} else if (chosenField.value === 1) {
|
||||
fieldPtr = universe.get_rhou_ptr();
|
||||
} else if (chosenField.value == 2) {
|
||||
fieldPtr = universe.get_rhov_ptr();
|
||||
} else {
|
||||
fieldPtr = universe.get_e_ptr();
|
||||
};
|
||||
MEASURE && console.time("draw");
|
||||
const field = new Float32Array(wasm.memory.buffer, fieldPtr, width*height);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, field, gl.DYNAMIC_DRAW);
|
||||
// console.log(field.reduce((min, v) => v < min ? v : min));
|
||||
// console.log(field.reduce((max, v) => v > max ? v : max));
|
||||
|
||||
{
|
||||
const offset = 0;
|
||||
const type = gl.UNSIGNED_SHORT;
|
||||
const vertexCount = positions.length;
|
||||
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
|
||||
}
|
||||
MEASURE && console.timeEnd("draw");
|
||||
|
||||
MEASURE && console.time("advance");
|
||||
if (UPWIND) {
|
||||
universe.advance_upwind(MAX_DT);
|
||||
universe.advance_upwind(MAX_DT);
|
||||
} else {
|
||||
universe.advance(MAX_DT);
|
||||
universe.advance(MAX_DT);
|
||||
}
|
||||
MEASURE && console.timeEnd("advance");
|
||||
|
||||
window.requestAnimationFrame(drawMe);
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
window.addEventListener("keyup", event => {
|
||||
if (event.key === "c") {
|
||||
chosenField.cycle();
|
||||
}
|
||||
}, {"passive": true});
|
||||
window.addEventListener("resize", resizeCanvas, false);
|
||||
window.addEventListener("click", event => {
|
||||
// Must adjust for bbox and transformations for x/y
|
||||
const mousex = event.clientX / window.innerWidth;
|
||||
const mousey = event.clientY / window.innerHeight;
|
||||
|
||||
const normx = mousex;
|
||||
const normy = 1.0 - mousey;
|
||||
|
||||
universe.init(
|
||||
(bbox[1] - bbox[0])*normx + bbox[0],
|
||||
(bbox[3] - bbox[2])*normy + bbox[2],
|
||||
);
|
||||
}, {"passive": true});
|
||||
|
||||
resizeCanvas();
|
||||
window.requestAnimationFrame(drawMe);
|
||||
}());
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!doctype html>
|
||||
<!--https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="by-hand" />
|
||||
<meta name="viewpost" context="width=device-width, inital-scale=1.0, user-scalable=yes" />
|
||||
<title>Euler solver (ΣBP)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
||||
<script async type="module" src="euler.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="glCanvas"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!doctype html>
|
||||
<!--https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="by-hand" />
|
||||
<meta name="viewport" context="width=device-width, inital-scale=1.0, user-scalable=yes" />
|
||||
<title>ΣBP Solver</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script async type="module" src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas">
|
||||
<canvas id="glCanvas"></canvas>
|
||||
</div>
|
||||
<div class="vertical-menu" id="menu">
|
||||
<div class="menu-item">
|
||||
<p class="menu-header">Choose an equation set</p>
|
||||
<select id="eq-set" name="eq-set">
|
||||
<option value="euler"> Euler</option>
|
||||
<option value="maxwell"> Maxwell</option>
|
||||
<option value="shallow"> Shallow Water</option>
|
||||
</select>
|
||||
<div class="eq-set-options" id="euler-options">
|
||||
The compressible Euler equations
|
||||
</div>
|
||||
<div class="eq-set-options" id="maxwell-options">
|
||||
The Maxwell equations in 2D
|
||||
</div>
|
||||
<div class="eq-set-options" id="shallow-options">
|
||||
The Shallow Water Equations describes the surface of a body of water
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid menu-item">
|
||||
<p class="menu-header">Grid</p>
|
||||
<div class="horizontal-flex">
|
||||
x:
|
||||
<label for="x0">x0:</label><input type="number" name="x0" id="x0" step="any" placeholder="0.0" value="0.0">
|
||||
<label for="xn">xn:</label><input type="number" name="xn" id="xn" step="any" placeholder="1.0" value="1.0">
|
||||
<label for="xN">N:</label><input type="number" name="xN" id="xN" placeholder="25" value="25" min="2">
|
||||
</div>
|
||||
<div class="horizontal-flex">
|
||||
y:
|
||||
<label for="y0">y0:</label><input type="number" name="y0" id="y0" step="any" placeholder="0.0" value="0.0">
|
||||
<label for="yn">yn:</label><input type="number" name="yn" id="yn" step="any" placeholder="1.0" value="1.0">
|
||||
<label for="yN">N:</label><input type="number" name="yN" id="yN" placeholder="25" value="25" min="2">
|
||||
</div>
|
||||
<div>
|
||||
<label for="diamond">Tilt grid </label><input type="checkbox" name="diamond" id="diamond">
|
||||
</div>
|
||||
<!--
|
||||
Curvilinear? Inputting some random json?
|
||||
-->
|
||||
</div>
|
||||
<div class="gen_set menu-item">
|
||||
<p class="menu-header">Settings</p>
|
||||
</div>
|
||||
<div class="about menu-item">
|
||||
<p class="menu-header">About</p>
|
||||
<p>More information can be found along with the <a href="https://ulimoen.dev/git/mulimoen/SBPonWEB">source code</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<button title="Menu" class="control-item" id="toggle-menu" type="button">☰</button>
|
||||
<button title="Play/pause" class="control-item" id="toggle-playing">▶️/⏸️</button>
|
||||
<button title="Reset" class="control-item" id="reset">🔄️</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
import { default as init, set_panic_hook as setPanicHook,
|
||||
MaxwellUniverse, EulerUniverse, ShallowWaterUniverse } from "./sbp_web.js";
|
||||
|
||||
function compile_and_link(ctx, vsource, fsource) {
|
||||
const program = ctx.createProgram();
|
||||
const vsShader = ctx.createShader(ctx.VERTEX_SHADER);
|
||||
ctx.shaderSource(vsShader, vsource);
|
||||
const fsShader = ctx.createShader(ctx.FRAGMENT_SHADER);
|
||||
ctx.shaderSource(fsShader, fsource);
|
||||
|
||||
ctx.compileShader(vsShader);
|
||||
ctx.compileShader(fsShader);
|
||||
ctx.attachShader(program, vsShader);
|
||||
ctx.attachShader(program, fsShader);
|
||||
ctx.linkProgram(program);
|
||||
ctx.validateProgram(program);
|
||||
|
||||
if (!ctx.getProgramParameter(program, ctx.LINK_STATUS)) {
|
||||
console.error(`Linking of lineProgram failed: ${ctx.getProgramInfoLog(program)}`);
|
||||
console.error(`vertex shader infolog: ${ctx.getShaderInfoLog(vsShader)}`);
|
||||
console.error(`fragment shader infolog: ${ctx.getShaderInfoLog(fsShader)}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
ctx.deleteShader(vsShader);
|
||||
ctx.deleteShader(fsShader);
|
||||
|
||||
return program;
|
||||
}
|
||||
|
||||
class LineDrawer {
|
||||
constructor(ctx) {
|
||||
function lineProgram(ctx) {
|
||||
const LINE_VERTEX_SHADER = String.raw`
|
||||
#version 100
|
||||
attribute mediump float aX;
|
||||
attribute mediump float aY;
|
||||
|
||||
uniform vec4 uBbox;
|
||||
|
||||
void main() {
|
||||
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);
|
||||
}
|
||||
|
||||
`;
|
||||
const LINE_FRAGMENT_SHADER = String.raw`
|
||||
#version 100
|
||||
|
||||
void main() {
|
||||
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
const program = compile_and_link(ctx, LINE_VERTEX_SHADER, LINE_FRAGMENT_SHADER);
|
||||
|
||||
const uBbox = ctx.getUniformLocation(program, "uBbox");
|
||||
|
||||
return {inner: program, uniforms: {"uBbox": uBbox}};
|
||||
};
|
||||
this.program = lineProgram(ctx);
|
||||
this.ctx = ctx;
|
||||
}
|
||||
set_xy(width, height, xBuffer, yBuffer, bbox) {
|
||||
const ctx = this.ctx;
|
||||
ctx.useProgram(this.program.inner);
|
||||
{
|
||||
let loc = ctx.getAttribLocation(this.program.inner, "aX");
|
||||
ctx.bindBuffer(ctx.ARRAY_BUFFER, xBuffer);
|
||||
ctx.vertexAttribPointer(loc, 1, ctx.FLOAT, false, 0, 0);
|
||||
ctx.enableVertexAttribArray(loc);
|
||||
|
||||
loc = ctx.getAttribLocation(this.program.inner, "aY");
|
||||
ctx.bindBuffer(ctx.ARRAY_BUFFER, yBuffer);
|
||||
ctx.vertexAttribPointer(loc, 1, ctx.FLOAT, false, 0, 0);
|
||||
ctx.enableVertexAttribArray(loc);
|
||||
}
|
||||
const lineIdxBuffer = new Uint16Array(2*width*height - 1);
|
||||
{
|
||||
let n = 0;
|
||||
for (let j = 0; j < height; j++) {
|
||||
for (let i = 0; i < width; i++) {
|
||||
if (j % 2 == 0) {
|
||||
lineIdxBuffer[n] = width*j + i;
|
||||
} else {
|
||||
lineIdxBuffer[n] = width*(j + 1) - i - 1;
|
||||
}
|
||||
n += 1;
|
||||
}
|
||||
}
|
||||
let m = lineIdxBuffer[n-1];
|
||||
let updown = "down";
|
||||
let lr;
|
||||
if (height % 2 === 0) {
|
||||
lr = "left";
|
||||
} else {
|
||||
lr = "right";
|
||||
}
|
||||
for (let i = 0; i < width; i++) {
|
||||
for (let j = 0; j < height-1; j++) {
|
||||
if (updown === "up") {
|
||||
m += width;
|
||||
} else {
|
||||
m -= width;
|
||||
}
|
||||
lineIdxBuffer[n] = m;
|
||||
n += 1;
|
||||
}
|
||||
if (n === 2*width*height - 1) {
|
||||
continue;
|
||||
}
|
||||
if (lr === "left") {
|
||||
m += 1;
|
||||
} else {
|
||||
m -= 1;
|
||||
}
|
||||
lineIdxBuffer[n] = m;
|
||||
n += 1;
|
||||
|
||||
if (updown === "down") {
|
||||
updown = "up";
|
||||
} else {
|
||||
updown = "down";
|
||||
}
|
||||
}
|
||||
}
|
||||
this.indexBuffer = ctx.createBuffer();
|
||||
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
||||
ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, lineIdxBuffer, ctx.STATIC_DRAW);
|
||||
|
||||
ctx.uniform4f(this.program.uniforms.uBbox, bbox[0], 1.0/(bbox[1] - bbox[0]), bbox[2], 1.0/(bbox[3] - bbox[2]));
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
}
|
||||
draw() {
|
||||
const ctx = this.ctx;
|
||||
ctx.useProgram(this.program.inner);
|
||||
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
||||
|
||||
ctx.drawElements(ctx.LINE_STRIP, 2*this.width*this.height - 1, ctx.UNSIGNED_SHORT, 0);
|
||||
}
|
||||
}
|
||||
|
||||
(async function run() {
|
||||
const eq_sel = document.getElementById("eq-set");
|
||||
display_eqset(eq_sel.value);
|
||||
|
||||
const wasm = await init("./sbp_web_bg.wasm");
|
||||
setPanicHook();
|
||||
const canvas = document.getElementById("glCanvas");
|
||||
|
||||
const gl = canvas.getContext("webgl");
|
||||
if (gl === null) {
|
||||
console.error("Unable to initialise WebGL");
|
||||
return;
|
||||
}
|
||||
|
||||
console.info("Successfully opened webgl canvas");
|
||||
|
||||
let x;
|
||||
let y;
|
||||
let width;
|
||||
let height;
|
||||
|
||||
// A nice pink to show missing values
|
||||
gl.clearColor(1.0, 0.753, 0.796, 1.0);
|
||||
gl.clearDepth(1.0);
|
||||
gl.enable(gl.DEPTH_TEST);
|
||||
gl.depthFunc(gl.LEQUAL);
|
||||
gl.disable(gl.CULL_FACE);
|
||||
gl.lineWidth(1.0);
|
||||
|
||||
const xBuffer = gl.createBuffer();
|
||||
const yBuffer = gl.createBuffer();
|
||||
const lineDrawer = new LineDrawer(gl);
|
||||
|
||||
function setup() {
|
||||
width = parseInt(document.getElementById("xN").value);
|
||||
height = parseInt(document.getElementById("yN").value);
|
||||
|
||||
const x0 = parseFloat(document.getElementById("x0").value);
|
||||
const xn = parseFloat(document.getElementById("xn").value);
|
||||
const y0 = parseFloat(document.getElementById("y0").value);
|
||||
const yn = parseFloat(document.getElementById("yn").value);
|
||||
|
||||
const diamond = document.getElementById("diamond").checked;
|
||||
console.log(diamond);
|
||||
|
||||
x = new Float32Array(width * height);
|
||||
y = new Float32Array(width * height);
|
||||
const dx = (xn - x0) / (width - 1)
|
||||
const dy = (yn - y0) / (height - 1)
|
||||
for (let j = 0; j < height; j += 1) {
|
||||
for (let i = 0; i < width; i += 1) {
|
||||
const n = width*j + i;
|
||||
x[n] = dx*i;
|
||||
y[n] = dy*j;
|
||||
|
||||
if (diamond) {
|
||||
const xn = x[n];
|
||||
const yn = y[n];
|
||||
|
||||
x[n] = xn - yn;
|
||||
y[n] = xn + yn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const bbox = [+Number(Infinity), -Number(Infinity), +Number(Infinity), -Number(Infinity)];
|
||||
for (let i = 0; i < width*height; i += 1) {
|
||||
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]);
|
||||
}
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, xBuffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, x, gl.STATIC_DRAW);
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, yBuffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, y, gl.STATIC_DRAW);
|
||||
|
||||
lineDrawer.set_xy(width, height, xBuffer, yBuffer, bbox);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
|
||||
lineDrawer.draw();
|
||||
}
|
||||
|
||||
function drawMe() {
|
||||
draw();
|
||||
animation = window.requestAnimationFrame(drawMe);
|
||||
}
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
|
||||
}
|
||||
|
||||
|
||||
resizeCanvas();
|
||||
window.addEventListener("resize", resizeCanvas, false);
|
||||
|
||||
const menu = document.getElementById("menu");
|
||||
const menu_toggle = document.getElementById("toggle-menu");
|
||||
menu_toggle.addEventListener("click", () => {
|
||||
if (menu.style.visibility === "") {
|
||||
menu.style.visibility = "hidden";
|
||||
} else {
|
||||
menu.style.visibility = "";
|
||||
}
|
||||
});
|
||||
|
||||
eq_sel.addEventListener("change", (e) => {
|
||||
console.log("equation changed, wants: ", e.target.value);
|
||||
display_eqset(eq_sel.value);
|
||||
});
|
||||
function display_eqset(value) {
|
||||
const euler_options = document.getElementById("euler-options");
|
||||
euler_options.style.display = "none";
|
||||
const maxwell_options = document.getElementById("maxwell-options");
|
||||
maxwell_options.style.display = "none";
|
||||
const shallow_options = document.getElementById("shallow-options");
|
||||
shallow_options.style.display = "none";
|
||||
if (value === "euler") {
|
||||
euler_options.style.display = "block";
|
||||
} else if (value === "maxwell") {
|
||||
maxwell_options.style.display = "block";
|
||||
} else if (value === "shallow") {
|
||||
shallow_options.style.display = "block";
|
||||
} else {
|
||||
console.error(`Unknown value ${value}`);
|
||||
}
|
||||
}
|
||||
|
||||
let animation = null;
|
||||
let is_setup = false;
|
||||
const play_button = document.getElementById("toggle-playing");
|
||||
play_button.addEventListener("click", (_e) => {
|
||||
console.log("play/pause pressed");
|
||||
if (!animation) {
|
||||
if (!is_setup) {
|
||||
setup();
|
||||
}
|
||||
animation = window.requestAnimationFrame(drawMe);
|
||||
} else {
|
||||
window.cancelAnimationFrame(animation);
|
||||
animation = null;
|
||||
}
|
||||
});
|
||||
const reset_button = document.getElementById("reset");
|
||||
reset_button.addEventListener("click", (_e) => {
|
||||
window.cancelAnimationFrame(animation);
|
||||
animation = null;
|
||||
is_setup = false;
|
||||
setup();
|
||||
draw();
|
||||
});
|
||||
}());
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!doctype html>
|
||||
<!--https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="by-hand" />
|
||||
<meta name="viewpost" context="width=device-width, inital-scale=1.0, user-scalable=yes" />
|
||||
<title>Maxwell solver (ΣBP)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
||||
<script async type="module" src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="glCanvas"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,275 +0,0 @@
|
|||
import { MaxwellUniverse, default as init, set_panic_hook as setPanicHook } from "../sbp_web.js";
|
||||
|
||||
/**
|
||||
* Initialises and runs the Maxwell solver,
|
||||
* plotting the solution to a canvas using webgl
|
||||
*/
|
||||
(async function run() {
|
||||
const wasm = await init("../sbp_web_bg.wasm");
|
||||
setPanicHook();
|
||||
const DIAMOND = false;
|
||||
|
||||
const canvas = document.getElementById("glCanvas");
|
||||
|
||||
const gl = canvas.getContext("webgl");
|
||||
if (gl === null) {
|
||||
console.error("Unable to initialise WebGL");
|
||||
return;
|
||||
}
|
||||
|
||||
const vsSource = String.raw`
|
||||
#version 100
|
||||
attribute mediump float aX;
|
||||
attribute mediump float aY;
|
||||
attribute mediump float aField;
|
||||
|
||||
uniform vec4 uBbox;
|
||||
|
||||
varying mediump float vField;
|
||||
|
||||
void main() {
|
||||
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);
|
||||
}
|
||||
`;
|
||||
|
||||
const fsSource = String.raw`
|
||||
#version 100
|
||||
varying mediump float vField;
|
||||
|
||||
uniform int uChosenField;
|
||||
|
||||
void main() {
|
||||
mediump float r = 0.0;
|
||||
mediump float g = 0.0;
|
||||
mediump float b = 0.0;
|
||||
|
||||
if (uChosenField == 0) {
|
||||
r = vField + 0.5;
|
||||
} else if (uChosenField == 1) {
|
||||
g = (vField + 1.0)/2.0;
|
||||
} else {
|
||||
b = vField + 0.5;
|
||||
}
|
||||
gl_FragColor = vec4(r, g, b, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const vsShader = gl.createShader(gl.VERTEX_SHADER);
|
||||
gl.shaderSource(vsShader, vsSource);
|
||||
gl.compileShader(vsShader);
|
||||
if (!gl.getShaderParameter(vsShader, gl.COMPILE_STATUS)) {
|
||||
console.error(`Could not compile shader: ${gl.getShaderInfoLog(vsShader)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const fsShader = gl.createShader(gl.FRAGMENT_SHADER);
|
||||
gl.shaderSource(fsShader, fsSource);
|
||||
gl.compileShader(fsShader);
|
||||
if (!gl.getShaderParameter(fsShader, gl.COMPILE_STATUS)) {
|
||||
console.error(`Could not compile shader: ${gl.getShaderInfoLog(fsShader)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const shaderProgram = gl.createProgram();
|
||||
gl.attachShader(shaderProgram, vsShader);
|
||||
gl.attachShader(shaderProgram, fsShader);
|
||||
gl.linkProgram(shaderProgram);
|
||||
gl.validateProgram(shaderProgram);
|
||||
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
|
||||
console.error(`Unable to link shader program: ${gl.getProgramInfoLog(shaderProgram)}`);
|
||||
return;
|
||||
}
|
||||
gl.useProgram(shaderProgram);
|
||||
|
||||
// A nice pink to show missing values
|
||||
gl.clearColor(1.0, 0.753, 0.796, 1.0);
|
||||
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;
|
||||
|
||||
|
||||
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) {
|
||||
const n = width*j + i;
|
||||
x[n] = i / (width - 1.0);
|
||||
y[n] = j / (height - 1.0);
|
||||
|
||||
|
||||
if (DIAMOND) {
|
||||
const xx = x[n];
|
||||
const yy = y[n];
|
||||
x[n] = xx - yy;
|
||||
y[n] = xx + yy;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const universe = new MaxwellUniverse(height, width, x, y);
|
||||
|
||||
|
||||
// Transfer x, y to cpu, prepare fBuffer
|
||||
const xBuffer = gl.createBuffer();
|
||||
const yBuffer = gl.createBuffer();
|
||||
const fBuffer = gl.createBuffer();
|
||||
{
|
||||
const numcomp = 1;
|
||||
const type = gl.FLOAT;
|
||||
const normalise = false;
|
||||
const stride = 0;
|
||||
const offset = 0;
|
||||
|
||||
let loc = gl.getAttribLocation(shaderProgram, "aX");
|
||||
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);
|
||||
|
||||
loc = gl.getAttribLocation(shaderProgram, "aY");
|
||||
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);
|
||||
|
||||
loc = gl.getAttribLocation(shaderProgram, "aField");
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, fBuffer);
|
||||
gl.vertexAttribPointer(loc, numcomp, type, normalise, stride, offset);
|
||||
gl.enableVertexAttribArray(loc);
|
||||
}
|
||||
|
||||
// Create triangles covering the domain
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
const indexBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
|
||||
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, positions, gl.STATIC_DRAW);
|
||||
|
||||
const bbox = [+Number(Infinity), -Number(Infinity), +Number(Infinity), -Number(Infinity)];
|
||||
for (let i = 0; i < width*height; i += 1) {
|
||||
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]);
|
||||
}
|
||||
|
||||
{
|
||||
const loc = gl.getUniformLocation(shaderProgram, "uBbox");
|
||||
gl.uniform4f(loc, bbox[0], 1.0/(bbox[1] - bbox[0]), bbox[2], 1.0/(bbox[3] - bbox[2]));
|
||||
}
|
||||
|
||||
const TIMEFACTOR = 10000.0;
|
||||
const MAX_DT = 1.0/Math.max(width, height);
|
||||
|
||||
let t = 0;
|
||||
let firstDraw = true;
|
||||
let warnTime = -1;
|
||||
const chosenField = {
|
||||
"uLocation": gl.getUniformLocation(shaderProgram, "uChosenField"),
|
||||
"value": 0,
|
||||
"cycle": function cycle() {
|
||||
if (this.value === 0) {
|
||||
this.value = 1;
|
||||
} else if (this.value === 1) {
|
||||
this.value = 2;
|
||||
} else {
|
||||
this.value = 0;
|
||||
}
|
||||
gl.uniform1i(this.uLocation, this.value);
|
||||
}
|
||||
};
|
||||
chosenField.cycle();
|
||||
|
||||
universe.init(0.5, 0.5);
|
||||
|
||||
/**
|
||||
* Integrates and draws the next iteration
|
||||
* @param {Time} timeOfDraw Time of drawing
|
||||
*/
|
||||
function drawMe(timeOfDraw) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
|
||||
let dt = (timeOfDraw - t) / TIMEFACTOR;
|
||||
t = timeOfDraw;
|
||||
if (firstDraw || dt <= 0.0) {
|
||||
firstDraw = false;
|
||||
dt = MAX_DT;
|
||||
} else {
|
||||
if (dt >= MAX_DT) {
|
||||
warnTime += 1;
|
||||
if (warnTime !== -2) {
|
||||
console.warn("Can not keep up with framerate");
|
||||
}
|
||||
dt = MAX_DT;
|
||||
}
|
||||
}
|
||||
|
||||
let fieldPtr;
|
||||
if (chosenField.value === 0) {
|
||||
fieldPtr = universe.get_ex_ptr();
|
||||
} else if (chosenField.value === 1) {
|
||||
fieldPtr = universe.get_hz_ptr();
|
||||
} else {
|
||||
fieldPtr = universe.get_ey_ptr();
|
||||
}
|
||||
const field = new Float32Array(wasm.memory.buffer, fieldPtr, width*height);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, field, gl.DYNAMIC_DRAW);
|
||||
|
||||
{
|
||||
const offset = 0;
|
||||
const type = gl.UNSIGNED_SHORT;
|
||||
const vertexCount = positions.length;
|
||||
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
|
||||
}
|
||||
|
||||
universe.advance_upwind(dt/2);
|
||||
universe.advance_upwind(dt/2);
|
||||
|
||||
window.requestAnimationFrame(drawMe);
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
window.addEventListener("keyup", event => {
|
||||
if (event.key === "c") {
|
||||
chosenField.cycle();
|
||||
}
|
||||
}, {"passive": true});
|
||||
window.addEventListener("resize", resizeCanvas, false);
|
||||
window.addEventListener("click", event => {
|
||||
// Must adjust for bbox and transformations for x/y
|
||||
const mousex = event.clientX / window.innerWidth;
|
||||
const mousey = event.clientY / window.innerHeight;
|
||||
universe.init(mousex, 1.0 - mousey);
|
||||
}, {"passive": true});
|
||||
|
||||
resizeCanvas();
|
||||
window.requestAnimationFrame(drawMe);
|
||||
}());
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!doctype html>
|
||||
<!--https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="generator" content="by-hand" />
|
||||
<meta name="viewpost" context="width=device-width, inital-scale=1.0, user-scalable=yes" />
|
||||
<title>Shallow Water solver (ΣBP)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../style.css">
|
||||
<script async type="module" src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="glCanvas"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,266 +0,0 @@
|
|||
import { ShallowWaterUniverse, default as init, set_panic_hook as setPanicHook, set_console_logger as setConsoleLogger } from "../sbp_web.js";
|
||||
|
||||
/**
|
||||
* Initialises and runs the Maxwell solver,
|
||||
* plotting the solution to a canvas using webgl
|
||||
*/
|
||||
(async function run() {
|
||||
const wasm = await init("../sbp_web_bg.wasm");
|
||||
setPanicHook();
|
||||
setConsoleLogger();
|
||||
|
||||
const canvas = document.getElementById("glCanvas");
|
||||
|
||||
const gl = canvas.getContext("webgl");
|
||||
if (gl === null) {
|
||||
console.error("Unable to initialise WebGL");
|
||||
return;
|
||||
}
|
||||
|
||||
const vsSource = String.raw`
|
||||
#version 100
|
||||
attribute mediump float aX;
|
||||
attribute mediump float aY;
|
||||
attribute mediump float aField;
|
||||
|
||||
uniform vec4 uBbox;
|
||||
|
||||
varying mediump float vField;
|
||||
|
||||
void main() {
|
||||
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);
|
||||
}
|
||||
`;
|
||||
|
||||
const fsSource = String.raw`
|
||||
#version 100
|
||||
varying mediump float vField;
|
||||
|
||||
uniform int uChosenField;
|
||||
|
||||
void main() {
|
||||
mediump float r = 0.0;
|
||||
mediump float g = 0.0;
|
||||
mediump float b = 0.0;
|
||||
|
||||
if (uChosenField == 0) {
|
||||
r = 0.5*vField;
|
||||
} else if (uChosenField == 1) {
|
||||
g = (vField + 1.0)/2.0;
|
||||
} else {
|
||||
b = vField + 0.5;
|
||||
}
|
||||
gl_FragColor = vec4(r, g, b, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const vsShader = gl.createShader(gl.VERTEX_SHADER);
|
||||
gl.shaderSource(vsShader, vsSource);
|
||||
gl.compileShader(vsShader);
|
||||
if (!gl.getShaderParameter(vsShader, gl.COMPILE_STATUS)) {
|
||||
console.error(`Could not compile shader: ${gl.getShaderInfoLog(vsShader)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const fsShader = gl.createShader(gl.FRAGMENT_SHADER);
|
||||
gl.shaderSource(fsShader, fsSource);
|
||||
gl.compileShader(fsShader);
|
||||
if (!gl.getShaderParameter(fsShader, gl.COMPILE_STATUS)) {
|
||||
console.error(`Could not compile shader: ${gl.getShaderInfoLog(fsShader)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const shaderProgram = gl.createProgram();
|
||||
gl.attachShader(shaderProgram, vsShader);
|
||||
gl.attachShader(shaderProgram, fsShader);
|
||||
gl.linkProgram(shaderProgram);
|
||||
gl.validateProgram(shaderProgram);
|
||||
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
|
||||
console.error(`Unable to link shader program: ${gl.getProgramInfoLog(shaderProgram)}`);
|
||||
return;
|
||||
}
|
||||
gl.useProgram(shaderProgram);
|
||||
|
||||
// A nice pink to show missing values
|
||||
gl.clearColor(1.0, 0.753, 0.796, 1.0);
|
||||
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 = 70;
|
||||
const height = 70;
|
||||
|
||||
|
||||
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) {
|
||||
const n = width*j + i;
|
||||
x[n] = i / (width - 1.0);
|
||||
y[n] = j / (height - 1.0);
|
||||
}
|
||||
}
|
||||
|
||||
const universe = new ShallowWaterUniverse(height, width);
|
||||
|
||||
|
||||
// Transfer x, y to cpu, prepare fBuffer
|
||||
const xBuffer = gl.createBuffer();
|
||||
const yBuffer = gl.createBuffer();
|
||||
const fBuffer = gl.createBuffer();
|
||||
{
|
||||
const numcomp = 1;
|
||||
const type = gl.FLOAT;
|
||||
const normalise = false;
|
||||
const stride = 0;
|
||||
const offset = 0;
|
||||
|
||||
let loc = gl.getAttribLocation(shaderProgram, "aX");
|
||||
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);
|
||||
|
||||
loc = gl.getAttribLocation(shaderProgram, "aY");
|
||||
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);
|
||||
|
||||
loc = gl.getAttribLocation(shaderProgram, "aField");
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, fBuffer);
|
||||
gl.vertexAttribPointer(loc, numcomp, type, normalise, stride, offset);
|
||||
gl.enableVertexAttribArray(loc);
|
||||
}
|
||||
|
||||
// Create triangles covering the domain
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
const indexBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
|
||||
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, positions, gl.STATIC_DRAW);
|
||||
|
||||
const bbox = [+Number(Infinity), -Number(Infinity), +Number(Infinity), -Number(Infinity)];
|
||||
for (let i = 0; i < width*height; i += 1) {
|
||||
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]);
|
||||
}
|
||||
|
||||
{
|
||||
const loc = gl.getUniformLocation(shaderProgram, "uBbox");
|
||||
gl.uniform4f(loc, bbox[0], 1.0/(bbox[1] - bbox[0]), bbox[2], 1.0/(bbox[3] - bbox[2]));
|
||||
}
|
||||
|
||||
const TIMEFACTOR = 10000.0;
|
||||
const MAX_DT = 1.0/Math.max(width, height);
|
||||
|
||||
let t = 0;
|
||||
let firstDraw = true;
|
||||
let warnTime = -1;
|
||||
const chosenField = {
|
||||
"uLocation": gl.getUniformLocation(shaderProgram, "uChosenField"),
|
||||
"value": 2,
|
||||
"cycle": function cycle() {
|
||||
if (this.value === 0) {
|
||||
this.value = 1;
|
||||
} else if (this.value === 1) {
|
||||
this.value = 2;
|
||||
} else {
|
||||
this.value = 0;
|
||||
}
|
||||
gl.uniform1i(this.uLocation, this.value);
|
||||
}
|
||||
};
|
||||
chosenField.cycle();
|
||||
|
||||
universe.init(0.5, 0.5);
|
||||
|
||||
/**
|
||||
* Integrates and draws the next iteration
|
||||
* @param {Time} timeOfDraw Time of drawing
|
||||
*/
|
||||
function drawMe(timeOfDraw) {
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
|
||||
let dt = (timeOfDraw - t) / TIMEFACTOR;
|
||||
t = timeOfDraw;
|
||||
if (firstDraw || dt <= 0.0) {
|
||||
firstDraw = false;
|
||||
dt = MAX_DT;
|
||||
} else {
|
||||
if (dt >= MAX_DT) {
|
||||
warnTime += 1;
|
||||
if (warnTime !== -2) {
|
||||
console.warn("Can not keep up with framerate");
|
||||
}
|
||||
dt = MAX_DT;
|
||||
}
|
||||
}
|
||||
|
||||
let fieldPtr;
|
||||
if (chosenField.value === 0) {
|
||||
fieldPtr = universe.get_eta_ptr();
|
||||
} else if (chosenField.value === 1) {
|
||||
fieldPtr = universe.get_etau_ptr();
|
||||
} else {
|
||||
fieldPtr = universe.get_etav_ptr();
|
||||
}
|
||||
const field = new Float32Array(wasm.memory.buffer, fieldPtr, width*height);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, field, gl.DYNAMIC_DRAW);
|
||||
|
||||
{
|
||||
const offset = 0;
|
||||
const type = gl.UNSIGNED_SHORT;
|
||||
const vertexCount = positions.length;
|
||||
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
|
||||
}
|
||||
|
||||
universe.advance();
|
||||
|
||||
window.requestAnimationFrame(drawMe);
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
window.addEventListener("keyup", event => {
|
||||
if (event.key === "c") {
|
||||
chosenField.cycle();
|
||||
}
|
||||
}, {"passive": true});
|
||||
window.addEventListener("resize", resizeCanvas, false);
|
||||
window.addEventListener("click", event => {
|
||||
// Must adjust for bbox and transformations for x/y
|
||||
const mousex = event.clientX / window.innerWidth;
|
||||
const mousey = event.clientY / window.innerHeight;
|
||||
universe.init(mousex, 1.0 - mousey);
|
||||
}, {"passive": true});
|
||||
|
||||
resizeCanvas();
|
||||
window.requestAnimationFrame(drawMe);
|
||||
}());
|
||||
|
|
@ -1,3 +1,11 @@
|
|||
* { margin:0; padding:0; }
|
||||
* { margin: 0; padding: 0; overflow: hidden; }
|
||||
html, body { width:100%; height:100%; }
|
||||
canvas { display:block; }
|
||||
.canvas { display:block; position: fixed; z-index: -1; width: 100%; height: 100%; }
|
||||
select#eq-set { width: 100%; }
|
||||
.vertical-menu { position: fixed; width: 30%; min-width: 200px; top: 0; bottom: 30px; z-index: 2; background-color: #eee; display: flex; flex-direction: column; justify-content: space-between; padding: 0.5em; overflow-y: auto; }
|
||||
.menu-header { font-weight: bold; }
|
||||
.controls { position: relative; z-index: 3; top: calc(100% - 30px); height: 30px; display: flex; align-items: center; width: 175px; justify-content: space-around; opacity: 0.5; }
|
||||
.controls:hover { opacity: 1.0; }
|
||||
.menu-item { flex-shrink: 0; }
|
||||
.horizontal-flex { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
|
||||
.eq-set-options { display: none; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue