专栏首页每日一篇技术文章SceneKit - 提供三种方法解决全景图画面内部透射颠倒的问题

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)

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ARKit 进阶:材质

    光照与材质,是决定 3D 世界中的模型如何渲染的关键参数。许多时候模型的渲染对与不对,往往只是一种视觉的感受。由于不是测试驱动的,所以多数情况下,考验的不是你的...

    郭艺帆
  • ARKit:增强现实技术在美团到餐业务的实践

    增强现实(Augmented Reality)是一种在视觉上呈现虚拟物体与现实场景结合的技术。Apple 公司在 2017 年 6 月正式推出了 ARKit,i...

    美团技术团队
  • 到底有多强?苹果的增强现实框架:ARKit

    本篇文章重在 workShop 上苹果工程师的解惑和我对 ARKit 的理解, 最后会简单介绍一下相关技术。

    郭艺帆
  • SwiftShot:为增强现实创建游戏

    了解Apple如何为WWDC18构建精选演示,并获得使用ARKit,SceneKit和Swift制作自己的多人游戏的技巧。

    iOSDevLog
  • iOS版 使用ARKit和Swift创建交互式Domino游戏

    在下面的教程中,我将向您展示如何使用Swift和ARKit制作有趣的Domino游戏。

    iOSDevLog
  • iOS 全景播放器最简单的解决方案

    酷走天涯
  • ARKit 进阶:物理世界

    ARKit的渲染能力是由其他框架实现的,除了苹果的SceneKit, Unity3D、UE, 或者其他自定义的OpenGL、Metal渲染引擎都可以与ARKit...

    郭艺帆
  • 《iPhone X ARKit Face Tracking》

    有幸去 Cupertino 苹果总部参加了 iPhone X 的封闭开发,本文主要分享一下iPhone X上使用 ARKit 进行人脸追踪及 3D 建模的相关内...

    腾讯Bugly
  • 《 iPhone X ARKit Face Tracking 》

    iPhone X前置深度摄像头带来了 Animoji 和 face ID,同时也将 3D Face Tracking 的接口开放给了开发者。本文主要分享一下 i...

    腾讯Bugly

扫码关注云+社区

领取腾讯云代金券