当前位置：首页 > 谈天说地

Android OpenGL仿自如APP裸眼3D效果详解

34资源网2022-01-23499

原理简介 & opengl 的优势

裸眼 3d 效果的本质是——将整个图片结构分为 3 层：上层、中层、以及底层。在手机左右上下旋转时，上层和底层的图片呈相反的方向进行移动，中层则不动，在视觉上给人一种 3d 的感觉：

也就是说效果是由以下三张图构成的：

接下来，如何感应手机的旋转状态，并将三层图片进行对应的移动呢？当然是使用设备自身提供各种各样优秀的传感器了，通过传感器不断回调获取设备的旋转状态，对 ui 进行对应地渲染即可。

笔者最终选择了 android 平台上的 opengl api 进行渲染，直接的原因是，无需将社区内已有的实现方案重复照搬。

另一个重要的原因是，gpu 更适合图形、图像的处理，裸眼3d效果中有大量的缩放和位移操作，都可在 java 层通过一个矩阵对几何变换进行描述，通过 shader 小程序中交给 gpu 处理 ——因此，理论上 opengl 的渲染性能比其它几个方案更好一些。

本文重点是描述 opengl 绘制时的思路描述，因此下文仅展示部分核心代码。

具体实现

1. 绘制静态图片

首先需要将3张图片依次进行静态绘制，这里涉及大量 opengl api 的使用，不熟悉的读可略读本小节，以捋清思路为主。

首先看一下顶点和片元着色器的 shader 代码，其定义了图像纹理是如何在gpu中处理渲染的：

// 顶点着色器代码
// 顶点坐标
attribute vec4 av_position;
// 纹理坐标
attribute vec2 af_position;
uniform mat4 u_matrix;
varying vec2 v_texpo;

void main() {
    v_texpo = af_position;
    gl_position =  u_matrix * av_position;
}

// 顶点着色器代码
// 顶点坐标
attribute vec4 av_position;
// 纹理坐标
attribute vec2 af_position;
uniform mat4 u_matrix;
varying vec2 v_texpo;

void main() {
    v_texpo = af_position;
    gl_position =  u_matrix * av_position;
}

定义好了 shader ，接下来在 glsurfaceview (可以理解为 opengl 中的画布) 创建时，初始化shader小程序，并将图像纹理依次加载到gpu中：

public class my3drenderer implements glsurfaceview.renderer {
  
  @override
  public void onsurfacecreated(gl10 gl, eglconfig config) {
      // 1.加载shader小程序
      mprogram = loadshaderwithresource(
              mcontext,
              r.raw.projection_vertex_shader,
              r.raw.projection_fragment_shader
      );
      
      // ... 
      
      // 2. 依次将3张切图纹理传入gpu
      this.teximageinner(r.drawable.bg_3d_back, mbacktextureid);
      this.teximageinner(r.drawable.bg_3d_mid, mmidtextureid);
      this.teximageinner(r.drawable.bg_3d_fore, mfronttextureid);
  }
}

接下来是定义视口的大小，因为是2d图像变换，且切图和手机屏幕的宽高比基本一致，因此简单定义一个单位矩阵的正交投影即可：

public class my3drenderer implements glsurfaceview.renderer {
  
    // 投影矩阵
    private float[] mprojectionmatrix = new float[16];

    @override
    public void onsurfacechanged(gl10 gl, int width, int height) {
        // 设置视口大小，这里设置全屏
        gles20.glviewport(0, 0, width, height);
        // 图像和屏幕宽高比基本一致，简化处理，使用一个单位矩阵
        matrix.setidentitym(mprojectionmatrix, 0);
    }
}

最后就是绘制，读者需要理解，对于前、中、后三层图像的渲染，其逻辑是基本一致的，差异仅仅有2点：图像本身不同 以及 图像的几何变换不同。

public class my3drenderer implements glsurfaceview.renderer {
  
    private float[] mbackmatrix = new float[16];
    private float[] mmidmatrix = new float[16];
    private float[] mfrontmatrix = new float[16];

    @override
    public void ondrawframe(gl10 gl) {
        gles20.glclear(gles20.gl_color_buffer_bit);
        gles20.glclearcolor(0.0f, 0.0f, 0.0f, 1.0f);

        gles20.gluseprogram(mprogram);
        
        // 依次绘制背景、中景、前景
        this.drawlayerinner(mbacktextureid, mtexturebuffer, mbackmatrix);
        this.drawlayerinner(mmidtextureid, mtexturebuffer, mmidmatrix);
        this.drawlayerinner(mfronttextureid, mtexturebuffer, mfrontmatrix);
    }
    
    private void drawlayerinner(int textureid, floatbuffer texturebuffer, float[] matrix) {
        // 1.绑定图像纹理
        gles20.glbindtexture(gles20.gl_texture_2d, textureid);
        // 2.矩阵变换
        gles20.gluniformmatrix4fv(umatrixlocation, 1, false, matrix, 0);
        // ...
        // 3.执行绘制
        gles20.gldrawarrays(gles20.gl_triangle_strip, 0, 4);
    }
}

参考 drawlayerinner 的代码，其用于绘制单层的图像，其中 textureid 参数对应不同图像，matrix 参数对应不同的几何变换。

现在我们完成了图像静态的绘制，效果如下：

接下来我们需要接入传感器，并定义不同层级图片各自的几何变换，让图片动起来。

2. 让图片动起来

首先我们需要对 android 平台上的传感器进行注册，监听手机的旋转状态，并拿到手机 xy 轴的旋转角度。

// 2.1 注册传感器
msensormanager = (sensormanager) context.getsystemservice(context.sensor_service);
maccelesensor = msensormanager.getdefaultsensor(sensor.type_accelerometer);
mmagneticsensor = msensormanager.getdefaultsensor(sensor.type_magnetic_field);
msensormanager.registerlistener(msensoreventlistener, maccelesensor, sensormanager.sensor_delay_game);
msensormanager.registerlistener(msensoreventlistener, mmagneticsensor, sensormanager.sensor_delay_game);

// 2.2 不断接受旋转状态
private final sensoreventlistener msensoreventlistener = new sensoreventlistener() {
    @override
    public void onsensorchanged(sensorevent event) {
        // ... 省略具体代码
        float[] values = new float[3];
        float[] r = new float[9];
        sensormanager.getrotationmatrix(r, null, maccelevalues, mmageneticvalues);
        sensormanager.getorientation(r, values);
        // x轴的偏转角度
        float degreex = (float) math.todegrees(values[1]);
        // y轴的偏转角度
        float degreey = (float) math.todegrees(values[2]);
        // z轴的偏转角度
        float degreez = (float) math.todegrees(values[0]);
        
        // 拿到 xy 轴的旋转角度，进行矩阵变换
        updatematrix(degreex, degreey);
    }
};

注意，因为我们只需控制图像的左右和上下移动，因此，我们只需关注设备本身 x 轴和 y 轴的偏转角度：

拿到了 x 轴和 y 轴的偏转角度后，接下来开始定义图像的位移了。

但如果将图片直接进行位移操作，将会因为位移后图像的另一侧没有纹理数据，导致渲染结果有黑边现象，为了避免这个问题，我们需要将图像默认从中心点进行放大，保证图像移动的过程中，不会超出自身的边界。

也就是说，我们一开始进入时，看到的肯定只是图片的部分区域。给每一个图层设置 scale，将图片进行放大。显示窗口是固定的，那么一开始只能看到图片的正中位置。（中层可以不用，因为中层本身是不移动的，所以也不必放大)

明白了这一点，我们就能理解，裸眼3d的效果实际上就是对不同层级的图像进行缩放和位移的变换，下面是分别获取几何变换的代码：

public class my3drenderer implements glsurfaceview.renderer {
  
    private float[] mbackmatrix = new float[16];
    private float[] mmidmatrix = new float[16];
    private float[] mfrontmatrix = new float[16];

    /**
     * 陀螺仪数据回调，更新各个层级的变换矩阵.
     *
     * @param degreex x轴旋转角度，图片应该上下移动
     * @param degreey y轴旋转角度，图片应该左右移动
     */
    private void updatematrix(@floatrange(from = -180.0f, to = 180.0f) float degreex,
                              @floatrange(from = -180.0f, to = 180.0f) float degreey) {
        // ... 其它处理                                                

        // 背景变换
        // 1.最大位移量
        float maxtransxy = max_visible_side_background - 1f;
        // 2.本次的位移量
        float transx = ((maxtransxy) / max_trans_degree_y) * -degreey;
        float transy = ((maxtransxy) / max_trans_degree_x) * -degreex;
        float[] backmatrix = new float[16];
        matrix.setidentitym(backmatrix, 0);
        matrix.translatem(backmatrix, 0, transx, transy, 0f);                    // 2.平移
        matrix.scalem(backmatrix, 0, scale_back_ground, scale_back_ground, 1f);  // 1.缩放
        matrix.multiplymm(mbackmatrix, 0, mprojectionmatrix, 0, backmatrix, 0);  // 3.正交投影

        // 中景变换
        matrix.setidentitym(mmidmatrix, 0);

        // 前景变换
        // 1.最大位移量
        maxtransxy = max_visible_side_foreground - 1f;
        // 2.本次的位移量
        transx = ((maxtransxy) / max_trans_degree_y) * -degreey;
        transy = ((maxtransxy) / max_trans_degree_x) * -degreex;
        float[] frontmatrix = new float[16];
        matrix.setidentitym(frontmatrix, 0);
        matrix.translatem(frontmatrix, 0, -transx, -transy - 0.10f, 0f);            // 2.平移
        matrix.scalem(frontmatrix, 0, scale_fore_ground, scale_fore_ground, 1f);    // 1.缩放
        matrix.multiplymm(mfrontmatrix, 0, mprojectionmatrix, 0, frontmatrix, 0);  // 3.正交投影
    }
}

这段代码中还有几点细节需要处理。

3. 几个反直觉的细节

3.1 旋转方向 ≠ 位移方向

首先，设备旋转方向和图片的位移方向是相反的，举例来说，当设备沿 x 轴旋转，对于用户而言，对应前后景的图片应该上下移动，反过来，设备沿 y 轴旋转，图片应该左右移动（没太明白的同学可参考上文中陀螺仪的图片加深理解）：

// 设备旋转方向和图片的位移方向是相反的
float transx = ((maxtransxy) / max_trans_degree_y) * -degreey;
float transy = ((maxtransxy) / max_trans_degree_x) * -degreex;
// ...
matrix.translatem(backmatrix, 0, transx, transy, 0f);

3.2 默认旋转角度 ≠ 0°

其次，在定义最大旋转角度的时候，不能主观认为旋转角度 = 0°是默认值。什么意思呢？y 轴旋转角度为0°，即 degreey = 0 时，默认设备左右的高度差是 0，这个符合用户的使用习惯，相对易于理解，因此，我们可以定义左右的最大旋转角度，比如 y ∈ (-45°，45°)，超过这两个旋转角度，图片也就移动到边缘了。

但当 x 轴旋转角度为0°，即 degreex = 0 时，意味着设备上下的高度差是 0，你可以理解为设备是放在水平的桌面上的，这个绝不符合大多数用户的使用习惯，相比之下，设备屏幕平行于人的面部才更适用大多数场景（degreex = -90）：

因此，代码上需对 x、y 轴的最大旋转角度区间进行分开定义：

private static final float user_x_axis_standard = -45f;
private static final float max_trans_degree_x = 25f;   // x轴最大旋转角度 ∈ (-20°，-70°)

private static final float user_y_axis_standard = 0f;
private static final float max_trans_degree_y = 45f;   // y轴最大旋转角度 ∈ (-45°，45°)

解决了这些反直觉的细节问题，我们基本完成了裸眼3d的效果。

4. 帕金森综合征？

还差一点就大功告成了，最后还需要处理下3d效果抖动的问题：

如图，由于传感器过于灵敏，即使平稳的握住设备，xyz 三个方向上微弱的变化都会影响到用户的实际体验，会给用户带来帕金森综合征的自我怀疑。

解决这个问题，传统的 opengl 以及 android api 似乎都无能为力，好在 github 上有人提供了另外一个思路。

熟悉信号处理的同学比较了解，为了通过剔除短期波动、保留长期发展趋势提供了信号的平滑形式，可以使用低通滤波器，保证低于截止频率的信号可以通过，高于截止频率的信号不能通过。

因此有人建立了这个仓库，通过对 android 传感器追加低通滤波，过滤掉小的噪声信号，达到较为平稳的效果：

private final sensoreventlistener msensoreventlistener = new sensoreventlistener() {
    @override
    public void onsensorchanged(sensorevent event) {
        // 对传感器的数据追加低通滤波
        if (event.sensor.gettype() == sensor.type_accelerometer) {
            maccelevalues = lowpass(event.values.clone(), maccelevalues);
        }
        if (event.sensor.gettype() == sensor.type_magnetic_field) {
            mmageneticvalues = lowpass(event.values.clone(), mmageneticvalues);
        }
      
        // ... 省略具体代码
        // x轴的偏转角度
        float degreex = (float) math.todegrees(values[1]);
        // y轴的偏转角度
        float degreey = (float) math.todegrees(values[2]);
        // z轴的偏转角度
        float degreez = (float) math.todegrees(values[0]);
        
        // 拿到 xy 轴的旋转角度，进行矩阵变换
        updatematrix(degreex, degreey);
    }
};

大功告成，最终我们实现了预期的效果：