Burning Flame 2.0

Skill LevelArea of FocusSoftware ToolsOperating System
IntermediateEmbedded, GamingAdreno SDKAndroid
Develop a demo app that displays a variable-color flame model using the Qualcomm® Adreno™ GPU SDK.
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.
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 Profiler
  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

Burning Flame Color Change 1

A beautiful variable-color flame model developed using Adreno GPU SDK

Burning Flame Color Change 2

A beautiful variable-color flame model developed using Adreno GPU SDK

Burning Flame Color Change 3

A beautiful variable-color flame model developed using Adreno GPU SDK
NameTitle/Company
ZhenThundersoft
RongThundersoft
WuThundersoft
BoThundersoft
QinThundersoft
XuThundersoft