Home   Donators   Contact Us       

<< Previous Tutorial     Next Tutorial >>

Tutorial 6 - Make your move


Theory

3D space consists of 3 dimensions named x, y and z. The x value increases to the right and decreases to the left. The y value increases to the top and decreases to the bottom. The z value increases out of the screen (towards you) and decreases into the screen (away from you). The point where the x-axis, y-axis and z-axis meet each other is better known as the origin. At this point the x, y and z values are all zero.

In the diagrams below, the first cube is drawn at the origin of our 3D space. The second cube is drawn at a position where the x-value was increased. With the third cube it is easy to see that the z-value of the cube's position was decreased.

Placing models and objects in 3D space is simply a matter of choosing the (x,y,z) coordinate of where we want to position the object or model.

Tutorial Steps
Tutorial created with Real Studio 2011 Release 4.3.
1. Open Real Studio.
2. Choose the "Desktop" project template.
3. Add an OpenGLSurface control to Window1.
4. Resize and position OpenGLSurface1 to fill the whole form.
5. Tick the LockRight and LockBottom properties of OpenGLSurface1.
6. Add a property named "PosX" of type Double, with a default value of 0, to Window1. (Double click the titlebar of Window1 and select "Add Property")
7. Add a property named "PosY" of type Double, with a default value of 0, to Window1. (Double click the titlebar of Window1 and select "Add Property")
8. Add the following code to the Open event of OpenGLSurface1 (You can access the Open event by double clicking on OpenGLSurface1 and then selecting the event from the list):
' make sure only back faces are culled and enable culling

OpenGL.glCullFace OpenGL.GL_BACK
OpenGL.glEnable OpenGL.GL_CULL_FACE

' instantiate memory blocks used to configure our light with

Dim light_position As new MemoryBlock(16)
Dim light_ambience As new MemoryBlock(16)
Dim light_diffANDspec As new MemoryBlock(16)

' define position of the light

light_position.SingleValue(0) = 0.0
light_position.SingleValue(4) = 0.0
light_position.SingleValue(8) = 1.0
light_position.SingleValue(12) = 0.0

' define ambience of the light

light_ambience.SingleValue(0) = 0.0
light_ambience.SingleValue(4) = 0.0
light_ambience.SingleValue(8) = 0.0
light_ambience.SingleValue(12) = 1.0

' define diffuse and specular of the light

light_diffANDspec.SingleValue(0) = 1.0
light_diffANDspec.SingleValue(4) = 1.0
light_diffANDspec.SingleValue(8) = 1.0
light_diffANDspec.SingleValue(12) = 1.0

' apply light settings

OpenGL.glLightfv OpenGL.GL_LIGHT0, OpenGL.GL_POSITION, light_position ' set position
OpenGL.glLightfv OpenGL.GL_LIGHT0, OpenGL.GL_AMBIENT, light_ambience ' set ambience
OpenGL.glLightfv OpenGL.GL_LIGHT0, OpenGL.GL_DIFFUSE, light_diffANDspec ' set diffuse
OpenGL.glLightfv OpenGL.GL_LIGHT0, OpenGL.GL_SPECULAR, light_diffANDspec ' set specular

' enable our light

OpenGL.glEnable OpenGL.GL_LIGHT0

' enable lighting

OpenGL.glEnable OpenGL.GL_LIGHTING

' enable overwriting of material properties with vertex colors

OpenGL.glEnable OpenGL.GL_COLOR_MATERIAL
9. Add the following code to the Render event of OpenGLSurface1 (You can access the Render event by double clicking on OpenGLSurface1 and then selecting the event from the list):
OpenGL.glPushMatrix ' save matrix

' clear the background

OpenGL.glClearColor(0, 0, 0, 1)
OpenGL.glClear(OpenGL.GL_COLOR_BUFFER_BIT)

' move back a bit so that we can see the object

OpenGL.glTranslatef 0.0, 0.0, -10.0

' set the position of the model

OpenGL.glTranslatef PosX, PosY, 0.0

OpenGL.glColor3d 0, 0, 1 ' set color to blue

OpenGL.glNormal3d 0, 0, 1 ' front polygon normal

OpenGL.glBegin OpenGL.GL_POLYGON ' front polygon
OpenGL.glVertex3d 1, 1, 1
OpenGL.glVertex3d -1, 1, 1
OpenGL.glVertex3d -1, -1, 1
OpenGL.glVertex3d 1, -1, 1
OpenGL.glEnd

OpenGL.glColor3d 1, 0, 0 ' set color to red

OpenGL.glNormal3d 1, 0, 0 ' right polygon normal

OpenGL.glBegin OpenGL.GL_POLYGON ' right polygon
OpenGL.glVertex3d 1, 1, 1
OpenGL.glVertex3d 1, -1, 1
OpenGL.glVertex3d 1, -1, -1
OpenGL.glVertex3d 1, 1, -1
OpenGL.glEnd

OpenGL.glNormal3d -1, 0, 0 ' left polygon normal

OpenGL.glBegin OpenGL.GL_POLYGON ' left polygon
OpenGL.glVertex3d -1, 1, 1
OpenGL.glVertex3d -1, 1, -1
OpenGL.glVertex3d -1, -1, -1
OpenGL.glVertex3d -1, -1, 1
OpenGL.glEnd

OpenGL.glColor3d 0, 0, 1 ' set color to blue

OpenGL.glNormal3d 0, 0, -1 ' back polygon normal

OpenGL.glBegin OpenGL.GL_POLYGON ' back polygon
OpenGL.glVertex3d 1, 1, -1
OpenGL.glVertex3d 1, -1, -1
OpenGL.glVertex3d -1, -1, -1
OpenGL.glVertex3d -1, 1, -1
OpenGL.glEnd

OpenGL.glColor3d 0, 1, 0 ' set color to green

OpenGL.glNormal3d 0, 1, 0 ' top polygon normal

OpenGL.glBegin OpenGL.GL_POLYGON ' top polygon
OpenGL.glVertex3d 1, 1, 1
OpenGL.glVertex3d 1, 1, -1
OpenGL.glVertex3d -1, 1, -1
OpenGL.glVertex3d -1, 1, 1
OpenGL.glEnd

OpenGL.glNormal3d 0, -1, 0 ' bottom polygon normal

OpenGL.glBegin OpenGL.GL_POLYGON ' bottom polygon
OpenGL.glVertex3d 1, -1, 1
OpenGL.glVertex3d -1, -1, 1
OpenGL.glVertex3d -1, -1, -1
OpenGL.glVertex3d 1, -1, -1
OpenGL.glEnd

OpenGL.glPopMatrix() ' restore matrix
10. Add the following code to the Resized event of OpenGLSurface1 (You can access the Resized event by double clicking on OpenGLSurface1 and then selecting the event from the list):
' set the viewport rectangle

OpenGL.glViewport 0, 0, OpenGLSurface1.Width, OpenGLSurface1.Height

' set up the perspective projection settings

OpenGL.glMatrixMode OpenGL.GL_PROJECTION
OpenGL.glLoadIdentity
OpenGL.gluPerspective 60.0, OpenGLSurface1.Width / OpenGLSurface1.Height, 1, 100.0

' select and reset the modelview matrix

OpenGL.glMatrixMode OpenGL.GL_MODELVIEW
OpenGL.glLoadIdentity
11. Add the following code to the Paint event of Window1 (You can access the Paint event by double clicking on the titlebar of Window1 and then selecting the event from the list):
' refresh the OpenGL surface

OpenGLSurface1.Render
12. Add the following code to the KeyDown event of Window1 (You can access the KeyDown event by double clicking on the titlebar of Window1 and then selecting the event from the list):
select case Asc(Key)
  
case 28 ' left arrow
  
  PosX = PosX - 0.2 ' decrease the x position (move model left)
  OpenGLSurface1.Render ' redraw the model with the new position
  
case 29 ' right arrow
  
  PosX = PosX + 0.2 ' increase the x position (move model right)
  OpenGLSurface1.Render ' redraw the OpenGL surface with the new position
	
case 30 ' up arrow
  
  PosY = PosY + 0.2 ' increase the y position (move model up)
  OpenGLSurface1.Render ' redraw the model with the new position
	
case 31 ' down arrow
  
  PosY = PosY - 0.2 ' decrease the y position (move model down)
  OpenGLSurface1.Render ' redraw the model with the new position

end select
13. Save and run the project.
14. Use the arrow keys to move the cube around in 3D space.

Code Analysis

The two properties, PosX and PosY, that we added to Window1, is used to store the x and y position of our model. We set the initial values of these two properties equal to zero to ensure that our model is drawn at the origin at startup.

The code added to the Window1.KeyDown event changes the PosX and PosY property values depending on which arrow keys we press. The select statement of the Asc(Key) value is used to determine if the user pressed the up, down, left, or right arrow key.

When the left arrow key is pressed, we decrease the x value of the position. This moves the model to the left.
When the right arrow key is pressed, we increase the x value of the position. This moves the model to the right.
When the up arrow key is pressed, we increase the y value of the position. This moves the model up.
When the down arrow key is pressed, we decrease the y value of the position. This moves the model down.

We call the OpenGLSurface1.Render method to redraw our model with its new position, each time after we changed the position of our model in the Window1.KeyDown event.

When we look at the code of our drawing routing in the OpenGLSurface1.Render event, we notice the function call glTranslatef(PosX,PosY,0.0). The glTranslatef function call instructs OpenGL to draw our model at the position stored in the PosX and PosY properties. Note that we are not changing the z position of our model.

Setting the positions of objects and models are very easy with the glTranslatef instruction. See if you can change the behavior of the program so that the up and down arrows move the model on the z-axis instead of the y-axis.

Project Downloads

<< Previous Tutorial     Next Tutorial >>


 
All the content on Real 3D Tutorials, with the exception of the SyntaxHighlighter which is licensed under the MIT License, is provided to the public domain and everyone is free to use, modify, republish, sell or give away this work without prior consent from anybody. Content is provided without warranty of any kind. Under no circumstances shall the author(s) or contributor(s) be liable for damages resulting directly or indirectly from the use or non-use of the content.
Should you find the content useful and would like to make a contribution, you can show your support by making a donation.