aboutsummaryrefslogtreecommitdiffhomepage
path: root/canvasWorker.js
diff options
context:
space:
mode:
Diffstat (limited to 'canvasWorker.js')
-rw-r--r--canvasWorker.js104
1 files changed, 104 insertions, 0 deletions
diff --git a/canvasWorker.js b/canvasWorker.js
new file mode 100644
index 0000000..4b1e81b
--- /dev/null
+++ b/canvasWorker.js
@@ -0,0 +1,104 @@
+let canvas, gl;
+
+const createShader = (gl, type, source) => {
+ const shader = gl.createShader(type);
+ gl.shaderSource(shader, source);
+ gl.compileShader(shader);
+ const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+ if (success) return shader;
+
+ console.error(gl.getShaderInfoLog(shader));
+ gl.deleteShader(shader);
+};
+
+const createProgram = (gl, vertexShader, fragmentShader) => {
+ const program = gl.createProgram();
+ gl.attachShader(program, vertexShader);
+ gl.attachShader(program, fragmentShader);
+ gl.linkProgram(program);
+ const success = gl.getProgramParameter(program, gl.LINK_STATUS);
+ if (success) return program;
+
+ console.error(gl.getProgramInfoLog(program));
+ gl.deleteProgram(program);
+};
+
+const initGL = () => {
+ const vertexShaderSource = `
+ attribute vec2 a_position;
+ uniform vec2 u_resolution;
+ void main() {
+ vec2 inverted = vec2(a_position.x, u_resolution.y - a_position.y - 1.0); // !! :)
+ vec2 zeroToOne = inverted / u_resolution;
+ vec2 zeroToTwo = zeroToOne * 2.0;
+ vec2 clipSpace = zeroToTwo - 1.0;
+ gl_Position = vec4(clipSpace, 0, 1);
+ }`;
+ const fragmentShaderSource = `
+ precision mediump float;
+ uniform vec4 u_color;
+ void main() {
+ gl_FragColor = u_color;
+ }`;
+
+ const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+ const fragmentShader = createShader(
+ gl,
+ gl.FRAGMENT_SHADER,
+ fragmentShaderSource,
+ );
+
+ const program = createProgram(gl, vertexShader, fragmentShader);
+ const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
+ const colorUniformLocation = gl.getUniformLocation(program, "u_color");
+ const resolutionUniformLocation = gl.getUniformLocation(
+ program,
+ "u_resolution",
+ );
+
+ const positionBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+ gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+ gl.useProgram(program);
+ gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
+ gl.enableVertexAttribArray(positionAttributeLocation);
+ gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
+
+ return (positions, color) => {
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+ gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+ gl.uniform4f(colorUniformLocation, ...color);
+ gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
+ };
+};
+
+let draw;
+self.onmessage = (msg) => {
+ if (msg.data == "clear") {
+ gl.clearColor(0, 0, 0, 0);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+ } else if ("canvas" in msg.data) {
+ canvas = msg.data.canvas;
+ gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });
+ if (!gl) alert("no webgl");
+ gl.viewport(0, 0, canvas.width, canvas.height);
+ draw = initGL();
+ } else {
+ [color, x, y, width, height] = msg.data;
+ if (width < 2 || height < 2) return;
+ draw([x, y + height, x + width, y + height, x + width, y, x, y], color);
+ }
+};
+
+// self.onmessage = (msg) => {
+// if (msg.data == "clear") {
+// gl.clearRect(0, 0, canvas.width, canvas.height);
+// } else if ("canvas" in msg.data) {
+// canvas = msg.data.canvas;
+// gl = canvas.getContext("2d");
+// } else {
+// [color, x, y, width, height] = msg.data;
+// gl.fillStyle = color;
+// gl.fillRect(x, y, width, height);
+// }
+// };