It will look like this:

To access the vertex and normal data we first need to call the getGeometry() method on the BaseObject3D. This gives us access to methods like getVertices(), getIndices(), getTextureCoords(), getColors(), etc. The getVertices() and getNormals() methods return a FloatBuffer each:

// -- create a sphere so we can use its vertices and normals
BaseObject3D sphere = new Sphere(1, 16, 8);
// -- get vertex buffer
FloatBuffer vertBuffer = sphere.getGeometry().getVertices();
// -- get the normal buffer
FloatBuffer normBuffer = sphere.getGeometry().getNormals();

Now we can loop through the buffers and get its data. The vertices and normals are x, y and z coordinates that can be accessed by calling get(index), get(index+1), get(index+2) on the FloatBuffer object:

int numVerts = vertBuffer.limit();
for(int i=0; i<numVerts; i+=3) {
	Number3D position = new Number3D(vertBuffer.get(i), vertBuffer.get(i+1), vertBuffer.get(i+2));
	Number3D normal = new Number3D(normBuffer.get(i), normBuffer.get(i+1), normBuffer.get(i+2));

	// -- ... do other stuff ...
}

For instance, we can use the vertex buffer values to position the spikes:

spike.setPosition(vertBuffer.get(i), vertBuffer.get(i+1), vertBuffer.get(i+2));

This way the spikes are nicely distributed across the sphere. But they’re all pointing in the same direction.
Next, let’s set up the orientation so that they face the same direction as the normal:

// -- get the normal so we can orient the spike to the normal
Number3D normal = new Number3D(-normBuffer.get(i), normBuffer.get(i+1), normBuffer.get(i+2));
// -- get the rotation axis. The upAxis is a Number3D(0, 1, 0) (y up)
Number3D axis = Number3D.cross(upAxis, normal);
// -- get the rotation angle
float angle = MathUtil.radiansToDegrees((float)Math.acos(Number3D.dot(upAxis, normal)));
// -- create the quaternion
Quaternion q = new Quaternion();
q.fromAngleAxis(angle, axis);
// -- set the orientation so that it is aligned with the current normal
spike.setOrientation(q);

… and now they all face the same direction. Schweet.
As usual, the code can be found on Github:

RajawaliUsingGeometryDataRenderer.java

First we’ll create a regular sphere and then we’ll attach a custom material to it. To keep things simple we’ll extend the SimpleMaterial class and use its fragment shader. Like so:

public class CustomVertexShaderMaterial extends SimpleMaterial {
	...
	// -- we'll pass our custom vertex shader and SimpleMaterials'
	//     fragment shader into the superclass constructor.
	public CustomVertexShaderMaterial() {
		super(mVShader, SimpleMaterial.mFShader);
	}

Because we want the vertices to be animated we’ll use a time parameter. In the shader this will be a uniform:

uniform float uTime;

In the material class we need to get a handle to this uniform. This can be done by overriding the setShaders method and calling getUniformLocation():

public void setShaders(String vertexShader, String fragmentShader)
{
	super.setShaders(vertexShader, fragmentShader);
	muTimeHandle = getUniformLocation("uTime");
}

We also create a setter so that the time can be updated from the main renderer class. The time value will then be passed to the vertex shader in the useProgram() method which is called every frame:

public void useProgram() {
	super.useProgram();
	// -- make sure that time updates every frame
	GLES20.glUniform1f(muTimeHandle, mTime);
}

public void setTime(float time) {
	mTime = time;
}

Now on to the vertex shader. We want the vertex position to change through time by using trigonometric functions. This should give a nice organic blob effect. The changed vertex position will consist of the original vertex position plus a normalized vector that’s pointing in the same direction but is affected by trigonometric functions. Its always better explained in code :O Here’s the complete vertex shader:

// -- normalized axis vectors. we'll use these to
//    get the angles
const vec3 cXaxis = vec3(1.0, 0.0, 0.0);
const vec3 cYaxis = vec3(0.0, 1.0, 0.0);
const vec3 cZaxis = vec3(0.0, 0.0, 1.0);
// -- the amplitude of the 'wave' effect
const float cStrength = 0.5;

uniform mat4 uMVPMatrix;
uniform float uTime;

attribute vec4 aPosition;
attribute vec2 aTextureCoord;
attribute vec4 aColor;

varying vec2 vTextureCoord;
varying vec4 vColor;		

void main() {
	// -- normalized direction from the origin (0,0,0)

	vec3 directionVec = normalize(vec3(aPosition));

	// -- the angle between this vertex and the x, y, z angles

	float xangle = dot(cXaxis, directionVec) * 5.0;
	float yangle = dot(cYaxis, directionVec) * 6.0;
	float zangle = dot(cZaxis, directionVec) * 4.5;
	vec4 timeVec = aPosition;
	float time = uTime * .05;

	// -- cos & sin calculations for each of the angles
	//    change some numbers here & there to get the
	//    desired effect.

	float cosx = cos(time + xangle);
	float sinx = sin(time + xangle);
	float cosy = cos(time + yangle);
	float siny = sin(time + yangle);
	float cosz = cos(time + zangle);
	float sinz = sin(time + zangle);

	// -- multiply all the parameters to get the final
	//    vertex position

	timeVec.x += directionVec.x * cosx * siny * cosz * cStrength;
	timeVec.y += directionVec.y * sinx * cosy * sinz * cStrength;
	timeVec.z += directionVec.z * sinx * cosy * cosz * cStrength;
	gl_Position = uMVPMatrix * timeVec;
	vTextureCoord = aTextureCoord;

	// -- use the (normalized) direction vector as the
	//    vertex color to get a nice colorful effect

	vColor = vec4(directionVec, 1.0);
}

Notice that a nice effect can be created by using the normalized direction vector as the current vertex’s color

Here’s what it looks like:

The full source code can be found on Github, as usual:

• RajawaliVertexShaderActivity.java
• RajawaliVertexShaderRenderer.java
• CustomVertexShaderMaterial.java

Go to the next tutorial, Rajawali Tutorial 24: Using Geometry Data To Position And Rotate Objects

The first problem is that it is pointing to the wrong dll file. When you get this exception:

DllNotFoundException: C:\Program Files (x86)\Microsoft Research KinectSDK\MSRKINECTNUI.DLL

You should open the file KinectInterop.cs and changes all dll paths to:

C:\Windows\System32\Kinect10.dll

This will fix all compiler errors and it should run without problems.

However, it will only run once. When you run it the second time Unity will freeze and you will have to kill the process. Not very convenient.

This is caused by a bug in the Microsoft SDK. According to this page the problem is:

If C++ code is executing NuiInitializa/NuiShutdown multiple times through
the application's lifetime, SetDeviceStatusCallback should be called once,
before invoking those calls.

So apparently a single call to SetDeviceStatusCallback() should fix the problem. To be able to call this method we need to add some code to the KinectInterop.cs file. First of all we need to add an empty struct:

public struct NuiStatusProc
{
}

Then we need to link the native method. In the NativeMethods class add:

[DllImportAttribute(@"C:\Windows\System32\Kinect10.dll", EntryPoint = "NuiSetDeviceStatusCallback")]
	    public static extern void NuiSetDeviceStatusCallback(NuiStatusProc callback);

Now open the file KinectSensor.cs and add this line to the void Awake() method (just before the line “catch (Exception e)”):

NativeMethods.NuiSetDeviceStatusCallback(new NuiStatusProc());

Now everything should run fine. If it doesn’t let me know :O

If you would do this the normal way (create 2000 Plane objects with individual textures) your device would melt in your hands. When you do it the way described here, it will run on full speed and make a happy dance. Now that’s a bold promise.

Like I said, this is not an easy optimisation if you’re not very familiar with creating your own geometry and shaders. I’ll attempt to explain it anyway. Please post a comment if you have any questions.

In order to create the geometries for each separate plane we’ll need to create a custom BaseObject3D. We are going to create the usual vertex, normal, color and texture coordinates buffers manually. On top of that we’ll create new buffers for the positions and rotations.

First, create the new class that inherits from BaseObject3D:

public class PlanesGalore extends BaseObject3D {

Then add our buffers & the buffer handles to the class variable declarations:

protected FloatBuffer mPlanePositions;
protected FloatBuffer mRotationSpeeds;
protected int mPlanePositionsBufferHandle;
protected int mRotationSpeedsBufferHandle;
protected PlanesGaloreMaterial mGaloreMat;

In the init() method we create the arrays that will contain all relevant data. These will fed into FloatBuffers and IntBuffers after that:

final int numPlanes = 2000;
final float planeSize = .3f;

int numVertices = numPlanes * 4;
float[] vertices = new float[numVertices * 3];
float[] textureCoords = new float[numVertices * 2];
float[] normals = new float[numVertices * 3];
float[] planePositions = new float[numVertices * 3];
float[] rotationSpeeds = new float[numVertices];
float[] colors = new float[numVertices * 4];
int[] indices = new int[numPlanes * 6];

Next up is the loop that fills the arrays with all the relevant data. I won’t expand much on this, but it creates all the individual planes (vertices, indices, textures coordinates, normals, random rotations, random positions):

for (int i = 0; i < numPlanes; ++i) {
	Number3D r = new Number3D(-10f + (Math.random() * 20f), -10 + (Math.random() * 20f), (Math.random() * 80f));
	int randColor = 0xff000000 + (int) (0xffffff * Math.random());

	int vIndex = i * 4 * 3;
	vertices[vIndex + 0] = -planeSize;
	vertices[vIndex + 1] = planeSize;
	vertices[vIndex + 2] = 0;
	vertices[vIndex + 3] = planeSize;
	vertices[vIndex + 4] = planeSize;
	vertices[vIndex + 5] = 0;
	vertices[vIndex + 6] = planeSize;
	vertices[vIndex + 7] = -planeSize;
	vertices[vIndex + 8] = 0;
	vertices[vIndex + 9] = -planeSize;
	vertices[vIndex + 10] = -planeSize;
	vertices[vIndex + 11] = 0;

	for (int j = 0; j < 12; j += 3) {
		normals[vIndex + j] = 0;
		normals[vIndex + j + 1] = 0;
		normals[vIndex + j + 2] = 1;

		planePositions[vIndex + j] = r.x;
		planePositions[vIndex + j + 1] = r.y;
		planePositions[vIndex + j + 2] = r.z;
	}

	vIndex = i * 4 * 4;

	for (int j = 0; j < 16; j += 4) {
		colors[vIndex + j] = Color.red(randColor) / 255f;
		colors[vIndex + j + 1] = Color.green(randColor) / 255f;
		colors[vIndex + j + 2] = Color.blue(randColor) / 255f;
		colors[vIndex + j + 3] = 1.0f;
	}

	vIndex = i * 4 * 2;

	float u1 = .25f * (int) Math.floor(Math.random() * 4f);
	float v1 = .25f * (int) Math.floor(Math.random() * 4f);
	float u2 = u1 + .25f;
	float v2 = v1 + .25f;

	textureCoords[vIndex + 0] = u2;
	textureCoords[vIndex + 1] = v1;
	textureCoords[vIndex + 2] = u1;
	textureCoords[vIndex + 3] = v1;
	textureCoords[vIndex + 4] = u1;
	textureCoords[vIndex + 5] = v2;
	textureCoords[vIndex + 6] = u2;
	textureCoords[vIndex + 7] = v2;

	vIndex = i * 4;
	int iindex = i * 6;
	indices[iindex + 0] = (short) (vIndex + 0);
	indices[iindex + 1] = (short) (vIndex + 1);
	indices[iindex + 2] = (short) (vIndex + 3);
	indices[iindex + 3] = (short) (vIndex + 1);
	indices[iindex + 4] = (short) (vIndex + 2);
	indices[iindex + 5] = (short) (vIndex + 3);

	float rotationSpeed = -1f + (float) (Math.random() * 2f);
	rotationSpeeds[vIndex + 0] = rotationSpeed;
	rotationSpeeds[vIndex + 1] = rotationSpeed;
	rotationSpeeds[vIndex + 2] = rotationSpeed;
	rotationSpeeds[vIndex + 3] = rotationSpeed;
}

One important thing to note here is how the texture coordinates are being calculated. Instead of using a separate texture for each plane, the textures are combined into a texture atlas. In this case, I’ve put 16 textures into a single texture. Each plane then gets texture coordinates that correspond to one these textures.

Finally, the usual data can be passed on to the superclass:

setData(vertices, normals, textureCoords, colors, indices);

Since we have custom position and rotation speed arrays we’ll need to create two Buffers and obtain a handle from the OpenGL context:

mPlanePositions = ByteBuffer.allocateDirect(planePositions.length * Geometry3D.FLOAT_SIZE_BYTES).order(ByteOrder.nativeOrder()).asFloatBuffer();
mPlanePositions.put(planePositions).position(0);

mRotationSpeeds = ByteBuffer.allocateDirect(rotationSpeeds.length * Geometry3D.FLOAT_SIZE_BYTES).order(ByteOrder.nativeOrder()).asFloatBuffer();
mRotationSpeeds.put(rotationSpeeds).position(0);

mPlanePositionsBufferHandle = mGeometry.createBuffer(BufferType.FLOAT_BUFFER, mPlanePositions, GLES20.GL_ARRAY_BUFFER);
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0);

mRotationSpeedsBufferHandle = mGeometry.createBuffer(BufferType.FLOAT_BUFFER, mRotationSpeeds, GLES20.GL_ARRAY_BUFFER);
GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, 0);

We’ll also have to write a custom shader. Creating a custom shader is the topic of this tutorial so please read that first.

In this shader we’ll need to add two new attributes to the vertex shader:

attribute vec4 aPlanePosition;
attribute float aRotationSpeed;

Then in the main() method we apply the rotation matrices manually:

float rotation = uTime * aRotationSpeed;

// -- first rotate around the z axis
mat4 mz = mat4(1.0);
mz[0][0] = cos(rotation);
mz[0][1] = sin(rotation);
mz[1][0] = -sin(rotation);
mz[1][1] = cos(rotation);

// -- then rotate around the y axis
mat4 my = mat4(1.0);
my[0][0] = cos(rotation);
my[0][2] = -sin(rotation);
my[2][0] = sin(rotation);
my[2][2] = cos(rotation);

// -- rotate the vertex before translating it
vec4 rotPos = aPosition * mz * my;

// -- now translate it to the plane position
gl_Position = uMVPMatrix * (rotPos + aPlanePosition);

It’s more work than Object3D.setRenderChildrenAsBatch() but the performance gain is significant.

This example is part of the Rajawali Examples app, get it from Google Play.

The full source code can be viewed on Github:

• Rajawali2000PlanesRenderer.java
• PlanesGalore.java
• PlanesGaloreMaterial.java

On to Rajawali Tutorial 23: Custom Vertex Shader

Here’s one of the last things that Min3D had but Rajawali didn’t. In the past few months Rajawali has shaped up to be way better than Min3D. It’s been a very productive few months and you can expect a lot of new features in the near future. If you have any suggestions just give me a shout

So here’s fog. There’s not much to it. The most important thing is to enable fog on the RajawaliRenderer:

setFogEnabled(true);

It’s important that you do this before creating any materials. If you don’t there will be no fog. This has to do with shader optimisation.
The other fog parameters can be set on the camera:

mCamera.setFogNear(5);
mCamera.setFogFar(15);
mCamera.setFogColor(0x999999);

Setting the background color to be the same color as the fog color makes it complete:

setBackgroundColor(0x999999);

As usual, the full example can be found on Github: RajawaliFogRenderer.java

On to Rajawali Tutorial 22: More Optimisation

The particle shader has just been updated with some code that’ll allow you to use sprite sheets.

Sprite sheets are basically separate animation frames tiled in a single texture. The shader has logic that loops through these frames at a specified speed.

The shader takes these arguments:

• setCurrentFrame(): the current frame
• setTileSize(): the size (in normalized coordinates) of one tile. Tiles must be square. If there are 8 rows of tiles (so 8 * 8 = 64 tiles in total) then the tile size is 1 / 8 = 0.125
• setNumTileRows(): the number of rows in one texture. If we follow the example in the previous bullet point then this should be 8.
• setAnimOffsets(): this is a FloatBuffer with frame offsets for each separate ‘particle’. Setting this to a random value results in the effect in the above video.

The full source code for this can be found on Github as usual:

• ExampleParticleSystem2.java
• RajawaliAnimatedSpritesRenderer.java

This demo is also included in the Rajawali examples app on Google Play.

On to Rajawali Tutorial 21: Fog

Catmull-Rom splines can make your life much easier. This spline is named after two people, one of them being Edwin Catmull who is the founder and president of Pixar Animation Studios. So yeah, it must be good then

A Catmull-Rom spline consists of two control points and at least two ‘normal’ points. So if you pass in less than four points it will throw up on you. Don’t say I didn’t warn you :O

All you need to do is create an instance of CatmullRomPath3D and call addPoint() a couple of times:

CatmullRomPath3D path = new CatmullRomPath3D();
path.addPoint(new Number3D(2, 0, -2));
path.addPoint(new Number3D(6, 3, 0));
path.addPoint(new Number3D(1, -2, 0));
path.addPoint(new Number3D(-8, -4, 10));
path.addPoint(new Number3D(0, 0, 12));
path.addPoint(new Number3D(11, 6, 8));

This line can now be drawn by stitching together line segments or you can use it as an animation path.
To accomplish the latter, just pass the path into the TranslateAnimation3D constructor to create a nice animation:

TranslateAnimation3D anim = new TranslateAnimation3D(path);
anim.setDuration(12000);
anim.setRepeatCount(Animation3D.INFINITE);
anim.setRepeatMode(Animation3D.REVERSE);
// -- orient to path
anim.setOrientToPath(true);
anim.setTransformable3D(arrow);
anim.start();

Passing ‘true’ to the setOrientToPath() method will set the object’s orientation to current path segment.

To draw the path you can call CatmullRomPath3D’s calculatePoint() method to get the interpolated point. Once you’ve filled the Stack with Number3Ds you can pass it on to the Line3D constructor to visualize the spline:

Stack linePoints = new Stack();
for (int i = 0; i < 100; i++) {
	linePoints.add(path.calculatePoint(i / 100f));
}
Line3D line = new Line3D(linePoints, 1, 0xffffffff);
SimpleMaterial material = new SimpleMaterial();
material.setUseColor(true);
line.setMaterial(material);
addChild(line);

Which will result into something similar like this:

The shape in the first image can be seen in the examples app.

The source code can be found on Github.

On to Rajawali Tutorial 20: Animated Sprites

Stack points = new Stack();
points.add(new Number3D(2, 0, 0));
points.add(new Number3D(4, 0, 0));
points.add(new Number3D(2, 2, 0));
points.add(new Number3D(2, 0, 6));
// ... etc ...

This Stack can then be passed into the constructor of the Line3D class along with a thickness and a color:

Line3D line = new Line3D(points, 1, 0xffffff00);
SimpleMaterial material = new SimpleMaterial();
material.setUseColor(true);
whirl.setMaterial(material);
addChild(whirl);

It’s easy as that. Using line segments like this you can create nice looking shapes like this:

It’s also relatively easy to draw bezier curves. You first need to create an instance of BezierPath3D and then pass in the points and control points:

BezierPath3D bezierPath = new BezierPath3D();
bezierPath.addPoint(new Number3D(0, -4, 0), new Number3D(-2, -4, .2f), new Number3D(4, 4, 4), new Number3D(-2, 4, 4.5f));
bezierPath.addPoint(new Number3D(-2, 4, 4.5f), new Number3D(2, -2, -2), new Number3D(4, 4, 4), new Number3D(-2, 4, 4.5f));

Now we can interpolate through these points and create line segments. The more segments, the smoother the line.

// -- again, create a Stack of Number3Ds
Stack points = new Stack();

// -- the more segments, the smoother the line
int numLineSegments = 100;

for(int i=0; i < numLineSegments; i++) {
	// -- BezierPath3D's calculatePoint() method calculates and interpolated
	//     Number3D. It accepts values between 0 and 1, hence i / numLineSegments
	points.push(bezierPath.calculatePoint(i / (float)numLineSegments));
}

// -- create out bezier curve
Line3D line = new Line3D(points, 1, 0x00ff00);
SimpleMaterial material = new SimpleMaterial();
material.setUseColor(true);
line.setMaterial(material);
addChild(line);

… and here’s the result of that:

The shape in the first image can be seen in the examples app.

The source code can be found on Github.

On to Rajawali Tutorial 19: Catmull-Rom Splines

The most important thing is that the model should be triangulated. Rajawali doesn’t accept quads, only tris. In Blender, this is an option you can select in the exporter. In a program like MeshLab, this is done automatically.

At the moment, Rajawali also doesn’t support per-face textures. This is on the todo list.

The options that should be checked when exporting from blender are:

• Apply Modifiers
• Include Normals
• Include UVs
• Write Materials (if applicable)
• Triangulate Faces
• Objects as OBJ Objects

The files should be written to your “res/raw” folder in your ADT project. Usually you’ll get errors in the console when you do this. The Android SDK ignores file extensions so it’ll regard the .obj and .mtl files as duplicates. The way to fix this is to rename the files. For instance:

• myobject.obj > myobject_obj
• myobject.mtl > myobject_mtl

The parser replaces any dots in file names, so this should be picked up automatically by the parser. Path fragments in front of file names (also texture paths) are discarded so you can leave them as is.

The texture file paths in the .mtl files are stripped off periods and path fragments as well. The textures need to be placed in the res/drawable-nodpi folder.

If it still throws errors check if there are any funny characters or unsupported texture formats (like bmp).

Just as a reminder, here’s the code that takes care of the parsing:

ObjParser objParser = new ObjParser(mContext.getResources(), mTextureManager, R.raw.myobject_obj);
objParser.parse();
BaseObject3D mObject = objParser.getParsedObject();
mObject.setLight(mLight);
addChild(mObject);

Or check the source file here on Github.

On to Rajawali Tutorial 18: Drawing Lines

// -- myObject is of type BaseObject3D
// -- get the bounding box

IBoundingVolume boundingBox = myObject.getGeometry().getBoundingBox();

// -- or get the bounding sphere

IBoundingVolume boundingSphere = myObject.getGeometry().getBoundingSphere();

Both the BoundingBox and BoundingSphere classes have a transform() method that takes the current model’s model matrix as the only parameter. This is needed to translate, rotate and scale the bounding volume.

boundingBox.transform(myObject.getModelMatrix());

Once the bounding volume has been transformed we can check if it intersects with another bounding volume (of the same kind):

boolean intersects = boundingBox.intersectsWith(otherBoundingBox);
if(intersects)
     // -- collision!
else
    // -- no collision 

The full version of this can be found on Github:

• RajawaliCollisionDetectionActivity.java
• RajawaliCollisionDetectionRenderer.java

As usual, all suggestions for features and improvements are welcome. Or if you’re a collision detection expert and you’re willing to make this more advanced, why not fork Rajawali on Github and make a contribution?

On to Rajawali Tutorial 17: Importing .Obj Files