openGL ES进阶教程(二)之全景图片

标签: opengl es 虚拟现实
1658人阅读 评论(1) 收藏 举报
分类:

全景又被称为3D实景,是一种新兴的富媒体技术,其与视频,声音,图片等传统的流媒体最大的区别是“可操作,可交互”。 全景分为虚拟现实和3D实景两种。虚拟现实是利用maya等软件,制作出来的模拟现实的场景,代表有虚拟紫禁城等;3D实景是利用单反相机或街景车拍摄实景照片,经过特殊的拼合,处理,让作者立于画境中,让最美的一面展现出来。

全景顾名思义就是给人以三维立体感觉的实景360度全方位图像~
此图像最大的三个特点是:
1、全:全方位,全面的展示了360度球型范围内的所有景致;可在例子中用鼠标左键按住拖动,观看场景的各个方向;
  2、景:实景,真实的场景,三维实景大多是在照片基础之上拼合得到的图像,最大限度的保留了场景的真实性;
  3、360:360度环视的效果,虽然照片都是平面的,但是通过软件处理之后得到的360度实景,却能给人以三维立体的空间感觉,使观者犹如身在其中。
全景由于它给人们带来全新的真实现场感和交互式的感受。它可广泛应用于三维电子商务,如在线的房地产楼盘展示、虚拟旅游、虚拟教育等领域。

本篇我们基于上一篇粒子光束 的基础上实现全景背景图
看效果图:

这里写图片描述

我们用连续的6张天空图片,拼接成了一个无缝的立方体。想想一下我们站在这个立方体的中心,这个时候我们的前后左右上下都充满了天空的图片,不管你的头转向哪边,都能够看见天空。
理论上我们把眼睛旋转360度观察,图上的三个光束会先消失在出现,这就像是我们把立方体旋转了360度又回到了原位置一样。就像下图:

这里写图片描述

之所以能实现360度旋转,是因为我们用了6张图片并把他们加载成一个立方体。
我们先创建一个模型对象类,即立方体模型。

public class Skybox {
    private static final int POSITION_COMPONENT_COUNT = 3;
    private final VertexArray vertexArray;
    private final ByteBuffer indexArray;

    public Skybox() {        
        // Create a unit cube.
        vertexArray = new VertexArray(new float[] {
            -1,  1,  1,     // (0) Top-left near
             1,  1,  1,     // (1) Top-right near
            -1, -1,  1,     // (2) Bottom-left near
             1, -1,  1,     // (3) Bottom-right near
            -1,  1, -1,     // (4) Top-left far
             1,  1, -1,     // (5) Top-right far
            -1, -1, -1,     // (6) Bottom-left far
             1, -1, -1      // (7) Bottom-right far                        
        });

        // 6 indices per cube side
        indexArray =  ByteBuffer.allocateDirect(6 * 6)
            .put(new byte[] {
                // Front
                1, 3, 0,
                0, 3, 2,

                // Back
                4, 6, 5,
                5, 6, 7,

                // Left
                0, 2, 4,
                4, 2, 6,

                // Right
                5, 7, 1,
                1, 7, 3,

                // Top
                5, 1, 4,
                4, 1, 0,

                // Bottom
                6, 2, 7,
                7, 2, 3
            });
        indexArray.position(0);        
    }
    public void bindData(SkyboxShaderProgram skyboxProgram) {
        vertexArray.setVertexAttribPointer(0,
            skyboxProgram.getPositionAttributeLocation(),
            POSITION_COMPONENT_COUNT, 0);               
    }

    public void draw() {
        glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_BYTE, indexArray);
    }
}

我们用VertexArray储存立方体的8个顶点。用indexArray 这个索引数组的索引指向每个顶点,把所有顶点分别绑定成三角形组,每个组有立方体上每个面的2个三角形。

bindData方法从内存中加载数据绑定,然后通过 glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_BYTE, indexArray);绘制立方体。

下面我们添加着色器
顶点着色器

uniform mat4 u_Matrix;
attribute vec3 a_Position;  
varying vec3 v_Position;

void main()                    
{                                                 
    v_Position = a_Position;    //把顶点位置传给片段着色器

    v_Position.z = -v_Position.z; //反转Z分量。把右手坐标系转化为左手坐标系

    gl_Position = u_Matrix * vec4(a_Position, 1.0);//成u_Matrix即用投影~
    gl_Position = gl_Position.xyww;//把Z值变成W,这样透视除法之后为1,即Z始终在1的远平面上。Z=1最远,即在别的物体的后面,就像是背景。
}    

片段着色器:

precision mediump float; 

uniform samplerCube u_TextureUnit;//立方体纹理
varying vec3 v_Position;

void main()                         
{
    gl_FragColor = textureCube(u_TextureUnit, v_Position);    
}

然后用java代码封装着色器程序

这里用java代码映射到着色器上

    uMatrixLocation = glGetUniformLocation(program, U_MATRIX);
    uTextureUnitLocation = glGetUniformLocation(program, U_TEXTURE_UNIT);
    aPositionLocation = glGetAttribLocation(program, A_POSITION);
  }


  public void setUniforms(float[] matrix, int textureId) {
    glUniformMatrix4fv(uMatrixLocation, 1, false, matrix, 0);

    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_CUBE_MAP, textureId);
    glUniform1i(uTextureUnitLocation, 0);
  }

有了关系映射,就可以绑定数据进行绘制了
@onDrawFrame(GL10 gl10)中

skyboxProgram.useProgram();
    skyboxProgram.setUniforms(viewProjectionMatrix, skyboxTexture);//映射
    skybox.bindData(skyboxProgram);//绑定数据
    skybox.draw();//绘制

下面看手势操作代码
在Activity中监听glSurfaceView

 glSurfaceView.setOnTouchListener(new View.OnTouchListener() {
      float previousX, previousY;

      @Override public boolean onTouch(View v, MotionEvent event) {
        if (event != null) {
          if (event.getAction() == MotionEvent.ACTION_DOWN) {
            previousX = event.getX();
            previousY = event.getY();
          } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
            final float deltaX = event.getX() - previousX;
            final float deltaY = event.getY() - previousY;

            previousX = event.getX();
            previousY = event.getY();

            glSurfaceView.queueEvent(new Runnable() {
              @Override public void run() {
                particlesRenderer.handleTouchDrag(deltaX, deltaY);
              }
            });
          }

          return true;
        } else {
          return false;
        }
      }
    });

因为openGL是在一个单独的线程中的,所以需要 glSurfaceView.queueEvent发送事件

把eltaX, deltaY传递到了Renderer类中

public void handleTouchDrag(float deltaX, float deltaY) {
    xRotation += deltaX / 16f; //除以16是缩减拖动效果的
    yRotation += deltaY / 16f;

然后我们根据这个滑动值,用矩阵去操作立方体变化。
@onDrawFrame

//以 0 0 0为中心绘制,我们站在中心观察
  private void drawSkybox() {
    setIdentityM(viewMatrix, 0);
    rotateM(viewMatrix, 0, -yRotation, 1f, 0f, 0f);//沿着Y轴旋转
    rotateM(viewMatrix, 0, -xRotation, 0f, 1f, 0f);//沿着x轴旋转  FPS模型
    multiplyMM(viewProjectionMatrix, 0, projectionMatrix, 0, viewMatrix, 0);
    skyboxProgram.useProgram();
    skyboxProgram.setUniforms(viewProjectionMatrix, skyboxTexture);
    skybox.bindData(skyboxProgram);
    skybox.draw();
  }

在这之前我们要在onSurfaceCreated里面初始化立方体

skyboxProgram = new SkyboxShaderProgram(context);
    skybox = new Skybox();
@Override public void onSurfaceChanged(GL10 gl10, int width, int height) {
    GLES20.glViewport(0, 0, width, height);
    MatrixHelper.perspectiveM(projectionMatrix, 45, (float) width / (float) height, 1f, 10f);
  }
查看评论

openGL ES进阶教程(五)制作一个简单的VR播放器,播放全景视频

之前写过全景(VR)图片,和用openGL ES+MediaPlayer 渲染播放视频+滤镜效果这一篇就在之前的基础上实现一个最简单的VR播放器,播放全景视频。概述:全景视频是一种用3D摄像机进行全方...
  • King1425
  • King1425
  • 2017-08-01 20:44:51
  • 2146

[OpenGL]从零开始写一个Android平台下的全景视频播放器——3.1 全景视频是如何实现的

Github项目地址为了方便没有准备好梯子的同学,我把项目在CSDN上打包下载,不过更新会慢一些回到目录恭喜Martin同学获得由CSDN颁发的“更新慢慢慢”荣誉称号全景视频有很多种类,例如Spher...
  • Martin20150405
  • Martin20150405
  • 2016-12-17 21:13:46
  • 3808

opengl实现鼠标控制和左右分屏观看全景图

opengl实现鼠标控制视角和左右分屏观看全景图首先贴出效果图再过几天说明代码实现的过程: 先给出参考的页面: http://learnopengl-cn.readthedocs.org/zh...
  • joyce19920920
  • joyce19920920
  • 2016-02-27 16:31:49
  • 3202

基于OpenGL的全景视频播放

  • 2017年05月31日 21:23
  • 30.94MB
  • 下载

opengl写的win32平台全景图浏览程序

  • 2012年07月05日 09:47
  • 2.69MB
  • 下载

OpenGL 全景视频贴图

  • 2015年12月14日 16:23
  • 464KB
  • 下载

opengl 全景图像拼接程序

  • 2010年05月12日 17:57
  • 48.12MB
  • 下载

OpenGL ES教程系列(经典合集)

OpenGL ES教程系列(经典合集)   为了搞透播放器的开发,花了些时间收集这些资料,虽然我已经搞定opengles渲染视频的内容,但是想玩玩opengles,往深里玩,图像处理这块是个...
  • tyforfreedom
  • tyforfreedom
  • 2015-11-09 15:49:27
  • 2147

OpenGL ES2.0基础

-
  • 2015年05月27日 16:39

OpenGL ES总结(三)OpenGL通过计算纹理坐标来显示一张图片

通过OpenGL来显示一张汽车图片,图片可以看做一个矩形,所以我们先来画一个矩形OpenGL的基本形状是三角形,一个矩形可以看成由4个三角形构成...
  • hejjunlin
  • hejjunlin
  • 2017-03-16 21:36:54
  • 4381
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 20万+
    积分: 3376
    排名: 1万+
    联系方式
    博客专栏
    最新评论