LNXSDK/Kha/Kinc/Backends/System/Wasm/JS-Sources/start.js

// Includes snippets from https://surma.dev/things/c-to-webassembly/ and https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API -->

let memory = null;
let heapu8 = null;
let heapu16 = null;
let heapu32 = null;
let heapi32 = null;
let heapf32 = null;
let mod = null;
let instance = null;
let audio_thread_started = false;

function create_thread(func) {
	console.log('Creating thread');
	const thread_starter = new Worker('thread_starter.js');
	const arr = new Uint8Array(memory.buffer, func, 256);
	let str = '';
	for (let i = 0; arr[i] != 0; ++i) {
		str += String.fromCharCode(arr[i]);
	}
	thread_starter.postMessage({ mod, memory, func: str });
}

async function start_audio_thread() {
	const audioContext = new AudioContext();
	await audioContext.audioWorklet.addModule('audio-thread.js');
	const audioThreadNode = new AudioWorkletNode(audioContext, 'audio-thread', { processorOptions: { mod, memory }});
	audioThreadNode.port.onmessage = (message) => {
		console.log(message.data);
	};
	audioThreadNode.connect(audioContext.destination);
}

function read_string(ptr) {
	let str = '';
	for (let i = 0; heapu8[ptr + i] != 0; ++i) {
		str += String.fromCharCode(heapu8[ptr + i]);
	}
	return str;
}

function write_string(ptr, str) {
	for (let i = 0; i < str.length; ++i) {
		heapu8[ptr + i] = str.charCodeAt(i);
	}
	heapu8[ptr + str.length] = 0;
}

async function init() {
	let wasm_bytes = null;
	await fetch("./ShaderTest.wasm").then(res => res.arrayBuffer()).then(buffer => wasm_bytes = new Uint8Array(buffer));

	// Read memory size from wasm file
	let memory_size = 0;
	let i = 8;
	while (i < wasm_bytes.length) {
		function read_leb() {
			let result = 0;
			let shift = 0;
			while (true) {
				let byte = wasm_bytes[i++];
				result |= (byte & 0x7f) << shift;
				if ((byte & 0x80) == 0) return result;
				shift += 7;
			}
		}
		let type = read_leb()
		let length = read_leb()
		if (type == 6) {
			read_leb(); // count
			i++; // gtype
			i++; // mutable
			read_leb(); // opcode
			memory_size = read_leb() / 65536 + 1;
			break;
		}
		i += length;
	}

	memory = new WebAssembly.Memory({ initial: memory_size, maximum: memory_size, shared: true });
	heapu8 = new Uint8Array(memory.buffer);
	heapu16 = new Uint16Array(memory.buffer);
	heapu32 = new Uint32Array(memory.buffer);
	heapi32 = new Int32Array(memory.buffer);
	heapf32 = new Float32Array(memory.buffer);

	const kanvas = document.getElementById('kanvas');
	const gl = kanvas.getContext('webgl2', { antialias: false, alpha: false });
	// gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
	gl.getExtension("EXT_color_buffer_float");
	gl.getExtension("OES_texture_float_linear");
	gl.getExtension("OES_texture_half_float_linear");
	gl.getExtension("EXT_texture_filter_anisotropic");

	let file_buffer = null;
	let file_buffer_pos = 0;
	let gl_programs = [null];
	let gl_shaders = [null];
	let gl_buffers = [null];
	let gl_framebuffers = [null];
	let gl_renderbuffers = [null];
	let gl_textures = [null];
	let gl_locations = [null];

	const result = await WebAssembly.instantiate(
		wasm_bytes, {
			env: { memory },
			imports: {
				create_thread,
				glViewport: function(x, y, width, height) {
					gl.viewport(x, y, width, height);
				},
				glScissor: function(x, y, width, height) {
					gl.scissor(x, y, width, height);
				},
				glGetIntegerv: function(pname, data) {
					if (pname == 2) { // GL_MAJOR_VERSION
						heapu32[data / 4] = 3;
					}
					else {
						heapu32[data / 4] = gl.getParameter(pname);
					}
				},
				glGetFloatv: function(pname, data) {
					heapf32[data / 4] = gl.getParameter(pname);
				},
				glGetString: function(name) {
					// return gl.getParameter(name);
				},
				glDrawElements: function(mode, count, type, offset) {
					gl.drawElements(mode, count, type, offset);
				},
				glDrawElementsInstanced: function(mode, count, type, indices, instancecount) {
					gl.drawElementsInstanced(mode, count, type, indices, instancecount);
				},
				glVertexAttribDivisor: function(index, divisor) {
					gl.vertexAttribDivisor(index, divisor);
				},
				glBindFramebuffer: function(target, framebuffer) {
					gl.bindFramebuffer(target, gl_framebuffers[framebuffer]);
				},
				glFramebufferTexture2D: function(target, attachment, textarget, texture, level) {
					gl.framebufferTexture2D(target, attachment, textarget, gl_textures[texture], level);
					if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
						console.log("Incomplete framebuffer");
					}
				},
				glGenFramebuffers: function(n, framebuffers) {
					for (let i = 0; i < n; ++i) {
						gl_framebuffers.push(gl.createFramebuffer());
						heapu32[framebuffers / 4 + i] = gl_framebuffers.length - 1;
					}
				},
				glGenRenderbuffers: function(n, renderbuffers) {
					for (let i = 0; i < n; ++i) {
						gl_renderbuffers.push(gl.createRenderbuffer());
						heapu32[renderbuffers / 4 + i] = gl_renderbuffers.length - 1;
					}
				},
				glBindRenderbuffer: function(target, renderbuffer) {
					gl.bindRenderbuffer(target, gl_renderbuffers[renderbuffer]);
				},
				glRenderbufferStorage: function(target, internalformat, width, height) {
					gl.renderbufferStorage(target, internalformat, width, height)
				},
				glFramebufferRenderbuffer: function(target, attachment, renderbuffertarget, renderbuffer) {
					gl.framebufferRenderbuffer(target, attachment, renderbuffertarget, gl_renderbuffers[renderbuffer]);
				},
				glReadPixels: function(x, y, width, height, format, type, data) {
					let pixels = type == gl.FLOAT ? heapf32.subarray(data / 4) : heapu8.subarray(data);
					gl.readPixels(x, y, width, height, format, type, pixels);
				},
				glTexSubImage2D: function(target, level, xoffset, yoffset, width, height, format, type, pixels) {
					gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, heapu8.subarray(pixels));
				},
				glEnable: function(cap) {
					gl.enable(cap);
				},
				glDisable: function(cap) {
					gl.disable(cap);
				},
				glColorMask: function(red, green, blue, alpha) {
					gl.colorMask(red, green, blue, alpha);
				},
				glClearColor: function(red, green, blue, alpha) {
					gl.clearColor(red, green, blue, alpha);
				},
				glDepthMask: function(flag) {
					gl.depthMask(flag);
				},
				glClearDepthf: function(depth) {
					gl.clearDepth(depth);
				},
				glStencilMask: function(mask) {
					gl.stencilMask(mask);
				},
				glClearStencil: function(s) {
					gl.clearStencil(s);
				},
				glClear: function(mask) {
					gl.clear(mask);
				},
				glBindBuffer: function(target, buffer) {
					gl.bindBuffer(target, gl_buffers[buffer]);
				},
				glUseProgram: function(program) {
					gl.useProgram(gl_programs[program]);
				},
				glStencilMaskSeparate: function(face, mask) {
					gl.stencilMaskSeparate(face, mask);
				},
				glStencilOpSeparate: function(face, fail, zfail, zpass) {
					gl.stencilOpSeparate(face, fail, zfail, zpass);
				},
				glStencilFuncSeparate: function(face, func, ref, mask) {
					gl.stencilFuncSeparate(face, func, ref, mask);
				},
				glDepthFunc: function(func) {
					gl.depthFunc(func);
				},
				glCullFace: function(mode) {
					gl.cullFace(mode);
				},
				glBlendFuncSeparate: function(src_rgb, dst_rgb, src_alpha, dst_alpha) {
					gl.blendFuncSeparate(src_rgb, dst_rgb, src_alpha, dst_alpha);
				},
				glBlendEquationSeparate: function(mode_rgb, mode_alpha) {
					gl.blendEquationSeparate(mode_rgb, mode_alpha);
				},
				glGenBuffers: function(n, buffers) {
					for (let i = 0; i < n; ++i) {
						gl_buffers.push(gl.createBuffer());
						heapu32[buffers / 4 + i] = gl_buffers.length - 1;
					}
				},
				glBufferData: function(target, size, data, usage) {
					gl.bufferData(target, heapu8.subarray(data, data + Number(size)), usage);
				},
				glCreateProgram: function() {
					gl_programs.push(gl.createProgram());
					return gl_programs.length - 1;
				},
				glAttachShader: function(program, shader) {
					gl.attachShader(gl_programs[program], gl_shaders[shader]);
				},
				glBindAttribLocation: function(program, index, name) {
					gl.bindAttribLocation(gl_programs[program], index, read_string(name));
				},
				glLinkProgram: function(program) {
					gl.linkProgram(gl_programs[program]);
				},
				glGetProgramiv: function(program, pname, params) {
					heapu32[params / 4] = gl.getProgramParameter(gl_programs[program], pname);
				},
				glGetProgramInfoLog: function(program) {
					console.log(gl.getProgramInfoLog(gl_programs[program]));
				},
				glCreateShader: function(type) {
					gl_shaders.push(gl.createShader(type));
					return gl_shaders.length - 1;
				},
				glShaderSource: function(shader, count, source, length) {
					gl.shaderSource(gl_shaders[shader], read_string(heapu32[source / 4]));
				},
				glCompileShader: function(shader) {
					gl.compileShader(gl_shaders[shader]);
				},
				glGetShaderiv: function(shader, pname, params) {
					heapu32[params / 4] = gl.getShaderParameter(gl_shaders[shader], pname);
				},
				glGetShaderInfoLog: function(shader) {
					console.log(gl.getShaderInfoLog(gl_shaders[shader]));
				},
				glBufferSubData: function(target, offset, size, data) {
					gl.bufferSubData(target, Number(offset), heapu8.subarray(data, data + Number(size)), 0);
				},
				glEnableVertexAttribArray: function(index) {
					gl.enableVertexAttribArray(index);
				},
				glVertexAttribPointer: function(index, size, type, normalized, stride, offset) {
					gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
				},
				glDisableVertexAttribArray: function(index) {
					gl.disableVertexAttribArray(index);
				},
				glGetUniformLocation: function(program, name) {
					gl_locations.push(gl.getUniformLocation(gl_programs[program], read_string(name)));
					return gl_locations.length - 1;
				},
				glUniform1i: function(location, v0) {
					gl.uniform1i(gl_locations[location], v0);
				},
				glUniform2i: function(location, v0, v1) {
					gl.uniform2i(gl_locations[location], v0, v1);
				},
				glUniform3i: function(location, v0, v1, v2) {
					gl.uniform3i(gl_locations[location], v0, v1, v2);
				},
				glUniform4i: function(location, v0, v1, v2, v3) {
					gl.uniform4i(gl_locations[location], v0, v1, v2, v3);
				},
				glUniform1iv: function(location, count, value) {
					gl.uniform1iv(gl_locations[location], count, heapi32.subarray(value / 4));
				},
				glUniform2iv: function(location, count, value) {
					gl.uniform2iv(gl_locations[location], count, heapi32.subarray(value / 4));
				},
				glUniform3iv: function(location, count, value) {
					gl.uniform3iv(gl_locations[location], count, heapi32.subarray(value / 4));
				},
				glUniform4iv: function(location, count, value) {
					gl.uniform4iv(gl_locations[location], count, heapi32.subarray(value / 4));
				},
				glUniform1f: function(location, v0) {
					gl.uniform1f(gl_locations[location], v0);
				},
				glUniform2f: function(location, v0, v1) {
					gl.uniform2f(gl_locations[location], v0, v1);
				},
				glUniform3f: function(location, v0, v1, v2) {
					gl.uniform3f(gl_locations[location], v0, v1, v2);
				},
				glUniform4f: function(location, v0, v1, v2, v3) {
					gl.uniform4f(gl_locations[location], v0, v1, v2, v3);
				},
				glUniform1fv: function(location, count, value) {
					var f32 = new Float32Array(memory.buffer, value, count);
					gl.uniform1fv(gl_locations[location], f32);
				},
				glUniform2fv: function(location, count, value) {
					var f32 = new Float32Array(memory.buffer, value, count * 2);
					gl.uniform2fv(gl_locations[location], f32);
				},
				glUniform3fv: function(location, count, value) {
					var f32 = new Float32Array(memory.buffer, value, count * 3);
					gl.uniform3fv(gl_locations[location], f32);
				},
				glUniform4fv: function(location, count, value) {
					var f32 = new Float32Array(memory.buffer, value, count * 4);
					gl.uniform4fv(gl_locations[location], f32);
				},
				glUniformMatrix3fv: function(location, count, transpose, value) {
					var f32 = new Float32Array(memory.buffer, value, 3 * 3);
					gl.uniformMatrix3fv(gl_locations[location], transpose, f32);
				},
				glUniformMatrix4fv: function(location, count, transpose, value) {
					var f32 = new Float32Array(memory.buffer, value, 4 * 4);
					gl.uniformMatrix4fv(gl_locations[location], transpose, f32);
				},
				glTexParameterf: function(target, pname, param) {
					gl.texParameterf(target, pname, param);
				},
				glActiveTexture: function(texture) {
					gl.activeTexture(texture);
				},
				glBindTexture: function(target, texture) {
					gl.bindTexture(target, gl_textures[texture]);
				},
				glTexParameteri: function(target, pname, param) {
					gl.texParameteri(target, pname, param);
				},
				glGetActiveUniform: function(program, index, bufSize, length, size, type, name) {
					let u = gl.getActiveUniform(gl_programs[program], index);
					heapu32[size / 4] = u.size;
					heapu32[type / 4] = u.type;
					write_string(name, u.name);
				},
				glGenTextures: function(n, textures) {
					for (let i = 0; i < n; ++i) {
						gl_textures.push(gl.createTexture());
						heapu32[textures / 4 + i] = gl_textures.length - 1;
					}
				},
				glTexImage2D: function(target, level, internalformat, width, height, border, format, type, data) {
					let pixels = type == gl.FLOAT ? heapf32.subarray(data / 4) :
								 type == gl.UNSIGNED_INT ? heapu32.subarray(data / 4) :
								 type == gl.UNSIGNED_SHORT ? heapu16.subarray(data / 2) :
								 type == gl.HALF_FLOAT ? heapu16.subarray(data / 2) : heapu8.subarray(data);
					gl.texImage2D(target, level, internalformat, width, height, border, format, type, pixels);
				},
				glPixelStorei: function(pname, param) {
					gl.pixelStorei(pname, param);
				},
				glCompressedTexImage2D: function(target, level, internalformat, width, height, border, imageSize, data) {
					gl.compressedTexImage2D(target, level, internalformat, width, height, border, imageSize, heapu8.subarray(data));
				},
				glDrawBuffers: function(n, bufs) {
					let ar = [];
					for (let i = 0; i < n; ++i) {
						ar.push(gl.COLOR_ATTACHMENT0 + i);
					}
					gl.drawBuffers(ar);
				},
				glGenerateMipmap: function(target) {
					gl.generateMipmap(target);
				},
				glFlush: function() {
					gl.flush();
				},
				glDeleteBuffers: function(n, buffers) {
					for (let i = 0; i < n; ++i) {
						gl.deleteBuffer(gl_buffers[heapu32[buffers / 4 + i]]);
					}
				},
				glDeleteTextures: function(n, textures) {
					for (let i = 0; i < n; ++i) {
						gl.deleteTexture(gl_textures[heapu32[textures / 4 + i]]);
					}
				},
				glDeleteFramebuffers: function(n, framebuffers) {
					for (let i = 0; i < n; ++i) {
						gl.deleteFramebuffer(gl_framebuffers[heapu32[framebuffers / 4 + i]]);
					}
				},
				glDeleteProgram: function(program) {
					gl.deleteProgram(gl_programs[program]);
				},
				glDeleteShader: function(shader) {
					gl.deleteShader(gl_shaders[shader]);
				},
				js_fprintf: function(format) {
					console.log(read_string(format));
				},
				js_fopen: function(filename) {
					const req = new XMLHttpRequest();
					req.open("GET", read_string(filename), false);
					req.overrideMimeType("text/plain; charset=x-user-defined");
					req.send();
					let str = req.response;
					file_buffer_pos = 0;
					file_buffer = new ArrayBuffer(str.length);
					let buf_view = new Uint8Array(file_buffer);
					for (let i = 0; i < str.length; ++i) {
						buf_view[i] = str.charCodeAt(i);
					}
					return 1;
				},
				js_ftell: function(stream) {
					return file_buffer_pos;
				},
				js_fseek: function(stream, offset, origin) {
					file_buffer_pos = offset;
					if (origin == 1) file_buffer_pos += file_buffer.byteLength; // SEEK_END
					return 0;
				},
				js_fread: function(ptr, size, count, stream) {
					let buf_view = new Uint8Array(file_buffer);
					for (let i = 0; i < count; ++i) {
						heapu8[ptr + i] = buf_view[file_buffer_pos++];
					}
					return count;
				},
				js_time: function() {
					return window.performance.now();
				},
				js_pow: function(x) {
					return Math.pow(x);
				},
				js_floor: function(x) {
					return Math.floor(x);
				},
				js_sin: function(x) {
					return Math.sin(x);
				},
				js_cos: function(x) {
					return Math.cos(x);
				},
				js_tan: function(x) {
					return Math.tan(x);
				},
				js_log: function(base, exponent) {
					return Math.log(base, exponent);
				},
				js_exp: function(x) {
					return Math.exp(x);
				},
				js_sqrt: function(x) {
					return Math.sqrt(x);
				},
				js_eval: function(str) {
					(1, eval)(read_string(str));
				}
			}
		}
	);

	mod = result.module;
	instance = result.instance;
	instance.exports._start();

	function update() {
		instance.exports._update();
		window.requestAnimationFrame(update);
	}
	window.requestAnimationFrame(update);

	kanvas.addEventListener('click', (event) => {
		if (!audio_thread_started) {
			start_audio_thread();
			audio_thread_started = true;
		}
	});

	kanvas.addEventListener('contextmenu', (event) => {
		event.preventDefault();
	});

	kanvas.addEventListener('mousedown', (event) => {
		instance.exports._mousedown(event.button, event.clientX, event.clientY);
	});

	kanvas.addEventListener('mouseup', (event) => {
		instance.exports._mouseup(event.button, event.clientX, event.clientY);
	});

	kanvas.addEventListener('mousemove', (event) => {
		instance.exports._mousemove(event.clientX, event.clientY);
	});

	kanvas.addEventListener('wheel', (event) => {
		instance.exports._wheel(event.deltaY);
	});

	kanvas.addEventListener('keydown', (event) => {
		if (event.repeat) {
			event.preventDefault();
			return;
		}
		instance.exports._keydown(event.keyCode);
	});

	kanvas.addEventListener('keyup', (event) => {
		if (event.repeat) {
			event.preventDefault();
			return;
		}
		instance.exports._keyup(event.keyCode);
	});
}

init();