SummationByParts/main.js

239 lines
7.8 KiB
JavaScript
Raw Normal View History

2019-09-09 16:27:54 +00:00
import { Universe, set_panic_hook, default as init } from "./maxwell.js";
2019-04-07 20:13:09 +00:00
2019-04-11 21:57:29 +00:00
async function run() {
2019-09-09 16:27:54 +00:00
let wasm = await init("./maxwell_bg.wasm");
set_panic_hook();
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
const supports_floats_in_textures = gl.getExtension("OES_texture_float");
if (!supports_floats_in_textures) {
console.error("Floats are not supported in textures for your device, please warn the author about this incompatability");
2019-03-27 21:19:52 +00:00
return;
}
const vsSource = String.raw`
2019-03-27 21:19:52 +00:00
attribute vec2 aVertexPosition;
varying lowp vec2 vVertexPosition;
void main() {
2019-03-28 19:21:52 +00:00
vVertexPosition = (aVertexPosition + 1.0)/2.0;
2019-03-27 21:19:52 +00:00
gl_Position = vec4(aVertexPosition.x, aVertexPosition.y, 0.0, 1.0);
}
`;
const fsSource = String.raw`
2019-03-27 21:19:52 +00:00
varying lowp vec2 vVertexPosition;
2019-08-09 17:54:58 +00:00
uniform sampler2D uSamplerEX;
2019-08-09 19:00:15 +00:00
uniform sampler2D uSamplerEY;
2019-08-09 17:54:58 +00:00
uniform sampler2D uSamplerHZ;
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;
if (uChosenField == 1) {
r = texture2D(uSamplerEX, vVertexPosition).a;
2019-08-09 19:34:39 +00:00
r += 0.5;
2019-08-09 19:00:15 +00:00
} else if (uChosenField == 3) {
b = texture2D(uSamplerEY, vVertexPosition).a;
2019-08-09 19:34:39 +00:00
b += 0.5;
2019-08-09 17:54:58 +00:00
} else if (uChosenField == 2) {
g = texture2D(uSamplerHZ, vVertexPosition).a;
g = (g + 1.0)/2.0;
}
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)) {
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)) {
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)) {
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
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
-1.0, 1.0,
1.0, 1.0,
-1.0, -1.0,
1.0, -1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
{
const numComponents = 2;
const type = gl.FLOAT;
const normalise = false;
const stride = 0;
const offset = 0;
const attrib_vertex_location = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.vertexAttribPointer(attrib_vertex_location, numComponents, type, normalise, stride, offset);
gl.enableVertexAttribArray(attrib_vertex_location);
}
2019-03-27 21:19:52 +00:00
2019-08-09 19:00:15 +00:00
const create_2D_texture = function(loc, name) {
const texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0 + loc);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
const uniform_sampler = gl.getUniformLocation(shaderProgram, name);
gl.uniform1i(uniform_sampler, loc);
return texture;
}
const texture_ex = create_2D_texture(0, 'uSamplerEX');
const texture_ey = create_2D_texture(2, 'uSamplerEY');
const texture_hz = create_2D_texture(1, 'uSamplerHZ');
2019-08-09 17:54:58 +00:00
const chosen_field = {
uLocation: gl.getUniformLocation(shaderProgram, 'uChosenField'),
2019-08-09 19:34:39 +00:00
value: 1,
2019-08-09 17:54:58 +00:00
cycle: function() {
if (this.value == 1) {
this.value = 2;
2019-08-09 19:00:15 +00:00
} else if (this.value == 2) {
this.value = 3;
2019-08-09 17:54:58 +00:00
} else {
this.value = 1;
}
gl.uniform1i(this.uLocation, this.value);
},
};
chosen_field.cycle();
2019-07-17 20:49:36 +00:00
2019-03-28 19:21:52 +00:00
2019-08-09 19:00:15 +00:00
gl.clearColor(1.0, 0.753, 0.796, 1.0); // A nice pink
2019-03-28 19:21:52 +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");
2019-03-28 19:21:52 +00:00
const width = 40;
const height = 50;
2019-08-13 18:43:31 +00:00
const universe = Universe.new(width, height);
2019-03-28 19:21:52 +00:00
2019-11-09 12:07:42 +00:00
const TIMEFACTOR = 10000.0;
const MAX_DT = 2.0/Math.max(width, height);
2019-09-03 17:41:20 +00:00
let t = 0;
let first_draw = true;
let warn_time = -1;
2019-08-13 18:43:31 +00:00
universe.init(0.5, 0.5);
2019-07-21 13:47:01 +00:00
function drawMe(t_draw) {
2019-03-27 21:51:03 +00:00
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
2019-09-03 17:41:20 +00:00
let dt = (t_draw - t) / TIMEFACTOR;
t = t_draw;
if (first_draw || dt <= 0.0) {
first_draw = false;
dt = MAX_DT;
} else {
2019-09-03 17:41:20 +00:00
if (dt >= MAX_DT) {
warn_time += 1;
if (warn_time != -2) {
console.warn("Can not keep up with framerate");
}
dt = MAX_DT;
}
}
2019-11-09 12:07:42 +00:00
universe.advance(dt/2);
universe.advance(dt/2);
2019-07-17 20:49:36 +00:00
2019-08-09 17:54:58 +00:00
const field_ex = new Float32Array(wasm.memory.buffer,
2019-08-13 18:43:31 +00:00
universe.get_ex_ptr(),
2019-08-09 17:54:58 +00:00
width*height);
2019-08-09 19:00:15 +00:00
const field_ey = new Float32Array(wasm.memory.buffer,
2019-08-13 18:43:31 +00:00
universe.get_ey_ptr(),
2019-08-09 19:00:15 +00:00
width*height);
2019-08-09 17:54:58 +00:00
const field_hz = new Float32Array(wasm.memory.buffer,
2019-08-13 18:43:31 +00:00
universe.get_hz_ptr(),
2019-07-21 11:26:26 +00:00
width*height);
2019-07-17 20:49:36 +00:00
{
const level = 0;
const internalFormat = gl.ALPHA;
const border = 0;
2019-07-21 11:26:26 +00:00
const srcFormat = internalFormat;
const srcType = gl.FLOAT;
2019-08-09 17:54:58 +00:00
gl.activeTexture(gl.TEXTURE0);
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, field_ex);
2019-08-09 19:00:15 +00:00
gl.activeTexture(gl.TEXTURE2);
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, field_ey);
2019-08-09 17:54:58 +00:00
gl.activeTexture(gl.TEXTURE1);
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, field_hz);
2019-07-17 20:49:36 +00:00
}
2019-03-27 21:19:52 +00:00
{
const offset = 0;
const vertexCount = 4;
gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
}
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-03-27 21:51:03 +00:00
window.addEventListener('resize', resizeCanvas, false);
2019-08-09 17:54:58 +00:00
window.addEventListener('keyup', event => {
if (event.key == 'c') {
chosen_field.cycle();
}
}, {passive: true});
2019-08-09 19:34:39 +00:00
window.addEventListener('click', event => {
const mousex = event.clientX / window.innerWidth;
const mousey = event.clientY / window.innerHeight;
2019-08-13 18:43:31 +00:00
universe.init(mousex, 1.0 - mousey);
2019-08-09 19:34:39 +00:00
}, {passive: true});
2019-03-27 21:51:03 +00:00
resizeCanvas();
2019-07-17 20:49:36 +00:00
window.requestAnimationFrame(drawMe);
2019-03-27 21:19:52 +00:00
}
2019-04-11 21:57:29 +00:00
run();