第二十五节多Surface渲染同一纹理

作者: 最美下雨天 | 来源:发表于2018-12-06 14:48 被阅读18次

第二十五节多Surface渲染同一纹理
第二十九节视频编码录制
Android 的 SurfaceTexture原理
ViewRoot中surface的创建
react-native-art 绘图
Flutter Android外接纹理实现图片共享
第二十六节单Surface渲染多个纹理（有闪烁效果）
纹理渲染
Android自定义GLSurfaceView
CPU优化

image.png

修改课件代码：
WlTextureRender.java

package com.ywl5320.openglesegl;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.opengl.GLES20;
import android.opengl.GLUtils;
import android.opengl.Matrix;
import android.util.Log;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

public class WlTextureRender implements WLEGLSurfaceView.WlGLRender{

    private Context context;


    private float[] vertexData = {
            -1f, -1f,
            1f, -1f,
            -1f, 1f,
            1f, 1f
    };
    private FloatBuffer vertexBuffer;

    private float[] fragmentData = {
//            0f, 0f,
//            1f, 0f,
//            0f, 1f,
//            1f, 1f
            0f, 1f,
            1f, 1f,
            0f, 0f,
            1f, 0f
    };
    private FloatBuffer fragmentBuffer;

    private int program;
    private int vPosition;
    private int fPosition;
    private int textureid;
    private int sampler;

    private int vboId;
    private int fboId;

    private int imgTextureId;

    private FboRender fboRender;

    private int umatrix;
    private float[] mProjectMatrix = new float[16];

    private OnRenderCreateListener onRenderCreateListener;

    private int width;
    private int height;


    public WlTextureRender(Context context) {
        this.context = context;
        fboRender = new FboRender(context);
        vertexBuffer = ByteBuffer.allocateDirect(vertexData.length * 4)
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer()
                .put(vertexData);
        vertexBuffer.position(0);

        fragmentBuffer = ByteBuffer.allocateDirect(fragmentData.length * 4)
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer()
                .put(fragmentData);
        fragmentBuffer.position(0);

    }

    public void setOnRenderCreateListener(OnRenderCreateListener onRenderCreateListener) {
        this.onRenderCreateListener = onRenderCreateListener;
    }

    @Override
    public void onSurfaceCreated() {

        fboRender.onCreate();
        String vertexSource = WlShaderUtil.getRawResource(context, R.raw.vertex_shader_m);
        String fragmentSource = WlShaderUtil.getRawResource(context, R.raw.fragment_shader);

        program = WlShaderUtil.createProgram(vertexSource, fragmentSource);

        vPosition = GLES20.glGetAttribLocation(program, "v_Position");
        fPosition = GLES20.glGetAttribLocation(program, "f_Position");
        sampler = GLES20.glGetUniformLocation(program, "sTexture");
        umatrix = GLES20.glGetUniformLocation(program, "u_Matrix");


        int [] vbos = new int[1];
        GLES20.glGenBuffers(1, vbos, 0);
        vboId = vbos[0];

        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vboId);
        GLES20.glBufferData(GLES20.GL_ARRAY_BUFFER, vertexData.length * 4 + fragmentData.length * 4, null, GLES20. GL_STATIC_DRAW);
        GLES20.glBufferSubData(GLES20.GL_ARRAY_BUFFER, 0, vertexData.length * 4, vertexBuffer);
        GLES20.glBufferSubData(GLES20.GL_ARRAY_BUFFER, vertexData.length * 4, fragmentData.length * 4, fragmentBuffer);
        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0);




        int []textureIds = new int[1];
        GLES20.glGenTextures(1, textureIds, 0);
        textureid = textureIds[0];

        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureid);

        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glUniform1i(sampler, 0);

        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT);

        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);



        if(onRenderCreateListener != null)
        {
            onRenderCreateListener.onCreate(textureid);
        }

    }

    @Override
    public void onSurfaceChanged(int width, int height) {
        this.width = width;
        this.height = height;

        //fbo  我们将这部分代码移动到这儿，目的是为了使用width和height，width和height是该控件的宽高，并不一定是屏幕宽高
        int[] fbos = new int[1];
        GLES20.glGenBuffers(1, fbos, 0);
        fboId = fbos[0];
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId);

        GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height, 0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);
        GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, textureid, 0);
        if(GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER) != GLES20.GL_FRAMEBUFFER_COMPLETE)
        {
            Log.e("ywl5320", "fbo wrong");
        }
        else
        {
            Log.e("ywl5320", "fbo success");
        }

        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);

        //这个要放到fbo之后
        imgTextureId = loadTexrute(R.drawable.androids);





        GLES20.glViewport(0, 0, width, height);
        fboRender.onChange(width, height);

        int w=bitmap.getWidth();
        int h=bitmap.getHeight();
        //bitmap不再使用了
        bitmap.recycle();
        bitmap = null;
        float sWH=w/(float)h;
        float sWidthHeight=width/(float)height;
        if(width>height){
            if(sWH>sWidthHeight){
                Matrix.orthoM(mProjectMatrix, 0, -sWidthHeight*sWH,sWidthHeight*sWH, -1,1, 3, 7);
            }else{
                Matrix.orthoM(mProjectMatrix, 0, -sWidthHeight/sWH,sWidthHeight/sWH, -1,1, 3, 7);
            }
        }else{
            if(sWH>sWidthHeight){
                Matrix.orthoM(mProjectMatrix, 0, -1, 1, -1/sWidthHeight*sWH, 1/sWidthHeight*sWH,3, 7);
            }else{
                Matrix.orthoM(mProjectMatrix, 0, -1, 1, -sWH/sWidthHeight, sWH/sWidthHeight,3, 7);
            }
        }

        Matrix.rotateM(mProjectMatrix, 0, 180, 1, 0, 0);
//        Matrix.rotateM(mProjectMatrix, 0, 180, 0, 0, 1);

    }

    private Bitmap bitmap;

    @Override
    public void onDrawFrame() {

        GLES20.glViewport(0, 0, width, height);
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId);
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
        GLES20.glClearColor(1f,0f, 0f, 1f);

        GLES20.glUseProgram(program);
        GLES20.glUniformMatrix4fv(umatrix, 1, false, mProjectMatrix, 0);

        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, imgTextureId);


        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, vboId);

        GLES20.glEnableVertexAttribArray(vPosition);
        GLES20.glVertexAttribPointer(vPosition, 2, GLES20.GL_FLOAT, false, 8,
                0);

        GLES20.glEnableVertexAttribArray(fPosition);
        GLES20.glVertexAttribPointer(fPosition, 2, GLES20.GL_FLOAT, false, 8,
                vertexData.length * 4);

        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
        GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0);

        GLES20.glViewport(0, 0, width, height);
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
        fboRender.onDraw(textureid);






    }


    private int loadTexrute(int src)
    {
        int []textureIds = new int[1];
        GLES20.glGenTextures(1, textureIds, 0);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureIds[0]);

        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
        GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);

        bitmap = BitmapFactory.decodeResource(context.getResources(), src);
        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
        return  textureIds[0];

    }

    public interface OnRenderCreateListener
    {
        void onCreate(int textid);
    }


}

activity_texture.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.ywl5320.openglesegl.WlGLTextureView
        android:id="@+id/wlglsurfaceviw"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        />
    <LinearLayout
        android:id="@+id/ly_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"/>

</LinearLayout>

TextureActivity.java

package com.ywl5320.openglesegl;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.LinearLayout;

public class TexttureActivity extends AppCompatActivity{

    private WlGLTextureView wlGLTextureView;
    private LinearLayout lyContent;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_texture);
        wlGLTextureView = findViewById(R.id.wlglsurfaceviw);
        lyContent = findViewById(R.id.ly_content);


    }

    @Override
    protected void onResume() {
        super.onResume();
        wlGLTextureView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                wlGLTextureView.getWlTextureRender().setOnRenderCreateListener(new WlTextureRender.OnRenderCreateListener() {
                    @Override
                    public void onCreate(final int textid) {

                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {

                                if(lyContent.getChildCount() > 0)
                                {
                                    lyContent.removeAllViews();
                                }

                                for(int i = 0; i <3; i ++)
                                {
                                    WlMutiSurfaceVeiw wlMutiSurfaceVeiw = new WlMutiSurfaceVeiw(TexttureActivity.this);
                                    wlMutiSurfaceVeiw.setTextureId(textid, i);
                                    wlMutiSurfaceVeiw.setSurfaceAndEglContext(null, wlGLTextureView.getEglContext());

                                    LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                                    lp.height = lyContent.getMeasuredHeight();
                                    lp.width = lp.height*wlGLTextureView.getMeasuredWidth()/wlGLTextureView.getMeasuredHeight();
                                    wlMutiSurfaceVeiw.setLayoutParams(lp);

                                    lyContent.addView(wlMutiSurfaceVeiw);
                                }
                            }
                        });

                    }
                });
            }
        });

    }
}

其他代码没有动
运行效果：

image.png

第二十五节多Surface渲染同一纹理
修改课件代码：WlTextureRender.java activity_texture.xml TextureA...
第二十九节视频编码录制
其实就是共享了纹理id和glcontext，感觉类似于多surface渲染统一画面，只不过MediaCodec的s...
Android 的 SurfaceTexture原理
1 什么是表面纹理 SurfaceTexture是Android上做渲染的核心组件，它是 Surface 和 Op...
ViewRoot中surface的创建
ViewRootImpl的mSurface变量指向Surface对象，这个surface对象是硬件渲染UI时Ope...
react-native-art 绘图
Surface 渲染区域 Props width：渲染区域的宽 width：渲染区域的宽 visible: 是否可...
Flutter Android外接纹理实现图片共享
Android 利用surface实现Flutter外接纹理https://gitee.com/woshishui...
第二十六节单Surface渲染多个纹理（有闪烁效果）
在上节的基础上做修改看下代码：运行结果：修改：运行结果：貌似运行的时候有闪烁效果，先放下后面想办法解决
纹理渲染
直线起点终点。对于rgb 每一个像素点都要描述出来纹理起点在哪终点在哪中间描述如何渐变纹理渲染 ...
Android自定义GLSurfaceView
当我们需要把同一个场景渲染到不同的Surface上时，此时系统GLSurfaceView 就不能满足需求了，所以我...
CPU优化
渲染模块降低DrawDall通过批渲染来达来降低DC。简化资源模型面数，数量纹理数量纹理尺寸纹理格式选择硬件支...