2012-12-07 1 views
1

게임의 경우 빛과 그림자를 계산하려고합니다. 이를 위해 캔버스를 사각형 영역으로 분해하여 플레이어에서 각 사각형 위치로가는 도중에 광선이 차단되는지 계산합니다. 나는 그 계산을 위해 합리적으로 좋은 성능에 도달하기 위해 지금 관리 해왔다.html5 캔버스에서의 렌더링은 너무 많은 시간을 소비하며, 거의 도움이되지 않습니다.

그런 다음 어두운 사각형 (Canvas.fillRect(...))으로 보이지 않는 영역을 덮어서 결과를 시각화하지만 좋은 해상도, 즉 계산을 위해 ~ 10'000 제곱을 원할 때이 단계는 너무 비싸게됩니다. 처음에는 오프 스크린 캔버스 (= 버퍼)에 렌더링 한 다음, 보이는 캔버스에 버퍼를 그렸지만 성능이 크게 향상되지는 않았습니다.

제가 놓친 것이 있습니까? 아니면 그림을 고정시키는 다른 방법이 있습니까?

업데이트 :

영향을받는 코드는 여기에서 찾을 수 있습니다 : https://github.com/otruffer/Ape_On_Tape/blob/master/src/client/js/visibility.js

이 실제 도면의 하단에 drawCloudAt(...)flushBuffer()에서 일어나는 (코드 조금 여기에 게시 너무 커서) 이 파일.

+0

코드를 확인해야합니다. – Shmiddty

+0

좋아, github 프로젝트의 JS 소스 파일에 대한 링크를 추가했다. 컴퓨터에서 게임을 복제하고 실행 해보십시오. ;-) –

답변

1

소프트웨어에서 실시간으로 빛을 계산하는 것은 항상 성능 저하 요인입니다. 대신 비디오 카드에서 빛의 계산을하는 실제 3D 엔진을 사용하는 것을 고려 했습니까? 네, Javascript가 지금 할 수 있습니다.이 새로운 기능은 WebGL입니다.

lightmap을 적용하는 더 빠른 방법이 필요한 경우 fillRect를 사용하는 대신 캔바스의 RGB 값을 직접 조작 할 수 있습니다. getImageData를 사용하여 캔버스의 원시 8 비트 RGBA 값 배열을 가져올 수 있습니다. 그런 다음이 배열을 조작하고 putImageData를 사용하여 다시 배열 할 수 있습니다.

+0

멋지다! 적어도 WebGL은 약간의 과잉이라고 생각합니다. 적어도 배우고 구축하는 데 많은 노력이 필요합니다. 그러나 나는 분명히 원시 RGB 데이터를 조작하려고 노력할 것입니다, 그것이 더 빠를 것이기를 바랍니다 ... Btw, 현재 또는 미래의 브라우저에서 WebGL의 지원에 대해 말할 수 있습니까? –

+0

아니요,하지만 할 수있는 웹 사이트를 알고 있습니다 : http://caniuse.com/WebGL – Philipp

+0

잠깐, 'setImageData()'와 같은 메소드가 없습니다. 편집 : 실제로는'putImageData()'라고 불린다. : D –

관련 문제