带有场景套件相机的鱼眼广角:可能吗? [英] Fish Eye Wide-angle with a Scene Kit Camera: Possible?

问题描述

如何使用 Scene Kit 中的 SCNCamera 获得像鱼眼镜头对视图所做的那样的失真?

How do I get a distortion like what a fisheye lens does to a view with a SCNCamera in Scene Kit?

类似于这种图像的鞠躬":

Something like this kind of "bowing" of the imagery:

//正如 Rickster 所指出的，这种失真被称为桶形失真".

// as Rickster pointed out, this kind of distortion is known as "Barrel Distortion".

从文档中，这就是让我对使用相机进行这种失真的可能性感兴趣的部分:

From the docs, this is the part that got me intrigued by the possibility of doing this kind of distortion with the camera:

如果你计算你自己的投影变换矩阵，你可以使用这个直接设置它的方法，覆盖合成的转换来自相机的几何属性.

If you compute your own projection transform matrix, you can use this method to set it directly, overriding the transformation synthesized from the camera’s geometric properties.

不幸的是，我对计算自己的投影变换矩阵的能力和可能性一无所知.我希望有可能通过它来做这种扭曲......但不知道，因此问题.

Unfortunately I know nothing about the powers and possibilities of computing ones own projection transform matrix. I'm hoping it's possible to do this kind of distortion via it... but dunno, hence the question.

通过相机的任何其他方式都是理想的.也.希望避免后期处理技巧，并在相机旋转并在场景中移动时获得这种失真的更有机"外观.

Any other means via a camera is ideal. Too. Wanting to avoid post processing trickery and get the more "organic" look of this kind of distortion when the camera rotates and moves through the scene.

观看任何滑板视频，了解这在现实生活中的样子.

See any skateboarding video for how this looks in real life.

推荐答案

你要找的东西叫做 Barrel Distrortion.

What you are looking for is called Barrel Distrortion.

有几种方法可以做到这一点，所有这些都使用 GLSL 着色器.

There are a few ways of doing this, all of them using GLSL shaders.

您可以使用经典的 OpenGL 代码，例如 this example对于 Occulus Rift(您需要稍微更改着色器)，或者我个人最喜欢的:SCNTechnique.

You can either use classic OpenGL code, such as this example for the Occulus Rift (you will need to change the shader a little bit), or my personal favorite: SCNTechnique.

创建一个包含 Barrel Fragment Shader (.fsh) 的技术，并将其 draw 参数设置为 DRAW_QUAD.然后，只需将该技术应用于您的相机.

Create a technique containing a Barrel Fragment Shader (.fsh), and set its draw parameter to DRAW_QUAD. Then, simply apply the technique to your camera.

您可以在此处找到桶形失真着色器的示例:http://www.geeks3d.com/20140213/glsl-shader-library-fish-eye-and-dome-and-barrel-distortion-post-处理过滤器/2/

You can find an example of Barrel Distortion shader here : http://www.geeks3d.com/20140213/glsl-shader-library-fish-eye-and-dome-and-barrel-distortion-post-processing-filters/2/

这是一个示例代码:

barrel.json(这应该放在你的 scnassets 包中)

barrel.json (this should go in your scnassets bundle)

{
  "passes" : {
    "barrel" : {
      "outputs" : {
        "color" : "COLOR"
      },
      "inputs" : {
        "colorSampler" : "COLOR",
        "noiseSampler" : "noiseSymbol",
        "a_position" : "a_position-symbol"
      },
      "program" : "art.scnassets/barrel",
      "draw" : "DRAW_QUAD"
    }
  },
  "sequence" : [
    "barrel"
  ],
  "symbols" : {
    "a_position-symbol" : {
      "semantic" : "vertex"
    },
    "noiseSymbol" : {
      "image" : "noise.png",
      "type" : "sampler2D"
    },
    "barrelPower" : {
      "type" : "float"
    }
  }
}

barrel.vsh

attribute vec4 a_position;
varying vec2 uv;

void main() {
    gl_Position = a_position;
    uv = a_position.xy;
}

barrel.fsh

// Adapted from :
// http://www.geeks3d.com/20140213/glsl-shader-library-fish-eye-and-dome-and-barrel-distortion-post-processing-filters/2/

uniform sampler2D colorSampler;
const float PI = 3.1415926535;
uniform float barrelPower;

varying vec2 uv;


vec2 Distort(vec2 p)
{
    float theta  = atan(p.y, p.x);
    float radius = length(p);
    radius = pow(radius, barrelPower);
    p.x = radius * cos(theta);
    p.y = radius * sin(theta);
    return 0.5 * (p + 1.0);
}


void main() {

    vec2 rg = 2.0 * uv.xy - 1.0;
    vec2 uv2;
    float d = length(xy);
    if (d < 1.0){
        uv2 = Distort(xy);
    }else{
        uv2 = uv.xy;
    }

    gl_FragColor = texture2D(colorSampler, uv2);
}

something.m

NSURL *url = [[NSBundle mainBundle] URLForResource:@"art.scnassets/barrel" withExtension:@"json"];
NSDictionary *tecDic = [NSJSONSerialization JSONObjectWithData:[NSData dataWithContentsOfURL: url] options:nil error:nil];

SCNTechnique* technique = [SCNTechnique techniqueWithDictionary:tecDic];

[technique setValue: [NSNumber numberWithFloat:0.5]  forKey:@"barrelPower"];


cameraNode.technique = technique;

这篇关于带有场景套件相机的鱼眼广角:可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！