For colors several data types are defined. An easy to use one is: data Color4 a = Color4 a a a a deriving ( Eq, Ord, Show ) The four parameters of this constructor specify the red, green and blue values of the color and additionally a fourth argument, which denotes the opaqueness of the color. The values are usually specified by floating numbers of type GLfloat. Values for number attributes are between 0 and 1.

You may wonder, why there is a special type GLfloat for numbers in HOpenGL. The reason is that OpenGL is defined in a way that it is as independent from concrete types in any implementation as possible. However you do not have to worry too much about this type. You can use ordinary float literals for numbers of type GLfloat. Haskells overloading mechanism ensures that these literals can create GLfloat numbers. Der Grund für die ganzen GLblah-Typen ist, daß die OpenGL-Spec bewußt ungenau bzgl. der konkreten Typen ist, um Implementationen nicht zu sehr einzuschränken. GLfloat könnte daher z.B. Haskells Float sein, aber auch Double (obwohl ich letzteres noch nie gesehen habe). This program opens a window with a red background. IO () createAWindow windowName = do createWindow windowName displayCallback $= display display :: DisplayCallback display = do ]]>clearColor $= Color4 1 0 0 1 Whenever in a display function a sequence of monadic statements is defined, a final call to the function flush should be made. Only such a call will ensure that the statements are completely committed to the device, on which is drawn. So most preperatory things we know by now. We can start drawing onto the screen. Astonishingly in OpenGL there is only very limited number of shapes for drawing. Just points, simple lines and polygons. No curves or more complicated objects. Everything needs to be performed with these primitive drawing functions. The main function used for drawing something is renderPrimitive. The first argument of this functions specifies what kind of primitive is to be drawn. There are the following primitives defined in OpenGL:
The second argument defines the points which specify the primitives. These points are so called vertexes. Vertexes are actually monadic functions which constitute a point. If you want to define a point in a 3-dimensional universe with the coordinates $x,\; y,\; z$ then you can use the following expression in HOpenGL: vertex (Vertex3 x y z) or, if you prefer the use of the standard prelude operator $: vertex $ Vertex3 x y z We have seen in the introductory example that we can draw points. We can simply define a vertex and use this in the function renderPrimitive. This program draws one single yellow point on a black screen. IO () createAWindow windowName = do createWindow windowName displayCallback $= display display :: DisplayCallback display = do clear [ColorBuffer] currentColor $= Color4 1 1 0 1 ]]>renderPrimitive Points If you do not like parantheses then you can of course use the operator $ from the prelude and rewrite the line:
renderPrimitive Points $ vertex $ Vertex3 (0.1::GLfloat) 0.5 0 Unfortunately Haskell needs sometimes a little bit of help for overloaded type classes. Therefore you find the type annotation (0.1::GLfloat) on one of the float literals. In larger applications Haskell can usually infer this information from the context. Just in smaller applications you will sometimes need to help Haskell's type checker a bit.

The second argument of renderPrimitive is a sequence of monadic statements. So, if you want more than one point to be drawn, you can define these in a nested do statement In this program we use a nested do statement to define more points. IO () createAWindow windowName = do createWindow windowName displayCallback $= display display :: DisplayCallback display = do clear [ColorBuffer] currentColor $= Color4 1 1 0 1 renderPrimitive Points $ ]]>do vertex (Vertex3 (0.1::GLfloat) 0.6 0) vertex (Vertex3 (0.1::GLfloat) 0.1 0)flush If you want to think of points mainly as triples then you can convert a list of points into a sequence of monadic statements by first maping every triple into a vertex, e.g.by:
map (\(x,y,z)->vertex $ Vertex3 x y z)
and then combining the sequence of monadic statements into one monadic statement. Therefore you can use the standard function for monads: sequence_. The standard function mapM_ is simply the composition of map and sequence_, such that a list of triples can be converted to a monadic vertex statement by:
mapM_ (\(x,y,z) -> vertex $ Vertex3 x y z)
which is the technique used in the introductory example. Thus we can rewrite a points example in the following way: points are defined as a list of triples. Furthermore we define some useful auxilliary functions: IO () createAWindow windowName = do createWindow windowName displayCallback $= display display :: DisplayCallback display = do clear [ColorBuffer] currentColor $= Color4 1 1 0 1 let points = [(0.1,0.6,0) ,(0.2,0.8,0) ,(0.3,0.1,0) ,(0,0,0) ,(0.4,-0.8,0) ,(-0.2,-0.8,0) ] renderPoints points flush makeVertexes :: [(GLfloat,GLfloat,GLfloat)] -> IO () makeVertexes = mapM_ (\(x,y,z)->vertex $ Vertex3 x y z) renderPoints :: [(GLfloat,GLfloat,GLfloat)] -> IO () renderPoints = renderAs Points renderAs :: PrimitiveMode -> [(GLfloat,GLfloat,GLfloat)] -> IO () renderAs figure ps = renderPrimitive figure $ makeVertexes ps]]> In the following we want to explore all the other different shapes which can be rendered by OpenGL. All shapes are defined in terms of vertexes which you can think of as points. We have already seen how to define vertexes and how to open a window and such things. We provide a simple module, which will be used in the consecutive examples. Some useful functions are defined in this module. A first function will open a window und use a given display function for the window graphics: IO () renderInWindow displayFunction = do (progName,_) <- getArgsAndInitialize createWindow progName displayCallback $= displayFunction mainLoop]]> The next function creates for a list of points, which are expressed as triples, and a basic shape a display function which renders the desired shape. PrimitiveMode -> IO () displayPoints points primitiveShape = do renderAs primitiveShape points flush renderAs :: PrimitiveMode -> [(GLfloat,GLfloat,GLfloat)] -> IO () renderAs figure ps = renderPrimitive figure $ makeVertexes ps makeVertexes :: [(GLfloat,GLfloat,GLfloat)] -> IO () makeVertexes = mapM_ (\(x,y,z)->vertex $ Vertex3 x y z)]]> Eventually we define a list of points as example and provide a function for easy use of these points: IO () mainFor primitiveShape = renderInWindow (displayMyPoints primitiveShape) displayMyPoints :: PrimitiveMode -> IO () displayMyPoints primitiveShape = do clear [ColorBuffer] currentColor $= Color4 1 1 0 1 displayPoints myPoints primitiveShape myPoints :: [(GLfloat,GLfloat,GLfloat)] myPoints = [(0.2,-0.4,0) ,(0.46,-0.26,0) ,(0.6,0,0) ,(0.6,0.2,0) ,(0.46,0.46,0) ,(0.2,0.6,0) ,(0.0,0.6,0) ,(-0.26,0.46,0) ,(-0.4,0.2,0) ,(-0.4,0,0) ,(-0.26,-0.26,0) ,(0,-0.4,0) ]]]> We can now render the example points in a oneliner: import PointsForRendering main :: IO () main = mainFor Points The next basic thing to do with vertexes is to connect them, i.e. consider them as starting and end point of a line. There are three ways to connect points with lines in OpenGL. The most natural way is to take pairs of points and draw lines between these. This is done in the primitive mode Lines. In order that this works properly an even number of vertexes needs to be supplied to the function renderPrimitive. Connecting our example points by lines. Pairs of points define singleton lines. import PointsForRendering main :: IO () main = mainFor Lines The resulting window can be found in figure . The next way to connect points with lines you probably can imagine is to make a closed figure. The end point of a line is the starting point of the next line and the last point is connected with the first, such that a closed loop of lines is created. Now we make a loop of lines with our example points. import PointsForRendering main :: IO () main = mainFor LineLoop The resulting window can be found in figure . A strip of lines is very close to a loop of lines. The only thing missing is the last line which connects the last point with the first one again. Now we make a strip of lines with our example points. import PointsForRendering main :: IO () main = mainFor LineStrip The resulting window can be found in figure . The next basic shape which can be rendered by OpenGL are triangles. Triples of points are taken and triangles are drawn with these. As for lines there are three flavours of triangles. The most natural way of drawing triangles is to take triples and draw triangles. In order to work for triangles, the number of points provided needs to be a multiple of 3. Our example vertexes define 12 points such that we get 4 triangles import PointsForRendering main :: IO () main = mainFor Triangles The resulting window can be found in figure . A triangle strip makes a sequence of triangles where the next triangle uses two points of its predecessor and one new point. For our 12 points a triangle strip will create 10 triangles. import PointsForRendering main :: IO () main = mainFor TriangleStrip The resulting window can be found in figure . A fan has one starting point for all triangles. Triangles are always drawn starting from the first point. Our example points as a fan. 10 triangles are rendered. import PointsForRendering main :: IO () main = mainFor TriangleFan The resulting window can be found in figure . Lines connected two points, triangles three points, now we will connect four points. This is calles a quad. There are two flavours of quads. The primitive mode Quads takes quadruples of points and connects them in order to render a filled figure. For our 12 example points OpenGL renders 3 quads import PointsForRendering main :: IO () main = mainFor Quads The resulting window can be found in figure . In a three dimensional world quads are unlike triangles not necessarily plane areas. For a strip of quads OpenGL uses two points of the preceeding quads for the next quad. The number $n$ of vertexes therefore needs to be of the form: $n=4+2*m$. Our examples vertexes now used for a strip of quads. import PointsForRendering main :: IO () main = mainFor QuadStrip The resulting window can be found in figure .Which somehow does not look like the expected? We connected two, three and for points. Eventually there is a shape that connects an arbitrary number of points. This is generally called a polygon. There are some restrictions for polygons: no convex corners are allowed. lines may not cross each other. polygons need to be planar. Noch nicht mal allgemeine Polygone sind erlaubt, sondern nur einfache Polygone, d.h. planare, konvexe und nicht selbstüberschneidende Polygone. Kompliziertere Polygone kann man sich mit Hilfe des GLU-Tessellators in einfachere übersetzen lassen. Eventually our vertexes are used to define a polygon. import PointsForRendering main :: IO () main = mainFor Polygon In this case the resulting window looks like the triangle fan we have seen before. If you want to render polygons which hurt some of the restrictions above, you need to represent them by a set of smaller polygons. Since this is a tedious task to be done manually there is a library available, which does this for you: the GLU tessellation. In the last sections you have seen all primitive shapes, which can be rendered by OpenGL. Everything else needs to be constructed in term of these primitives. Especially you might wonder where curves and circles are. The bad news is: you have to do these by yourself. With a bit mathematics you probably have already guessed how to do curves and especially circles. You need to approximate them with a large number of lines. If the lines get very small we eventually see a curve. Let us try this with circles. We write a module which gives us some utility functions for rendering circles. The crucial function calculates a list of points which are all on the circle. You need a bit of basic geometrical knowledge for this. The coordinates of the points on a circle can be determined by $\backslash sin(\backslash alpha)$ and $\backslash cos(\backslash alpha)$ where $\backslash alpha$ is between $0$ and $2\backslash pi$.

Thus we can easily calculate the coordinates of an arbitrary number of points on a circle: a -> Int -> [(a,a,a)] circlePoints radius number = [let alpha = 2 * pi * fromIntegral i / fromIntegral number in (radius * sin alpha, radius * cos alpha, 0) | i <- [1, 2 .. number]] ]]> If we take a large enough number then we will eventually get a circle: [(GLfloat,GLfloat,GLfloat)] circle radius = circlePoints radius 100]]> The following function can be used to render the circle figures: Int -> IO () renderCircleApprox r n = displayPoints (circlePoints r n) LineLoop renderCircle :: GLfloat -> IO () renderCircle r = displayPoints (circle r) LineLoop fillCircle :: GLfloat -> IO () fillCircle r = displayPoints (circle r) Polygon]]> First we test what kind of shape we get for small approximation numbers. import PointsForRendering import Circle main :: IO () main = renderInWindow $ do clear [ColorBuffer] renderCircleApprox 0.8 10 The resulting graphic can be seen in figure . Now we can test, if the resulting circle is, what we expected. The resulting graphic can be seen in figure . And eventually have a look at the filled circle. The resulting graphic can be seen in figure . Now, where you know how to do circles, you can equally as easy define functions for rendering rings. A ring has an inner and an outer circle and fills the space between these. So we can approximate these two rings and render quads between them. We can simply define the points of the inner and outer ring and merge these. The resulting list of points can then be rendered as a QuadStrip. Since there is no primitive mode for quad loops, we need to append the first two points as the last points again: GLfloat -> [(GLfloat,GLfloat,GLfloat)] ringPoints innerRadius outerRadius = concat $ map (\(x,y)->[x,y]) (points++[p]) where innerPoints = circle innerRadius outerPoints = circle outerRadius points@(p:_) = zip innerPoints outerPoints]]> Eventually we provide a small function for rendering ring shapes. GLfloat -> IO () ring innerRadius outerRadius = displayPoints (ringPoints innerRadius outerRadius) QuadStrip]]> We can test the ring functions: The resulting graphic can be seen in figure . There are some more attributes that can be set for primitive shapes (besides the color, which we have already set). You could argue that there is no need for single points. A point can be modelled by a circle that has a small radius (or in the third dimension a sphere). However, there is something like a point in OpenGL and you can set its size. This size value for points does not refer to a radius in the coordinate system but is measured in terms of screen pixels. The default value is, one pixel per point. We set the point size to 10 pixels: import PointsForRendering main :: IO () main = renderInWindow display display :: DisplayCallback display = do pointSize $= 10 displayMyPoints Points The resulting graphic can be seen in figure . As for points, there are also further attributes for lines. First of all there is a line width. As for the point size, this is measured in screen pixels. Furthermore, you can set some line stipple: this is the pattern of the line, dashes etc. For the line stipple there is a state variable of type: Maybe (GLint, GLushort). The second argument of the value pair denotes the kind of stipple. For every short value there is one stipple. The short value has 16 bits. Every bit stands for a pixel. If for the corresponding short number the bit is set, then the pixel will be drawn, otherwise not. This means that for the short number 0 you will not see anything of your line, and for the value 65535 you will see a solid line.

The integer number of the value pair denotes a factor for the chosen stipple. For some positiv integer $n$ every bit of the short number stands for $n$ bits. Setting the width of lines and a stipple: import PointsForRendering main :: IO () main = renderInWindow display display :: DisplayCallback display = do clearColor $= Color4 1 1 1 1 clear [ColorBuffer] lineStipple $= Just (1,255) currentColor $= Color4 0 0 0 1 lineWidth $= 10 displayPoints squarePoints LineLoop flush squarePoints :: [(GLfloat,GLfloat,GLfloat)] squarePoints = [(-0.7,-0.7,0),(0.7,-0.7,0),(0.7,0.7,0),(-0.7,0.7,0)] The resulting graphic can be seen in figure . You might have wondered, why the function renderPrimitive takes monadic statements as argument and not simply a list of vertexes? This means we could pass any monadic statement to the function renderPrimitive, not only statements that define vertexes by the call of the function vertex. There are some statements, which are allowed in the statements passed to renderPrimitive. One of these is setting the current color before every call of vertex to a new value. When finally rendering the primitive, OpenGL takes these color values into acount. We define a triangle. Before the three vertexes of the triangle are defined, the current color is set to a new value. import PointsForRendering colorTriangle :: IO () colorTriangle = do currentColor $= Color4 1 0 0 1 vertex $ Vertex3 (-0.5) (-0.5) (0::GLfloat) currentColor $= Color4 0 1 0 1 vertex $ Vertex3 (0.5) (-0.5) (0::GLfloat) currentColor $= Color4 0 0 1 1 vertex $ Vertex3 (-0.5) (0.5) (0::GLfloat) main :: IO () main = renderInWindow display display :: DisplayCallback display = do clearColor $= Color4 1 1 1 1 clear [ColorBuffer] renderPrimitive Triangles colorTriangle flush The resulting window can be found in figure . Rendering of polygons is very limited. We cannot render polygons for crossing lines, or convex corners. Such polygons need to be expressed by a set of simpler polygons. In the module Graphics.Rendering.OpenGL.GLU.Tessellation there are a number of functions, which calculate a set of simpler polygons. For the time being, we will not go into detail, but give one single example, of how to use this library. We want to render stars. These are shapes with convex corners. We can easily calculate the points on the star rays. They are all on one circle. We can use our function for defining circle points and get a list of points. For rendering the star, we take first the points with odd index followed by the points with even index. Int -> [Vertex3 GLdouble] starPoints radius rays = map (\(_,(x,y,z)) -> Vertex3 x y z) (os ++ es) where (os,es) = partition (odd . fst) $ zip [1 :: Int, 2 ..] $ circlePoints radius rays]]> For tessellation we need to create a ComplexPolygon, which consists of a list of ComplexContours and a ComplexContour consists of a list of AnnotatedVertexes. The annotation can be used for color or similar information, but we do not make use of this annotation and simple annotate every vertex with 0. ComplexPolygon DontCare complexPolygon points = ComplexPolygon [ComplexContour $ map (\v -> AnnotatedVertex v 0) points]]]> The function tessellate creates a list of simple polygons. It needs some control information, which we do not explain here. Int -> IO () star radius rays = do starTess <- tessellate TessWindingPositive 0 (Normal3 0 0 0) noOpCombiner $ complexPolygon (starPoints radius rays) drawSimplePolygon starTess]]> The resulting simple polygons can be rendered with the function renderPrimitive. IO () drawSimplePolygon (SimplePolygon primitiveParts) = mapM_ renderPrimitiveParts primitiveParts renderPrimitiveParts :: Primitive DontCare -> IO () renderPrimitiveParts (Primitive primitiveMode vertices) = renderPrimitive primitiveMode $ mapM_ (vertex . stripAnnotation) vertices stripAnnotation :: AnnotatedVertex DontCare -> Vertex3 GLdouble stripAnnotation (AnnotatedVertex plainVertex _) = plainVertex noOpCombiner :: Vertex3 GLdouble -> WeightedProperties DontCare -> DontCare noOpCombiner _newVertex _weightedProperties = 0]]> Now we can test our stars. We render two stars, one with 7 and one with 5 rays. import PointsForRendering import Star main :: IO () main = renderInWindow $ do clearColor $= Color4 1 1 1 1 clear [ColorBuffer] currentColor $= Color4 1 0 0 1 star 0.9 7 currentColor $= Color4 1 1 0 1 star 0.4 5 The resulting window can be found in figure . The bad news was that just very basic shapes are provided by OpenGL for rendering. The good news is that the OpenGL library comes along with a library that contains a large number of shapes. You probably need very often the shape of a teapot. Since this is so elementary a library function is provided for this. import PointsForRendering main :: IO () main = renderInWindow display display :: DisplayCallback display = do clear [ColorBuffer] renderObject Solid $ Teapot 0.6 flush The resulting graphic can be seen in figure .