2D 게임 / 앱에 2D Canvas 대신 WebGL을 사용하는 이유가 있습니까?
답변:
다른 측면에서이 질문을 살펴보면
개발자가 다른 기술보다 한 기술을 어떻게 선택합니까?
- 이미 구축 된 시스템에 더 잘 통합됩니다.
- 사용하기 쉽습니다
- 가 더 빠르다
- 더 많은 기능을 가지고 있거나 그들의 필요에 더 잘 맞는
- 비용
- 더 많은 플랫폼 독립
따라서 이러한 특성과 관련하여 canvas와 webGL API의 차이점에 대해 설명하겠습니다.
canvas와 webGL은 모두 JavaScript API입니다. 통합 (바인딩)과 관련하여 거의 동일합니다. 둘 다 코딩 속도를 높일 수있는 여러 라이브러리에서 지원됩니다. 다른 라이브러리는 코드를 구성하는 다른 방법을 제공하므로 라이브러리 선택에 따라 드로잉 API가 구조화되는 방식이 결정되지만 여전히 거의 동일합니다 (나머지 코드가 함께 바인딩되는 방식). 라이브러리를 사용하는 경우 코드 작성의 용이성은 라이브러리 자체에 달려 있습니다.
0부터 코드를 작성하면 캔버스 API를 배우고 이해하기가 훨씬 쉽습니다. 최소한의 수학 지식이 필요하며 개발은 빠르고 간단합니다.
WebGL API로 작업하려면 강력한 수학 기술과 렌더링 파이프 라인에 대한 완전한 이해가 필요합니다. 이러한 기술을 가진 사람은 찾기가 더 어렵고 생산 속도가 느리기 때문에 (이러한 코드 기반의 크기와 복잡성으로 인해) 비용이 더 많이 듭니다.
WebGL은 더 빠르고 더 많은 기능을 제공합니다. 그것에 대해 의심의 여지가 없습니다. 렌더링 파이프 라인에 대한 전체 액세스 권한을 제공하는 네이티브 3D API이며 코드 및 효과가 더 빠르게 실행되고 '조정 가능'합니다. webGL에는 실제로 제한이 없습니다.
canvas와 webGL은 모두 html5의 장점입니다. 일반적으로 하나를 지원하는 장치는 다른 하나를 지원합니다.
요약하자면 :
- 그리기 API 코드와 나머지 (통합) 병합 : 유사
- 사용의 용이성:
- (라이브러리 포함) canvas = webGL
- (처음부터) webGL << 캔버스
- 속도 : webGL> 캔버스
- 기능 : webGL> 캔버스
- 비용 : webGL은 훨씬 더 비쌉니다.
- 플랫폼 : 매우 유사
도움이 되었기를 바랍니다.
토론을위한 PS Open.
가장 큰 장점은 파이프 라인의 프로그래밍 가능성과 성능입니다. 예를 들어, 두 개의 상자를 다른 상자 위에 그리고 하나는 숨겨져 있다고 가정하면 일부 GL 구현에는 숨겨진 상자를 삭제할 수있는 범위가 있습니다.
비교는 여기에 테이블을 빠르게 만드는 방법이 없기 때문에 아래에 비교 테이블 사진을 업로드했습니다. 완전성을 위해 Three.js를 추가했습니다.
WebGL은 2D 캔버스가 제공하지 않는 2D 기능은 무엇입니까? 가장 큰 IMHO는 그래픽 하드웨어의 프로그래밍 가능한 조각 셰이더입니다. 예를 들어 WebGL에서 3D 하드웨어의 셰이더에서 Conway의 Game of Life를 구현할 수 있습니다.
http://glslsandbox.com/e#207.3
이런 종류의 2D 디스플레이는 2D 캔버스가있는 GPU가 아닌 CPU에서만 실행됩니다. 모든 계산은 JavaScript로 구현되며 웹 작업자의 도움으로도 GPU만큼 병렬 적이 지 않습니다. 이것은 물론 하나의 예일 뿐이며, 모든 종류의 흥미로운 2D 효과를 셰이더로 구현할 수 있습니다.
음, 게임을 코딩 할 때 속도가 빨라야하기 때문에 성능이 가장 큰 이유 중 하나입니다. 하지만 캔버스 대신 WebGL을 선택해야하는 몇 가지 다른 이유가 있습니다. 셰이더, 조명 및 확대 / 축소를 코딩 할 수있는 가능성을 제공하며 이는 상용 게임 앱을 수행하는 경우 중요합니다. 또한 50 개 정도의 스프라이트 후에 캔버스가 느려집니다.
webGL로는 할 수없는 Canvas로 할 수있는 일은 없습니다. 캔버스는 get / putImageData로 바이트를 분쇄 할 수 있으며, webGL을 사용하여 프로그래밍 방식으로 선, 원 등을 그릴 수 있습니다.
그러나 꽤 많은 그림과 60fps에서 일부 효과를 수행하려는 경우 성능 차이가 너무 커서 webGL에서 제대로 실행될 때 캔버스에서는 불가능합니다. 성능은 기본 기능입니다.
그러나 webGL은 프로그래밍하기가 매우 복잡합니다. 캔버스가 당신에게 충분한 지 확인하거나 고통을 덜어 줄 라이브러리를 찾거나 ...
다른 단점 : IE (하지만 무엇을하나요?)와 일부 모바일에서는 작동하지 않습니다.
호환성은 여기를 참조하십시오 : http://caniuse.com/webgl
특히 캔버스에서 잘 작동하지 않는 고전적인 2D 항목을 원합니다.
- 색상 변환 (예 : 스프라이트 깜박임)
- 반복 비트 맵 채우기
- 회전중인 맵 타일링 (캔버스 아래에서 일부 구현은 이음새를 생성 함)
- 딥 레이어링 (구현에 따라 매우 다름)
- 곱셈 또는 가산 블렌딩
... 물론 픽셀 액세스 권한이 있으므로 위를 포함한 모든 작업을 수동으로 수행 할 수 있습니다. 그러나 그것은 정말, 정말 느릴 수 있습니다. 이론적으로 캔버스에 렌더링하기 위해 Mesa openGl을 구현할 수 있습니다.
webGL을 사용하는 또 다른 큰 이유는 그 결과가 다른 곳으로 이식하기가 매우 쉽다는 것입니다. 이는 또한 기술을 더 가치있게 만듭니다.
캔버스를 사용하는 이유는 여전히 더 잘 지원되며 픽셀 단위로 작업하는 것을 배우면 매우 귀중한 교훈입니다.
WebGL은 특히 새로운 기술이고 HTML5 캔버스가보다 확립되어 있으므로 사용하려는 것은 사용자에 따라 다릅니다. 사용자가 모바일 장치를 사용할 것이라고 생각한다면 HTML5 캔버스를 제안하고 더 나은 2D 렌더링을 원한다면 WebGL을 사용합니다. 그래서 당신이 할 수있는 일은 HTML5를 사용하는 모바일 렌더링에서 사용하는 경우이고 WebGL을 지원하는 플랫폼에서 사용하는 경우입니다.
예를 들면 :
if (window.WebGLRenderingContext) {
webGLcanvasApp()
} else if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
html5CanvasAppFMobile()
} else {
html5CanvasApp()
}출처 :
WebGL 지원을 감지하는 적절한 방법?
jQuery에서 모바일 장치를 감지하는 가장 좋은 방법은 무엇입니까?
WebGL은 GPU 없이는 사용할 수 없습니다.
대부분의 시스템에 GPU가 있기 때문에 이러한 하드웨어 종속성은 큰 문제가 아니지만 GPU 또는 CPU 아키텍처가 진화하는 경우 에뮬레이션으로 webgl 콘텐츠를 보존하는 것이 어려울 수 있습니다. 오래된 (가상화 된) 컴퓨터에서 실행하는 것은 문제가 있습니다.
그러나 "Canvas vs WebGL"은 바이너리 선택 일 필요가 없습니다. 실제로 효과를 위해 webgl을 사용하는 것을 선호하지만 나머지는 캔버스에서 수행합니다. VM에서 실행할 때 효과 없이도 여전히 훌륭하고 빠르게 작동합니다.