虚拟现实：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

欢迎加入！