홈>
병렬 처리를 실행하기위한 WebGL에는 많은 추상화가 있습니다. 예 :
- https://github.com/MaiaVictor/WebMonkeys
- https://github.com/gpujs/gpu.js
- https://github.com/turbo/js
그러나 WebGL의 일반 GLSL 코드에서 단순하고 완전한 병렬 처리 예제가 어떤지 이해하는 데 어려움을 겪고 있습니다. WebGL에 대한 경험이 많지 않지만 조각 및 정점 셰이더JavaScript에서 WebGL 컨텍스트에로드하는 방법 셰이더를 사용하는 방법 또는 병렬 처리를 수행하는 방법을 모르겠습니다.
병렬 추가 작업의 간단한 hello world 예제를 보여줄 수 있는지 궁금합니다. 기본적으로 GLSL/WebGL 셰이더를 사용하는 병렬 형식이지만 수행해야합니다.
var array = []
var size = 10000
while(size--) array.push(0)
for (var i = 0, n = 10000; i < n; i++) {
array[i] += 10
}
본질적으로 이해하지 못하는 것 같습니다 :
<올>- 답변 # 1
관련 자료
- functional programming - C 라이브러리로서의 OCaml, hello world 예제
- maven - itext7 javalangNoClassDefFoundError를 사용한 Hello World 예제
- reactjs - React에서 작동하는 mxGraph Hello World 예제 얻기
- javascript - ReactJS의 Hello World 예제를 실행할 수 없습니다
- android - hello world flutter 앱 빌드 예제 - ': app : mergedebugresources'태스크에 대한 실행 실패
- javascript - My Vue Hello World 예제는 대괄호를 표시하고 텍스트를 렌더링하지 않습니다
- R의 opencpu 패키지를 사용한 간단한 "hello world"예제
- 인터넷이 다운되면 Simple "Hello World!"Java 프로그램을 실행할 수 없습니다
- bdd - Linux 터미널에서 Python Behave를 사용하여 Hello World 테스트를 어떻게 작성합니까?
- 안녕하세요 spacy Python을 사용하여 NLP를 개발하려면 적절한 예가 필요합니다
- c++ - 우주선 운영자를위한 실제 사용 예
- json - Qt가있는 HMRC MTD Hello World
- nativescript - hello world 데모 빌드 실패
- "hello world"Microsoft AL 앱을 Dynamics 365 샌드 박스에 게시하는 동안 오류가 발생했습니다
- .net - SeriLog 및 PowerShell을 사용한 Hello World
- Ansible + Python의 Hello World가 작동하지 않습니다
- 다른 유형의 Javascript에서 변수 할당에 대한 시각적/실용적/실제 예
- c - Hello World를 컴파일 할 수 없습니다
- python - 플라스크의 오류 hello world 프로그램에서 플라스크를 가져올 수 없습니다
- compilation - haskell에서 hello world를 컴파일 할 수 없습니다
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- JavaScript 변수를 HTML div에 '출력'하는 방법
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- python - 화면에서 찾은 요소를 찾을 수없는 경우 셀레늄
먼저 WebGL은 점, 선 및 삼각형 만 래스터 화합니다. WebGL을 사용하여 비 래스터 화 (GPGPU)를 수행하는 것은 기본적으로 WebGL에 대한 입력이 배열 및 출력의 데이터임을 인식하는 문제입니다. 픽셀의 2D 사각형도 실제로는 그래픽이 아닌 데이터를 제공하고 창의적으로 래스터 화함으로써 2D 배열입니다. 그 데이터는 그래픽이 아닌 수학을 할 수 있습니다.
WebGL은 두 가지 방식으로 병렬입니다.
<올>CPU는 다른 프로세서 인 GPU에서 실행되고 있지만 CPU는 다른 작업을 수행 할 수있는 자유를 계산합니다
GPU 자체는 병렬로 계산됩니다. 100 픽셀의 삼각형을 래스터 화하면 GPU에서 해당 픽셀의 한계까지 각 픽셀을 병렬로 처리 할 수 있습니다. 너무 깊게 파지 않으면 NVidia 1080 GPU에 2560 개의 코어가있는 것처럼 보이며 전문화되지 않은 것으로 가정하고 그 중 하나가 2560 개의 데이터를 병렬로 계산할 수있는 최상의 경우를 가정합니다.예를 들어, 모든 WebGL 앱은 특별한 조치를 취하지 않고 위의 (1) 및 (2) 기준으로 병렬 처리를 사용하고 있습니다.
10 만에서 10000 개의 요소를 추가하는 것은 WebGL이 한 작업 동안 동일한 데이터를 읽고 쓸 수 없기 때문에 WebGL이 그다지 좋지 않습니다. 즉, 귀하의 예는
다른 프로그래밍 언어와 마찬가지로이를 수행하는 방법은 여러 가지가 있습니다. 가장 빠른 방법은 모든 값을 텍스처에 복사 한 다음 다른 텍스처로 래스터 화하여 첫 번째 텍스처에서 찾고 +10을 대상에 쓰는 것입니다. 그러나 문제 중 하나가 있습니다. GPU와의 데이터 전송 속도가 느리므로 GPU 작업이 승리인지 여부를 고려해야합니다.
다른 하나는 대상 배열에 임의로 액세스 할 수없는 동일한 배열에서 읽고 쓸 수없는 한계와 같습니다. GPU가 선, 점 또는 삼각형을 래스터 화하고 있습니다. 삼각형을 그리는 것이 가장 빠르지 만 어떤 순서로 쓸 픽셀을 결정해야하므로 문제가 그 한계에 부응해야합니다. 점을 사용하여 대상을 임의로 선택할 수 있지만 삼각형을 렌더링하는 것보다 렌더링 지점이 훨씬 느립니다.
"Compute Shaders"(아직 WebGL의 일부는 아님)는 GPU에 랜덤 액세스 쓰기 기능을 추가합니다.
예 :
일반 수학 프로세서를 만들려면 훨씬 더 많은 작업이 필요합니다.
문제 :
텍스처는 2D 배열이며, WebGL은 점, 선 및 삼각형 만 래스터 화하므로 사각형에 맞는 데이터를 처리하는 것이 훨씬 쉽습니다. 즉, 10001 값이 있으면 정수 단위의 정수에 맞는 사각형이 없습니다. 데이터를 채우고 끝 부분을 무시하는 것이 가장 좋습니다. 다시 말해 100x101 텍스처는 10100 값입니다. 마지막 99 개의 값은 무시하십시오.
8 비트 4 채널 텍스처를 사용하는 위의 예입니다. WebGL이 작업 당 4 개의 값을 처리 할 수 있으므로 8 비트 1 채널 텍스처 (수학이 적음)를 사용하는 것이 더 쉽지만 효율성도 떨어집니다.
8 비트 텍스처를 사용하기 때문에 0에서 255까지의 정수 값만 저장할 수 있습니다. 텍스처를 32 비트 부동 소수점 텍스처로 전환 할 수 있습니다. 부동 소수점 텍스처는 WebGL의 선택적 기능입니다 (확장을 활성화하고 성공했는지 확인해야 함). 부동 소수점 텍스처로 래스터 화하는 것도 옵션 기능입니다. 2018 년 현재 대부분의 모바일 GPU는 부동 소수점 텍스처로의 렌더링을 지원하지 않으므로 결과가 GPU에서 작동하도록하려면 결과를 지원하는 형식으로 창의적으로 인코딩하는 방법을 찾아야합니다.
소스 데이터를 어드레싱하려면 수학이 1d 인덱스에서 2d 텍스처 좌표로 변환해야합니다. 위의 예에서 srcData에서 dstData 1을 1로 직접 변환하므로 수학이 필요하지 않습니다. srcData를 뛰어 다녀야한다면 그 수학을 제공해야합니다WebGL1
WebGL2
2 개의 숫자를 합산한다고합시다. 우리는 이런 식으로 할 수 있습니다
위 예제는 WebGL2를 사용합니다. 왜? WebGL2는 R8 형식 텍스처로의 렌더링을 지원하므로 수학이 쉬워졌습니다. 이전 예제와 같이 픽셀 당 4 개의 값 대신 픽셀 당 하나의 값. 물론 그것은 느리지 만 4 가지 값으로 작동하게하면 실제로 계산을 계산하기가 복잡하거나 소스 데이터를 더 잘 일치시키기 위해 다시 정렬해야 할 수도 있습니다. 예를 들어
0, 1, 2, 3, 4, 5, 6, 7, 8, ...
가는 가치 지수 대신0, 2, 4, 6, 1, 3, 5, 7, 8 ....
가 배열 된 경우 2 개의 값마다 합산하는 것이 더 쉽습니다. 이렇게하면 한 번에 4를 꺼내고 다음 4 그룹을 추가하면 값이 정렬됩니다. 또 다른 방법은 2 개의 소스 텍스처를 사용하는 것입니다. 하나의 텍스처에는 모든 짝수 인덱스 값을, 다른 텍스처에는 홀수 인덱스 값을 넣으십시오.WebGL1은 하나의 채널이기도 한 LUMINANCE 및 ALPHA 텍스처를 제공하지만 렌더링 할 수 있는지 여부는 WebGL2에서 R8 텍스처로 렌더링하는 것이 필수 기능인 선택적 기능입니다.
WebGL2는 "변환 피드백"이라는 것을 제공합니다. 버텍스 쉐이더의 출력을 버퍼에 쓸 수 있습니다. 처리하려는 정점 수를 설정하는 것만으로도 이점이 있습니다 (대상 데이터가 사각형 일 필요는 없음). 또한 부동 소수점 값을 출력 할 수 있음을 의미합니다 (텍스처에 렌더링 할 때와 같이 선택 사항은 아님). 나는 (테스트하지는 않았지만) 텍스쳐로 렌더링하는 것보다 느리다고 믿습니다.
WebGL을 처음 사용하기 때문에이 튜토리얼을 제안 할 수 있습니다.