Obsession :P: [教學][android] OpenGL ES 繪製座標軸

大家安安～
今天不專業宅妹來做一個簡單的OpenGL ES教學
（一直懶得研究OpenGL ES 2.0聽說極度麻煩

主題簡單而言
就是繪製出xyz軸，並且能夠旋轉畫面.

layout部分就是~~~~什麼都不用

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

</RelativeLayout>

然後你的package裡面會有兩個class，
分別是
MainActivity.java

package com.example.gl_lines_test;
/*
 * References:
 * http://www.developer.com/ws/android/programming/opengl-es-for-android-graphics-programming.html
 * 
 */
import android.app.Activity;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import android.view.MotionEvent;

public class MainActivity extends Activity {
    private GLSurfaceView mView; 
    private MyRenderer mRenderer; 

    @Override
    protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState); 
          mView = new GLSurfaceView(this); 
          mRenderer = new MyRenderer(this); 
          mView.setRenderer(mRenderer);
          setContentView(mView); 
//        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);
        }

        public boolean onTouchEvent(MotionEvent event) {
          return mRenderer.onTouchEvent(event); 
        }
}

這邊會收TouchEvent並傳給MyRenderer，去處理相關事件.

MyRenderer.java

package com.example.gl_lines_test;

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

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import android.content.Context;
import android.opengl.GLSurfaceView.Renderer;
import android.view.MotionEvent;

public class MyRenderer implements Renderer{
    private Context mContext; 
    private FloatBuffer mVertexBuffer = null; 
    private ShortBuffer mTriangleBorderIndicesBuffer = null; 
    private int mNumOfTriangleBorderIndices = 0;   
  
    public float mAngleX = 0.0f; 
    public float mAngleY = 0.0f; 
    public float mAngleZ = 0.0f; 
    private float mPreviousX; 
    private float mPreviousY; 
    private final float TOUCH_SCALE_FACTOR = 0.6f;
    private final float AXIS_SCALE_FACTOR = 1.5f;
    private final int AXIS_WIDTH = 10;
    private final float POINT_WIDTH = 10f;
  
    public MyRenderer(Context context) { 
      mContext = context; 
    } 

    public void onDrawFrame(GL10 gl) { 
      gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT); 
      gl.glMatrixMode(GL10.GL_MODELVIEW); 
      gl.glLoadIdentity();
  
      gl.glTranslatef(0.0f, 0.0f, -3.0f); 
      gl.glRotatef(mAngleX, 1, 0, 0); 
      gl.glRotatef(mAngleY, 0, 1, 0); 
      gl.glRotatef(mAngleZ, 0, 0, 1); 
      gl.glScalef(AXIS_SCALE_FACTOR, AXIS_SCALE_FACTOR, AXIS_SCALE_FACTOR);
  
      gl.glVertexPointer(3, GL10.GL_FLOAT, 0, mVertexBuffer); 
  
      gl.glLineWidth(AXIS_WIDTH);

      // Draw x line
      // Set line color to green     
      gl.glColor4f(0.0f, 1.0f, 0.0f, 1.0f); 
      gl.glDrawArrays(GL10.GL_LINES, 0, 2);
      gl.glDrawArrays(GL10.GL_LINES, 9, 2);
      gl.glDrawArrays(GL10.GL_LINES, 11, 2);

      // Draw y line
      // Set line color to red
      gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
      gl.glDrawArrays(GL10.GL_LINES, 2, 2);
      gl.glDrawArrays(GL10.GL_LINES, 13, 2);
      gl.glDrawArrays(GL10.GL_LINES, 15, 2);

      // Draw z lines
      // Set line color to blue
      gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
      gl.glDrawArrays(GL10.GL_LINES, 4, 2);
      gl.glDrawArrays(GL10.GL_LINES, 17, 2);
      gl.glDrawArrays(GL10.GL_LINES, 19, 2);

      gl.glPointSize(POINT_WIDTH);
      gl.glColor4f(1.0f, 0.0f, 1.0f, 1.0f);
      gl.glDrawArrays(GL10.GL_POINTS, 5, 3);
    } 

    public void onSurfaceCreated(GL10 gl, EGLConfig config) { 
      gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f); 
      gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST); 
      gl.glEnable(GL10.GL_DEPTH_TEST); 
  
      gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); 
  
      // Get all the buffers ready
      setAllBuffers();
    } 

    public void onSurfaceChanged(GL10 gl, int width, int height) { 
      gl.glViewport(0, 0, width, height); 
      float aspect = (float)width / height; 
      gl.glMatrixMode(GL10.GL_PROJECTION); 
      gl.glLoadIdentity();
      gl.glFrustumf(-aspect, aspect, -1.0f, 1.0f, 1.0f, 10.0f); 
    } 
  
    private void setAllBuffers(){
          // Set vertex buffer
          float vertexlist[] = { 
           -1.0f, 0.0f, 0.0f,   //0 X-axis
            1.0f, 0.0f, 0.0f,   //1 X-axis
            0.0f, 1.0f, 0.0f,   //2 Y-axis
            0.0f,-1.0f, 0.0f,   //3 Y-axis
            0.0f, 0.0f, 1.0f,   //4 Z-axis
            0.0f, 0.0f,-1.0f,   //5 Z-axis
            -0.5f , -0.5f, 0.0f ,   //6 point 1
            0.5f, -0.5f, 0.0f ,    //7 point 2
            0.0f , 0.5f, 0.0f ,      //8 point 3
            0.9f, 0.1f, 0.0f,    //9  X-axis
            1.0f, 0.0f, 0.0f,    //10 X-axis
            0.9f,-0.1f, 0.0f,    //11 X-axis
            1.0f, 0.0f, 0.0f,    //12 X-axis
            -0.1f, 0.9f, 0.0f,   //13 Y-axis
            0.0f, 1.0f, 0.0f,    //14 Y-axis
            0.1f, 0.9f, 0.0f,     //15 Y-axis
            0.0f, 1.0f, 0.0f,    //16 Y-axis
            0.1f, 0.0f, 0.9f,    //17 Z-axis
            0.0f, 0.0f, 1.0f,    //18 Z-axis
            -0.1f,0.0f, 0.9f,    //19 Z-axis
            0.0f, 0.0f, 1.0f,    //20 Z-axis
          };

          ByteBuffer vbb = ByteBuffer.allocateDirect(vertexlist.length * 4); 
          vbb.order(ByteOrder.nativeOrder());
          mVertexBuffer = vbb.asFloatBuffer();
          mVertexBuffer.put(vertexlist); 
          mVertexBuffer.position(0); 
      } 

    public boolean onTouchEvent(MotionEvent e) { 
      float x = e.getX();
      float y = e.getY();
      switch (e.getAction()) { 
       case MotionEvent.ACTION_MOVE: 
          float dx = x - mPreviousX; 
          float dy = y - mPreviousY; 
          mAngleY = (mAngleY + (int)(dx * TOUCH_SCALE_FACTOR) + 360) % 360; 
          mAngleX = (mAngleX + (int)(dy * TOUCH_SCALE_FACTOR) + 360) % 360; 
          break; 
      } 
      mPreviousX = x; 
      mPreviousY = y; 
      return true; 
    } 
}

好，因為我不知道怎麼把程式碼分開貼，
所以大概挑幾個部分講 XD

1. import有兩行被我標了黃色
那是一個容易import錯library的地方，
如果你的code一直有問題，
可能可以看看是不是選錯library.

2. 為了改code跟視覺上調整方便，
建議座標範圍都正規劃，再用factor、scale去做調整.

3. 拿繪製 x軸來講

      // Draw x line
      // Set line color to green     
      gl.glColor4f(0.0f, 1.0f, 0.0f, 1.0f);

      gl.glDrawArrays(GL10.GL_LINES, 0, 2);
      gl.glDrawArrays(GL10.GL_LINES, 9, 2);
      gl.glDrawArrays(GL10.GL_LINES, 11, 2);

glColor4f是指定顏色，有興趣可以看一下android developers的介紹

gl.glDrawArrays(GL10.GL_LINES, 0, 2);

第一個欄位是指定要畫的型態是什麼，可以指定點啊、線blablabla，
然後 "0, 2"是指：
從vertexlist[0]開始數2個element進行繪製，
換言之這邊會繪製vertexlist[0]與vertexlist[1].

規則大概就是這樣～
我想應該還有些其他的繪製方式，
但如果只是要畫三軸的話這樣很快！
下次來寫畫球好了.
掰掰～～～

Reference: OpenGL ES for Android Graphics Programming

Obsession :P

2016年7月24日星期日

[教學][android] OpenGL ES 繪製座標軸

1 則留言:

About Mich

2016年7月24日 星期日

[教學][android] OpenGL ES 繪製座標軸

1 則留言:

2016年7月24日星期日