2016-08-11 2 views
1

ThreeJS를 사용하여 GLSL에서 구형 임무 쉐이더를 개발 중입니다. 내 알고리즘은 Sigg et al. "GPU 기반의 이차 곡면 레이 캐스팅"으로 명명되었습니다.ThreeJS의 구체 임 포스터

클래식 기하학 접근법을 사용하는 경우 각 구체를 나타 내기 위해 수십 또는 수백 개의 삼각형이 필요합니다. 수천 개의 구가 필요하면 메모리 과부하가 발생할 수 있습니다. sphere impostor를 사용하면 지오메트리의 위치와 반경 만 저장하여 구형을 표시 할 수 있으므로 이전 기법보다 훨씬 더 우수한 성능을 제공합니다.

지금까지 ThreeJS 셰이더 청크를 사용하여 완벽한 ThreeJS 호환성을 보장하기 위해 셰이더를 개발하는 데 성공했습니다. 데모 페이지 here을 찾을 수 있습니다. 그러나이 구현에서 작동하지 않는 마지막 사항이 있습니다.

장면에서 오브젝트를 움직일 때 구형 사기를 사용하는 오브젝트가 일반 메시와 비교하여 지연되는 것 같습니다. 또한 어떤 때는 구체가 this picture과 같이 "잘린"것을 알 수 있습니다.

이 두 번째 버그로 인해 스프라이트가 정점 셰이더에 의해 장면에 잘 배치되지만 조각 셰이더가 잘못된 좌표를 계산하고 있다고 생각하게 만듭니다. 스프라이트의 각 화소에 대해 동일한 값을 제공한다 프래그먼트 쉐이더 버텍스 쉐이더가 제공

  • 두 varyings : I는 문제가 될 수있는 두 개의 코드를 생각한다. 나는 그것을 확인하는 방법을 모른다.

    varying float projMatrix11; 
    varying float projMatrix22; 
    
  • 내 쉐이더 유니폼

    group.traverse(function(o) { 
        if (!o.material) { return; } 
    
        var u = o.material.uniforms; 
        if (!u) { return; } 
    
        modelViewMatrixInverse.getInverse(
         o.modelViewMatrix 
        ); 
    
        if (u.projectionMatrixInverse) { 
         u.projectionMatrixInverse.value = projectionMatrixInverse; 
        } 
    
        if (u.projectionMatrixTranspose) { 
         u.projectionMatrixTranspose.value = projectionMatrixTranspose; 
        } 
    
        if (u.modelViewMatrixInverse) { 
         u.modelViewMatrixInverse.value = modelViewMatrixInverse; 
        } 
    
        if (u.viewport) { 
         u.viewport.value = viewport; 
        } 
    }); 
    

내가 문제를 디버깅 할 수 없습니다 누군가보다 더 나은 ThreeJS을 알고 희망 업데이트 잘하고있어 경우 나도 몰라 나는 그것에 관해서 나에게 단서를 줄 수있다. 난 당신이 디버깅을 용이하게하기위한 requestAnimationFrame의 호출을 지연 :

가)

는 정말 우리가이 문제를 해결할 수 있기를 바랍니다, 그래서 우리는 ThreeJS의 전체 커뮤니티에이 기능을 제안 할 수 있습니다

편집 : 더 파고 후, 문제가 어떻게 업데이트하고있어 사용자 유니폼에서 올 수 있습니다. 그 중 하나는 modelViewMatrix를 사용하여 역행렬을 얻습니다. 그러나 modelViewMatrix는 WebGLRenderer의 렌더링 호출 중에 만 업데이트되므로 프레임 지연이 발생할 수 있습니다. 다른 유니폼에 의존하는 유니폼을 업데이트하고 ThreeJS에서 동기화 된 유니폼을 유지하려면 어떻게해야합니까?

답변

1

답변이 혼자 발견되면 다른 사람이 같은 문제에 부딪혔을 때 여기에서 설명하겠습니다.

문제는 그 ThreeJS 의해 제공된 modelViewMatrix을 사용하여 modelViewMatrixInverse 균일 업데이트되었다는 것이다. 이 유니폼은 render() WebGLRenderer 메소드 호출시에만 업데이트되며, modelViewMatrixInverse은 각 렌더 호출시 한 프레임 늦었습니다. 그래서 내 맞춤 셰이더가 ThreeJS 기본 셰이더보다 한 프레임 늦었습니다.