205. Castle 3D – Spiral staircase

I built a spiral staircase to go inside each tower, as shown below.

(The jerkiness is caused by the video capture. This runs at 30-40 FPS on my iPad3).

First, I am not going to use the mesh I drew for the outside of the tower. It has the messy crenellations on top that I can’t see from inside the tower. Also, the outside of the tower has walls and ramparts sticking into it, and they would show on the inside.

So I’m going to make a duplicate of the tower mesh, but slightly smaller, so if I drew both of them, one would fit inside the other. That wasn’t hard to do, although I still messed up a few times along the way.

The spiral staircase

Looking at pictures of castle staircases, they all run clockwise and vary in size from small to large. But this is the one I’m going to copy.

The central pillar is simply another copy of the tower mesh, but very narrow.

Looking at the top of the steps, they are triangular wedges, so for each step, I can draw a triangle with one end in the centre, and the other two just inside the tower wall, out of sight. Then I need to draw the vertical part of the step as a rectangle, ie two triangles.

I decided to give each step a radius of 18 degrees, and a step height of 4 pixels. Then I could calculate the positions and lengths of the vertices, three for the top of the step, and two more for the bottom corners of the step.

I began by creating all the vertices and texture settings for a single step. Then my problem was how to add steps all the way round the central pillar. What I did was create a rotation matrix, starting with

mm=matrix(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1)

which has no rotations (yet), and then I began creating steps, by

• rotating the matrix by 18 degrees on the y axis, with mm:rotate(18,0,1,0), then
• multiplying this matrix by each of my step vertices, and
• adding the correct height

which gave me the correct positions for each step.

This should work perfectly, but this was how my first effort looked. Still it’s better than the blank screen I often get!

Some hours and a lot of tweaking later, I got the result in the video at the top.

I need to move the windows so the stairs don’t run through them. I also need to think about how to make the windows look thicker, as in the picture above.

But the main thing is that these stairs are going to work, and I’m going to be able to walk the camera, up the stairs, and see out of the windows – which is great.

One last thing, is how I made the windows transparent, when I’m using the same texture as I did for the outside of the tower, where the windows are blacked out. I used a special colour for the windows, and added a variable to the shader, that told it whether to make these pixels black or transparent. So from the outside the windows are black, while from the inside they are transparent.

One downside of looking out windows is that I have to draw everything outside, as well as inside. Even if OpenGL is good at culling vertices that can’t be seen, this slows us down. But I’ll worry about this once everything is done. I want to have large glass windows in the gatehouse and maybe internal buildings.

Advertisement