There are 20 pages in this

tutorial. Please scroll down to

see all the pages.

OpenGL: Hello World

How is a 3D model created?

The model’s surface or skin is divided into small geometric shapes such as triangles. Many people use

OpenGL to create the geometric shapes.

https://pixabay.com/en/head-wireframe-face-lines-wave-663997/

Begin photo

A mesh of a 3D human head. The surface of the head is divided into hundreds of tiny triangles.

End photo

This is a tutorial on how to use OpenGL to create simple geometric shapes. We will use the openTK’s

implementation of OpenGL.

Launch a browser and go to https://sourceforge.net/projects/opentk/.

Download the openTK .exe file.

Run the .exe file.

Create a new Visual Basic Windows Form Application.

Enlarge the form by dragging the lower right corner outward.

Begin photo

Screenshot of a Visual Basic Windows Form Application.

A red arrow is showing the user to draw the form’s lower right corner outward.

End photo

Go to the Solution Explorer.

Right click References

Select Add Reference…

Click the browse button.

Begin photo

Screenshot of the Reference Manager.

A red arrow points to the Browse button.

End photo

Go to C:\Users\[yourUserName]\Documents\OpenTK\1.1\Binaries\OpenTK\Release

NOTE: Please replace [yourUserName] with your actual user name.

Add these 2 files:

C:\Users\[yourUserName]\Documents\OpenTK\1.1\Binaries\OpenTK\Release\OpenTK.dll

C:\Users\[yourUserName]\Documents\OpenTK\1.1\Binaries\OpenTK\Release\OpenTK.GLControl.dll

Begin photo

Screenshot of dialog box to “select the files to reference.”

The user navigated to the folder

C:\Users\[yourUserName]\Documents\OpenTK\1.1\Binaries\OpenTK\Release\

A red arrow points to OpenTK.dll

A red arrow points to OpenTK.GLControl.dll

A red arrow points to the Add button.

End photo

Make sure the OpenTk.dll’s checkbox is checked.

Make sure the OpenTK.GLControl.dll’s checkbox is checked.

Click the ok button.

Begin photo

A screenshot of the Reference Manager.

A red arrow points to the checkbox that is next to OpenK.dll. The checkbox is checked.

A red arrow points to the checkbox that is next to OpenK.GLControl.dll. The checkbox is checked.

A red arrow points to the OK button.

End photo

Go to the Toolbox.

Right click "All Windows Forms."

Select Choose Items

Begin photo

A screenshot of the Toolbox.

The user has right-clicked “All Windows Forms”

The user has selected Choose Items…

End photo

Scroll down to where GLControl should be.

If you don’t see GLControl, then click the Browse button and find

C:\Users\javap\Documents\OpenTK\1.1\Binaries\OpenTK\Release\OpenTK.GLControl.dll.

Make sure the GLControl’s checkbox is checked.

Click the OK button.

Begin photo

Screenshot of “Choose Toolbox Items.”

A red arrow points to GLControl. GLControl’s checkbox is checked.

A red arrow points to the OK button.

End photo

Go to the Toolbox.

Search for GLControl.

Double click GLControl; this will add GLControl to the form.

Begin photo

A screenshot of the Toolbox.

The search box contains the word “GLControl.”

The “All Windows Forms” list of components contains GLControl; this component is highlighted.

End photo

The GLControl looks like a tiny black square.

Drag the GLControl’s lower right corner to make the control bigger.

Begin photo

Screenshot of a form that contains a GLControl.

A red arrow is showing the user to drag the GLControl’s lower right corner outward.

End photo

Use the Toolbox to add 3 numericUpDown components.

Begin photo

Screenshot of a form.

The form contains a large GL Control.

Under the GL Control is 3 NumericUpDown.

End photo

Use the property sheet to set the following properties for these 3 NumericUpDown components:

increment: 10

maximum: 360

minimum: -360

Begin photo

Screenshot of a property sheet for a NumericUpDown component.

The Increment property is set to 10.

The Maximum property is set to 360.

The Minimum property is set to -360.

End photo

Copy these TWO PAGES of code into Form1.vb.

You can find a copy of this code in OpenGL_Tutorial_code.txt.

Imports OpenTK

Imports OpenTK.Graphics Imports OpenTK.Graphics.OpenGL

''' <summary> ''' Initialize an openTK container to allow openGL painting.

'''

''' Instructions

''' Add an OpenGL control ''' Add 3 NumericUpDown control

''' increment: 10

''' maximum: 360 ''' minimum: -360

''' Type your code in the PaintGlContainer() subroutine

''' ''' Example:

''' Private Sub PaintGlContainer()

''' 'REM draw a red line ''' 'GL.Begin(PrimitiveType.Lines)

''' 'GL.Color3(Color.Red)

''' 'GL.Vertex3(-100, 0, 0) REM X, Y, Z

''' 'GL.Vertex3(100, 0, 0) ''' 'GL.End()

''' End Sub

''' ''' Derivitive of code from http://pastebin.com/b6ruh7EH

''' </summary>

Public Class Form1

''' <summary>

''' Initialize the G1 container

''' </summary> ''' <param name="sender">The G1 container</param>

''' <param name="e">The load event</param>

Private Sub GlControl1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GlControl1.Load

'Control is loaded, set back color

GL.ClearColor(Color.Black) End Sub

''' <summary> ''' Paint the G1 Container

''' X Is right, Y Is up, Z Is towards you

''' (0,0,0) is the center of the screen

''' </summary> Private Sub PaintGlContainer()

REM Type your code here

End Sub

''' <summary>

''' Repaint the entire screen.

''' The center of the screen is (0,0,0)

''' Place the camera at (0,0,360) ''' Enable depth perception

''' objects further away appear smaller

''' objects in front obscure objects that are behind it ''' Allow the NumericUpDown counters to rotate what is seen on the screen

''' </summary>

''' <param name="sender">The G1 container</param>

''' <param name="e">The paint event</param> Private Sub GlControl1_Paint(ByVal sender As Object, ByVal e As

System.Windows.Forms.PaintEventArgs) Handles GlControl1.Paint

'First Clear Buffers GL.Clear(ClearBufferMask.ColorBufferBit)

GL.Clear(ClearBufferMask.DepthBufferBit)

'Basic Setup for viewing

REM We want objects that are far away on the z axis to look smaller

REM fieldOFiew=1.04, aspectRatio=4/3, nearPlaneDistance=1, farPlaneDistance=10000 Dim perspective As Matrix4 = Matrix4.CreatePerspectiveFieldOfView(1.04, 4 / 3, 1,

10000) 'Setup Perspective

REM camera is at (0,0,360). camera is pointed at (0,0,0). up direction is (0,1,0)

Dim lookat As Matrix4 = Matrix4.LookAt(0, 0, 360, 0, 0, 0, 0, 1, 0) 'Setup camera

GL.MatrixMode(MatrixMode.Projection) 'Load Perspective GL.LoadIdentity()

GL.LoadMatrix(perspective)

GL.MatrixMode(MatrixMode.Modelview) 'Load Camera GL.LoadIdentity()

GL.LoadMatrix(lookat)

GL.Viewport(0, 0, GlControl1.Width, GlControl1.Height) 'Size of window

GL.Enable(EnableCap.DepthTest) 'Enable correct Z Drawings GL.DepthFunc(DepthFunction.Less) 'Enable correct Z Drawings

'Rotating

GL.Rotate(NumericUpDown1.Value, 1, 0, 0) GL.Rotate(NumericUpDown2.Value, 0, 1, 0)

GL.Rotate(NumericUpDown3.Value, 0, 0, 1)

Console.WriteLine(NumericUpDown3.Value)

PaintGlContainer()

'Finally... GraphicsContext.CurrentContext.VSync = True 'Caps frame rate as to not over run

GPU

GlControl1.SwapBuffers() 'Takes from the 'GL' and puts into control End Sub

''' <summary> ''' The user changed the value of the counter; repaint the G1 container.

''' If the counter reaches 360, then reset the counter to 0.

''' If the counter reaches -360, then reset the counter to 0. ''' </summary>

''' <param name="sender">The counter</param>

''' <param name="e">The change event</param>

Private Sub NumericUpDown1_ValueChanged(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles NumericUpDown1.ValueChanged If (NumericUpDown1.Value = 360) Then NumericUpDown1.Value = 0

If (NumericUpDown1.Value = -360) Then NumericUpDown1.Value = 0

'Must be called to update the control window! GlControl1.Invalidate()

End Sub

''' <summary> ''' The user changed the value of the counter; repaint the G1 container.

''' If the counter reaches 360, then reset the counter to 0.

''' If the counter reaches -360, then reset the counter to 0. ''' </summary>

''' <param name="sender">The counter</param>

''' <param name="e">The change event</param> Private Sub NumericUpDown2_ValueChanged(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles NumericUpDown2.ValueChanged

If (NumericUpDown2.Value = 360) Then NumericUpDown2.Value = 0

If (NumericUpDown2.Value = -360) Then NumericUpDown2.Value = 0 'Must be called to update the control window!

GlControl1.Invalidate()

End Sub

''' <summary>

''' The user changed the value of the counter; repaint the G1 container. ''' If the counter reaches 360, then reset the counter to 0.

''' If the counter reaches -360, then reset the counter to 0.

''' </summary> ''' <param name="sender">The counter</param>

''' <param name="e">The change event</param>

Private Sub NumericUpDown3_ValueChanged(sender As Object, e As EventArgs) Handles

NumericUpDown3.ValueChanged If (NumericUpDown3.Value = 360) Then NumericUpDown3.Value = 0

If (NumericUpDown3.Value = -360) Then NumericUpDown3.Value = 0

'Must be called to update the control window! GlControl1.Invalidate()

End Sub

End Class

The center of the GL Control is (0,0,0):

the value of x, in the center, is 0.

the value of y, in the center, is 0.

the value of z, in the center, is 0.

X gets bigger as we move to the right.

Y gets bigger as we move up.

Z gets bigger as we get closer to the screen.

Begin photo

Drawing of the X axis, Y axis, and Z axis.

The center of the screen is (0,0,0).

The value of X gets bigger as we go right.

The value of X gets smaller as we go left.

The value of y gets bigger as we go up.

The value of y gets smaller as we go down.

The value of z gets larger as we get closer to the screen.

The value of z gets smaller as we get further away from the screen.

End photo

Here is how to draw a horizontal line that goes through the center of the screen.

The left edge of the line is at (-100,0,0).

i.e. the X coordinate is -100, the y coordinate is 0, the z coordinate is 0.

The right edge of the line is at (100,0,0).

i.e. the X coordinate is 100, the y coordinate is 0, the z coordinate is 0.

The center of the line is at (0,0,0).

Begin photo

Drawing of a horizontal line.

The left edge of the line is at (-100,0,0).

i.e. the X coordinate is -100, the y coordinate is 0, the z coordinate is 0.

The right edge of the line is at (100,0,0).

i.e. the X coordinate is 100, the y coordinate is 0, the z coordinate is 0.

The center of the line is at (0,0,0)

End photo

We have to tell openTK that we want to draw a line:

GL.Begin(PrimitiveType.Lines)

GL.End()

We now tell openTK the color of the line

GL.Begin(PrimitiveType.Lines)

GL.Color3(Color.Red)

GL.End()

We need to tell openTK the coordinates of each and every dot.

Let’s start with the left dot.

GL.Begin(PrimitiveType.Lines)

GL.Color3(Color.Red)

GL.Vertex3(-100, 0, 0) REM X is -100, Y is 0, and Z is 0

GL.End()

Let’s tell openTK the coordinates of the right dot.

GL.Begin(PrimitiveType.Lines)

GL.Color3(Color.Red)

GL.Vertex3(-100, 0, 0) REM X is -100, Y is 0, and Z is 0

GL.Vertex3(100, 0, 0) REM X is 100, Y is 0, and Z is 0

GL.End()

This is the code you would write in the [Type your code here] space.

This code draws a red horizontal line.

GL.Begin(PrimitiveType.Lines)

GL.Color3(Color.Red)

GL.Vertex3(-100, 0, 0) REM X is -100, Y is 0, and Z is 0

GL.Vertex3(100, 0, 0) REM X is 100, Y is 0, and Z is 0

GL.End()

Here is the code to draw two lines.

GL.Begin(PrimitiveType.Lines)

GL.Color3(Color.Red)

GL.Vertex3(-100, 0, 0) REM X is -100, Y is 0, and Z is 0

GL.Vertex3(100, 0, 0) REM X is 100, Y is 0, and Z is 0

GL.End()

GL.Begin(PrimitiveType.Lines)

GL.Color3(Color.Green)

GL.Vertex3(0,-100, 0) REM X is -100, Y is 0, and Z is 0

GL.Vertex3(0, 100, 0) REM X is 100, Y is 0, and Z is 0

GL.End()

Begin photo

A triangle.

The lower left corner of the triangle is at (-100,-100,0).

The top corner of the triangle is at (0,100,0).

The lower right corner of the triangle is at (100,-100,0).

End photo

Here is how we tell openTK to draw a triangle:

GL.Begin(PrimitiveType.Triangles)

GL.End()

A triangle has 3 edges.

GL.Vertex3(-100, -100, 0)

GL.Vertex3(0, 100, 0)

GL.Vertex3(100, -100, 0)

Begin photo

A rectangle.

The lower left corner of the rectangle is at (-100,-100,0).

The lower right corner of the rectangle is at (100,-100,0).

The upper left corner of the rectangle is at (-100,100,0).

The upper right corner of the rectangle is at (100,100,0).

End photo

Here is how we tell openTK to draw a rectangle.

GL.Begin(PrimitiveType.Quads)

GL.End()

A rectangle has 4 corners. The order of the corners is important. You want to go around the rectangle

in a clockwise or counterclockwise direction.

GL.Vertex3(-100, 100, 0)

GL.Vertex3(100, 100, 0)

GL.Vertex3(100, -100, 0)

GL.Vertex3(-100, -100, 0)

OR

GL.Vertex3(-100, -100, 0)

GL.Vertex3(100, -100, 0)

GL.Vertex3(100, 100, 0)

GL.Vertex3(-100, 100, 0)