Threejs에서 정거리 원통도법

Threejs의 CubeCamera와 PostProcessing을 사용해 360도 영상에서 자주 사용되는 정거리 원통도법(Equirectangular)으로 렌더링할 수 있도록 했다. 캡처하면 360도 동영상도 만들 수 있을 것이다.

구현 방법 여기 를 참고로 했다(라고 할까 거의 파크리다). PostProcessing에서 사용할 수 있도록 THREE.ShaderPass에 전달할 수있는 셰이더로 다시 작성했습니다. THREE.CubeCamera로부터, samplerCube(큐브상의 텍스처)를 얻을 수 있으므로, 그것을 glsl의 textureCube라고 하는 메소드를 사용해 색 취득 & 평면에 매핑 하고 있다(같다).

//ref https://github.com/spite/THREE.CubemapToEquirectangular

THREE.EquirectanglarShader = {

    uniforms: {
        "map": { type: "t", value: null }
    },

    vertexShader: [
                "varying vec2 vUv;",
                "void main()  {",
                    "vUv = vec2( 1.- uv.x, uv.y );",
                    "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
                "}"
    ].join("\n"),

    fragmentShader: [

                "uniform samplerCube map;",
                "varying vec2 vUv;",
                "#define M_PI 3.1415926535897932384626433832795",
                "void main()  {",
                    "vec2 uv = vUv;",
                    "float longitude = uv.x * 2. * M_PI - M_PI + M_PI / 2.;",
                    "float latitude = uv.y * M_PI;",
                    "vec3 dir = vec3(",
                        "- sin( longitude ) * sin( latitude ),",
                        "cos( latitude ),",
                        "- cos( longitude ) * sin( latitude )",
                    ");",
                    "normalize( dir );",
                    "gl_FragColor = vec4( textureCube( map, dir ).rgb, 1. );",
                "}"

    ].join("\n")

};

사용법

//準備
equirectanglerEffect = new THREE.ShaderPass( THREE.EquirectanglarShader );
effectComposer.addPass( equirectanglerEffect );

//毎フレームcube cameraの結果を渡す
cubeCamera.updateCubeMap(renderer,scene);
equirectanglerEffect.uniforms[ 'map' ].value = cubeCamera.renderTarget;

샘플 코드