Merge pull request #8 from satoshi7190/fix/inline-webworker

Add inline web worker for image processing

Author: Kanahiro

src/terrain.ts

@@ -1,5 +1,7 @@
 import type { RasterDEMSourceSpecification } from 'maplibre-gl';
 import maplibregl from 'maplibre-gl';
+import { workerCode } from './worker';
+
 
 const loadImage = async (
 	src: string,
@@ -82,9 +84,8 @@ class WorkerProtocol {
 	};
 }
 
-const worker = new Worker(new URL('./worker.ts', import.meta.url), {
-	type: 'module',
-});
+const blob = new Blob([workerCode], { type: 'application/javascript' });
+const worker = new Worker(URL.createObjectURL(blob));
 const workerProtocol = new WorkerProtocol(worker);
 
 type Options = {

src/worker.ts

@@ -1,14 +1,16 @@
-const vsSource = `#version 300 es
+// インラインWebワーカーのコードを文字列で定義
+export const workerCode = `
+const vsSource = \`#version 300 es
     in vec4 a_position;
     out vec2 v_tex_coord;
 
     void main() {
         gl_Position = a_position;
         v_tex_coord = vec2(a_position.x * 0.5 + 0.5, a_position.y * -0.5 + 0.5);
     }
-`;
+\`;
 
-const fsSource = `#version 300 es
+const fsSource = \`#version 300 es
     #ifdef GL_FRAGMENT_PRECISION_HIGH
     precision highp float;
     #else
@@ -44,24 +46,24 @@ const fsSource = `#version 300 es
             float(is_valid)
         );
     }
-`;
+\`;
 
-let gl: WebGL2RenderingContext | null = null;
-let program: WebGLProgram | null = null;
-let positionBuffer: WebGLBuffer | null = null;
-let heightMapLocation: WebGLUniformLocation | null = null;
+let gl = null;
+let program = null;
+let positionBuffer = null;
+let heightMapLocation = null;
 
-const initWebGL = (canvas: OffscreenCanvas) => {
+const initWebGL = (canvas) => {
 	gl = canvas.getContext('webgl2');
 	if (!gl) {
 		throw new Error('WebGL not supported');
 	}
 
 	const loadShader = (
-		gl: WebGL2RenderingContext,
-		type: number,
-		source: string,
-	): WebGLShader | null => {
+		gl,
+		type,
+		source,
+	) => {
 		const shader = gl.createShader(type);
 		if (!shader) {
 			console.error('Unable to create shader');
@@ -155,3 +157,4 @@ self.onmessage = async (e) => {
 		}
 	}
 };
+`;