depthTest가 true 인 three.js 스프라이트의 검정색 배경
사용자 지정 특성 BufferGeometry 예제 (https://threejs.org/examples/webgl_buffergeometry_custom_attributes_particles.html)를 애니메이션으로 이동하고 depthTest가 true로 설정되어 있으면 스프라이트의 배경이 어둡다는 것을 알 수 있습니다 (내가 직접 만든 것도 포함). 이미지를 참조하십시오.
커스텀 어트리뷰트 예제의 스프라이트는 투명한 배경을 가지고 있지만 depthTest가 true로 설정된 경우 렌더링 될 때 무시되는 것처럼 보입니다.
나는 수많은 사용자 정의 혼합 규칙을 시도했지만 배경을 제거하는 방법을 찾을 수 없으며 효과를 약간 줄입니다. depthTest가 false로 설정되면 배경이 사라집니다.
이것이 알려진 제한입니까? 해결 방법이 있습니까?
이 질문을 수정하여 다른 볼 스프라이트 (투명한 배경도 있음)로 더 선명한 이미지를 추가합니다. 이 이미지에는에 사용 된 사용자 정의 ShaderMaterial에 대해 depthTest가 true로 설정되어 있습니다.https://threejs.org/examples/webgl_buffergeometry_custom_attributes_particles.html three.js 예제.
이에 비해 이것은 다른 three.js 예제의 여러 PointsMaterials를 사용합니다 (https://threejs.org/examples/webgl_points_sprites.html), 또한 depthTest를 true로 설정하고 스프라이트에 PointsMaterial 맵 매개 변수를 사용합니다.
보시다시피 두 번째 PointsMaterial 예제는 예상대로 작동합니다. PointsMaterial은 하나의 고정 된 크기와 색상 만 허용하기 때문에이 이미지를 렌더링하려면 36 개의 서로 다른 점 지오메트리를 만들어야합니다.
첫 번째 예제에서 사용자 지정 셰이더를 사용하는 것을 선호합니다 (사용자 지정 크기 및 색상 속성이 있고 하나의 지오메트리 만 필요함). PointsMaterial처럼 depthTest를 지원하기 위해 커스텀 셰이더를 정의하는 방법이 있습니까?
답변
WebGL에는 다른 픽셀 뒤에 숨어있는 픽셀을 찾는 데 사용되는 깊이 버퍼가 있습니다. 픽셀이 다른 픽셀 뒤에 숨어 있으면 렌더링되지 않습니다. 일반적으로 그것이 당신이 원하는 것입니다. 왜 결코 보지 않을 GPU 시간 렌더링 픽셀을 낭비합니까? 아래의 심도 버퍼 예제를 고려하면 흰색 사각형은 카메라에 더 가깝고 어두운 사각형은 더 멀리 떨어져 있습니다.
다른 사각형 뒤에 숨어있는 사각형이 있으면 depthBuffer에서 볼 수 없으며 가장 가까운 사각형 만 볼 수 있습니다. depthBuffer는 사각형이 부분적으로 투명하다는 것을 모르고 일부 부분이 투명하게 보이기를 원합니다. 이것은 다른 실시간 엔진에서도 문제가됩니다. 이것은 Unity의 예입니다.
더 가까운 사각형은 depthBuffer에서 더 멀리있는 사각형의 일부를 차단하므로 가려진 픽셀은 렌더링되지 않습니다. 이것이 depthTest를 false 로 설정 하는 것이 유용한 이유 입니다. 기본적으로 렌더러에게 어떤 픽셀이 다른 픽셀 뒤에 있는지 테스트를 중지하고 모두 렌더링하도록 지시하는 것입니다. 여기에 다시 있습니다 depthTest = false:
당신이 경우 해야한다 ,에 depthTest 설정 (예를 들어 당신이 단단한 벽 뒤에 숨길 수있는 스프라이트를 원하는 경우) 당신은 할 수 설정 depthWritefalse로 스프라이트 물질에. 여전히 다른 픽셀 뒤에있는 픽셀을 확인하지만 스프라이트의 픽셀은 depthBuffer에 기록되지 않으므로 어떤 스프라이트도 다른 스프라이트를 차단할 수 없습니다.
depthTest: true; // Tests pixel depth
depthTest: false; // Does not test pixel depth
depthWrite: true; // Writes pixel depth to depthBuffer
depthWrite: false; // Does not write pixel depth to depthBuffer
블렌딩 모드에 관해서 THREE.AdditiveBlending는 입자가 다른 입자 위에 쌓일 때 멋진 빛나는 효과를주기 때문에 선호합니다 . 그러나 그것은 당신에게 달려 있습니다.