Burning Flame 2.0

Adreno GPU has powerful graphics performance. A simulated flame application is developed to demonstrate this performance, and Snapdragon® Profiler Software is used to analyze CPU and GPU utilization.

Deploying the project

On a windows PC, download and install the following software.

1. Download Adreno GPU SDK v5.0 from https://developer.qualcomm.com/software/adreno-gpu-sdk, and install
2. Download Android NDK r17b and install
3. Download Apache Ant 1.9.14 and install
4. Download Snapdragon® Profiler from https://developer.qualcomm.com/software/snapdragon-profiler, and install
5. Realize the flame shader.
6. Call the flame shader in the APK.
7. Display FPS in the APK.
8. Realize required functions step by step.
9. Choose android platform and connect android device, then compile the project and install the APK.
10. The performance indicators can be viewed with Snapdragon Profiler.

How does it work?

1. How to realize the flame shader?

In order to allow OpenGL to achieve flame drawing, we must first create a shader.

The code below creates vertex shader and fragment shader respectively.

Vertex Shader:

#version 300 es

layout (location = 0) in vec4 vertex; // <vec2 position, vec2 texCoords>

out vec2 TexCoords;

out vec4 ParticleColor;

uniform mat4 projection;

uniform vec2 offset;

uniform vec4 color;

uniform float scale;

void main()

{

TexCoords = vertex.zw;

ParticleColor = color; //vec4(0.999995, 0.999995, 0.5, 0.0);

#ifdef ENABLE_VERTEX_OFFSET

gl_Position = projection * vec4(((vertex.xy - 0.5) * scale) + offset, 0.0, 1.0);

#else //!ENABLE_VERTEX_OFFSET

gl_Position = projection * vec4((vertex.xy * scale) + offset, 0.0, 1.0);

#endif //ENABLE_VERTEX_OFFSET

Fragment Shader:

#version 300 es

in vec2 TexCoords;

in vec4 ParticleColor;

out vec4 color;

uniform sampler2D sprite;

void main()

{

#if 1

color = (texture(sprite, TexCoords) * ParticleColor);

#else

color = ParticleColor;

#endif

}

2. How to achieve the display of titles, menus, texts, etc?

Call the CFrmFontGLES and CFrmUserInterfaceGLES classes provided by the SDK framework to display the title, menu and text.

// Create the font

m_pFont = new CFrmFontGLES();

if( FALSE == m_pFont->Create( "Samples/Fonts/Tuffy12.pak" ) )

{

FrmLogMessage("ERROR: create m_pFont failed\n");

return FALSE;

}

// Load the packed resources

CFrmPackedResourceGLES resource;

if( FALSE == resource.LoadFromFile( "Samples/Textures/Logo.pak" ) )

{

return FALSE;

}

// Create the logo texture

m_pLogoTexture = resource.GetTexture( "Logo" );

// Setup the user interface

if( FALSE == m_UserInterface.Initialize( m_pFont, g_strWindowTitle ) )

{

return FALSE;

}

m_UserInterface.AddOverlay( m_pLogoTexture->m_hTextureHandle, -5, -5, m_pLogoTexture->m_nWidth, m_pLogoTexture->m_nHeight );

m_UserInterface.AddTextString( (char *)"Press \200 for Help", 1.0f, -1.0f );

The above code creates the CFrmFontGLES and CFrmUserInterfaceGLES objects, respectively, where the CFrmUserInterfaceGLES object can call the AddOverlay and AddTextString methods to display icons and text.

3. How to display the frame rate?

Create a CFrmTimer class object and call the CFrmUserInterfaceGLES object in the render function to display the frame rate.

// Update the timer

m_Timer.MarkFrame();

// Render the user interface

m_UserInterface.Render( m_Timer.GetFrameRate() );

4. How to compile and generate APK?

Compile the source code by using the commands below:

$ cd jni/

$ ndk-build -B

$ cd ..

Update the resource file

$ ./InstallAssets.sh

$ android update project -p . -t android-20

Generate the APK file

$ ant debug

5. How to use Snapdragon Profiler software to analysis CPU and GPU utilization?

1. Connect the phone to Windows PC and run Snapdragon Profiler software.
2. Select Realtime mode.
3. Select CPU Utilization and GPU Utilization in process list, to see the real-time utilization results in a window.

6. How to use Snapdragon Profiler software to do OpenGL analysis?

1. Connect the phone to Windows PC and run Snapdragon Profiler software.
2. Change layout setting to OpenGL.
3. Select the Snapshot Capture mode.
4. Take Snapshot.