Androids in Dolphinariums
Greetings to all lovers of those devices that fit in your pocket, as well as those who hold their pockets wider than 7 ". Now we are going to learn the art of programming cross-platform graphical applications, that is, applications that run on a mobile platform (Android smartphones and tablets) and under Windows (stationary PCs, laptops, netbooks, tablets). At the same time, our applications will be graphical, the graphics are based on OpenGL (OGL) and its mobile version OpenGL ES (GLES). I use Embarcadero Delphi XE7. An important feature is in this project I do not use the platform FM (FireMonkey), we will write everything ourselves and from scratch, like in the good old days.
I propose to immediately divide the work in half:
- I am writing a cross-platform graphic library, reviewing examples of its use, writing down implementation details, answering questions;
- your part is no less responsible: from you I need a test demos on various mobile devices, performance reports, reviews and critics, new ideas andfresh meat new users of both libraries and applications themselves.
1. First demo
Android mc.apk 3.8 MB yadi.sk/d/n1wDuX1RhC4QX
Windows mc.zip 1.9 MB yadi.sk/d/tBKQxaV7ff8KW
Source codes in repo: sourceforge.net/p/delphioga/code/ci/default/tree
In the first version, the program is not tricky - it simply displays 4096 angular colored balls on the screen and allows you to fly past them in the “free camera” mode. I painted the spheres according to the RGB color space principle, they also rotate. In this example, I want to consider methods for constructing 3D primitives (in particular, spheres) and techniques for optimizing rendering (Frustum ulling, detailing objects).
But we can not do without a small introductory part.
')
2. Operating instructions, Android smartphone / tablet
1. Install mc.apk, this is the program installation archive. If you have questions on how to do this, I’m ready to help.
2. When installing apk, a warning is possible that the program requires access to the Internet. In fact, the program is compiled in Debug mode, so it potentially needs access to the local network for the debugger to work (gdbserver) and the logcat log console. Logs we still need. From the program itself to the network, I do not appeal in any way, there is only drawing graphics on the screen.
3. After installation, you will add a new shortcut on the Desktop “mc”. Run the program. We admire the splash screen - the light of the FM (I have not changed the icons of the mobile project Delphi by default yet). Pay attention to the launch time of the application, how much time do you have in seconds and their shares? We can compare this with the download times of examples of FM applications, so far the comparison is in our favor.
4. Here you are, welcome. Use your fingers and touchscreen to change your gaze direction and movement. At the top right there are a couple of on-screen buttons - back and forth. If you have 2 hands, you can move and rotate at the same time. To do this, you need a certain skill, something that, but I did not promise a simple life.
5. When switching to another application or “falling asleep” of a tablet (let's call a mobile device a tablet, because I have a tablet), the program will stop drawing graphics (the GLES context and the application window itself are deleted, as it should be done on Android), but the program will not stop work When switching back to the app or “waking up” the tablet, the window and context will be recreated, we will continue our journey from the place of the stop. You should pay attention to this nuance when testing, some games do not know how to “recover” correctly, but we should be able to.
6. Rotate the tablet horizontally, then vertically. The operation of the application should be checked in each of these two modes. Of course, such a focus will work only if you have the orientation of the device display set to “auto”.
7. Quit the demo is easy - press the system back button.
8. Write in the comments to the article the type of mobile device that you used (manufacturer, model), I will try to find its characteristics, types of CPU and GPU, OS version. I include this data in the hardware.txt file in the repo.
3. Instructions for use, Windows
1. Unpack the zip file. We are not surprised at the size of the exe file, the demo is compiled in Debug mode, in the release exe weighs 1.5 MB. Run mc.exe.
There will be no system warnings about using the network, as in Android, because the network is not used in the demo, the PC debugger and logs work locally.
2. Here you are, welcome. To change the direction of gaze and direction of movement, “drag” the screen while holding the left mouse button (LMB). To move in space, the [WASD] keys on the keyboard (either the arrows or the arrows on the NumPad) work. Screen buttons for moving back and forth too, they are clickable. [F1] displays help, [ESC] allows you to exit the program.
3. Pay attention to the second window (when you start the program, two windows appear on the control panel), this is the debug console. We will look at a similar console for Android (logcat) later. After the GPU Vendor, Renderer (the firm / type of your video card), it writes the Open GL version. Let's just say, if the OpenGL version is below 3.0, then some future library features will not work on your old video card. However, an application can contain 2 branches of the implementation of such features and work in any case.
4. VSYNC is turned off in this example, FPS can be much more than 60 Hz (try to turn away from visible objects), the load on the GPU and CPU is maximum. I do this to test the frame rendering speed, if you turn on VSYNC, the load will become normal.
4. Debug output to screen
In the screenshots at the top left there are some yellow letters and numbers.
FPS is the average number of frames per second, our main tool in evaluating drawing performance. Under Android, VSYNC is enabled, FPS is limited by the refresh rate of the screen (60 Hz), however, I adjusted the load on the GPU so much in the demo that on most mobile devices FPS will “subside”. It's not scary yet control and animation remain adequate. Under Windows, VSYNC is turned off; FPS has no limit;
TDF - the average time of rendering one frame in milliseconds, in essence, the inverse of the FPS; it is necessary to understand “timing” - what order do we use to draw a frame; with FPS 60 Hz, this time is about 17 ms;
NFR - the number of rendered frames from the start of the application; with an FPS of 60 Hz, this number will reach 60 in the first second;
T is the time in ms from the start of the application, I use it as an argument for the animation functions, in the example the rotation of the spheres depends on it;
POS - coordinates of the camera in the 3D world of XYZ, at the start of the axis are as follows: X to the right, Y up, Z to us;
AH, AV - the angles of rotation of the camera relative to the horizontal and vertical in degrees; it is better to talk about the angle of heel separately;
N is the total number of objects in the Universe;
NV - as many objects in whole or in part fall into the field of visibility (frustum, truncated pyramid of the camera's field of view);
HD - so many near objects are displayed with slightly better quality of drawing, distant objects are drawn simpler;
SCR - screen resolution.
5. What is the development process?
I connect the tablet to the PC under Windows with a USB cable (it can also be via Wi-Fi). First, I write the platform-dependent code of some functions for Android, I run the program on the tablet. This part of the work requires a lot of patience, the application compiles for a relatively long time and runs on the tablet. Debugging is available (breakpoints, step-by-step execution, viewing the status of variables). I also use the debug output of the application in logcat, I can watch the logs directly on the PC in real time. When it worked on the tablet, I write a platform-specific version of the function code for Windows, this is easier. After this, the most interesting begins - I write the main part of the program with a universal code causing platform functions of the same name, check on the PC and only occasionally upload it to the tablet, as a rule, everything works there.
6. Under the hood
Let's look at the source code a little bit. In the common folder I own the library itself. Let's start with the file Draw.pas.
What are cross-platform graphics based on? Under Windows, I use the OpenGL.pas module, but only those functions that have analogues in GLES for Android (modules Androidapi.Egl.pas, Androidapi.Gles.pas, Androidapi.Gles2.pas).
Where OGL and GLES match the differences in syntax is small, except that glOrtho had to trim. Using conditional compilation directives like {$ IFDEF ANDROID} and {$ IFDEF MSWINDOWS}, we will describe a platform-dependent implementation.
What else does not match? On GLES there is no glBegin / glEnd and, accordingly, the entire family of related functions. It's not scary, we will draw in OGL 2.0 style by passing pointers to arrays of vertices at a time (normals, colors, texture coordinates). For example, one simple triangle can be drawn like this (the color is current, there are no normals or textures):
To draw a set of triangles of a 3D shape, you should not call the Triangle procedure many times. You should add all the vertices of all triangles into one array and draw them with a single call to glDrawArrays. This function is used in the current demo to draw each sphere, both with GL_TRIANGLES and GL_TRIANGLE_STRIP:
At this point we will stop, for the first acquaintance this introductory part should suffice. If you like it - I already have a continuation outline of the article.
PS / 05.06.2015
The loading of 3D models in obj format has been added to the library.
An additional source of information on the topic: forum.sources.ru/index.php?showtopic=401121
I propose to immediately divide the work in half:
- I am writing a cross-platform graphic library, reviewing examples of its use, writing down implementation details, answering questions;
- your part is no less responsible: from you I need a test demos on various mobile devices, performance reports, reviews and critics, new ideas and
1. First demo
Android mc.apk 3.8 MB yadi.sk/d/n1wDuX1RhC4QX
Windows mc.zip 1.9 MB yadi.sk/d/tBKQxaV7ff8KW
Source codes in repo: sourceforge.net/p/delphioga/code/ci/default/tree
In the first version, the program is not tricky - it simply displays 4096 angular colored balls on the screen and allows you to fly past them in the “free camera” mode. I painted the spheres according to the RGB color space principle, they also rotate. In this example, I want to consider methods for constructing 3D primitives (in particular, spheres) and techniques for optimizing rendering (Frustum ulling, detailing objects).
But we can not do without a small introductory part.
')
2. Operating instructions, Android smartphone / tablet
1. Install mc.apk, this is the program installation archive. If you have questions on how to do this, I’m ready to help.
2. When installing apk, a warning is possible that the program requires access to the Internet. In fact, the program is compiled in Debug mode, so it potentially needs access to the local network for the debugger to work (gdbserver) and the logcat log console. Logs we still need. From the program itself to the network, I do not appeal in any way, there is only drawing graphics on the screen.
3. After installation, you will add a new shortcut on the Desktop “mc”. Run the program. We admire the splash screen - the light of the FM (I have not changed the icons of the mobile project Delphi by default yet). Pay attention to the launch time of the application, how much time do you have in seconds and their shares? We can compare this with the download times of examples of FM applications, so far the comparison is in our favor.
4. Here you are, welcome. Use your fingers and touchscreen to change your gaze direction and movement. At the top right there are a couple of on-screen buttons - back and forth. If you have 2 hands, you can move and rotate at the same time. To do this, you need a certain skill, something that, but I did not promise a simple life.
5. When switching to another application or “falling asleep” of a tablet (let's call a mobile device a tablet, because I have a tablet), the program will stop drawing graphics (the GLES context and the application window itself are deleted, as it should be done on Android), but the program will not stop work When switching back to the app or “waking up” the tablet, the window and context will be recreated, we will continue our journey from the place of the stop. You should pay attention to this nuance when testing, some games do not know how to “recover” correctly, but we should be able to.
6. Rotate the tablet horizontally, then vertically. The operation of the application should be checked in each of these two modes. Of course, such a focus will work only if you have the orientation of the device display set to “auto”.
7. Quit the demo is easy - press the system back button.
8. Write in the comments to the article the type of mobile device that you used (manufacturer, model), I will try to find its characteristics, types of CPU and GPU, OS version. I include this data in the hardware.txt file in the repo.
3. Instructions for use, Windows
1. Unpack the zip file. We are not surprised at the size of the exe file, the demo is compiled in Debug mode, in the release exe weighs 1.5 MB. Run mc.exe.
There will be no system warnings about using the network, as in Android, because the network is not used in the demo, the PC debugger and logs work locally.
2. Here you are, welcome. To change the direction of gaze and direction of movement, “drag” the screen while holding the left mouse button (LMB). To move in space, the [WASD] keys on the keyboard (either the arrows or the arrows on the NumPad) work. Screen buttons for moving back and forth too, they are clickable. [F1] displays help, [ESC] allows you to exit the program.
3. Pay attention to the second window (when you start the program, two windows appear on the control panel), this is the debug console. We will look at a similar console for Android (logcat) later. After the GPU Vendor, Renderer (the firm / type of your video card), it writes the Open GL version. Let's just say, if the OpenGL version is below 3.0, then some future library features will not work on your old video card. However, an application can contain 2 branches of the implementation of such features and work in any case.
4. VSYNC is turned off in this example, FPS can be much more than 60 Hz (try to turn away from visible objects), the load on the GPU and CPU is maximum. I do this to test the frame rendering speed, if you turn on VSYNC, the load will become normal.
4. Debug output to screen
In the screenshots at the top left there are some yellow letters and numbers.
FPS is the average number of frames per second, our main tool in evaluating drawing performance. Under Android, VSYNC is enabled, FPS is limited by the refresh rate of the screen (60 Hz), however, I adjusted the load on the GPU so much in the demo that on most mobile devices FPS will “subside”. It's not scary yet control and animation remain adequate. Under Windows, VSYNC is turned off; FPS has no limit;
TDF - the average time of rendering one frame in milliseconds, in essence, the inverse of the FPS; it is necessary to understand “timing” - what order do we use to draw a frame; with FPS 60 Hz, this time is about 17 ms;
NFR - the number of rendered frames from the start of the application; with an FPS of 60 Hz, this number will reach 60 in the first second;
T is the time in ms from the start of the application, I use it as an argument for the animation functions, in the example the rotation of the spheres depends on it;
POS - coordinates of the camera in the 3D world of XYZ, at the start of the axis are as follows: X to the right, Y up, Z to us;
AH, AV - the angles of rotation of the camera relative to the horizontal and vertical in degrees; it is better to talk about the angle of heel separately;
N is the total number of objects in the Universe;
NV - as many objects in whole or in part fall into the field of visibility (frustum, truncated pyramid of the camera's field of view);
HD - so many near objects are displayed with slightly better quality of drawing, distant objects are drawn simpler;
SCR - screen resolution.
5. What is the development process?
I connect the tablet to the PC under Windows with a USB cable (it can also be via Wi-Fi). First, I write the platform-dependent code of some functions for Android, I run the program on the tablet. This part of the work requires a lot of patience, the application compiles for a relatively long time and runs on the tablet. Debugging is available (breakpoints, step-by-step execution, viewing the status of variables). I also use the debug output of the application in logcat, I can watch the logs directly on the PC in real time. When it worked on the tablet, I write a platform-specific version of the function code for Windows, this is easier. After this, the most interesting begins - I write the main part of the program with a universal code causing platform functions of the same name, check on the PC and only occasionally upload it to the tablet, as a rule, everything works there.
6. Under the hood
Let's look at the source code a little bit. In the common folder I own the library itself. Let's start with the file Draw.pas.
What are cross-platform graphics based on? Under Windows, I use the OpenGL.pas module, but only those functions that have analogues in GLES for Android (modules Androidapi.Egl.pas, Androidapi.Gles.pas, Androidapi.Gles2.pas).
uses Types,SysUtils, {$IFDEF Android} Androidapi.Egl, Androidapi.Gles, Androidapi.Gles2, {$ENDIF} {$IFDEF MSWINDOWS} Winapi.OpenGL, {$ENDIF} Vectors, Colors, Textures, DrawPolyhedron, DrawSphere; Where OGL and GLES match the differences in syntax is small, except that glOrtho had to trim. Using conditional compilation directives like {$ IFDEF ANDROID} and {$ IFDEF MSWINDOWS}, we will describe a platform-dependent implementation.
{$IFDEF ANDROID} procedure glOrtho (left, right, bottom, top, zNear, zFar: GLfloat); begin glOrthof(left, right, bottom, top, zNear, zFar); end; {$ENDIF} What else does not match? On GLES there is no glBegin / glEnd and, accordingly, the entire family of related functions. It's not scary, we will draw in OGL 2.0 style by passing pointers to arrays of vertices at a time (normals, colors, texture coordinates). For example, one simple triangle can be drawn like this (the color is current, there are no normals or textures):
procedure Triangle(p1, p2, p3: TV3); overload; begin SetLength(ap3, 3); ap3[0] := p1; ap3[1] := p2; ap3[2] := p3; glVertexPointer(3, GL_FLOAT, 0, @ap3[0]); glDrawArrays(GL_TRIANGLES, 0, Length(ap3)); end; To draw a set of triangles of a 3D shape, you should not call the Triangle procedure many times. You should add all the vertices of all triangles into one array and draw them with a single call to glDrawArrays. This function is used in the current demo to draw each sphere, both with GL_TRIANGLES and GL_TRIANGLE_STRIP:
// c procedure DrawAVNT(avn: TAVertexN; met:GLenum; Position,Rotation,Scale: TV3); begin glPushMatrix; Transform(Position,Rotation,Scale); glVertexPointer(3, GL_FLOAT, SizeOf(TVertexN), @avn[0].V); glNormalPointer(GL_FLOAT, SizeOf(TVertexN), @avn[0].N); glDrawArrays(met,0,Length(avn));// GL_TRIANGLES glPopMatrix; end; At this point we will stop, for the first acquaintance this introductory part should suffice. If you like it - I already have a continuation outline of the article.
PS / 05.06.2015
The loading of 3D models in obj format has been added to the library.
An additional source of information on the topic: forum.sources.ru/index.php?showtopic=401121
Source: https://habr.com/ru/post/258379/
All Articles