Burning Flame using GPU

Skill LevelArea of FocusOperating SystemSoftware
IntermediateEmbedded, GamingAndroidSnapdragon Profiler, Adreno GPU SDK
Develop a demo app that displays a flame model using the Qualcomm® Adreno™ GPU SDK.
The Adreno GPU has powerful graphics performance. The main objective of this project is to demonstrate this performance by creating a simulated flame application and use the Snapdragon® Profiler 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()
{
&nbps;&nbps; TexCoords = vertex.zw;
&nbps;&nbps; ParticleColor = color; //vec4(0.999995, 0.999995, 0.5, 0.0);
&nbps;&nbps; #ifdef ENABLE_VERTEX_OFFSET
&nbps;&nbps; gl_Position = projection * vec4(((vertex.xy - 0.5) * scale) + offset, 0.0, 1.0);
&nbps;&nbps; #else //!ENABLE_VERTEX_OFFSET
&nbps;&nbps;&nbps;gl_Position = projection * vec4((vertex.xy * scale) + offset, 0.0, 1.0);
&nbps;&nbps;#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 the 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 analyze 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
GPU and CPU utilizations as seen in the Snapdragon Profiler tool

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
OpenGL analysis in Snapdragon ProfilerA beautiful flame model obtained when running on the GPU
  1. Download code from GitHub - https://github.com/ThunderSoft-XA/Adreno-Burning-Flame.git
  2. Install Adreno GPU SDK v5.0
  3. Install Android NDK r17b
  4. Install Apache Ant 1.9.14
  5. Install Snapdragon Profiler
  6. Compile APK source code and install it to android device
  7. Run the APK

The performance indicators, can be seen in Snapdragon Profiler

NameTitle/Company
ZhenThundersoft
RongThundersoft
WuThundersoft
BoThundersoft
QuinThundersoft