虛擬現實: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

歡迎加入!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章