flutter與unity的碰撞--opengl紋理共享實現flutter與unity介面的融合

我應該叫啥發表於2021-07-18

最近在學習untiy遊戲引擎的知識,在學習過程中突發奇想,unity和flutter都是可以通過opengl和vulkan繪製介面,那有沒有一種方法可以使得二者介面互相融合,即將flutter的介面渲染到unity的物體中,或者將unity的介面渲染到flutter的widget上。由於這兩種渲染方式大體相同,下面我們就著重講下如何將flutter介面渲染到unity中。 首先我們想到的是將flutter介面截圖成bitmap,然後通過互動將bitmap傳遞給unity,並在unity中使用該bitmap,並且我們也可以立馬發現flutter自帶截圖函式。但是我們會立刻發現此方案的弊端,此方案首先需要將flutter介面從gpu中下載到記憶體,然後再通過unity與java通訊將bitmap傳遞到unity中,最後再在unity中將bitmap上傳至gpu中作為紋理使用。如此一番折騰,需要在記憶體中倒騰很多遍,更何況bitmap通常很大,來回傳遞嚴重影響效率。那有沒有一種更好的方案來解決這個問題呢,當然有,那就是--

紋理共享

我們知道opengl上下文通常是和執行緒繫結的,不同上下文之間環境比較獨立,無法共享內容,但是為了更好的在多執行緒環境下工作,opengl提供了紋理共享的方式來彌補上訴問題,提高多執行緒下工作效率。使用方法也比較簡單,即在新建opengl環境的時候傳入一個已有opengl上下文和configs,這樣就可以在兩個opengl環境下共享使用同一份紋理。 至於如何在安卓上實現與unity的紋理共享,大家可以參考該文章blog.csdn.net/jnlws/artic… 該文章講解的比較詳細,並且程式碼比較完善,大家可以仔細閱讀並自己實現一遍即可,這邊我大概講解下相機紋理共享的實現流程(因為flutter共享過程與之類似)。

  1. 在unity執行緒中通過與安卓的通訊方式回撥java的方法
  2. 在java方法中獲取該unity執行緒的opengl上下文和引數配置,同時新建一個java 的執行緒用來作java的渲染執行緒,並在java執行緒中新建一個opengl上下文環境,傳入unity的opengl上下文,以此來實現紋理共享
  3. 將安卓相機資料輸出到surfacetexture,同時將該surfacetexture繫結到opengl中新建的一個textureid上,通過fbo離屏渲染將相機資料渲染到新的textureid(因為安卓中surfacetexture輸出的紋理是安卓特有的紋理格式GL_TEXTURE_EXTERNAL_OES,無法直接在unity中使用,因此需要通過離屏渲染將其轉換成unity可以使用的紋理格式),返回新的textureid給unity
  4. unity收到textureid後將其渲染到gameobject上

關鍵程式碼如下 unity呼叫java方法

在這裡插入圖片描述

開啟相機預覽 繫結相機紋理 紋理共享是opengl的方法,對於vulkan和metal這樣天生就支援多執行緒的渲染管線,不需要這種方式,不過目前對於vulkan不是很熟悉,所以這裡就先不進行講解。

flutter介面渲染到紋理中

上面我們已經分析瞭如何將相機資料通過紋理共享到unity中,我們知道可以通過surfacetexture和fbo離屏渲染將紋理共享給unity,因此我們只需要找到如何將flutter介面渲染到surfacetexture中,即可實現flutter和unity介面的融合。接下來我們來分析flutter原始碼,接下來的原始碼都是基於flutter1.16來分析的。 首先flutter在新的版本中,為了方便進行混合接入,抽離出了flutter engine,而且我們不需要將flutter介面直接渲染出來,所以我們只需要建立一個沒有view的flutter fragment放入unity activity中就可以了。我們將flutter fragment原始碼拷貝出來並進行改造,與之對應的還需要將FlutterActivityAndFragmentDelegate,接下來我們順著程式碼分析flutter介面是如何渲染到安卓上的,首先flutter是通過FlutterView載入到安卓介面的在這裡插入圖片描述 而FlutterView分為兩種模式,我們只需要分析surface模式,我們發現有個FlutterSurfaceView用來實現和flutter關聯,我們發現在surfaceview surface建立的時候通過FlutterRender將surface傳入flutter中。 在這裡插入圖片描述 在這裡插入圖片描述 在這裡插入圖片描述 這下分析下來就比較明瞭了,我們只需要建立一個surface,通過FlutterRender將其傳給flutter,同時通過將其資料輸出到surfacetexture,並通過fbo離屏渲染將其輸出到unity可以使用的紋理id中即可。程式碼如下

 public void attachToFlutterEngine(FlutterEngine flutterEngine) {
        this.flutterEngine = flutterEngine;
        FlutterRenderer flutterRenderer = flutterEngine.getRenderer();

        flutterRenderer.startRenderingToSurface(GLTexture.instance.surface);
        flutterRenderer.surfaceChanged(GLTexture.instance.getStreamTextureWidth(), GLTexture.instance.getStreamTextureHeight());
        FlutterRenderer.ViewportMetrics viewportMetrics = new FlutterRenderer.ViewportMetrics();
        viewportMetrics.width = GLTexture.instance.getStreamTextureWidth();
        viewportMetrics.height = GLTexture.instance.getStreamTextureHeight();
        viewportMetrics.devicePixelRatio = GLTexture.instance.context.getResources().getDisplayMetrics().density;
        flutterRenderer.setViewportMetrics(viewportMetrics);
        flutterRenderer.addIsDisplayingFlutterUiListener(new FlutterUiDisplayListener() {
            @Override
            public void onFlutterUiDisplayed() {
                GLTexture.instance.setNeedUpdate(true);
                GLTexture.instance.updateTexture();
            }

            @Override
            public void onFlutterUiNoLongerDisplayed() {

            }
        });
        GLTexture.instance.attachFlutterSurface(this);
    }
複製程式碼

這裡需要注意的是需要給flutter傳遞寬和高,不然flutter介面可能顯示不出來

接下來我們只需要和相機一樣,在unity中接收紋理並渲染到gameobject就可以了。 最終實現效果如下,我們可以看到flutter介面完美的渲染到unity中了 flutter渲染到untiy中 整體流程如下,其中重繪時候資料都在gpu內部,不涉及來回拷貝,這就是紋理共享的好處,可以實現更高的重新整理率。 在這裡插入圖片描述

點選事件

我們接下來還需要處理flutter點選事件,我們需要在unity中獲取點選事件,並將其傳遞給安卓,然後傳遞給flutter即可。 unity點選處理程式碼如下

void Update()
    {
        #if UNITY_ANDROID
        if(mGLTexCtrl.Call<bool>("isNeedUpdate"))
            mGLTexCtrl.Call("updateTexture");
        if (Input.touches.Length > 0){
            if(haveStartFlutter == 1){
           		//傳遞touch資訊給java,程式碼省略,具體可以參考unity點選處理和原始碼

            }
            }else{
                mFlutterApp.Call("startFlutter");
                haveStartFlutter = 1;
            }

        }
        #endif 
        
        if(Input.GetMouseButtonDown(1)){
            Debug.Log(Input.mousePosition);
        }
    }
複製程式碼

安卓傳遞給flutter程式碼如下。這裡我們可以在flutter原始碼中發現如何傳遞點選事件,這裡也藉助於flutter原始碼來實現

 public void onTouchEvent(int type, double x, double y) {
        ByteBuffer packet =
                ByteBuffer.allocateDirect(1 * POINTER_DATA_FIELD_COUNT * BYTES_PER_FIELD);
        packet.order(ByteOrder.LITTLE_ENDIAN);
        double x1, y1;
        x1 = GLTexture.instance.getStreamTextureWidth() * x;
        y1 = GLTexture.instance.getStreamTextureHeight() * y;
        Log.i("myyf", "x:" + x1 + "&y:" + y1 + "&type:" + type);
        addPointerForIndex(x1, y1, type + 4, 0, packet);
        if (packet.position() % (POINTER_DATA_FIELD_COUNT * BYTES_PER_FIELD) != 0) {
            throw new AssertionError("Packet position is not on field boundary");
        }

        flutterEngine.getRenderer().dispatchPointerDataPacket(packet,packet.position());

    }

	//傳遞點選資訊給flutter,程式碼省略,具體參考flutter內部程式碼
    // TODO(mattcarroll): consider creating a PointerPacket class instead of using a procedure that
    // mutates inputs.
    private void addPointerForIndex(
            double x, double y, int pointerChange, int pointerData, ByteBuffer packet) {
        

    }
複製程式碼

這樣我們就可以實現在unity中點選flutter介面了最終實現效果如下 在這裡插入圖片描述

總結

上面我們分析瞭如和將flutter介面渲染到unity中,通過opengl的紋理共享和安卓的surface即可實現,同理如何將unity介面渲染到flutter也是一樣,我們只需要自定義UnityPlayer將其輸出到紋理中,並在flutter中使用即可,可以更廣泛的推廣,我們可以通過這種方法將安卓介面渲染到flutter和unity中。本文程式碼已上傳至github,此處奉上鍊接,有需要的同學可以自取(github.com/feiyin0719/…

相關文章