javascript2012. 1. 8. 22:07



아 쉽게도  티스토리에서 꼼수로 돌려보기엔 워커가 잘 먹히지 않아서

티스토리에 적용하는 법을 알아내었다. 바로 여기서 해볼수 있다.

http://skkuassafractal.tistory.com/ 



실제 돌아가는것은 집 서버에다가 대충 올려서 프갤에 몇번 올려봤었다.

몇분이 테스트 해주셧는데

CPU가 터질려고 한단다 ㅋㅋㅋㅋ , 16개의 워커(스레드?)가 돌아가는 셈



만델브로트 집합은 각 픽셀에 대해서 집합에 속하는가 혹은 발산정도를 계산하므로

철저하게 병렬로 분할 가능하다. 하나의 계산이 다른 계산에 영향을 주지 않으므로 독립시킬 수 있다.


워커 코드부터 보면 다음과 같다.

 
저번에 포스팅한 프랙탈 코드랑 다른점은 없고

중간 부분이 뚝 떨어져서 따로 독립한 것일 뿐이다. 다만

여러 정보를 얻는 연관배열 데이터를 받아서 각종 정보를 이용해서

자신이 맡은 부분을 그려서 다시 크리에이터에게 전달할 뿐이다.



그러면 이 워커를 호출하는 크리에이터 코드는 다음과 같다.
 

하나의 덩어리 데이터를 여러개의 워커가 공유하게 해보지는 않았다.

그냥  각각의 데이터를 생성해서 가져간다. 여기서 오버헤드가 있다.


워커는 전역배열에 저장되고 이를 프랙탈 함수가 사용하므로

전혀 좋은 코드가 아니다 ㅠ

특히 계산외 부분인 오버레이 이벤트는 완전 구리다 ㅋ

캔바스 이벤트를 얻게하기위해 클릭하면 오버레이를 그냥 치운다 ㅋㅋㅋ


우아한 설계를 위해선 워커에 대한 접근이

어떤 객체에 의해 완전히 숨겨지게 설계하는게 이상적일 것  같다.


16개의 워커를 만들고 이를 사용하는데 계산 영역은 단순히

캔바스를 수평분할한 것이다.

전혀 알고리즘적 측면이 없고 그냥 단순분할 계산이므로


만델브로트 집합에 포함 (한 픽셀에 대해서 255번 계산) 된 부분이 많은 영역은 계산이 늦게 끝난다.

즉 전체적으로 노란색이 많으면 오래걸린다.


각 부분이 계산이 끝나면 자기부분을 크리에이터에게 전달하고 크리에이터는 바로 캔바스에 반영한다

따라서 모든 워커가 계산을 끝내기 전까지는

반영되는 것이 뒤죽박죽 섞일 수가 있다 다음 사진처럼




 

수평으로 16개의 영역으로 구분되고 각자가 알아서 그리고 알아서 업데이트 하게 되는 것이다.

내 집에 있는 데탑은 CPU 코어가 6개인데 상당히 빠르게 계산한다.

다만 위 그림 캡쳐를 할수 있었던 것은 넷북으로 돌려서 계산이 느렸기 때문이였다.



크롬은 웹 작업자라고 해서 내부적인 것은 잘 모르겠지만 워커를 만들면 프로세스를 더 만드는 것 같기도 하다.



크리에이터가 어떠한 계산 작업도 맡지 않으므로

모든 계산이 끝날때까지 먹통이 되지도 않는다.

워커는 스레드를 흉내낼수 있다는 점에서

HTML5 추가된 기능중 가장 중요하다고 생각한다. 




하지만 이렇게 워커를 수십개를 만들어 계산을 하는 난리를 피워도

이보다 훨씬 빨리 계산할 수 있는 방법이 있다.. ㅡㅡ

webgl 의 쉐이더 (프래그먼트) 를 사용해서 그래픽 카드의 자원을 사용하는 것이다.

 
Posted by 멍충한아싸

댓글을 달아 주세요