SceneKit - 提供三种方法解决全景图画面内部透射颠倒的问题

本节学习目标

我们在将一张图渲染在球体上制作全景图的时候,会发现图片上的文字从球体内部来看是反的,我们举例说明一下

先看一下我们的全景图全貌

2.png

注意红色"ab"的看起来是正常的,但是经过我们下面渲染球体的代码

第一步 创建一个球体

     let sphereNode = SCNNode()
    sphereNode.position = SCNVector3Make(0, 0, 0)
    sphereNode.geometry = SCNSphere(radius: 100)
   self.scnView.scene?.rootNode.addChildNode(sphereNode)

第二步 贴图
sphereNode.geometry?.firstMaterial?.diffuse.contents = srcImage
sphereNode.geometry?.firstMaterial?.isDoubleSided = true
sphereNode.geometry?.firstMaterial?.diffuse.wrapT = .repeat;
sphereNode.geometry?.firstMaterial?.diffuse.wrapS = .repeat;

第三步 给球体内部放置一个相机

       let cameraNode = SCNNode()
     cameraNode.camera = SCNCamera()
     cameraNode.camera?.automaticallyAdjustsZRange = true
     cameraNode.position = SCNVector3Make(0, 0, 0)
     sphereNode.addChildNode(cameraNode)

效果如下

IMG_1398.PNG

这个时候我们会发现“ab”是 内部往外看的效果

接下来我们可以使用下面的三种办法解决这个问题

第一种 我们不演示 就是把这种图透射处理一下 然后再渲染,记住不是镜像

第二种 对纹理坐标进行矩阵变换

默认的矩阵为
SCNMatrix4(m11: 1.0, m12: 0.0, m13: 0.0, m14: 0.0, m21: 0.0, m22: 1.0, m23: 0.0, m24: 0.0, m31: 0.0, m32: 0.0, m33: 1.0, m34: 0.0, m41: 0.0, m42: 0.0, m43: 0.0, m44: 1.0)

旋转矩阵
SCNMatrix4(m11: -1.0, m12: 0.0, m13: 0.0, m14: 0.0, m21: 0.0, m22: 1.0, m23: 0.0, m24: 0.0, m31: 0.0, m32: 0.0, m33: 1.0, m34: 0.0, m41: 0.0, m42: 0.0, m43: 0.0, m44: 1.0)

如果沿y轴中心将图片旋转90度渲染就可以了接下来看代码

sphereNode.geometry?.firstMaterial?.diffuse.contentsTransform = SCNMatrix4MakeScale(-1,1,1); // 纹理坐标翻转一下

这个时候 你会发现什么都看不见 因为球体内部没有灯光 在球体内部加上环境光试试看

    let lightNode = SCNNode()
    lightNode .light = SCNLight()
    lightNode .light?.type = .ambient
    sphereNode.addChildNode(lightNode)

你会发现正是我们需要的

IMG_1399.PNG

第三种方式 这种方式是不需要添加灯光的

 sphereNode.geometry?.firstMaterial?.diffuse.contentsTransform = SCNMatrix4Translate(SCNMatrix4MakeScale(-1, 1, 1), 1, 0, 0)

运行效果和上面的方式一样