如何在Android中实现一个全景图控件（一）

ZzT
4,458 阅读2分钟

一、背景

不温不火的 VR 最近好像又有些起色了，不少大厂 App 中都能看到了一些观看全景图的场景，比如：

  1. 某壳找房中的 VR 看房
  2. 某卖车软件中的 VR 看内饰
  3. 某信朋友圈广告中插播的一些全景画面
  4. 某手短视频中的一些全景视频 ...
    但不得不说的是，这些 app 也只是蹭了 VR 概念，并不是真正的 VR 技术，为什么呢？简单回答，VR（虚拟现实）强调的是「让人能够沉浸到计算机系统所创建的环境中」，而不是仅仅使用手机陀螺仪旋转去看全景内容，VR 一定是要依赖头显设备让视觉完全处于虚拟环境中。

好，话题有点扯远了，既然这么多 App 移动端都有了全景图控件，我也尝试在 Android 平台上撸了一款全景图控件，希望大家能喜欢

二、关于项目

github 地址

github.com/androidZzT/…

Demo 演示

图1.单张全景图展示

图2.全景图列表展示

如何依赖

1.增加 jitpack repositories 依赖

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

2.增加 VRPanoramaView 依赖

dependencies {
  ...
  //当前版本 1.0.2，可持续关注 github 上的 release 版本
  implementation "com.github.androidZzT:VRPanoramaView:1.0.2" 
}

怎么使用？

1.工程中提供 demo，展示了单个全景图和全景图列表的简单用法

  • 单个全景图像使用普通的控件一样即可
  • 全景图列表需要根据需求决定一页最多显示几个，然后手动复用控件，否则控件对象过多会造成OOM

2.ZPanoramaTextureView 提供的接口

ZPanoramaTextureView 是项目中核心的控件，能够渲染一张全景图，并能根据手机陀螺仪旋转，核心 Api 有：

  1. #setBitmapUrl(String url) 提供图片url，加载渲染全景图
  2. #reCenter() 恢复初始角度
  3. #setGyroTrackingEnabled(boolean enable) 开关陀螺仪

后续会支持什么？

  1. 手势控制全景图旋转
  2. 小行星动画（从太空掉入地球过程的第一视角）

三、关于实现原理

1. 技术栈

  • 计算图形学-3D渲染概念
  • OpenGLES 2.0 Api 使用
  • Android TextureView 与 OpenGL 的结合

2. 原理系列文章

篇幅原因，1.中的内容每一点其实都能单独开出一篇或几篇文章介绍，后续有余力会继续更新。非常感兴趣的同学可以先看源码。 github.com/androidZzT/… ，要是顺手点个星星，更感激不尽！

转文声明

如有文章转载需求，请注明本文作者以及链接，感谢各位理解支持

avatar
文章
阅读
粉丝