Three.js - 魚眼效果

Question

所以，我搞砸了three.js，效果很好。我無法弄清楚的唯一的事情是如何製作一個真正的魚眼效果的相機。

這怎麼可能？ camera.setLens()？

Answer 1

可以通過高視野獲得魚眼效果。

  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 2

的一種方法是設置的大視場相機：

new THREE.PerspectiveCamera(140, ...) 

這不會在技​​術上是魚眼效果，但它可能是你正在尋找的效果。

在一個真正的相機鏡頭中，獲得大視場沒有畸變可能會使鏡頭非常昂貴，但在計算機圖形學中，這是一種簡單的方法。

真正fisheye lens圖像失真，使直線這一形象變得彎曲，如：

如果要創建這種畸變的實際魚眼效果，你必須修改幾何圖形，如Three.js's fisheye example。在這個例子中，幾何實際上是事先被修改過的，但是對於更高級的場景，您希望使用頂點着色器來即時更新頂點。

Answer 3

將相機放在反射球內。確保球體是雙面的。如果您想在場景中移動相機，請將相機和球體放在一起。就像一個魅力：

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 4

的廣角透鏡通常具有非常低的聚焦長度。

要實現極端廣角，我們需要縮短焦距。

請注意，魚眼鏡頭是一個極端的廣角鏡頭。

爲了縮短焦距（或實現極大的廣角），只需增加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是更寬的角度設置。

注

爲了達到期望的效果，一個可能需要調整的相機位置。

Answer 5

使用Giliam de Carpentier的鏡頭變形着色器可以實現魚眼效果。

shader代碼：

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") 

    }; 
} 

一種方式設置的使用效果作曲家（假設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 page：

<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

式中鏡頭畸變效應被用於：