虚拟现实：UI: CrossApp的尝试

一  首先讲一下， Android端 GLSurfaceView的渲染机制

        CrossApp是基于Cocos2d-x引擎的，    而Cocos2d-x是彻底基于 OpenGL的 。 

        通常基于OpenGL的引擎 整个渲染机制 为：

         1 用EGL 库建立 窗口，关联OpenGL 上下文到该窗口

         2 设置窗口大小 以及 glViewPort(...)

         3 while循环里 ， 写OpenGL渲染程序，渲染你想要的东西

       那么， 在Android端以上过程，都包含在了GLSurfaceView中。它提供了一个 Renderer接口， 其中使用最频繁的onDrawFrame就是用来，渲染咱们想要的东西的。

        其实，编译成Android 版本的整个CrossApp都是 运行在 这个GLSurfaceView里面的， 其中 的渲染以及 触屏机制 都是  经过jni来调用的， jni所使用的类都 在 CrossApp/platform/android/jni/在目录下。 这些 jni native方法再去调用引擎里的其它方法，从而， 在OnDrawFrame里经过 native CocosRender()方法渲染到GLSurfaceView上，呈如今咱们的眼前

二   以一个 例子，CrossApp如何作一个 简单ListView的：

       如何 配置CrossApp， 及建立Android工程，并运行工程的默认Demo，以及如何写一个简单的ListView请参考， CrossApp官网无脑码农的帖子和视频，在此就不罗嗦了， 在这里支持下无脑码农。  

       若是，以上您都成功了， 那么，咱们主要讲解下如何将App的画面分屏。  

        首先，看一下，Android工程目录：

        HelloCApp是我用 CrossApp建立的工程， 它依赖于CrossApp\platform\android\下的工程，主要是org.CrossApp.lib下的文件，它有 

        为咱们建立好的 Cocos2dxActivity, Cocos2dxGLSurfaceView, 和 Cocos2dxRenderer。 

       

                    

        HelloCApp 与 org.CrossApp.lib的依赖关系以下：

                

        其次，看一下， org.CrossApp.lib下的 类：

        Cocos2dxActivity 是咱们程序的主界面， 在这个类中 init方法里，会将Cocos2dxGLSurfaceView 视图添加到 一个frameLayout， 而后将该frameLayout做为界面的主视图。 

        Cocos2dxGLSurfaceView 会经过setRenderer 将Cocos2dxRenderer 设置它的渲染接口。 这样，当整个程序运行起来时， Cocos2dxRenderer的 onDrawFrame 会经过nativeRender()方法将 CrossApp建立的UI 渲染出来。

        

      最后，如何分屏：

         看到这里，咱们基本已经知道，CrossApp的UI 都是 经过nativeRender()渲染出来的，即 在Cocos2dxRender.java 类的 onDrawFrame方法里:

        

   Cocos2dxRender.nativeRender() 是最终渲染到屏幕的纹理。 

     咱们若是可以拿到该纹理，则能够将纹理渲染到咱们本身的面板上， 

     即   先建立一个纹理依附的 FrameBuffer， 而后nativeRender()将纹理渲染到这个依附的纹理上，这个依附的纹理就是咱们想要的纹理，而后咱们本身将屏幕分为左右两个面板，将该纹理分别渲染在这两个面板上，就达到了左右分屏的目的。

  

   VRSDK 是我本身写的SDK， bindOffSFrame() 就是绑定到纹理依附的FrameBuffer上， showStereo() 是分屏的操做。

    

   

  如何使用VrSDK。 

 首先， http://pan.baidu.com/s/1eQ4lNPo 下载VrSDK，导入Android工程

  而后， 让 org.CrossApp.lib所在的工程，依赖于 VrSDK工程。 

  

      

  最后， 在 Cocos2dxActivity的 onCreate(...)方法里，添加 VrSDK.getInstance().setContext(sContext); 

              在 Cocos2dxRenderer里 的 onSurfaceChanged(...)方法里添加VrSDK.getInstance().init(pWidth, pHeight);

  

 Okay,  看一下效果：

       

  这样就分屏了。  能够带上VR盒子体验了。

  提示： 因为CrossApp是 App级的渲染引擎，不是游戏级的。所以，它在咱们对App没有操做时， 在C++ 层，是再也不渲染的， UI会固定在最新的渲染出来的画面上。 可是，在Java层onDrawFrame仍是在不停的绘制的，这时，咱们本身创建的FrameBuffer是拿不到图的，会出现黑屏的现象。在下一贴，我会分析，CrossApp的渲染机制，来解决这一问题。

ARVR技术交流群：129340649

欢迎加入！