터치 이벤트에 응답 :: OPEN GL ES[SSISO Community]
 
SSISO 카페 SSISO Source SSISO 구직 SSISO 쇼핑몰 SSISO 맛집
추천검색어 : JUnit   Log4j   ajax   spring   struts   struts-config.xml   Synchronized   책정보   Ajax 마스터하기   우측부분

OPEN GL ES
[1]
등록일:2020-01-09 17:18:31 (0%)
작성자:
제목:터치 이벤트에 응답

회전하는 삼각형과 같이 미리 설정된 프로그램에 따라 객체를 움직이게 만들면 관심을 끄는 데 유용하지만, 사용자가 OpenGL ES 그래픽과 상호작용하게 만들려면 어떨까요? OpenGL ES 애플리케이션을 터치에 반응하여 상호작용하게 만들려면 GLSurfaceView의 구현을 확장하여 onTouchEvent()가 터치 이벤트를 수신 대기하도록 재정의하는 것이 핵심입니다.

이 학습 과정에서는 사용자가 OpenGL ES 객체를 회전할 수 있도록 터치 이벤트를 수신 대기하는 방법을 보여줍니다.

터치 리스너 설정

OpenGL ES 애플리케이션이 터치 이벤트에 응답하게 만들려면 GLSurfaceView 클래스에 onTouchEvent() 메소드를 구현해야 합니다. 아래 예제 구현에서는 MotionEvent.ACTION_MOVE 이벤트를 수신 대기하고 도형의 회전 각도로 변환하는 방법을 보여줍니다.

    private const val TOUCH_SCALE_FACTOR: Float = 180.0f / 320f
   
...
   
private var previousX: Float = 0f
   
private var previousY: Float = 0f

   
override fun onTouchEvent(e: MotionEvent): Boolean {
       
// MotionEvent reports input details from the touch screen
       
// and other input controls. In this case, you are only
       
// interested in events where the touch position changed.

       
val x: Float = e.x
       
val y: Float = e.y

       
when (e.action) {
           
MotionEvent.ACTION_MOVE -> {

               
var dx: Float = x - previousX
               
var dy: Float = y - previousY

               
// reverse direction of rotation above the mid-line
               
if (y > height / 2) {
                    dx
*= -1
               
}

               
// reverse direction of rotation to left of the mid-line
               
if (x < width / 2) {
                    dy
*= -1
               
}

                renderer
.angle += (dx + dy) * TOUCH_SCALE_FACTOR
                requestRender
()
           
}
       
}

        previousX
= x
        previousY
= y
       
return true
   
}
   
    private final float TOUCH_SCALE_FACTOR = 180.0f / 320;
   
private float previousX;
   
private float previousY;

   
@Override
   
public boolean onTouchEvent(MotionEvent e) {
       
// MotionEvent reports input details from the touch screen
       
// and other input controls. In this case, you are only
       
// interested in events where the touch position changed.

       
float x = e.getX();
       
float y = e.getY();

       
switch (e.getAction()) {
           
case MotionEvent.ACTION_MOVE:

               
float dx = x - previousX;
               
float dy = y - previousY;

               
// reverse direction of rotation above the mid-line
               
if (y > getHeight() / 2) {
                  dx
= dx * -1 ;
               
}

               
// reverse direction of rotation to left of the mid-line
               
if (x < getWidth() / 2) {
                  dy
= dy * -1 ;
               
}

                renderer
.setAngle(
                        renderer
.getAngle() +
                       
((dx + dy) * TOUCH_SCALE_FACTOR));
                requestRender
();
       
}

        previousX
= x;
        previousY
= y;
       
return true;
   
}
   

회전 각도를 계산한 다음 이 메서드에서는 requestRender()를 호출하여 프레임을 렌더링할 때임을 렌더기에 알립니다. 회전이 변경되지 않는 한 프레임을 다시 그릴 필요가 없으므로 이 예에서는 이 접근 방식이 가장 효율적입니다. setRenderMode() 메서드를 사용하여 데이터를 변경할 때만 렌더기가 다시 그리도록 요청하지 않는 한, 효율성에 영향을 미치지 않으므로 렌더기에서 이 행의 주석 처리를 삭제하세요.

    class MyGlSurfaceView(context: Context) : GLSurfaceView(context) {

       
init {
           
// Render the view only when there is a change in the drawing data
            renderMode
= GLSurfaceView.RENDERMODE_WHEN_DIRTY
       
}
   
}
   
    public MyGLSurfaceView(Context context) {
       
...
       
// Render the view only when there is a change in the drawing data
        setRenderMode
(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
   
}
   

회전 각도 노출

위의 예제 코드에서는 공개 멤버를 추가하여 렌더기를 통해 회전 각도를 노출해야 합니다. 렌더기 코드는 애플리케이션의 기본 사용자 인터페이스 스레드와 별개인 스레드에서 실행되므로 이 공개 변수를 volatile로 선언해야 합니다. 다음 코드에서는 변수를 선언하고 getter와 setter 쌍을 노출합니다.

    class MyGLRenderer4 : GLSurfaceView.Renderer {

       
@Volatile
       
var angle: Float = 0f
   
}
   
    public class MyGLRenderer implements GLSurfaceView.Renderer {
       
...

       
public volatile float mAngle;

       
public float getAngle() {
           
return mAngle;
       
}

       
public void setAngle(float angle) {
            mAngle
= angle;
       
}
   
}
   

회전 적용

터치 입력을 통해 생성된 회전을 적용하려면 각도를 생성하는 코드를 주석 처리하고 터치 입력을 통해 생성된 각도를 포함하는 변수를 추가합니다.

    override fun onDrawFrame(gl: GL10) {
       
...
       
val scratch = FloatArray(16)

       
// Create a rotation for the triangle
       
// long time = SystemClock.uptimeMillis() % 4000L;
       
// float angle = 0.090f * ((int) time);
       
Matrix.setRotateM(rotationMatrix, 0, angle, 0f, 0f, -1.0f)

       
// Combine the rotation matrix with the projection and camera view
       
// Note that the mvpMatrix factor *must be first* in order
       
// for the matrix multiplication product to be correct.
       
Matrix.multiplyMM(scratch, 0, mvpMatrix, 0, rotationMatrix, 0)

       
// Draw triangle
        triangle
.draw(scratch)
   
}
   
    public void onDrawFrame(GL10 gl) {
       
...
       
float[] scratch = new float[16];

       
// Create a rotation for the triangle
       
// long time = SystemClock.uptimeMillis() % 4000L;
       
// float angle = 0.090f * ((int) time);
       
Matrix.setRotateM(rotationMatrix, 0, mAngle, 0, 0, -1.0f);

       
// Combine the rotation matrix with the projection and camera view
       
// Note that the vPMatrix factor *must be first* in order
       
// for the matrix multiplication product to be correct.
       
Matrix.multiplyMM(scratch, 0, vPMatrix, 0, rotationMatrix, 0);

       
// Draw triangle
        mTriangle
.draw(scratch);
   
}
   

위에 설명된 단계를 완료하고 나면 프로그램을 실행하고 화면 위에서 손가락을 드래그하여 각도를 회전합니다.

그림 1. 터치 입력으로 회전되는 각도(원은 터치 위치 표시).

[본문링크] 터치 이벤트에 응답
[1]
코멘트(이글의 트랙백 주소:/cafe/tb_receive.php?no=34917
작성자
비밀번호

 

SSISOCommunity

[이전]

Copyright byCopyright ⓒ2005, SSISO Community All Rights Reserved.