Notes of a Developer » OpenGL

GLKit and MSAA

Vladimir Boychentsov — Wed, 04 Jan 2012 13:03:58 +0000

Enable MSAA Anti-Aliasing in GLKit.

Just enable:

1 2	GLKView view = (GLKView )self.view; view.drawableMultisample = GLKViewDrawableMultisample4X;

Without MSAA:

With MSAA:

GLKit_MSAA_Sample

Distance between vertices and magnitude of a vector

Vladimir Boychentsov — Thu, 22 Dec 2011 19:30:05 +0000

Distance between vertices:

1
2
3
4
5
6
7
8
9
10
11
12
13

static inline GLfloat Vertex3DDistanceBetweenVertices
(Vertex3D vertex1, Vertex3D vertex2)
{
GLfloat deltaX, deltaY, deltaZ;

deltaX = vertex2.x - vertex1.x;
deltaY = vertex2.y - vertex1.y;
deltaZ = vertex2.z - vertex1.z;

return sqrtf((deltaX * deltaX) +
(deltaY * deltaY) +
(deltaZ * deltaZ));
}

Magnitude of a vector:

1
2
3
4
5
6

static inline GLfloat Vector3DMagnitude(Vector3D vector)
{
return sqrtf((vector.x * vector.x) +
(vector.y * vector.y) +
(vector.z * vector.z));
}

iPhone 3D Samples from “iPhone 3D Programming” book

Vladimir Boychentsov — Wed, 09 Jun 2010 13:35:34 +0000

iPhone 3D Samples from “iPhone 3D Programming Developing Graphical Applications with OpenGL ES” book.
Thanks Frank and Doris Rideout and O’REILLY

31 iPhone 3D Samples OpenGL ES 1.1 and 2.0

All links direct to http://examples.oreilly.com/

All Samples

HelloArrow

HelloCone

TouchCone

ModelViewer.SimpleWireframe

ModelViewer.VertexLighting

ModelViewer.PixelLighting

ModelViewer.ToonLighting

ModelViewer.FancyWireframe

ModelViewer.ObjViewer

ModelViewer.Textured

TextureFilters

TextureFormats

CameraTexture

TextureAlpha

Trefoil.Stencil

Trefoil.FakeStencil

Trefoil.Antialiasing

Trefoil.Jitter

AaLines

Holodeck.Clouds

Holodeck.Camera

Klein.Fps

Haiku

DistanceField

SpriteSheet

SpringyStars

Klein.Bumpy

Klein.Cubemap

CrudeBloom

GaussianBloom

VertexSkinning

Good book!

Vladimir Boychentsov — Tue, 08 Jun 2010 21:04:05 +0000

Do you have a great idea for a graphics-intensive iPhone or iPad application, but don’t know how to bring it to life? This book offers the perfect solution: a crash course on the OpenGL graphics library with an overview of iPhone 3D development. Whether you’re an experienced OpenGL developer looking to build iPhone apps for the first time, or an iPhone developer wanting to learn sophisticated graphics, iPhone 3D Programming addresses both in one concise, easy-to-use guide.

What does it take to build an iPhone app with stunning 3D graphics? This book will show you how to apply OpenGL graphics programming techniques to any device running the iPhone OS — including the iPad and iPod Touch — with no iPhone development or 3D graphics experience required. iPhone 3D Programming provides clear step-by-step instructions, as well as lots of practical advice, for using the iPhone SDK and OpenGL.

You’ll build several graphics programs — progressing from simple to more complex examples — that focus on lighting, textures, blending, augmented reality, optimization for performance and speed, and much more. All you need to get started is a solid understanding of C++ and a great idea for an app.

* Learn fundamental graphics concepts, including transformation matrices, quaternions, and more
* Get set up for iPhone development with the Xcode environment
* Become familiar with versions 1.1 and 2.0 of the OpenGL ES API, and learn to use vertex buffer objects, lighting, texturing, and shaders
* Use the iPhone’s touch screen, compass, and accelerometer to build interactivity into graphics applications
* Build iPhone graphics applications such as a 3D wireframe viewer, a simple augmented reality application, a spring system simulation, and more

This book received valuable community input through O’Reilly’s Open Feedback Publishing System (OFPS). Learn more at

Buy Book

Free for online read

iPhone Particles samples OpenGL ES

Vladimir Boychentsov — Wed, 14 Oct 2009 17:23:47 +0000

This is just one possible configuration – one of the simpler ones, actually, as it is only using point rendering and simple gravity – no textures, no wind, no transparency, etc. I call this configuration “fountain”, and it’s can be created in one line of code:

ParticleEmitter3D *fountain = [ParticleEmitter3D fountain];
then, you just need to tell the fountain to draw itself each time through your draw loop or callback…
[fountain drawSelf];
It’s probably going to be a few days before I get the first version of the code posted – it’s got some rough edges still, plus a few more bits of functionality I feel are needed before it can survive public scrutiny.

The above movie was taken on the simulator. The code does work on my first generation iPhone but I have to reduce the number of points emitted per second to get it to look good with no hiccups. I haven’t yet tested it on my second generation iPod Touch to see how much of a difference the new processor and FPU make. I’m also hoping that pooling and reusing the particles, rather than constantly allocating and freeing them will help a fair amount.

Google Site

This is a particle generator wrote to help learn OpenGL ES 1.1 better. This project is intended for use on the iPhone, though imagine large chunks of it could be ported to other embedded devices that support OpenGL ES 1.1 or higher.

iPhone Particles samples

Saving screenshot of OpenGL ES content to the Photo Album

Vladimir Boychentsov — Mon, 12 Oct 2009 15:22:01 +0000

Very interesting article:

Anyway, for an app I’m working on, I needed to take a screenshot of OpenGL ES rendered content. I assumed there was some built in function for that, but much searching led me to the conclusion that it’s a roll-your-own kind of thing. So, after a couple of days, I was finally able to piece together at least three or four different semi-working solutions from various forums and mailing lists, combined with some hacking about, to come up with a solution that actually works.

The first and last steps are easy.

First step, you read the GL data into a raw byte array with glReadPixels. Simple enough.

Last step, you save a UIImage to the Photo Album with UIImageWriteToSavedPhotosAlbum.

The tough part is getting that byte array into a UIImage. My first attempt was to use [UIImage imageFromData:data]. But the problem with that is that that method expects data to be in a file format of one of the supported image types of UIImage, whereas glReadPixels is just raw pixel data.

Digging around some more, I found [UIImage imageWithCGImage:imageRef]. You can get a CGImageRef with CGImageCreate.

CGImageCreate requires a CGDataProviderRef. And you can create one of those with CGDataProviderCreateWithData, using the results from glReadPixels! Finally, a path from one end to the other.

glReadPixels -> CGDataProviderCreateWithData -> CGImageCreate -> [UIImage imageWithCGImage:] -> UIImageWriteToSavedPhotosAlbum

Yay!

But wait. One more snag. OpenGL uses standard Cartesian coordinates. In other words, +Y is up, -Y is down. So the byte array you get with glReadPixels (and thus your final image) will be upside down. A bit of fancy bit-twiddling fixed that up. Here are the final methods, meant to be used within a UIView with a CAEAGLLayer class (just like the EAGL class in the OpenGL ES template file).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

-(UIImage *) glToUIImage {
NSInteger myDataLength = 320 * 480 * 4;

// allocate array and read pixels into it.
GLubyte *buffer = (GLubyte *) malloc(myDataLength);
glReadPixels(0, 0, 320, 480, GL_RGBA, GL_UNSIGNED_BYTE, buffer);

// gl renders "upside down" so swap top to bottom into new array.
// there's gotta be a better way, but this works.
GLubyte *buffer2 = (GLubyte *) malloc(myDataLength);
for(int y = 0; y <480; y++)
{
for(int x = 0; x <320 * 4; x++)
{
buffer2[(479 - y) * 320 * 4 + x] = buffer[y * 4 * 320 + x];
}
}

// make data provider with data.
CGDataProviderRef provider = CGDataProviderCreateWithData(NULL, buffer2, myDataLength, NULL);

// prep the ingredients
int bitsPerComponent = 8;
int bitsPerPixel = 32;
int bytesPerRow = 4 * 320;
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
CGBitmapInfo bitmapInfo = kCGBitmapByteOrderDefault;
CGColorRenderingIntent renderingIntent = kCGRenderingIntentDefault;

// make the cgimage
CGImageRef imageRef = CGImageCreate(320, 480, bitsPerComponent, bitsPerPixel, bytesPerRow, colorSpaceRef, bitmapInfo, provider, NULL, NO, renderingIntent);

// then make the uiimage from that
UIImage *myImage = [UIImage imageWithCGImage:imageRef];
return myImage;
}

-(void)captureToPhotoAlbum {
UIImage *image = [self glToUIImage];
UIImageWriteToSavedPhotosAlbum(image, self, nil, nil);
}

Source

PVRTexture & Texture2D

Vladimir Boychentsov — Wed, 29 Jul 2009 21:12:44 +0000

Hi guys!

Расскажу о приимуществах и недостатках о разных видах текстурирования.

Начну с текстурирования не PVR, более простое. Простота заключается в следуещих удобствах:
- Возможность использовать любое расширения картинки с неодинаковой высотой и шириной (желательно до 1024×1024).
- Можно использовать картинки TGA, PNG, JPG, etc.
- Один из значительных плюсов является простота размещения. Создается bound в который всталяется картинка.
- Использование картинок с прозрачностью.

Примеры текстурирования приведены ниже

Пример исходного кода OpenGL Texture2D

Минусы заключаются в том, что загружается долго, если текстур много и памяти много занимает.

Рассказывать про PVR не буду подробно, т.к. можно посмотреть пример apple PVRTextureLoader (где он находится на сайте apple не помню, поэтому выложил на deposit). Скажу вкратце, что с текстурированием такого типа работает в N раз быстрее. Порекомендую писать sh скрипты для преобразования рисунков.

Пример:

1
2
3
4

#!/bin/sh
TEXTURE_TOOL=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/texturetool

$TEXTURE_TOOL -m -e PVRTC --bits-per-pixel-2 -o "$1.pvr" -f PVR $1

Пример вызова:
./Script.sh fire.png

И еще один нюанс! PVR только квадратное расширение: 64×64, 128×128, etc.

OpenGL and gif – gifPlayer for iPhone

Vladimir Boychentsov — Mon, 27 Jul 2009 11:44:43 +0000

It’s really easy! If you have this source code :)

OpenGL GIF Player iPhone

P.S.: I’ve returned!

SIO2 answers on questions from forum sio2

Vladimir Boychentsov — Sat, 30 May 2009 01:14:41 +0000

Center of object from

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

SIO2object *tmp = sio2ResourceGetObject( sio2->_SIO2resource, "name of your object" );

tmp->buf = ( unsigned char * )sio2MapBuffer( tmp->vbo, GL_ARRAY_BUFFER );

unsigned int i = 0,
n_vert = sio2ObjectGetNumVert( tmp );

while( i != n_vert )
{
vec3 v;

memcpy( &v, &tmp->buf[ i * 12 ], 12 );

printf("%f %f %f\n", v.x, v.y, v.z);

++i;
}

tmp->buf = ( unsigned char * )sio2UnmapBuffer( GL_ARRAY_BUFFER );

duplicate object my version

1
2
3
4
5

SIO2object *object = ( SIO2object * )sio2ResourceGet( sio2->_SIO2resource,
SIO2_OBJECT,
"name object for duplicate" );

SIO2object *new = sio2ObjectDuplicate(object, object->_SIO2transform, " name by new object", 1);

handle parent to child my version

1
2
3
4
5
6
7
8

SIO2object *parent = ( SIO2object * )sio2ResourceGet( sio2->_SIO2resource,
SIO2_OBJECT,
"name parent" );
SIO2object *child = ( SIO2object * )sio2ResourceGet( sio2->_SIO2resource,
SIO2_OBJECT,
"name child" );

child->_SIO2transform->_SIO2parent = parent->_SIO2transform;

Create 3d earth for SIO2 project

Vladimir Boychentsov — Sun, 15 Mar 2009 17:35:23 +0000

Припомощи SIO2 мне захотелось сделать землю. Другими словами просто создать шар и наложить на него текстуру.

В процессе этих действий столкнулся с некоторыми проблемками:
- Это какой тип шара можно использовать в SIO2.
- Размер текстуры.
- Накладывание текстуры.

Сейчас пошагово опишу как я это сделал:

Открываем Blender. Удаляем стандартный куб. Нажимаем пробел и в меню выбираем Add -> Mesh -> IcoSphere. Выставляем subdivision на 5, а радиус на 2 к примеру. В низу на панели “Link and Materials” нажимаем “Set Smooth”, а в “Mesh” создаем новую UV Texture, если ее там нету, нажав на кнопку “New”.

Переходим в Shading (Нажать F5), если не создан “Link to Object”, то жмем на кнопку “Add New”. Наводим на шар и нажимаем Tab, он должен подсветиться. Переходим в текстурирование (или нажать F6) и создаем новую текстуру с типом “Image” и в настройке “Image” загружаем картинку нажав на кнопку “Load”. У текстуры ширина должна быть ровна высоте, и не более 1024 пикселов. Вот моя текстура планеты земля.

Разделим экран (нажмите на верхнюю грань и выберите “Split Area”) и в новой областе выберем “UV/Image Editor” и берем нашу текстуру. Наводим на шар нажимаем Tab, далее нажимаем D и выбираем “Textured Solid” мы наблюдаем результат ниже на картинке, текстура наложилась не правильно.

Текстура наложилась неправильно т.к. она по умолчанию накладывается на каждую поверхность. Выбираем шар, нажимаем Tab, нажимаем U и выбираем “Sphere form View”. Можно подкорректировать сетку наложения.

Экспортируем нашу планету по примерам SIO2 (можно скачать мою землю) и закидываем в проект (желательно использовать пример 3), в template.mm прописуем ее имя, компилируем и смотрим на результат:

Чтоб можно было вращать планету добавим немного кода в template.mm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

vec2 start;
void templateScreenTap( void *_ptr, unsigned char _state )
{
if( sio2->_SIO2window->n_touch )
{
start.x = sio2->_SIO2window->touch[ 0 ].x;
start.y = sio2->_SIO2window->touch[ 0 ].y;
}
}

void templateScreenTouchMove( void *_ptr )
{

if( sio2->_SIO2window->n_touch )
{
float d1 = sio2->_SIO2window->touch[ 0 ].x - start.x;
float d2 = sio2->_SIO2window->touch[ 0 ].y - start.y;

// Get the object Suzanne located inside our resources.
SIO2object *_SIO2object = ( SIO2object * )sio2ResourceGet( sio2->_SIO2resource,
SIO2_OBJECT,
"object/Sphere" );
// Check if we get a pointer.
if( _SIO2object )
{
// Apply a rotation based on the
// touch movement.
if( d1 > 5.0f || d1 < -5.0f )
{ _SIO2object->_SIO2transform->rot->z += ( d1 * 0.025f ); }

if( d2 > 5.0f || d2 < -5.0f )
{ _SIO2object->_SIO2transform->rot->x += ( d2 * 0.025f ); }

// Update the OpenGL matrix and apply the
// new rotation specified above.
sio2TransformBindMatrix( _SIO2object->_SIO2transform );
}
}

}