SurfaceTextureレンダラ （ 画像を１度だけ画面に描画 )

SurfaceTexture に出力した画像を、画面に描画する方法を解説します。

本項では、画像を１度だけ画面に描画するSurfaceTextureレンダラを作成します。

解説

大きな処理の流れは以下です。

1. SurfaceからCanvasを取得し、Canvasの描画命令を用いて画像を描画します。結果として、SurfaceTexture の画像が更新されます。
2. SurfaceTexture の画像が更新されると、onFrameAvailable コールバック関数が呼び出されます。
3. onFrameAvailable コールバック関数の呼び出しをトリガとして、updateTexImage関数を呼び出します。
4. updateTexImage 関数を呼び出すと、SurfaceTexture に出力した画像が、GLESの外部テクスチャとして使用できるようになります。
5. GLESの描画命令を用いて、GLESの外部テクスチャを、画面に描画します。

実装

アプリの仕様

• アプリを起動すると、メインアクティビティが表示される。
• 背景色は、灰色。
• 左上座標値 ( 200, 300 )、右下座標値 ( 400, 600 )、赤色で塗りつぶしの矩形が表示される。
• 中心座標値 ( 400, 600 )、半径 200、緑色で、線の太さ30の円が表示される。

プロジェクトの作成

（開発環境としては、Android Studio 4.2.2 を使用しています）

（この設定でプロジェクトを作成しなければいけない、というわけではありません。）

「Welcome to Android Studio」画面の「Create New Project」をクリックします。


「Empty Activity」を選択し、「Next」ボタンを押します。


Nameに、「SurfaceTextureRendererTest」と入力します。
Package nameのドメイン部分に、会社のドメイン名を指定します。
Save locationに、プロジェクトを保存するフォルダパスを指定します。
Minimum SDKを選択します（たとえば、「API 23: Android 6.0 (Marshmallow)」）。
「Finish」ボタンを押します。

しばらく待ちます。
Android Studio のステータスバーに「Gradle sync finished in ・・・」や「*daemon started successfully ・・・」と出るまで待ちます。

以上で、プロジェクトができました。

クラスファイルの作成

２つのクラスファイルを作成します。
①便利関数を集めたユーティリティクラス ( MyUtilsクラス )
②SurfaceTextureレンダラクラス ( SurfaceTextureRendererクラス )

①便利関数を集めたユーティリティクラス ( MyUtilsクラス )の作成
「Project」ペインの「app > java > パッケージ名」を右クリックします。
右クリックメニュー「New > Java Class」を選択します。


クラス名欄に「MyUtils」と入力しエンターキーを押します。


（変更なし）
「OK」ボタンを押します。
「MyUtils」クラスファイルができました。

②SurfaceTextureレンダラクラス ( SurfaceTextureRendererクラス )の作成
「Project」ペインの「app > java > ドメイン.パッケージ名」を右クリックします。
右クリックメニュー「New > Java Class」を選択します。


クラス名欄に「SurfaceTextureRenderer」と入力しエンターキーを押します。


INTERFACES欄に「GLSurfaceView.Renderer, SurfaceTexture.OnFrameAvailableListener」と入力します。
「OK」ボタンを押します。
「SurfaceTextureRenderer」クラスファイルができました。

ユーティリティクラス ( MyUtilsクラス )の定義

便利関数を集めたユーティリティクラス ( MyUtilsクラス )に以下の定義を追加します。

• Float型のバイト数定数
• GLESシェーダー読み込み関数
• GLESシェーダープログラムの作成関数
• GLESエラーチェック関数

クラス全体としては、以下のようにします。

class MyUtils { // 定数 private final static String TAG = "Util"; public static final int SIZEOF_FLOAT = Float.SIZE / 8; // Float.SIZEで、float型のビット数が得られるので、8で割って、バイト数を得る // floatバッファーの作成 public static FloatBuffer makeFloatBuffer( float[] arr ) { ByteBuffer bb = ByteBuffer.allocateDirect( arr.length * SIZEOF_FLOAT ); bb.order( ByteOrder.nativeOrder() ); FloatBuffer fb = bb.asFloatBuffer(); fb.put( arr ); fb.position( 0 ); return fb; } // GLESシェーダーの読み込み private static int loadShader( int iShaderType, String strShaderCode ) { // シェーダーの作成 int iShader = GLES20.glCreateShader( iShaderType ); if( 0 == iShader ) { Log.e( TAG, "Cound not create shader. Shader Type = " + Integer.toString( iShader ) ); return 0; } // シェーダーにシェーダーコードをセットし、コンパイル。 GLES20.glShaderSource( iShader, strShaderCode ); GLES20.glCompileShader( iShader ); // コンパイル結果の確認 int[] aiCompiled = new int[1]; GLES20.glGetShaderiv( iShader, GLES20.GL_COMPILE_STATUS, aiCompiled, 0 ); if( GLES20.GL_FALSE == aiCompiled[0] ) { Log.e( TAG, "Cound not compile shader. Shader Type = " + Integer.toString( iShader ) ); Log.e( TAG, " " + GLES20.glGetShaderInfoLog( iShader ) ); GLES20.glDeleteShader( iShader ); return 0; } return iShader; } // GLESシェーダープログラムの作成 public static int createProgram( String strVertexShaderCode, String strFragmentShaderCode ) { // シェーダーの読み込み int iVertexShader = loadShader( GLES20.GL_VERTEX_SHADER, strVertexShaderCode ); if( 0 == iVertexShader ) { return 0; } // シェーダーの読み込み int iFragmentShader = loadShader( GLES20.GL_FRAGMENT_SHADER, strFragmentShaderCode ); if( 0 == iFragmentShader ) { return 0; } // シェーダープログラムの作成 int iProgram = GLES20.glCreateProgram(); if( 0 == iProgram ) { return 0; } // シェーダープログラムにシェーダーを割り付け GLES20.glAttachShader( iProgram, iVertexShader ); checkGlError( "glAttachShader" ); GLES20.glAttachShader( iProgram, iFragmentShader ); checkGlError( "glAttachShader" ); // シェーダープログラムのリンク GLES20.glLinkProgram( iProgram ); // リンク結果の確認 int[] aiLinkStatus = new int[1]; GLES20.glGetProgramiv( iProgram, GLES20.GL_LINK_STATUS, aiLinkStatus, 0 ); if( GLES20.GL_FALSE == aiLinkStatus[0] ) { Log.e( TAG, "Cound not link program." ); Log.e( TAG, " " + GLES20.glGetProgramInfoLog( iProgram ) ); GLES20.glDeleteProgram( iProgram ); return 0; } return iProgram; } // GLESエラーチェック public static void checkGlError( String str ) { int iError; while( true ) { iError = GLES20.glGetError(); if( GLES20.GL_NO_ERROR == iError ) { break; } Log.e( "checkGlError", str + " : Error Code = " + Integer.toString( iError ) ); //throw new RuntimeException( str + " : Error Code = " + Integer.toString( iError ) ); } } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

SurfaceTextureレンダラクラス ( SurfaceTextureRendererクラス )の定義

SurfaceTextureレンダラクラス ( SurfaceTextureRendererクラス )に、以下の定義を追加します。

• コンストラクタ関数
• 「GLSurfaceView.Renderer」インターフェースで定義されている「onSurfaceCreated」「onSurfaceChanged」「onDrawFrame」の３つの関数
• 「SurfaceTexture.OnFrameAvailableListener」インターフェースで定義されている「onFrameAvailable」関数
• Surfaceでの描画関数

処理の流れは、以下です。

1. SurfaceTextureをインスタンス化の際に、コンストラクタ関数が呼ばれます。コンストラクタ関数では、でメンバー変数の初期化を行います。
2. アプリケーションが開始した際や、一時停止状態から再開した際に、onSurfaceCreated関数が呼ばれます。onSurfaceCreated関数では、GLESの初期化処理、および、SurfaceTextureとSurfaceの作成を行います。
3. アプリケーションが開始した際や、一時停止状態から再開した際や、画面の向きを変更した際に、onSurfaceChanged関数が呼ばれます。onSurfaceChanged関数では、ビューポート設定処理、テクスチャの大きさの変更処理、および、「Surfaceでの描画」関数呼び出しを行います。
4. 「Surfaceでの描画」関数では、SurfaceからCanvasを取得し、Canvasの描画命令を用いて画像を描画します。結果として、SurfaceTexture の画像が更新されます。
5. SurfaceTexture の画像が更新されると、onFrameAvailable コールバック関数が呼び出されます。
6. onFrameAvailableコールバック関数では、m_bNewFrameAvailableのフラグを立てます。
7. onDrawFrame関数は、高頻度で繰り返し呼び出されます。m_bNewFrameAvailableのフラグが立っているときは、SurfaceTextureの画像が変わっているので、onDrawFrame関数では、updateTexImage関数を呼び出し、m_bNewFrameAvailableのフラグを倒します。
8. updateTexImage関数を呼び出すと、SurfaceTexture に出力した画像が、GLESの外部テクスチャとして使用できるようになります。
9. onDrawFrame関数では、GLESの描画命令を用いて、GLESの外部テクスチャを、画面に描画します。

クラス全体としては、以下のようにします。

class SurfaceTextureRenderer implements GLSurfaceView.Renderer, SurfaceTexture.OnFrameAvailableListener { // 定数 private final static String TAG = "SurfaceTextureRenderer"; // テクスチャの大きさ private int m_iTextureWidth; private int m_iTextureHeight; // GL関連 private int m_iProgram; private int m_iPositionAttributeLocation; private int m_iTexCoordAttributeLocation; private int m_iMVPMatrixUniformLocation; private int m_iSTMatrixUniformLocation; private int m_iTextureID; private final FloatBuffer m_fbVertex; private final float[] m_f16MVPMatrix = new float[16]; private final float[] m_f16STMatrix = new float[16]; // Surface関連 private Surface m_surface; private SurfaceTexture m_surfacetexture; private boolean m_bNewFrameAvailable; // ランダムサークル描画用メンバ変数 private final Paint m_paint = new Paint(); // シェーダーコード private final String m_strVertexShaderCode = "uniform mat4 uniformModelViewProjectionMatrix;\n" + "uniform mat4 uniformSurfaceTextureMatrix;\n" + "attribute vec4 attributePosition;\n" + "attribute vec4 attributeTexCoord;\n" + "varying vec2 varyingTexCoord;\n" + "void main() {\n" + " gl_Position = uniformModelViewProjectionMatrix * attributePosition;\n" + " varyingTexCoord = (uniformSurfaceTextureMatrix * attributeTexCoord).xy;\n" + "}\n"; // 1行目：GL_TEXTURE_EXTERNAL_OESテクスチャを使用するための宣言。 // 4行目：sampler2D変数の代わりにsamplerExternalOES変数を定義。 private final String m_strFragmentShaderCode = "#extension GL_OES_EGL_image_external : require\n" + "precision mediump float;\n" + "varying vec2 varyingTexCoord;\n" + "uniform samplerExternalOES uniformTexture;\n" + "void main() {\n" + " gl_FragColor = texture2D(uniformTexture, varyingTexCoord);\n" + "}\n"; // コンストラクタ public SurfaceTextureRenderer() { Log.d( TAG, "Constructor" ); Log.d( TAG, "Thread name = " + Thread.currentThread().getName() ); // Thread name = main float[] m_afVertex = { // X, Y, Z, U, V -1.0f, -1.0f, 0.0f, 0.0f, 0.0f, 1.0f, -1.0f, 0.0f, 1.0f, 0.0f, -1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, }; m_fbVertex = MyUtils.makeFloatBuffer( m_afVertex ); Matrix.setIdentityM( m_f16MVPMatrix, 0 ); Matrix.setIdentityM( m_f16STMatrix, 0 ); } @Override public void onSurfaceCreated( GL10 gl10, EGLConfig eglConfig ) { Log.d( TAG, "onSurfaceCreated" ); Log.d( TAG, "Thread name = " + Thread.currentThread().getName() ); // Thread name = GLThread XXXX m_iProgram = MyUtils.createProgram( m_strVertexShaderCode, m_strFragmentShaderCode ); if( 0 == m_iProgram ) { return; } // AttributeLocation m_iPositionAttributeLocation = GLES20.glGetAttribLocation( m_iProgram, "attributePosition" ); MyUtils.checkGlError( "glGetAttribLocation attributePosition" ); m_iTexCoordAttributeLocation = GLES20.glGetAttribLocation( m_iProgram, "attributeTexCoord" ); MyUtils.checkGlError( "glGetAttribLocation attributeTexCoord" ); // UniformLocation m_iMVPMatrixUniformLocation = GLES20.glGetUniformLocation( m_iProgram, "uniformModelViewProjectionMatrix" ); MyUtils.checkGlError( "glGetUniformLocation uniformModelViewProjectionMatrix" ); m_iSTMatrixUniformLocation = GLES20.glGetUniformLocation( m_iProgram, "uniformSurfaceTextureMatrix" ); MyUtils.checkGlError( "glGetUniformLocation uniformSurfaceTextureMatrix" ); // Texture int[] aiTextureID = new int[1]; GLES20.glGenTextures( 1, aiTextureID, 0 ); m_iTextureID = aiTextureID[0]; GLES20.glBindTexture( GLES11Ext.GL_TEXTURE_EXTERNAL_OES, m_iTextureID ); GLES20.glTexParameteri( GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR ); GLES20.glTexParameteri( GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR ); GLES20.glTexParameteri( GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE ); GLES20.glTexParameteri( GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE ); GLES20.glBindTexture( GLES11Ext.GL_TEXTURE_EXTERNAL_OES, 0 ); // SurfaceTextureとSurfaceの作成 m_surfacetexture = new SurfaceTexture( m_iTextureID ); m_surfacetexture.setOnFrameAvailableListener( this ); m_surface = new Surface( m_surfacetexture ); synchronized( this ) { m_bNewFrameAvailable = false; } } @Override public void onSurfaceChanged( GL10 gl10, int width, int height ) { Log.d( TAG, "onSurfaceChanged" ); Log.d( TAG, "Thread name = " + Thread.currentThread().getName() ); // Thread name = GLThread XXXX // ビューポート設定 GLES20.glViewport(0, 0, width, height); // テクスチャの大きさ m_iTextureWidth = width; m_iTextureHeight = height; m_surfacetexture.setDefaultBufferSize( m_iTextureWidth, m_iTextureHeight ); // Surfaceでの描画 drawInSurface(); } @Override public void onDrawFrame( GL10 gl10 ) { //Log.d( TAG, "onDrawFrame" ); //Log.d( TAG, "Thread name = " + Thread.currentThread().getName() ); // Thread name = GLThread XXXX synchronized( this ) { if( m_bNewFrameAvailable ) { m_surfacetexture.updateTexImage(); m_surfacetexture.getTransformMatrix( m_f16STMatrix ); m_bNewFrameAvailable = false; } } // バッファークリア GLES20.glClearColor( 0.0f, 1.0f, 0.0f, 1.0f ); GLES20.glClear( GLES20.GL_DEPTH_BUFFER_BIT | GLES20.GL_COLOR_BUFFER_BIT ); // 使用するシェーダープログラムの指定 GLES20.glUseProgram( m_iProgram ); MyUtils.checkGlError( "glUseProgram" ); // テクスチャの有効化 GLES20.glActiveTexture( GLES20.GL_TEXTURE0 ); GLES20.glBindTexture( GLES11Ext.GL_TEXTURE_EXTERNAL_OES, m_iTextureID ); // シェーダープログラムへ頂点座標値データの転送 m_fbVertex.position( 0 ); GLES20.glVertexAttribPointer( m_iPositionAttributeLocation, 3, GLES20.GL_FLOAT, false, 5 * MyUtils.SIZEOF_FLOAT, m_fbVertex ); MyUtils.checkGlError( "glVertexAttribPointer Position" ); GLES20.glEnableVertexAttribArray( m_iPositionAttributeLocation ); MyUtils.checkGlError( "glEnableVertexAttribArray Position" ); // シェーダープログラムへテクスチャ座標値データの転送 m_fbVertex.position( 3 ); GLES20.glVertexAttribPointer( m_iTexCoordAttributeLocation, 2, GLES20.GL_FLOAT, false, 5 * MyUtils.SIZEOF_FLOAT, m_fbVertex ); MyUtils.checkGlError( "glVertexAttribPointer TexCoord" ); GLES20.glEnableVertexAttribArray( m_iTexCoordAttributeLocation ); MyUtils.checkGlError( "glEnableVertexAttribArray TexCoord" ); // シェーダープログラムへ行列データの転送 GLES20.glUniformMatrix4fv( m_iMVPMatrixUniformLocation, 1, false, m_f16MVPMatrix, 0 ); MyUtils.checkGlError( "glUniformMatrix4fv MVPMatrix" ); GLES20.glUniformMatrix4fv( m_iSTMatrixUniformLocation, 1, false, m_f16STMatrix, 0 ); MyUtils.checkGlError( "glUniformMatrix4fv STMatrix" ); // 描画 GLES20.glDrawArrays( GLES20.GL_TRIANGLE_STRIP, 0, 4 ); MyUtils.checkGlError( "glDrawArrays" ); GLES20.glFlush(); MyUtils.checkGlError( "glFlush" ); } @Override public void onFrameAvailable( SurfaceTexture surfaceTexture ) { Log.d( TAG, "onFrameAvailable" ); Log.d( TAG, "Thread name = " + Thread.currentThread().getName() ); // Thread name = main synchronized( this ) { m_bNewFrameAvailable = true; } } // Surfaceでの描画 private void drawInSurface() { Log.d( TAG, "drawInSurface" ); Log.d( TAG, "Thread name = " + Thread.currentThread().getName() ); // Thread name = GLThread XXXX Canvas canvas = m_surface.lockCanvas( null ); // 全体塗りつぶし canvas.drawColor( Color.rgb( 128, 128, 128 ) ); // 矩形 m_paint.setColor( Color.rgb( 255, 0, 0 ) ); m_paint.setStyle( Paint.Style.FILL ); canvas.drawRect( 200, 300, 400, 600, m_paint ); // 円 m_paint.setColor( Color.rgb( 0, 255, 0 ) ); m_paint.setStyle( Paint.Style.STROKE ); m_paint.setStrokeWidth( 30 ); canvas.drawCircle( 400, 600, 200, m_paint ); m_surface.unlockCanvasAndPost( canvas ); } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

レイアウトの変更

メインアクティビティのレイアウトを変更します。

「Project」ペインの「app > res > layout > activity_main.xml」を開きます。

「Code」タブをクリックし、コードビューに変更します。

「TextView」定義を削除します。
「GLSurfaceView」定義を追加します。

activity_main.xmlの内容を以下のようにします。

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.opengl.GLSurfaceView android:id="@+id/glsurfaceview" android:layout_width="match_parent" android:layout_height="match_parent"/> </androidx.constraintlayout.widget.ConstraintLayout>

メインアクティビティクラスの変更

メインアクティビティの、onCreate関数内で、以下を行います。

1. GLSurfaceVeiwオブジェクトを取得します。
2. GLESバージョンとしてGLES 2.0 を指定します。
3. 「SurfaceTextureRenderer」クラスのオブジェクトを生成します。
4. 3.で生成した「SurfaceTextureRenderer」オブジェクトを、1.で取得したGLSurfaceViewオブジェクトに、setRenderer関数でセットします。
5. GLSurfaceViewの描画モードは、「絶え間なく描画するというモード」と「描画要求があったときだけ描画するというモード」があります。「絶え間なく描画するというモード」にします。

GLSurfaceViewクラスのオブジェクトメンバー変数を追加します。

メインアクティビティに、「初回表示時、および、ポーズからの復帰時」に呼ばれる関数である onResume関数と、「別のアクティビティ（か別のアプリ）に移行したことで、バックグラウンドに追いやられた時」に呼ばれる関数である onPause関数を追加します。

クラス全体としては、以下のようにします。

public class MainActivity extends AppCompatActivity { private GLSurfaceView m_glsurfaceview; @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // GLSurfaceViewの取得 m_glsurfaceview = (GLSurfaceView)findViewById( R.id.glsurfaceview ); // GLESバージョンとしてGLES 2.0 を指定 m_glsurfaceview.setEGLContextClientVersion( 2 ); // Rendererの作成と、GLSurfaceViewへのセット m_glsurfaceview.setRenderer( new SurfaceTextureRenderer() ); // 絶え間ないレンダリング m_glsurfaceview.setRenderMode( GLSurfaceView.RENDERMODE_CONTINUOUSLY ); } // 初回表示時、および、ポーズからの復帰時 @Override protected void onResume() { super.onResume(); m_glsurfaceview.onResume(); } // 別のアクティビティ（か別のアプリ）に移行したことで、バックグラウンドに追いやられた時 @Override protected void onPause() { m_glsurfaceview.onPause(); super.onPause(); } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。
リビルドし、エラー、警告がないことを確認します。

実行

Android端末にて、動作確認。



アプリを起動すると、メインアクティビティが表示されます。
背景色は、灰色。
左上座標値 ( 200, 300 )、右下座標値 ( 400, 600 )、赤色で塗りつぶしの矩形が表示されます。
中心座標値 ( 400, 600 )、半径 200、緑色で、線の太さ30の円が表示されます。

ダウンロード

サンプルコード

関連ページ

SurfaceTextureレンダラ （ 画像を１度だけ画面に描画 ) - 本ページ

SurfaceTextureレンダラ （ 連続画像を画面に描画 )

SurfaceTextureレンダラ （ 頂点バッファオブジェクトの利用 )