I have a byte buffer in my Android application,consider it as a vector.The data in the buffer is changed dynamically(There is a separate thread to update the buffer).I want to draw these data dynamically.
Every data represents a point's Y coordinate in the View,connect the consecutive points to form a curve.As the buffer is updated periodically,the curve looks like moving forward smoothly.
Firstly,I implement this by drawing lines in the View's onDraw(Canvas canvas) method,but it is very ineffective.When calling invalidate method is too frequently, the CPU consume is very heavy.
So I change to use the SurfaceView, draw the dynamic curve in the separate thread, but It is still not satisfactory.
I want to know whether there is any good methods to achieve this.Whether is OpenGL ES a choice?
In OpenGL ES 1.0 you can use glDrawArrays in GL_LINES mode. It will do exactly what the Canvas is doing with your data, but considerably faster
Related
Use case:
I need to draw hundred lines and a few pieces of text on my view. I need to give a scrolling effect, for which I capture the ACTION_MOVE event and redraw all the lines with the updated points. To get the desire result I tried with different approaches but none works as intended.
Approach 1
I made a custom class which extends View. All the drawing and calculation is done directly in my onDraw() method. Since there is so much of operation done in onDraw() method, the performance of the app is very poor. I even checked the performance using Profile GPU rendering and I can see the lines are very tall.
Approach 2
I created a Bitmap and after drawing all the lines onto my bitmap in another thread, I used postInvalidate() to draw the bitmap in onDraw() method:
mBufferedBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
mBufferedBitmap.eraseColor(Color.TRANSPARENT);
Canvas mBufferedCanvas = new Canvas(mBufferedBitmap);
drawLines(mBufferedCanvas)
postInvalidate();
Since I erase all the previous drawing on the bitmap and draw new lines with updated points, there is a flickering on the screen.
Approach 3
I tried extending my custom class to SurfaceView and performing all the operations on canvas object in another thread. But since SurfaceView uses CPU for drawing operations, the performance will be poor in low configuration mobiles.
Can anyone guide me how to achieve this task with better performance?
It is possible to use your approach 1 to achieve good performance.
An example that sounds close to your use case (drawing lines, a little text and having these update on gesture movement) is MPAndroidChart. This is an open source library that achieves high performance (see the following comparison if you want stats)
The classes to examine are the Renderer classes as these contain code draw in the onDraw(Canvas c) of the chart subtypes. You can see some of the tricks used to achieve high performance there:
Don't allocate in a render loop. Instead, allocate outside the loop and reuse/recycle variables. See LineChartRenderer line 199
Use buffering. For example, in MPAndroidChart, the points for the four corners of the bars in the bar chart are buffered and the buffer array is reused. See the BarBuffer class.
Use the native Canvas drawing functions (drawPath, drawLine etc.)
A complete list of tips for optimising rendering can be found in the Android Performance Slow Rendering Guide
Approach 2 is the best one. If you see flickering, it means that the bitmap is drawn to screen after you erase it and before you draw all the lines. If this is the case use another bitmap and do double buffering:
ScreenBitmap is what is drawn to screen
OffScreenBitmap is used for drawing in background.
Draw all your lines and text to OffScreenBitmap, and once finished, copy it to ScreenBitmap.
in onDraw, draw the ScreenBitmap.
Create these bitmaps once (typically in onSizeChanged), so that there is no alloocation in onDraw
I have imported a model (e.g. a teapot) using Rajawali into my scene.
What I would like is to label parts of the model (e.g. the lid, body, foot, handle and the spout)
using plain Android views, but I have no idea how this could be achieved. Specifically, positioning
the labels on the right place seems challenging. The idea is that when I transform my model's position in the scene, the tips of the labels are still correctly positioned
Rajawali tutorial show how Android views can be placed on top of the scene here https://github.com/Rajawali/Rajawali/wiki/Tutorial-08-Adding-User-Interface-Elements
. I also understand how using the transformation matrices a 3D coordinate on the model can be
transformed into a 2D coordinate on the screen, but I have no idea how to determine the exact 3D coordinates
on the model itself. The model is exported to OBJ format using Blender, so I assume there is some clever way of determining
the coordinates in Blender and exporting them to a separate file or include them somehow in the OBJ file (but not
render those points, only include them as metadata), but I have no idea how I could do that.
Any ideas are very appreciated! :)
I would use a screenquad, not a view. This is a general GL solution, and will also work with iOS.
You must determine the indices of the desired model vertices. Using the text rendering algo below, you can just fiddle them until you hit the right ones.
Create a reasonable ARGB bitmap with same aspect ratio as the screen.
Create the screenquad texture using this bitmap
Create a canvas using this bitmap
The rest happens in onDrawFrame(). Clear the canvas using clear paint.
Use the MVP matrix to convert desired model vertices to canvas coordinates.
Draw your desired text at the canvas coordinates
Update the texture.
Your text will render very precisely at the vertices you specfied. The GL thread will double-buffer and loop you back to #4. Super smooth 3D text animation!
Use double floating point math to avoid loss of precision during coordinate conversion, which results in wobbly text. You could even use the z value of the vertex to scale the text. Fancy!
The performance bottleneck is #7 since the entire bitmap must be copied to GL texture memory, every frame. Try to keep the bitmap as small as possible, maintaining aspect ratio. Maybe let the user toggle the labels.
Note that the copy to GL texture memory is redundant since in OpenGL-ES, GL memory is just regular memory. For compatibility reasons, a redundant chunk of regular memory is reserved to artificially enforce the copy.
So Im trying to figure out how to draw a single textured quad many times. My issue is that since these are create and deleted and every one of them has a unique position and rotation. Im not sure a vbo is the best solution as I've heard modifying buffers is extremely slow on android and it seems I would need to create a new one each frame since different quads might disappear randomly (collide with an enemy). If I simply do a draw call for each one I get 20fps around 100, which is unusable. any advice?
Edit: I'm trying to create a bullethell, but figuring out how to draw 500+ things is hurting my head.
I think you're after a particle system. A similar question is here: Drawing many textured particles quickly in OpenGL ES 1.1.
Using point sprites is quite cheap, but you have to do extra work in the fragment shader and I'm not sure if GLES2 supports gl_PointSize if you need different sized particles. gl_PointSize Corresponding to World Space Size
My go-to particle system is storing positions in a double buffered texture, then draw using a single draw call and a static array of quads. This is related but I'll describe it a bit more here...
Create a texture (floating point if you can, but this may limit the supported devices). Each pixel holds the particle position and maybe rotation information.
[EDITED] If you need to animate the particles you want to change the values in the texture each frame. To make it fast, get the GPU to do it in a shader. Using an FBO, draw a fullscreen polygon and update the values in the fragment shader. The problem is you can't read and write to the same texture (or shouldn't). The common approach is to double buffer the texture by creating a second one to render to while you read from the first, then ping-pong between them.
Create a VBO for drawing triangles. The positions are all the same, filling a -1 to 1 quad. However make texture coordinates for each quad address the correct pixel in the above texture.
Draw the VBO, binding your positions texture. In the vertex shader, read the position given the vertex texture coordinate. Scale the -1 to 1 vertex positions to the right size, apply the position and any rotation. Use the original -1 to 1 position as the texture coordinate to pass to the fragment shader to add any regular colour textures.
If you ever have a GLSL version with gl_Vertex, I quite like generating these coordinates in the vertex shader, saving storing unnecessarily trivial data just to draw simple objects. This for example.
To spawn particles, use glTexSubImage2D and write a block of particles into the position texture. You may need a few textures if you start storing more particle attributes.
I'm working on a camera app, i'm showing the preview image luminosity histogram in a small rect (128x128 pix) overlying the live preview.
Sometimes an ANR happened, so i started using traceview to optimize my code (i'm doing some image manipulation on the fly, but it's very quick NEON asm & native code, no problem with it).
Using traceview i discovered that Canvas.drawLine() method is terribly slow. I have to update histogram 30 times per second in customView.onDraw(), drawing just 128 lines every frame. Incredibly, drawing 128 lines takes >8% cpu time (!!), when the entire native code to manipulate-convert the whole frame (720x480 yuv to ARGB_8888) takes <18%
I tried to draw the histogram on a new bitmap canvas then drawBitmap() it to the view's canvas but drawLine()s still take a lot of CPU.
I'm looking for an idea to avoid drawLine()...
I juts have to draw a small histogram from a int[128] normalized to 128
Here's my customView.onDraw (more or less...)
#Override
protected void onDraw(Canvas canvas) {
int size = 128;
int y = pos_y + size;
int x;
for(int i=0;i<size;i++) {
if(histogram_data[i]>1) {
x = pos_x+i;
// this is the slow call!!
canvas.drawLine(x, y, x, y-histogram_data[i], paint_histogram);
}
}
}
You could try to use Path instead of Lines.
http://developer.android.com/reference/android/graphics/Path.html
If you read HERE they say the following:
Animating large Paths
When Canvas.drawPath() is called on the hardware accelerated Canvas
passed to Views, Android draws these paths first on CPU, and uploads
them to the GPU. If you have large paths, avoid editing them from
frame to frame, so they can be cached and drawn efficiently.
drawPoints(), drawLines(), and drawRect/Circle/Oval/RoundRect() are
more efficient – it's better to use them even if you end up using more
draw calls.
So you can try calling drawLines() once for drawing multiple lines at the same time instead of calling drawLine() for each line separately.
For me personally I had to draw 500+ lines, and I tried all available method for drawing line in canvas: drawPath(), drawLine() and drawLines(), but with all of them I felt enormous lagging on my phone, so the only available alternative was to use OpenGL ES. Here is a example I wrote using OpenGL for drawing large amount of lines, I tested it on my phone and it is smooth as butter😄. You can check the source code it is written in Kotlin, it also support finger gestures, that way you can Scale, Translate and Rotate the whole scene with your fingers. And I have included all basic shapes Rectangle, Triangle, Circle, Line, Polygon, and you can set shape coordinates as values between [-1,1], or with the familiar way using pixel values. If you want to learn more about OpenGL you can check this post by the android team.
Here is the result of the OpenGL example I wrote:
maybe you can add new layer on top and draw these 128 lines only once while leaving other pixels transparent.
Im trying to find a way to draw a part of a texture in opengl (for example, in a sprite I need to draw different parts of the image) and I cant find it. In the questions I have been looking into, people talk about the glDrawTexfOES but from what I understand its a short way to draw a rectangle texture.
Thanks in advance.
Yes, those texture coordinates are the ones.. You can change them at runtime but I'd need some info of your pipeline how and where do you push vertex and texture coordinates to GL. If you do that every frame with something like "glTexCoordPointer" you just need your buffer not to be constant and change values whenever you want. If you use some GPU buffers you will need to retrieve buffer pointer and change the values. In both cases it would be wise to do that on same thread as your "draw" method.