标签： iPhone 3D 编程

OpenGL ES 1.1与2.0都能抽象出集装线的概念，但ES 2.0更为明显。图2.1中，*左边的小精灵接手处理vertex shader，*右边的小精灵处理完后交给fragment shader。

拓扑规则

图元数

顶点数

float triangles[][2] = { {0, 0}, {0, 1}, {1, 1}, {1, 1}, {1, 0}, {0, 0} };

glVertexPointer(2, GL_FLOAT, stride, triangles);

glDrawArrays(GL_TRIANGLES, 0, sizeof(triangles) / stride);

float triangleStrip[][2] = { {0, 1}, {0, 0}, {1, 1}, {1, 0} };

glVertexPointer(2, GL_FLOAT, stride, triangleStrip);

glDrawArrays(GL_TRIANGLE_STRIP, 0, sizeof(triangleStrip) / stride);

float triangleFan[][2] = { {0, 0}, {0, 1}, {1, 1}, {1, 0} };

glVertexPointer(2, GL_FLOAT, stride, triangleFan);

glDrawArrays(GL_TRIANGLE_FAN, 0, sizeof(triangleFan) / stride);

float lines[][2] = { {0, 0}, {0, 1},

{0, 1}, {1, 1},

{1, 1}, {1, 0},

{1, 0}, {0, 0} };

glVertexPointer(2, GL_FLOAT, stride, lines);

glDrawArrays(GL_LINES, 0, sizeof(lines) / stride);

float lineStrip[][2] = { {0, 0}, {0, 1}, {1, 1}, {1, 0}, {0, 0} };

glVertexPointer(2, GL_FLOAT, stride, lineStrip);

glDrawArrays(GL_LINE_STRIP, 0, sizeof(lineStrip) / stride);

float lineLoop[][2] = { {0, 0}, {0, 1}, {1, 1}, {1, 0} };

glVertexPointer(2, GL_FLOAT, stride, lineLoop);

glDrawArrays(GL_LINE_LOOP, 0, sizeof(lineLoop) / stride);

Attribute

OpenGL Enumerant

OpenGL Function Call

Dimensionality

Types

glEnableClientState(GL_VERTEX_ARRAY);

glEnableClientState(GL_COLOR_ARRAY);

//ES 2.0

glEnableVertexAttribArray(positionSlot);

glEnableVertexAttribArray(colorSlot);

glVertexPointer(2, GL_FLOAT, … );

glColorPointer(4, GL_FLOAT, … );

// OpenGL ES 2.0

glVertexAttribPointer(positionSlot, 2, GL_FLOAT, …);

glVertexAttribPointer(colorSlot, 4, GL_FLOAT, …);

OpenGL Type

OpenGL Enumerant

Typedef Of

Length in Bits

齐次坐标

        齐次坐标是在Möbius于1827年8月发表Der barycentrische Calcul中诞生的。随便说说Möbius发明的barycentrische坐标系，它用于iPhone图形芯片中计算三角形插值颜色。这个术语源于古老的词汇“barycentre”,表示中心的意思。如果你将一个三角的三个角放上不同的权重，那么你就可以通过barycentric坐标系计算平衡点。关于它的推导不在本书讨论的范围，如果你有兴趣可以自行研究。

float modelview[16] = { … };

glMatrixMode(GL_PROJECTION);

glLoadMatrixf(projection);

glMatrixMode(GL_MODELVIEW);

glLoadMatrixf(modelview);

float modelview[16] = { … };

GLint projectionUniform = glGetUniformLocation(program, “Projection”);

glUniformMatrix4fv(projectionUniform, 1, 0, projection);

GLint modelviewUniform = glGetUniformLocation(program, “Modelview”);

glUniformMatrix4fv(modelviewUniform, 1, 0, modelview);

表2.4 OpenGL ES方法后缀

float model[16] = { … };

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

glMultMatrixf(view);

glMultMatrixf(model);

关于矩阵与向量，矩阵与矩阵相乘，请参看附录Ａ，C++向量库

glMultMatrix(A);

glMultMatrix(B);

glMultMatrix(C);

glDrawArrays(…);

0,  sy, 0,  0,

0,  0,  sz, 0

0,  0,  0,  1 };

// The following two statements are equivalent.下面两种方法等效

glMultMatrixf(scale);

glScalef(sx, sy, sz);

当缩放因子x,y,z三个都不相等的情况，我们称之为非均匀缩放。这种方式的缩放是被完全允许的，但是大多数情况下会影响效率。因为一旦有非均匀缩放，OpenGL就会进行大量的灯光计算。

0,  1,  0,  0,

0,  0,  1,  0,

tx, ty, tz, 1 };

// The following two statements are equivalent.下面两种方法等效

glMultMatrixf(translation);

glTranslatef(tx, ty, tz);

…

float radians = m_currentAngle * Pi / 180.0f;

float s = std::sin(radians);

float c = std::cos(radians);

float zRotation[16] = { c, s, 0, 0,

-s, c, 0, 0,

0, 0, 1, 0,

0, 0, 0, 1 };

GLint modelviewUniform = glGetUniformLocation(m_simpleProgram, “Modelview”);

glUniformMatrix4fv(modelviewUniform, 1, 0, &zRotation[0]);

glRotatef(m_currentAngle, 0, 0, 1);

glTranslatef(0, -1, 0);

glDrawArrays(…);

{

vec3 z = (eye – target).Normalized();

vec3 x = up.Cross(z).Normalized();

vec3 y = z.Cross(x).Normalized();

mat4 m;

m.x = vec4(x, 0);

m.y = vec4(y, 0);

m.z = vec4(z, 0);

m.w = vec4(0, 0, 0, 1);

vec4 eyePrime = m * -eye;

m = m.Transposed();

m.w = eyePrime;

return m;

}

相机的位置与朝向是由模型－视图矩阵决定的，并非投影矩阵决定。在OpenGL ES 1.1中灯光计算的时候会用到这些数据。

const float maxY = 3;

glOrthof(-maxX, +maxX, -maxY, +maxY, -1, 1);

float b = 1.0f / maxY;

float ortho[16] = {

a, 0,  0, 0,

0, b,  0, 0,

0, 0, -1, 0,

0, 0,  0, 1

};

sy = 1.0f / maxY

sz = -1

float scale[16] = { sx, 0,  0,  0,

0,  sy, 0,  0,

0,  0,  sz, 0

0,  0,  0,  1 };

float top, float near, float far)

{

float a = 2 * near / (right – left);

float b = 2 * near / (top – bottom);

float c = (right + left) / (right – left);

float d = (top + bottom) / (top – bottom);

float e = – (far + near) / (far – near);

float f = -2 * far * near / (far – near);

mat4 m;

m.x.x = a; m.x.y = 0; m.x.z = 0; m.x.w = 0;

m.y.x = 0; m.y.y = b; m.y.z = 0; m.y.w = 0;

m.z.x = c; m.z.y = d; m.z.z = e; m.z.w = -1;

m.w.x = 0; m.w.y = 0; m.w.z = f; m.w.w = 1;

glUniformMatrix4fv(projectionUniform, 1, 0, m.Pointer());

}

float near, float far)

{

float top = near * std::tan(degrees * Pi / 360.0f);

float bottom = -top;

float left = bottom * aspectRatio;

float right = top * aspectRatio;

glFrustum(left, right, bottom, top, near, far);

}

设置投影的时候，应避免把远近裁剪面设为0或负数。数学上不支持这种工作方式。

{

glPushMatrix();

…

glDrawArrays(GL_TRIANGLES, 0, vertexCount);

…

glPopMatrix();

}

{

glPushMatrix();

glRotatef(shoulderAngle, 0, 0, 1);

glDrawArrays( … ); // upper arm

glTranslatef(upperArmLength, 0, 0);

glRotatef(elbowAngle, 0, 0, 1);

glDrawArrays( … ); // forearm

glTranslatef(forearmLength, 0, 0);

glPushMatrix();

glRotatef(finger0Angle, 0, 0, 1);

glDrawArrays( … ); // finger 0

glPopMatrix();

glPushMatrix();

glRotatef(-finger1Angle, 0, 0, 1);

glDrawArrays( … ); // finger 1

glPopMatrix();

glPopMatrix();

}

{

return t * start + (1 – t) * end;

}

{

return LinearTween(t * t, start, end);

}

{

float middle = (start + end) / 2;

t = 2 * t;

if (t <= 1)

return LinearTween(t * t, start, middle);

t -= 1;

return LinearTween(t * t, middle, end);

}

Shoemake的方程只是众多四元数插值的方法中的一种，但是它是*出名的，并在我们的向量库中所采用。其它的方法，如normalized quaternion lerp, log-quaternion lerp, 有时候在性能方面更理想。

float Position[2];

float Color[4];

};

vec2 Position;

vec4 Color;

};

#include <cmath>

template <typename T>

struct Vector2 {

Vector2() {}

Vector2(T x, T y) : x(x), y(y) {}

T x;

T y;

…

};

template <typename T>

struct Vector3 {

Vector3() {}

Vector3(T x, T y, T z) : x(x), y(y), z(z) {}

void Normalize()

{

float length = std::sqrt(x * x + y * y + z * z);

x /= length;

y /= length;

z /= length;

}

Vector3 Normalized() const

{

Vector3 v = *this;

v.Normalize();

return v;

}

Vector3 Cross(const Vector3& v) const

{

return Vector3(y * v.z – z * v.y,

z * v.x – x * v.z,

x * v.y – y * v.x);

}

T Dot(const Vector3& v) const

{

return x * v.x + y * v.y + z * v.z;

}

Vector3 operator-() const

{

return Vector3(-x, -y, -z);

}

bool operator==(const Vector3& v) const

{

return x == v.x && y == v.y && z == v.z;

}

T x;

T y;

T z;

};

template <typename T>

struct Vector4 {

…

};

typedef Vector2<int> ivec2;

typedef Vector3<int> ivec3;

typedef Vector4<int> ivec4;

typedef Vector2<float> vec2;

typedef Vector3<float> vec3;

typedef Vector4<float> vec4;

struct Vector {

…

T components[Dimension];

};

在GLSL着色语言中，vec2与mat4这些类型是语言内置类型。我们的C++向量库是模仿着它写的。

Hello Arrow

Hello Cone

如果你想边看边写代码，那么请在Finder中复制一份HelloArrow的工程目录，并改名为HelloCone。然后用Xcode打开，并在Project菜单中选择Rename，将工程名改为HelloCone。接着把附录A，C++向量库中的Vector.app,Matrix.hpp与Quaternion.hpp添加到工程。RenderingEngine1.cpp是区别*大的地方，打开它删掉里面所有内容，并修改为你将要看到的内容。

#include <OpenGLES/ES1/glext.h>

#include “IRenderingEngine.hpp”

#include “Quaternion.hpp”

#include <vector>

static const float AnimationDuration = 0.25f;

using namespace std;

struct Vertex {

vec3 Position;

vec4 Color;

};

struct Animation {    //[1]

Quaternion Start;

Quaternion End;

Quaternion Current;

float Elapsed;

float Duration;

};

class RenderingEngine1 : public IRenderingEngine {

public:

RenderingEngine1();

void Initialize(int width, int height);

void Render() const;

void UpdateAnimation(float timeStep);

void OnRotate(DeviceOrientation newOrientation);

private:

vector<Vertex> m_cone;     //[2]

vector<Vertex> m_disk;     //[3]

Animation m_animation;

GLuint m_framebuffer;

GLuint m_colorRenderbuffer;

GLuint m_depthRenderbuffer;

};

{

return new RenderingEngine1();

}

RenderingEngine1::RenderingEngine1()

{

// Create & bind the color buffer so that the caller can allocate its space.

glGenRenderbuffersOES(1, &m_renderbuffer);

glBindRenderbufferOES(GL_RENDERBUFFER_OES, m_renderbuffer);

}

{

const float coneRadius = 0.5f;     //[1]

const float coneHeight = 1.866f;

const int coneSlices = 40;

{

// Generate vertices for the disk.

…

}

{

// Generate vertices for the body of the cone.

…

}

// Create the depth buffer.

glGenRenderbuffersOES(1, &m_depthRenderbuffer);   //[2]

glBindRenderbufferOES(GL_RENDERBUFFER_OES, m_depthRenderbuffer);

glRenderbufferStorageOES(GL_RENDERBUFFER_OES,

GL_DEPTH_COMPONENT16_OES,

width,

height);

// Create the framebuffer object; attach the depth and color buffers.

glGenFramebuffersOES(1, &m_framebuffer);     //[3]

glBindFramebufferOES(GL_FRAMEBUFFER_OES, m_framebuffer);

glFramebufferRenderbufferOES(GL_FRAMEBUFFER_OES,

GL_COLOR_ATTACHMENT0_OES,

GL_RENDERBUFFER_OES,

m_colorRenderbuffer);

glFramebufferRenderbufferOES(GL_FRAMEBUFFER_OES,

GL_DEPTH_ATTACHMENT_OES,

GL_RENDERBUFFER_OES,

m_depthRenderbuffer);

// Bind the color buffer for rendering.

glBindRenderbufferOES(GL_RENDERBUFFER_OES, m_colorRenderbuffer);  //[4]

glViewport(0, 0, width, height);  //[5]

glEnable(GL_DEPTH_TEST);   //[6]

glMatrixMode(GL_PROJECTION);  //[7]

glFrustumf(-1.6f, 1.6, -2.4, 2.4, 5, 10);

glMatrixMode(GL_MODELVIEW);

glTranslatef(0, 0, -7);

}

// Initialize the vertices of the triangle strip.

vector<Vertex>::iterator vertex = m_cone.begin();

const float dtheta = TwoPi / coneSlices;

for (float theta = 0; vertex != m_cone.end(); theta += dtheta) {

// Grayscale gradient

float brightness = abs(sin(theta));

vec4 color(brightness, brightness, brightness, 1);

// Apex vertex

vertex->Position = vec3(0, 1, 0);

vertex->Color = color;

vertex++;

// Rim vertex

vertex->Position.x = coneRadius * cos(theta);

vertex->Position.y = 1 – coneHeight;

vertex->Position.z = coneRadius * sin(theta);

vertex->Color = color;

vertex++;

}

vec4 color(brightness, brightness, brightness, 1);

m_disk.resize(coneSlices + 2);

// Initialize the center vertex of the triangle fan.

vector<Vertex>::iterator vertex = m_disk.begin();

vertex->Color = vec4(0.75, 0.75, 0.75, 1);

vertex->Position.x = 0;

vertex->Position.y = 1 – coneHeight;

vertex->Position.z = 0;

vertex++;

// Initialize the rim vertices of the triangle fan.

const float dtheta = TwoPi / coneSlices;

for (float theta = 0; vertex != m_disk.end(); theta += dtheta) {

vertex->Color = vec4(0.75, 0.75, 0.75, 1);

vertex->Position.x = coneRadius * cos(theta);

vertex->Position.y = 1 – coneHeight;

vertex->Position.z = coneRadius * sin(theta);

vertex++;

}

{

if (m_animation.Current == m_animation.End)

return;

m_animation.Elapsed += timeStep;

if (m_animation.Elapsed >= AnimationDuration) {

m_animation.Current = m_animation.End;

} else {

float mu = m_animation.Elapsed / AnimationDuration;

m_animation.Current = m_animation.Start.Slerp(mu, m_animation.End);

}

}

void RenderingEngine1::OnRotate(DeviceOrientation orientation)

{

vec3 direction;

switch (orientation) {

case DeviceOrientationUnknown:

case DeviceOrientationPortrait:

direction = vec3(0, 1, 0);

break;

case DeviceOrientationPortraitUpsideDown:

direction = vec3(0, -1, 0);

break;

case DeviceOrientationFaceDown:

direction = vec3(0, 0, -1);

break;

case DeviceOrientationFaceUp:

direction = vec3(0, 0, 1);

break;

case DeviceOrientationLandscapeLeft:

direction = vec3(+1, 0, 0);

break;

case DeviceOrientationLandscapeRight:

direction = vec3(-1, 0, 0);

break;

}

m_animation.Elapsed = 0;

m_animation.Start = m_animation.Current = m_animation.End;

m_animation.End = Quaternion::CreateFromVectors(vec3(0, 1, 0), direction);

}

{

glClearColor(0.5f, 0.5f, 0.5f, 1);

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glPushMatrix();

glEnableClientState(GL_VERTEX_ARRAY);

glEnableClientState(GL_COLOR_ARRAY);

mat4 rotation(m_animation.Current.ToMatrix());

glMultMatrixf(rotation.Pointer());

// Draw the cone.

glVertexPointer(3, GL_FLOAT, sizeof(Vertex), &m_cone[0].Position.x);

glColorPointer(4, GL_FLOAT, sizeof(Vertex),  &m_cone[0].Color.x);

glDrawArrays(GL_TRIANGLE_STRIP, 0, m_cone.size());

// Draw the disk that caps off the base of the cone.

glVertexPointer(3, GL_FLOAT, sizeof(Vertex), &m_disk[0].Position.x);

glColorPointer(4, GL_FLOAT, sizeof(Vertex), &m_disk[0].Color.x);

glDrawArrays(GL_TRIANGLE_FAN, 0, m_disk.size());

glDisableClientState(GL_VERTEX_ARRAY);

glDisableClientState(GL_COLOR_ARRAY);

glPopMatrix();

}

如果我们将用隐式转换的操作代替Pointer()，那么我们不可能使我们的OpenGL代码更加简洁，同样很容易出错，因为编译器具体做了什么，我们也不知道。出于类似的原因，STL中的string才提供c_str()这样的方法返回char*。

#include <OpenGLES/ES2/glext.h>

#include “IRenderingEngine.hpp”

#include “Quaternion.hpp”

#include <vector>

#include <iostream>

#define STRINGIFY(A)  #A

#include “../Shaders/Simple.vert”

#include “../Shaders/Simple.frag”

static const float AnimationDuration = 0.25f;

…

class RenderingEngine2 : public IRenderingEngine {

public:

RenderingEngine2();

void Initialize(int width, int height);

void Render() const;

void UpdateAnimation(float timeStep);

void OnRotate(DeviceOrientation newOrientation);

private:

GLuint BuildShader(const char* source, GLenum shaderType) const;

GLuint BuildProgram(const char* vShader, const char* fShader) const;

vector<Vertex> m_cone;

vector<Vertex> m_disk;

Animation m_animation;

GLuint m_simpleProgram;

GLuint m_framebuffer;

GLuint m_colorRenderbuffer;

GLuint m_depthRenderbuffer;

};

glFrustumf(-1.6f, 1.6, -2.4, 2.4, 5, 10);

glMatrixMode(GL_MODELVIEW);

glTranslatef(0, 0, -7);

SimpleFragmentShader);

glUseProgram(m_simpleProgram);

// Set the projection matrix.

GLint projectionUniform = glGetUniformLocation(m_simpleProgram,

“Projection”);

mat4 projectionMatrix = mat4::Frustum(-1.6f, 1.6, -2.4, 2.4, 5, 10);

glUniformMatrix4fv(projectionUniform, 1, 0,

projectionMatrix.Pointer());

{

GLuint positionSlot = glGetAttribLocation(m_simpleProgram,

“Position”);

GLuint colorSlot = glGetAttribLocation(m_simpleProgram,

“SourceColor”);

glClearColor(0.5f, 0.5f, 0.5f, 1);

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glEnableVertexAttribArray(positionSlot);

glEnableVertexAttribArray(colorSlot);

mat4 rotation(m_animation.Current.ToMatrix());

mat4 translation = mat4::Translate(0, 0, -7);

// Set the model-view matrix.

GLint modelviewUniform = glGetUniformLocation(m_simpleProgram,

“Modelview”);

mat4 modelviewMatrix = rotation * translation;

glUniformMatrix4fv(modelviewUniform, 1, 0, modelviewMatrix.Pointer());

// Draw the cone.

{

GLsizei stride = sizeof(Vertex);

const GLvoid* pCoords = &m_cone[0].Position.x;

const GLvoid* pColors = &m_cone[0].Color.x;

glVertexAttribPointer(positionSlot, 3, GL_FLOAT,

GL_FALSE, stride, pCoords);

glVertexAttribPointer(colorSlot, 4, GL_FLOAT,

GL_FALSE, stride, pColors);

glDrawArrays(GL_TRIANGLE_STRIP, 0, m_cone.size());

}

// Draw the disk that caps off the base of the cone.

{

GLsizei stride = sizeof(Vertex);

const GLvoid* pCoords = &m_disk[0].Position.x;

const GLvoid* pColors = &m_disk[0].Color.x;

glVertexAttribPointer(positionSlot, 3, GL_FLOAT,

GL_FALSE, stride, pCoords);

glVertexAttribPointer(colorSlot, 4, GL_FLOAT,

GL_FALSE, stride, pColors);

glDrawArrays(GL_TRIANGLE_FAN, 0, m_disk.size());

}

glDisableVertexAttribArray(positionSlot);

glDisableVertexAttribArray(colorSlot);

}