3D Views: Source Code

◄Page 2►

App Description - 3D Views App Grid View

The 3D Views app allows you to view scenes in three dimensions. Swipe left and right to view in 360⁰. Tap the scene to see the next scene.

This grid view allows developers to orient in three dimensions. Once you're viewing the front, right, left, top and bottom correctly in the application then you know the model view projection matrices are correct.

Introduction

The CubeViewGLSurfaceView class derives from Android's GLSurfaceView, which provides an OpenGL ES surface for rendering. This Java class creates the surface, implements a method that responds to touch events and a method capable of assigning a renderer to the view.

The touch event method determines if the viewer swipes or taps. Tap events change views. Swipe events rotate the view.

Java GLSurfaceView Code

CubeViewGLSurfaceView Subclass of GLSurfaceView

package com.seventhundersoftware.cubeview;

import android.content.Context;
import android.opengl.GLSurfaceView;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.util.Log;
import static com.seventhundersoftware.cubeview.CubeViewConstants.*;

/***
 * Copyright (c) 2021 Amy Washburn Butler
 * GNU General Public License v3.0

 The CubeViewGLSurfaceView class derives from Android's GLSurfaceView,
 which provides an OpenGL ES surface for rendering.
 This code creates the surface, implements a method that responds 
 to touch events and a method capable of assigning a renderer to the view.
*/
public class CubeViewGLSurfaceView extends GLSurfaceView
{	
private CubeViewRenderer mRenderer = null;
	
// Offsets for touch events	 
private float mPriorSwipeX = 0;
private float mPriorSwipeY = 0;
private float mPriorTouchDownX = 0;
private float mPriorTouchDownY = 0;

private static final String TAG="CubeViewGLSurfaceView()";
private Context mContext = null;
private float mDensity;
private int iBtnClick = I_ISLANDS;
        	
/***
Constructor
@param context: this Context.
*/	
public CubeViewGLSurfaceView(Context context)
{
super(context);
}
	
/***
Constructor overload
@param context: This Context
@param attrs: Set of attributes for canvas.
*/	
public CubeViewGLSurfaceView(Context context, AttributeSet attrs)
{
super(context, attrs);
this.mContext = context;
}

/***
OpenGL ES canvas responds
to touch events.
Here we can rotate the view based on the user's
touch position along the Y axis. However
we're also the X axis touch point. 
X and Y values might prove useful
if we want to see the top and bottom, not
just left and right sides of a view.
@return boolean
	*/
@Override
public boolean onTouchEvent(MotionEvent event) 
{

if (event != null)
{			
float x = event.getX();
float y = event.getY();
int iEvent = event.getAction();
Log.d(TAG,"onTouchEvent event action:"+iEvent);
		
if (iEvent == MotionEvent.ACTION_MOVE)
{
		
if (mRenderer != null) {
float deltaX = (x - mPriorSwipeX) / mDensity / 2f;
float deltaY = (y - mPriorSwipeY) / mDensity / 2f;
float absY = Math.abs(y);
mRenderer.mFloatDeltY = deltaY;
}

}
		
// Change views if player
// tapped down and up in same location.
else if (iEvent == MotionEvent.ACTION_UP){
		
Log.d(TAG,"onTouch Action up: "+iEvent);
Log.d(TAG,"current x:"+x+",y:"+y+",priorX:"+this.mPriorTouchDownX+",priorY:"+this.mPriorTouchDownY);
				
if(x == this.mPriorTouchDownX && y == this.mPriorTouchDownY){
	
// Change the view:
this.assignView();
}
			
}
	
else if(iEvent == MotionEvent.ACTION_DOWN) {
this.mPriorTouchDownX = x;
this.mPriorTouchDownY = y;
}
			
mPriorSwipeX = x;
mPriorSwipeY = Math.abs(y);
			
return true;
	
}
	
else
{
return super.onTouchEvent(event);
}
			
}

/***
Assign our CubeViewRenderer
@param density: float
*/
public void setRenderer(CubeViewRenderer renderer, float density)
{
// Don't set the renderer twice:
if(mRenderer != null) return;
mRenderer = renderer;
mDensity = density;
super.setRenderer(renderer);
}

@Override
public void onPause(){
super.onPause();
}

/**
Display the new view.
Yet first wait to load the
texture.
We have at least two threads.
One thread displays the main thread.
The second thread displays the 3D OpenGL ES data.
**/
public void assignView(){

Log.d(TAG,"assignView() surfaceView.setTextView:");

iBtnClick++;

if(iBtnClick >= I_IMAGES){
iBtnClick = I_ISLANDS;
}

mRenderer.getImage(iBtnClick);

mRenderer.setTexView();

this.queueEvent(new Runnable()
{
@Override
public void run()
{
if(mRenderer != null){
Log.d(TAG,"surfaceview run():");
mRenderer.getImage(iBtnClick);
mRenderer.setTexView();
}
}
});

}
	
// Getter needed to
// save the current view.
public int getView() {
return this.iBtnClick;
}
}

Summary

The CubeViewGLSurfaceView class derives from Android's GLSurfaceView, which provides an OpenGL ES surface for rendering. This Java class creates the surface, implements a method that responds to touch events and a method capable of assigning a renderer to the view.

The touch event method determines if the viewer swipes or taps. Tap events change views. Swipe events rotate the view.

Java & OpenGL ES

This set of pages include Android Java, combined with OpenGL ES, to display a set of simple three dimensional views. The views apply a unique, simple concept to render 3D backgrounds, without Skyboxes or time consuming shader switching. Each view's contained in one graphic, with room for other sprites and meshes.

Java and OpenGL ES source code was ported from WebGL with only minor changes. The book, 3D Scenes: Learn WebGL Book 3, explains implementation and graphics preparation for the WebGL app, in detail.

Tags