diff options
Diffstat (limited to 'canvasWorker.js')
-rw-r--r-- | canvasWorker.js | 104 |
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); +// } +// }; |