웹 어셈블리 이미지 처리 연습 기록 (3)

quantize 라이브러리가 4초정도 렉을 발생시키는 사소한 문제가 있었지만 async 같은 걸 떡칠해도 도움이 안 돼서 그냥 놔두기로 했었다... 가 어제까지 얘기다. 오늘 webworker로 해결했다.

webworker는 브라우저 안에서 다른 스레드에서 동작하는 worker를 만드는 기술인데 IE 10부터 지원 되니까 webassembly보다 지원 범위가 한참 넓다.

 

사용법이 참 간단하다.

우선 Worker를 만들어야 한다.

var quantizeWorker = new Worker('wasmworker.js', {type: 'module'});

'worker.js' 파일이 필요한 데, 이 파일은 비동기적으로 실행시킬 함수를 다른 파일에 넣고 onmessage = function(e)를 사용한 것이다.

onmessage = function(e) {
    const img : ImageData = e.data[0];
    const pixelno : number = e.data[1];
    const dithering : number = e.data[2];
    
    var quantized = rust.quantize(img.data, img.width, img.height, pixelno, dithering);
    this.postMessage(quantized);
}

quantizeWorker.postMessage([data, colors, 1.0]);


quantizeWorker.onmessage = e => {

postMessage와 onmessage를 잘 써주면 된다. 정말 쉽다!

다만 message는 any로 보내지니까 타입을 잘 맞춰야겠다.

 

 

---

이걸 찾아낸 것도 참 신기한 게 마크다운 파서 만들기 글을 읽다가 알게 되었다.

마크다운 파서 만들기 (4) - 마무리 및 회고. 마크다운 문서를 Tufte CSS로 꾸며진 웹 문서로 생성하자는 목표로… | by 김대현 | HappyProgrammer | Medium

마크다운 파서 만들기 (4) - 마무리 및 회고

그리고 마크다운 파서 만들기는 책을 읽다가 PEG 문법이란 걸 보고 보게 되었다.

Parsing expression grammar - Wikipedia

Parsing expression grammar - Wikipedia

그 책은 갤질하다가 알게 되었고...