mulimoen
/
SummationByParts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

introduce lineDrawer

This commit is contained in:
Magnus Ulimoen 2020-05-24 18:02:53 +02:00
parent d1e89bf20e
commit cd72ce3477
1 changed files with 128 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
webfront/misc/main.js
View File

@ -1,32 +1,9 @@
function lineProgram(ctx) { function compile_and_link(ctx, vsource, fsource) {
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 = ctx.createProgram(); const program = ctx.createProgram();
const vsShader = ctx.createShader(ctx.VERTEX_SHADER); const vsShader = ctx.createShader(ctx.VERTEX_SHADER);
ctx.shaderSource(vsShader, LINE_VERTEX_SHADER); ctx.shaderSource(vsShader, vsource);
const fsShader = ctx.createShader(ctx.FRAGMENT_SHADER); const fsShader = ctx.createShader(ctx.FRAGMENT_SHADER);
ctx.shaderSource(fsShader, LINE_FRAGMENT_SHADER); ctx.shaderSource(fsShader, fsource);
ctx.compileShader(vsShader); ctx.compileShader(vsShader);
ctx.compileShader(fsShader); ctx.compileShader(fsShader);
@ -45,72 +22,56 @@ function lineProgram(ctx) {
ctx.deleteShader(vsShader); ctx.deleteShader(vsShader);
ctx.deleteShader(fsShader); 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"); const uBbox = ctx.getUniformLocation(program, "uBbox");
return {program: program, uniforms: {"uBbox": uBbox}}; return {inner: program, uniforms: {"uBbox": uBbox}};
}; };
this.program = lineProgram(ctx);
(async function run() { this.ctx = ctx;
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");
if (gl === null) {
console.error("Unable to initialise WebGL");
return;
} }
set_xy(width, height, xBuffer, yBuffer, bbox) {
console.info("Successfully opened webgl canvas"); const ctx = this.ctx;
ctx.useProgram(this.program.inner);
const width = 23;
const height = 21;
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 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]);
}
// 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);
const lineProg = lineProgram(gl);
gl.useProgram(lineProg.program);
// Transfer x, y to cpu, prepare fBuffer
const xBuffer = gl.createBuffer();
const yBuffer = gl.createBuffer();
{ {
let loc = gl.getAttribLocation(lineProg.program, "aX"); let loc = ctx.getAttribLocation(this.program.inner, "aX");
gl.bindBuffer(gl.ARRAY_BUFFER, xBuffer); ctx.bindBuffer(ctx.ARRAY_BUFFER, xBuffer);
gl.vertexAttribPointer(loc, 1, gl.FLOAT, false, 0, 0); ctx.vertexAttribPointer(loc, 1, ctx.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(loc); ctx.enableVertexAttribArray(loc);
gl.bufferData(gl.ARRAY_BUFFER, x, gl.STATIC_DRAW);
loc = gl.getAttribLocation(lineProg.program, "aY"); loc = ctx.getAttribLocation(this.program.inner, "aY");
gl.bindBuffer(gl.ARRAY_BUFFER, yBuffer); ctx.bindBuffer(ctx.ARRAY_BUFFER, yBuffer);
gl.vertexAttribPointer(loc, 1, gl.FLOAT, false, 0, 0); ctx.vertexAttribPointer(loc, 1, ctx.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(loc); ctx.enableVertexAttribArray(loc);
gl.bufferData(gl.ARRAY_BUFFER, y, gl.STATIC_DRAW);
} }
// Create triangles covering the domain
const lineIdxBuffer = new Uint16Array(2*width*height - 1); const lineIdxBuffer = new Uint16Array(2*width*height - 1);
{ {
let n = 0; let n = 0;
@ -160,19 +121,79 @@ function lineProgram(ctx) {
} }
} }
} }
const indexBuffer = gl.createBuffer(); this.indexBuffer = ctx.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, lineIdxBuffer, gl.STATIC_DRAW); 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 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");
const width = 23;
const height = 21;
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 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]);
}
// 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); gl.lineWidth(1.0);
gl.uniform4f(lineProg.uniforms.uBbox, bbox[0], 1.0/(bbox[1] - bbox[0]), bbox[2], 1.0/(bbox[3] - bbox[2])); const xBuffer = gl.createBuffer();
const yBuffer = gl.createBuffer();
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);
const lineDrawer = new LineDrawer(gl);
lineDrawer.set_xy(width, height, xBuffer, yBuffer, bbox);
function drawMe() { function drawMe() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawElements(gl.LINE_STRIP, 2*width*height - 1, gl.UNSIGNED_SHORT, 0); lineDrawer.draw();
window.requestAnimationFrame(drawMe); window.requestAnimationFrame(drawMe);
} }