iPhone OpenGL ES1 VBO Texture Coordinate Issues - iphone

I switched my code to use VBO and suddenly my sprites (2 triangle triangle-strip) have bad texture coordinates.
Disabling VBO makes the problem go away.
Note - I align my vertex and texture coordinate data to 4 bytes as specified in this link:
https://developer.apple.com/library/ios/#documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide/TechniquesforWorkingwithVertexData/TechniquesforWorkingwithVertexData.html
This is a printout of the vertex data, it goes:
x, y, z, 0.0f, tu, tv, 0.0f, 0.0f
Vertex 0 -0.500000 0.500000 0.000000 0.000000 0.000000 1.000000 0.000000 0.000000
Vertex 1 -0.500000 -0.500000 0.000000 0.000000 0.000000 0.000000 0.000000 0.000000
Vertex 2 0.500000 0.500000 0.000000 0.000000 1.000000 1.000000 0.000000 0.000000
Vertex 3 0.500000 -0.500000 0.000000 0.000000 1.000000 0.000000 0.000000 0.000000
This is how I generate the VBOs:
m_numVertices = 4
m_stride = 8
glGenBuffers( 1, &m_vboVertices); // Generate our Vertex Buffer Object
glBindBuffer( GL_ARRAY_BUFFER, m_vboVertices); // Bind our Vertex Buffer Object
glBufferData( GL_ARRAY_BUFFER, (m_numVertices * m_stride) * sizeof(float), m_pVertexData, GL_STATIC_DRAW); // Set the size and data of our VBO and set it to STATIC_DRAW
glBindBuffer( GL_ARRAY_BUFFER, 0 );
glGenBuffers( 1, &m_vboIndices );
glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, m_vboIndices );
glBufferData( GL_ELEMENT_ARRAY_BUFFER, sizeof(GLubyte)*4, m_pIndices, GL_STATIC_DRAW );
glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, 0 );
And this is how I render the sprite:
glBindBuffer(GL_ARRAY_BUFFER, m_vboVertices);
glVertexPointer( 3, GL_FLOAT, byteStride, BUFFER_OFFSET(0) );
glTexCoordPointer( 2, GL_FLOAT, byteStride, BUFFER_OFFSET(4) );
glBindBuffer(GL_ARRAY_BUFFER,0); // reset
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_vboIndices );
glDrawElements(GL_TRIANGLE_STRIP, m_numVertices, GL_UNSIGNED_BYTE, BUFFER_OFFSET(0));
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,0); // reset
BUFFER_OFFSET is defined as:
#define BUFFER_OFFSET(i) ((char *)NULL + (i))
With VBO:
Without VBO:
Thanks.
Edit - After messing around a bit with the code, it appears that this problem also occurs when drawing using GL_TRIANGLES.

It appears that the problem is that I am not calculating the glTexCoordPointer offset in bytes. It should be:
glTexCoordPointer( 2, GL_FLOAT, byteStride, (char*)NULL + (4*sizeof(float)) );
The Macro BUFFER_OFFSET was incorrect.
Applying this fix solved the problem.

Related

Convert SIint16 to float on iPhone4

I am developing an app which uses simple pitch perception and it runs fine in the Xcode Simulator. The app loads in the iPhone 4 and I can navigate the app but no output is shown . I have started to debug and find that when I convert Sint16 to float I get an overflow error.
I have tried vDSP and a simple loop.
simplified code n=1536
sampleBuffer = (SInt16*) malloc(n);
floatSamples = (float*) malloc(sizeof(float)*n);
// Convert SInt 16 to float
for(int i = 0; i<n; i++) {
floatSamples[i] = (float)samples[i];
}
//vDSP_vflt16(samples,1,floatSamples,1,n);
This results in
-0.000000
-0.000000
-0.000000
964957789008661674961361960960.000000
-5629971079108504200413184.000000
-inf
35116851871418647838720.000000
-inf
0.000000
0.000000
0.000000
-1233.760620
288987875649316726325339192557568.000000
-0.000000
-0.000000
-0.000000
-7508525217561044282816045485425426432.000000
-656399043038732589927376093184.000000
0.000000
-0.000053
9470091451011432448.000000
-24555002
similar result from vDSP
Everything is fine in the simulator on iPhone 4s all the vDSP calculations work.
iPhone is running ios7.1.2 and xCode 6 on MacBook pro.
Just looking for a clue really.
The code
sampleBuffer = (SInt16*) malloc(n);
allocates n bytes, not n SInt16 values.
You need:
sampleBuffer = (SInt16*) malloc(sizeof(SInt16)*n);

How to plot a 3D surface in matlab using set of data [duplicate]

This question already has answers here:
How to create a 2D-matrix out of my data for surf()?
(2 answers)
Closed 8 years ago.
I have a set of 3D data which are not ordered. I need to plot a surface which basically connects them together and color the surface based on my z values.
Here is an example of the data that I have.
-0.144847 -5.239271 -0.000000
-5.430672 -0.044747 0.000000
0.006860 0.282666 -0.000000
0.385219 0.005522 -0.000000
-6.464983 -7.105215 -0.000000
-7.028026 -4.026576 0.000000
-6.092855 -1.826723 -0.000000
-5.619010 -0.886051 0.000000
-5.769190 -0.487232 0.000000
-3.496163 -7.561789 -0.000000
-1.883844 -7.683578 0.000000
-0.845860 -6.159235 -0.000000
-0.487085 -5.865159 0.000000
-5.442694 0.346838 -0.000000
0.158343 -5.402572 -0.000000
0.075667 0.309257 0.000000
0.648079 -1.368195 0.000000
0.510721 -0.525318 0.000000
-0.749283 0.435931 0.000000
-0.338834 0.399974 -0.000000
-0.151157 0.367955 0.000000
-0.071820 0.371475 0.000000
-0.125133 -4.846842 -1.025075
-5.425106 0.058539 -0.341047
0.006806 0.282034 -0.057553
0.384929 0.005456 -0.021184
-5.890619 -6.417012 -0.339540
-6.828500 -3.837339 -0.394468
-6.048110 -1.732177 -0.362965
-5.597372 -0.822289 -0.333655
-5.815376 -0.394711 -0.360211
-3.447449 -7.345610 -0.198281
-1.883239 -7.680056 -0.098589
-0.845817 -6.153723 -0.041199
-0.487017 -5.863854 -0.019289
-5.475775 0.419626 -0.104516
0.159202 -5.400629 -0.017949
0.189255 0.205864 -0.010534
0.280893 0.151170 -0.015441
0.327987 0.090052 -0.018171
0.128256 0.272671 -0.006972
0.075667 0.309256 -0.003940
0.652881 -2.917007 -0.040059
0.647424 -1.368548 -0.037539
0.510386 -0.525737 -0.029055
0.546600 -0.273572 -0.030561
0.448142 -0.108028 -0.024821
-1.643195 0.460307 -0.102182
-0.751135 0.435615 -0.045282
-0.326989 0.388574 -0.019874
-0.151168 0.367766 -0.009394
-0.071815 0.371646 -0.004734
-0.125133 -4.846842 -1.025075
-5.425106 0.058539 -0.341047
0.006806 0.282034 -0.057553
0.384929 0.005456 -0.021184
-5.890619 -6.417012 -0.339540
-6.828500 -3.837339 -0.394468
-6.048110 -1.732177 -0.362965
-5.597372 -0.822289 -0.333655
-5.815376 -0.394711 -0.360211
-3.447449 -7.345610 -0.198281
-1.883239 -7.680056 -0.098589
I have around 400 points, like the ones above.
Thank you in advance for your help.
What format is your data in and what kind of plot do you want? Once you have separated the data into 3 variables it is simple to plot it into a 3-D scatter plot and specify the color using:
scatter3(X,Y,Z,S,C)
More info is available on the mathworks website which is SUPER useful for figuring out MATLAB

ShinobiChart ignoring series made of 0s

I'm using ShinobiControls for creating a simple chart. When the dataset is:
#{
#"Value": #0.0,
#"Date": #1364828400
},
#{
#"Value": #0.0,
#"Date": #1364914800
},
#{
#"Value": #0.0,
#"Date": #1365001200
}
]
I receive this error message:
Ignoring range with 0.000000 span
From: SChartNumberAxis at 0xc287030, axisRange = { 0.000000, 0.000000 }, defaultRange = { 0.000000, 0.000000 }, maxRange = { 0.000000, 0.000000 }
and my app gets stuck. No error message. Nothing.
Has anybody seen anything similar?
It seems to me that you have not set range for the axis tied to the Value dimension of your points. Supposing that value is displayed on the Y axis. Try:
SChartNumberRange *yAxisRange = [[SChartNumberRange alloc] initWithMinimum:[NSNumber numberWithInt:0] andMaximum:[NSNumber numberWithInt:10]];
SChartNumberAxis *yAxis = [[SChartNumberAxis alloc] initWithRange:yAxisRange];

The Gimp - Creating background gradient

I have the below css code for a web gradient on my page, I would like to make a background image that is exact to this gradient using the Gimp. Anyone have expertise doing this that might be able to lend some advice? Thanks
background-image:-webkit-linear-gradient(90deg, rgba(51, 51, 51, 1.00) 0.0% , rgba(26, 26, 26, 1.00) 50.5% , rgba(51, 51, 51, 1.00) 50.7% , rgba(77, 77, 77, 1.00) 100.0% );
GIMP can't parse that directly, althoug GIMP 2.8 ships with a Python script that can output gradients in this CSS syntax
You could make a python-script to parse CSS gradient syntax into GIMP Gradients,
and them use this gradient on an image.
Of course it is overkill if you are needing that just once -
I'd recommend creating a new gradient in GIMP, and manually edit the recorded file
(in ~/.gimp-2.8/gradients folder if you are on *nix, else check for the user gradients folder in the preferences).
GIMP's gradient file is straightforward - a text only file that goes like:
GIMP Gradient
Name: Untitled
2
0.000000 0.243464 0.486928 0.000000 0.000000 0.000000 1.000000 0.000000 1.000000 0.000000 1.000000 0 0 0 0
0.486928 0.743464 1.000000 0.000000 0.000000 1.000000 1.000000 1.000000 1.000000 1.000000 1.000000 0 0 0 0
So this is a single gradient, with two segments - each line has the start-point, endpoint of each segment, the starting ARGB color, ending ARGB color, and ,...don't care, just keep the four zeros at the end: most likely they are used to describe the type of color in each endpoint, and we want 0.
Those rgba colors correspond to the following html-notations :
rgba(51, 51, 51, 1.00) - #333333 (Color A)
rgba(26, 26, 26, 1.00) - #1a1a1a (Color B)
rgba(51, 51, 51, 1.00) - #333333 (Color A)
rgba(77, 77, 77, 1.00) - #4d4d4d (Color C)
You could try creating a rectangular image (with height twice the width). Fill the top square half with a gradient of color A to color B, and the bottom square with a gradient from color A to color C.
Then you set it as your background image with "repeat" property enabled.

How to use vertex buffer objects (VBO) instead of calling glDrawArrays thousands of times in OpenGL ES 1.0 on iOS?

For a simulation we've created a OpenGL1.1 view with a grid of 32 x 48 rectangles.
We're drawing this grid every time the CADisplayLink calls our draw function, and the vertex positions never change. The only thing that changes from frame to frame is the color of a vertex.
This is a simplified example of how we do it:
- (void)drawFrame {
// draw grid
for (int i = 0; i < numRectangles; i++) {
// ... calculate CGPoint values for vertices ...
GLshort vertices[ ] = {
bottomLeft.x, bottomLeft.y,
bottomRight.x, bottomRight.y,
topLeft.x, topLeft.y,
topRight.x, topRight.y
};
glVertexPointer(2, GL_SHORT, 0, vertices);
glColor4f(r, g, b, 1);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
}
}
The OpenGL instrument recommended using Vertex Buffer Objects (VBO) for better performance.
Is there an example of how to set up a very basic, simple usage of Vertex Buffer Objects in a case where the vertices don't change from frame to frame?
Apple is providing an example over here, under the section Use Vertex Buffer Objects to Manage Copying Vertex Data, but it's incomplete.
GLuint vertexBuffer;
GLuint indexBuffer;
void CreateVertexBuffers()
{
glGenBuffers(1, &vertexBuffer);
glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glGenBuffers(1, &indexBuffer);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexBuffer);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
}
It doesn't show how to really create the data. The previous listing (which is supposed to be a "bad example") contains these two lines:
const vertexStruct vertices[] = {...};
const GLubyte indices[] = {...};
So these two arrays or structs have to be passed into:
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
and
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
?
Is this the "Interleaved (array of structs)" format preferred by iOS, according to Apple under the Use Interleaved Vertex Data section?
You're not supposed to draw single primitives using glDrawArrays, but large batches. So far you're using only regular vertex arrays, not vertex buffer objects.
The idea is, to put the geometry off all rectangles into one single VBO (a VBO is essentially a vertex array stored "in" OpenGL, rather your process). Changing single vertices is possible by using glBufferSubData.
Vertex color can be put into a vertex array, and hence into a VBO as well.
Update
Say you have some hexagon:
GLfloat vertices[2][] = {
{0, 0}, // 0
{1, 0}, // 1
{0.5, 0.866}, // 2
{-0.5, 0.866}, // 3
{-1, 0}, // 4
{0.5, -0.866}, // 5
{-0.5, -0.866}, // 6
};
and you want to draw only part of the triangles, say the triangles consisting of vertices [0,1,2], [0,3,4] and [0,5,6], then you'd create the following index array
GLushort indices[] = {
0, 1, 2,
0, 3, 4,
0, 5, 6
};
And use that as the indices for glDrawElements.
Update 2
One thing that many computer graphics and OpenGL newbies get wrong is, that a vertex is not merely a position, but a combination of vertex attributes. Which attributes make a vertex is a design choice made by the programmer. But the commonly used vertex attributes are
position
normal
texture coordinates
vertex color
Until OpenGL-3 core the position attribute was mandatory. Since OpenGL-3 core, which made shaders mandatory, vertex attributes are just arbitrary input data into shaders, and as long as a vertex shader manages to deliver the *gl_Position* output, OpenGL is happy.
The important thing is, that two vertices are identical only then, if all the attributes are the same. If they differ in just one attribute, they're not the same vertex. Now let's take our previous example of the hexagon. We're now making the triangles red, green and blue and were going to add two triangles, to extend the red and green ones into kind of diamond shapes:
// x, y, red, green, blue
GLfloat vertices[5][] = {
// red
{0, 0, 1, 0, 0}, // 0
{1, 0, 1, 0, 0}, // 1
{0.5, 0.866, 1, 0, 0}, // 2
{1, 1, 1, 0, 0}, // 3
// green
{0, 0, 0, 1, 0}, // 4
{-0.5, 0.866, 0, 1, 0}, // 5
{-1, 0, 0, 1, 0}, // 6
{-1, 1, 0, 1, 0}, // 7
// blue
{0, 0, 0, 0, 1}, // 8
{0.5, -0.866, 0, 0, 1}, // 9
{-0.5, -0.866, 0, 0, 1}, // 10
};
The triangles we now want to draw are
GLushort indices[] = {
// the two red triangles
0, 1, 2,
3, 2, 1,
// the two green triangles
4, 5, 6,
5, 7, 6,
// the blue triangle
8, 9, 10
};
Now we need to tell OpenGL about the structure of our vertex array. This is where the stride parameter of the gl…Pointer functions enters the picture. If nonzero, the stride tells OpenGL the distance (in bytes) between the start of each vertex in the array. By passing the data pointer with the right offset this makes OpenGL access the right things. In our case a vertex consists of
2 position elements of GLfloat with offset 0
3 color elements of GLfloat with offset 2*sizeof(GLfloat)
and each vertex is sizeof(GLfloat)*5 bytes apart.
We'll let the C compiler do the offset calculations for us, by simply dereferencing the right array elements and taking the address of it:
glVertexPointer(2, GL_FLOAT, sizeof(GLfloat)*5, &vertices[0][0]);
glColorPointer(3, GL_FLOAT, sizeof(GLfloat)*5, &vertices[0][2]);
The rest is just glDrawElements(GL_TRIANGLES, 5, GL_UNSIGNED_SHORT, indices).
Note that we're not using VBOs at this point, but client side vertex arrays only. VBOs build upon vertex arrays. So I strongly suggest you first get a strong grip of vertex arrays, before going to tackle VBOs. They quite easy to use actually, but there are a few conceptional pitfalls, like tricking the compiler to pass a number for a pointer parameter.