WebGL 관련 주제에 대한 무작위 질문 및 답변 링크 모음

• WebGL Droste 효과
• WebGL의 gl_PointSize 제한 해결
• WebGL에서 3D 텍스처를 시뮬레이션하는 방법
• 32000x32000처럼 큰 크기의 이미지를 렌더링하는 방법
• WebGL에서 팔레트 기반의 그래픽 에뮬레이션

• GPU의 vertex 및 fragment 처리에 대한 부하를 표시하는 간단한 방법이 있나요?
• WebGL에서 두꺼운 선을 그리는 방법
• 기본 행렬 변환으로 FPS같은 카메라 움직임
• WebGL에서 텍스처와 함께 색상도 사용할 수 있나요?
• coloring과 texturing를 지원하기 위한 GLSL shader

• 어떻게 텍스처 배열을 WebGL shader uniform에 바인딩하나요?
• 일괄 처리 시 각 sprite의 alpha 값 전달하기
• 이 GLSL fragment shader가 뭘 하는지 설명해주실 수 있는 분 있나요?
• WebGL 2D tilemap
• 전체 이미지의 최소/최대 값 결정하기

• 단일 그리기 호출로 다양한 모델 그리기
• WebGL에서 FPS 기록
• 웹 기반의 음악 visualizer를 작성하는 방법
• 오디오 데이터를 shader로 가져오는 방법
• 순수 WebGL 점선
• WebGL에서 scene의 객체에 확대/축소 및 중지

• WebGL에서 이미지 왜곡 효과 만들기
• smudge/liquify 효과 만들기
• 어떻게 webgl에서 pixelize 효과를 얻나요?
• WebGL canvas를 투명하게 만드는 방법
• 3D 지구본에서 야간과 주간 표시하기

• gl.finish()를 사용하여 webgl에서 렌더링 시간을 측정하는 게 가능한가요?
• javascript에서 효율적인 particle 시스템은? (WebGL)
• JS에서 GLSL로 struct 배열의 값 설정하기
• drawing buffer를 fade하는 방법
• pseudo-3D 효과를 만들기 위해 depth map으로 2D 이미지 그리기

• Trail 효과로 움직이는 선을 만드는 방법
• 텍스처가 있는 사다리꼴 폴리곤을 그리는 올바른 방법
• Tex 이미지 TEXTURE_2D 레벨 0에서 느린 초기화 발생
• 2D WebGL에서 마우스로 확대/축소를 구현하는 방법
• torus를 만드는 방법

• 스스로 교차하는 폴리곤을 블렌딩하지 마세요
• Fragment shader에서 잘린 삼각형을 감지하는 방법
• 많은 원을 그리는 가장 빠른 방법
• instanced rendering 정렬 및 최적화
• 이미지에 alpha 채널이 있는지 확인하는 방법

• 버벅임 없이 백그라운드에서 이미지를 로드하는 방법
• Shader에서 highp, mediump, lowp를 선택하는 경우
• WebGL에서 heightmap을 가져오는 방법
• displacement map 및 specular map 적용
• WebGL과 WebGL2 모두 지원하는 방법

• stencil buffer를 사용하는 방법
• heightmap 그리기
• instanced drawing으로 텍스처가 있는 sprite 그리기
• 다량의 큰 이미지 그리기 최적화
• 시간이 지남에 따라 느리게 렌더링

• 충돌 확인을 위한 point의 크기 가져오기
• 마우스 클릭의 3d 좌표를 얻는 방법
• 두 삼각형을 가로질러 색상을 블렌딩하는 방법
• 텍스처를 데이터로 사용하는 방법
• 2d sprite의 투명도를 mask로 사용하는 방법

• Texture atlas로 텍스처 번짐을 방지하는 방법
• 정점 사이의 색상을 제어하는 방법
• fisheye skybox shader를 만드는 방법
• Visual Studio Code에서 WebGL에 대한 코드 자동 완성을 하는 방법
• point가 다른 레이어 그리기

• vertex attrib 0이 비활성화된다는 경고를 끌 수 있나요?
• smudge 브러시 도구를 만드는 방법
• readPixels로 단일 컴포넌트를 읽는 방법
• readPixels를 호출할 때 invalid type error가 발생합니다
• UI 렌더링을 최적화하는 방법

• 1000개의 선분 중 각 점에 가장 가까운 500개의 점을 계산하려면 어떻게 해야 하나요?
• 캔버스의 중앙에서 perspective 소실점을 움직이려면 어떻게 해야 하나요?
• 일반화된 vertex 및 fragment shader의 개념이 있나요?
• Scene의 평균 밝기를 어떻게 결정하나요?
• 3D 모델의 원점은 뭔가요?

WebGL2

• WebGL2에서 픽셀 좌표로 텍스처 접근하기
• 어떻게 모든 uniform과 uniformBlock을 얻을 수 있나요
• 어떻게 16bit 데이터의 16bit 히스토그램을 만들 수 있나요
• particle 위치를 처리하는 방법