camera - Three.js - 魚眼効果

Question

それで、私はthree.jsをいじりましたが、うまくいきました。私が理解できない唯一のことは、実際の魚眼効果を持つカメラを作成する方法です.

そんなことがあるものか？camera.setLens()?

Answer 1

魚眼効果は、Giliam de Carpentier のレンズ ディストーション シェーダを使用して実現できます。

シェーダー コード:

function getDistortionShaderDefinition()
{
    return {

        uniforms: {
            "tDiffuse":         { type: "t", value: null },
            "strength":         { type: "f", value: 0 },
            "height":           { type: "f", value: 1 },
            "aspectRatio":      { type: "f", value: 1 },
            "cylindricalRatio": { type: "f", value: 1 }
        },

        vertexShader: [
            "uniform float strength;",          // s: 0 = perspective, 1 = stereographic
            "uniform float height;",            // h: tan(verticalFOVInRadians / 2)
            "uniform float aspectRatio;",       // a: screenWidth / screenHeight
            "uniform float cylindricalRatio;",  // c: cylindrical distortion ratio. 1 = spherical

            "varying vec3 vUV;",                // output to interpolate over screen
            "varying vec2 vUVDot;",             // output to interpolate over screen

            "void main() {",
                "gl_Position = projectionMatrix * (modelViewMatrix * vec4(position, 1.0));",

                "float scaledHeight = strength * height;",
                "float cylAspectRatio = aspectRatio * cylindricalRatio;",
                "float aspectDiagSq = aspectRatio * aspectRatio + 1.0;",
                "float diagSq = scaledHeight * scaledHeight * aspectDiagSq;",
                "vec2 signedUV = (2.0 * uv + vec2(-1.0, -1.0));",

                "float z = 0.5 * sqrt(diagSq + 1.0) + 0.5;",
                "float ny = (z - 1.0) / (cylAspectRatio * cylAspectRatio + 1.0);",

                "vUVDot = sqrt(ny) * vec2(cylAspectRatio, 1.0) * signedUV;",
                "vUV = vec3(0.5, 0.5, 1.0) * z + vec3(-0.5, -0.5, 0.0);",
                "vUV.xy += uv;",
            "}"
        ].join("\n"),

        fragmentShader: [
            "uniform sampler2D tDiffuse;",      // sampler of rendered scene?s render target
            "varying vec3 vUV;",                // interpolated vertex output data
            "varying vec2 vUVDot;",             // interpolated vertex output data

            "void main() {",
                "vec3 uv = dot(vUVDot, vUVDot) * vec3(-0.5, -0.5, -1.0) + vUV;",
                "gl_FragColor = texture2DProj(tDiffuse, uv);",
            "}"
        ].join("\n")

    };
}

エフェクト コンポーザを使用してエフェクトをセットアップする 1 つの方法 (とが作成されていると仮定) scene:renderer

// Create camera
camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 1, 1000000 );
camera.position.z = 800;

// Create effect composer
composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );

// Add distortion effect to effect composer
var effect = new THREE.ShaderPass( getDistortionShaderDefinition() );
composer.addPass( effect );
effect.renderToScreen = true;

// Setup distortion effect
var horizontalFOV = 140;
var strength = 0.5;
var cylindricalRatio = 2;
var height = Math.tan(THREE.Math.degToRad(horizontalFOV) / 2) / camera.aspect;

camera.fov = Math.atan(height) * 2 * 180 / 3.1415926535;
camera.updateProjectionMatrix();

effect.uniforms[ "strength" ].value = strength;
effect.uniforms[ "height" ].value = height;
effect.uniforms[ "aspectRatio" ].value = camera.aspect;
effect.uniforms[ "cylindricalRatio" ].value = cylindricalRatio;

次のスクリプトが必要で、three.js GitHub ページなどから見つけることができます。

<script src="examples/js/postprocessing/EffectComposer.js"></script>
<script src="examples/js/postprocessing/RenderPass.js"></script>
<script src="examples/js/postprocessing/MaskPass.js"></script>
<script src="examples/js/postprocessing/ShaderPass.js"></script>
<script src="examples/js/shaders/CopyShader.js"></script>

Giliam の例へのリンク: http://www.decarpentier.nl/downloads/lensdistortion-webgl/lensdistortion-webgl.html

レンズの歪みに関する Giliam の記事へのリンク: http://www.decarpentier.nl/lens-distortion

レンズの歪み効果が使用されている私のテストの画像:

Answer 2

カメラを反射球の中に入れます。球が両面であることを確認してください。シーン内でカメラと球体を動かしたい場合は、カメラと球体を一緒にペアレント化します。魅力のように機能します：

http://tileableart.com/code/NOCosmos/test.html

から借りた：

http://mrdoob.github.io/three.js/examples/webgl_materials_cubemap_dynamic2.html

cubeCamera = new THREE.CubeCamera( 1, 3000, 1024);
            cubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
scene.add( cubeCamera );
camParent.add(cubeCamera);
var material = new THREE.MeshBasicMaterial( { envMap: cubeCamera.renderTarget } );
material.side = THREE.DoubleSide;
sphere = new THREE.Mesh( new THREE.SphereGeometry( 2, 60, 30 ), material );

Answer 3

1 つの方法は、カメラに大きな視野を設定することです。

new THREE.PerspectiveCamera(140, ... )

これは技術的には魚眼効果ではありませんが、探している効果である可能性があります。

実際のカメラ レンズでは、歪みのない広い視野を得ようとするとレンズがかなり高価になる可能性がありますが、コンピューター グラフィックスでは簡単な方法です。

実際の魚眼レンズは、次の画像のように直線が湾曲するように画像を歪めます。

この種の歪みを伴う実際の魚眼効果を作成する場合は、Three.js の魚眼の例 のように、ジオメトリを変更する必要があります。この例では、ジオメトリは実際には事前に変更されていますが、より高度なシーンでは、頂点シェーダーを使用してその場で頂点を更新することをお勧めします。

Answer 4

高い視野角で魚眼効果を得ることができます。

            var fishCamera = new THREE.PerspectiveCamera( 110, window.innerWidth / window.innerHeight, 1, 1100 );
            var normalCamera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1100 );

または設定

camera.fov = 110 
camera.updateProjectionMatrix();

ここのライブ例: http://mrdoob.github.com/three.js/examples/canvas_geometry_panorama_fisheye.html

Answer 5

広角レンズは一般的に焦点距離が非常に短いです。

超広角を実現するには、焦点距離を短くする必要があります。

魚眼レンズは超広角レンズであることに注意してください。

FOV は焦点距離に反比例するため、焦点距離を短縮する (または超広角を実現する) には、FOV (視野) を増やすだけです。

例：

var camera_1 = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

var camera_2 = new THREE.PerspectiveCamera( 80, width / height, 1, 1000 );

ここで camera_2 は広角設定です。

ノート

目的の効果を得るには、カメラの位置を調整する必要がある場合があります。