### Part 5 'Branch Skinning'

I was originally going to have including saving of the mesh information into a data file to load directly into an opengl scene, but I decided to instead just include the generation code into the opengl program so that you could generate several random trees on the fly if you wanted. Also, everyone has a different preferred method for saving information, so I'll leave that to the individual.

The purpose of this section will be to give our tree mesh a skin by applying the mesh coordinates to a texture as well as finding the normals for the polies for lighting.

Included in this next file is an opengl resource set that I've developed and have been using with many of my test programs. Most of the Routines are not necessary for our program, but here are a few of importance:

sub cross2 (x1!, y1!, z1!, x2!, y2!, z2!, x3!, y3!, z3!, nx!, ny!, nz!)

sub deinit ()

sub load_texture (texFil$, tex as gluint)

sub load_textureAlpha (texFil$, tex as gluint)

sub selectRes ()

sub cross2 (x1!, y1!, z1!, x2!, y2!, z2!, x3!, y3!, z3!, nx!, ny!, nz!) - This sub takes in 3 3d coordinates and produces a normal vector that is found by taking the cross product of the 3d vectors
sub deinit () - Shuts down the program
sub load_texture[Alpha] (texFil$, tex as gluint) - These 2 routines are used for loading our textures into the scene. The 2nd parameter tex as gluint is a gluint that serves as a handle to an openGL texture.
sub selectRes () - The select resolution screen that pops up in the beginning. Ths doesn't really require glfw, but that just happened to be how I wrote it before finding out this can be done with SDL alone.
Here is a link to the basecode for our openGL tree generator: glbase.zip

#### The Skin

This is essentially very easy. We take the original display code that figured out all the polygon points and before drawing them we perform a cross product to get the lighting normal, and we assign texture coordinates to each point.
Here is a blown up view of what we're going to do:
For each of the quads that make up the branch we'll map each point to a specific u/v coordinate on the texture. As you can see from the image we start with the upper left corner and proceed to the upper right in a counter clock wise fashion. For the Triangles that make up the end points we use u/v coordinates (0,0)->(.5,1)->(1,0) this way the point is at the bottom center. Since it is a triangle, we only need three u/v coordinates.
At this same time we perform our cross product by passing the first 3 coordinates for the quad and all 3 coordinates for the triangle. We only need the first 3 coordinates for the quad since it is a flat plane... relatively, heh, there is a bit of twisting, but for the most part its very close. If you wanted to be really picky you could perform a cross product for each individual vertex and average them together to make a nice round branch, but that is beyond the scope >)

#### The First Code Changes: Porting to OpenGL

The first part of the tree code for generation has been lumped into the function generateTree (). There are really no alterations to is. We just need to dim shared nBranches at the beginning for our drawing routine. Instead of using pnti(4,1) we'll be using pntf(4,2) to store our 3d coordinates for drawing. This is due to the fact that we're no longer using getXY since opengl is doing all the projection work for us. Also, we need to include leafscale! so that our drawing routine can keep track of how large to scale the leaf planes.
I've also added the pixel grid to the bottom of the tree as it was in the original generator.

Here is our new drawing routine. This takes our old line drawing and converts it to use for opengl. It is essentially exactly the same. It just skips getXY and uses glVertex3f to define our line points.

>     sub drawTree ()
>         glBegin GL_LINES
>         glColor3f .5, .25, 0
>         for branch = 0 to nBranches - 1
>             nNodes = branches(branch).nNodes
>             for node = 0 to nNodes - 1
>                 for p = 0 to MAX_SEGS - 1
>                     n = p + 1
>                     if n = MAX_SEGS then n = 0
>                     pntf(0,0) = branches(branch).nodes(node).plane(n).x
>                     pntf(0,1) = branches(branch).nodes(node).plane(n).y
>                     pntf(0,2) = branches(branch).nodes(node).plane(n).z
>                     n = p
>                     pntf(3,0) = branches(branch).nodes(node).plane(n).x
>                     pntf(3,1) = branches(branch).nodes(node).plane(n).y
>                     pntf(3,2) = branches(branch).nodes(node).plane(n).z

>                     nn = node - 1
>                     if nn > -1 then
>                         n = p + 1
>                         if n = MAX_SEGS then n = 0
>                         pntf(1,0) = branches(branch).nodes(nn).plane(n).x
>                         pntf(1,1) = branches(branch).nodes(nn).plane(n).y
>                         pntf(1,2) = branches(branch).nodes(nn).plane(n).z
>                         n = p
>                         pntf(2,0) = branches(branch).nodes(nn).plane(n).x
>                         pntf(2,1) = branches(branch).nodes(nn).plane(n).y
>                         pntf(2,2) = branches(branch).nodes(nn).plane(n).z
>                         refs = 4
>                     else
>                         pntf(1,0) = branches(branch).root.x
>                         pntf(1,1) = branches(branch).root.y
>                         pntf(1,2) = branches(branch).root.z
>                         refs = 3
>                     end if

>                     if refs = 3 then
>                         'triangle
>                         glVertex3f pntf(0,0), pntf(0,1), pntf(0,2)
>                         glVertex3f pntf(1,0), pntf(1,1), pntf(1,2)

>                         glVertex3f pntf(0,0), pntf(0,1), pntf(0,2)
>                         glVertex3f pntf(3,0), pntf(3,1), pntf(3,2)

>                         glVertex3f pntf(3,0), pntf(3,1), pntf(3,2)
>                         glVertex3f pntf(1,0), pntf(1,1), pntf(1,2)
>                     else
>                         'quad
>                         glVertex3f pntf(0,0), pntf(0,1), pntf(0,2)
>                         glVertex3f pntf(1,0), pntf(1,1), pntf(1,2)

>                         glVertex3f pntf(2,0), pntf(2,1), pntf(2,2)
>                         glVertex3f pntf(1,0), pntf(1,1), pntf(1,2)

>                         glVertex3f pntf(2,0), pntf(2,1), pntf(2,2)
>                         glVertex3f pntf(3,0), pntf(3,1), pntf(3,2)

>                         glVertex3f pntf(3,0), pntf(3,1), pntf(3,2)
>                         glVertex3f pntf(1,0), pntf(1,1), pntf(1,2)
>                     end if
>                 next
>             next
>         next
>         glEnd

>     end sub

The leaf planes are left out to aid in describing the skinning process.

#### Loading the Textures

Our tree will use 2 textures. One for the leaf plane and one for the bark. They will require 2 slightly different loading routines due to the fact that the leaf plane has an alpha channel so you can see through the leaves.
This requires the following code around the init call:

>     DIM SHARED barkTex as gluint, leafTex as gluint

>     init  'not new

>     load_texture "bark.png", barkTex
>     load_textureAlpha "leaves.png", leafTex

Bark:
Leaves:
The actual loading of the textures is beyond the scope, but if you would like to learn more please visit: NeHe Lesson 06: Texture Mapping

#### Alterations to the drawing

Instead of using lines, we'll now use Quads and Triangles. And each time we'll use glTexCoord2f to map a u/v coordinate to each point. Remember when drawing polygons to have them follow the correct point order (CCW or CW) depending on your implementation so that they are not backfacing and possibly culled.

Part of our addition to this routine will be having it draw in 2 passes. Once for the quads and once for the triangles. This is so that we don't have to call glBegin for each polygon, only twice. The Bold code below is new.

>     sub drawTree ()

>         glBindTexture GL_TEXTURE_2D, barkTex

>         glColor3f 1, 1, 1
>         for pass = 0 to 1
>             if pass = 0 then glBegin GL_TRIANGLES
>             if pass = 1 then glBegin GL_QUADS

>             for branch = 0 to nBranches - 1
>                 nNodes = branches(branch).nNodes
>                 for node = 0 to nNodes - 1
>                     for p = 0 to MAX_SEGS - 1
>                         n = p + 1
>                         if n = MAX_SEGS then n = 0
>                         pntf(0,0) = branches(branch).nodes(node).plane(n).x
>                         pntf(0,1) = branches(branch).nodes(node).plane(n).y
>                         pntf(0,2) = branches(branch).nodes(node).plane(n).z
>                         n = p
>                         pntf(3,0) = branches(branch).nodes(node).plane(n).x
>                         pntf(3,1) = branches(branch).nodes(node).plane(n).y
>                         pntf(3,2) = branches(branch).nodes(node).plane(n).z

>                         nn = node - 1
>                         if nn > -1 then
>                             n = p + 1
>                             if n = MAX_SEGS then n = 0
>                             pntf(1,0) = branches(branch).nodes(nn).plane(n).x
>                             pntf(1,1) = branches(branch).nodes(nn).plane(n).y
>                             pntf(1,2) = branches(branch).nodes(nn).plane(n).z
>                             n = p
>                             pntf(2,0) = branches(branch).nodes(nn).plane(n).x
>                             pntf(2,1) = branches(branch).nodes(nn).plane(n).y
>                             pntf(2,2) = branches(branch).nodes(nn).plane(n).z
>                             refs = 4
>                         else
>                             pntf(1,0) = branches(branch).root.x
>                             pntf(1,1) = branches(branch).root.y
>                             pntf(1,2) = branches(branch).root.z
>                             refs = 3
>                         end if

>                         if refs = 3 and pass = 0 then
>                             'triangle
>                             glTexCoord2f 0, 0
>                             glVertex3f pntf(0,0), pntf(0,1), pntf(0,2)
>                             glTexCoord2f .5, 1
>                             glVertex3f pntf(1,0), pntf(1,1), pntf(1,2)
>                             glTexCoord2f 1, 0
>                             glVertex3f pntf(3,0), pntf(3,1), pntf(3,2)
>                         elseif refs = 4 and pass = 1 then
>                             'quad
>                             glTexCoord2f 0, 0
>                             glVertex3f pntf(0,0), pntf(0, 1), pntf(0,2)
>                             glTexCoord2f 0, 1
>                             glVertex3f pntf(1,0), pntf(1, 1), pntf(1,2)
>                             glTexCoord2f 1, 1
>                             glVertex3f pntf(2,0), pntf(2, 1), pntf(2,2)
>                             glTexCoord2f 1, 0
>                             glVertex3f pntf(3,0), pntf(3, 1), pntf(3,2)

>                         end if
>                     next
>                 next
>             next

>             glEnd
>         next

>     end sub

First we Bind our texture to GL_TEXTURE_2D so that it shows on our polygons. Next we have our 2 pass system. At the end you see how we changed the drawing commands to include the texture coordinates.

#### Lighting

To have this tree lit, we need to generate a surface normal for each polygon. This can be performed by simply calling cross2 (...) before our drawing takes place. Then including glNormal3f nx!, ny!, nz! before the drawing of each poly
Add this code before if refs = 3 and pass = 0 then

>     cross2 pntf(0, 0), pntf(0, 1), pntf(0, 2), pntf(1, 0), pntf(1, 1), pntf(1, 2), pntf(3, 0), pntf(3, 1), pntf(3, 2), nx!, ny!, nz!
>     glNormal3f nx!, ny!, nz!

Before:
After:

That's it! Our tree is skinned! Lastly we'll move on to finishing up the openGL scene by adding the transparent leaf planes and making a small random forest!

### Part 6 'Final OpenGL Scene'

First we will be including in the leaf drawing code from the first generator. Upon writing this part of the tutorial i realized that the X coordinates for the planes in pnt() are backwards. This was causing them to be culled.
This code will be added directly to the end of drawTree ()
The code additions are in Bold

>         'draw the leaf planes:
>         pnt(0,0) = .5
>         pnt(0,1) = -.5
>         pnt(1,0) = .5
>         pnt(1,1) = .5
>         pnt(2,0) = -.5
>         pnt(2,1) = .5
>         pnt(3,0) = -.5
>         pnt(3,1) = -.5

>         glDisable GL_LIGHTING
>         glBindTexture GL_TEXTURE_2D, leafTex
>         glColor4f 1, 1, 1, .8
>         for leaf = 0 to MAX_LEAVES
>             glPushMatrix
>             glTranslatef leaves(leaf).x, leaves(leaf).y, leaves(leaf).z
>             glRotatef camrz, 0, 0, -1
>             glRotatef camry, 0, 1, 0
>             glRotatef camrx, -1, 0, 0

>             for p = 0 to 3
>                 pntf(p, 0) = pnt(p,0) * leaves(leaf).size * leafscale!
>                 pntf(p, 1) = pnt(p,1) * leaves(leaf).size * leafscale!
>                 pntf(p, 2) = 0
>             next

>             glBegin GL_QUADS
>                 glTexCoord2f 0, 0
>                 glVertex3f pntf(0,0), pntf(0, 1), pntf(0,2)
>                 glTexCoord2f 0, 1
>                 glVertex3f pntf(1,0), pntf(1, 1), pntf(1,2)
>                 glTexCoord2f 1, 1
>                 glVertex3f pntf(2,0), pntf(2, 1), pntf(2,2)
>                 glTexCoord2f 1, 0
>                 glVertex3f pntf(3,0), pntf(3, 1), pntf(3,2)
>             glEnd
>             glPopMatrix

>         next
>         glEnable GL_LIGHTING

After the fixes to pnt() we disable the lighting so that our leaf planes are constantly lit. Next we set the color of the plane to bright white with a slight transparency so that the full color of the leaf texture shows up, but they are slightly see though.

>     	glPushMatrix
>             glTranslatef leaves(leaf).x, leaves(leaf).y, leaves(leaf).z
>             glRotatef camrz, 0, 0, -1
>             glRotatef camry, 0, 1, 0
>             glRotatef camrx, -1, 0, 0

This code essentially is the same thing we did with our matricies in the first generator. We translate our drawing point to the location of the center of the tree plane. Then Rotate in the opposite direction and order of our camera rotations at the begining so that our plane is facing the camera.

>             for p = 0 to 3
>                 pntf(p, 0) = pnt(p,0) * leaves(leaf).size * leafscale!
>                 pntf(p, 1) = pnt(p,1) * leaves(leaf).size * leafscale!
>                 pntf(p, 2) = 0
>             next

This block of code has changed considerably to use pntf() and to take out the matrix multiplication since it is no longer necessary. We then use these pntf() coordinates to draw our texture.

Some very necessary parts of code that make this effect with the leaves possible can be found toward the bottom of init ()

> glBlendFunc GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA glAlphaFunc GL_GREATER, .5 glEnable GL_BLEND glEnable GL_ALPHA_TEST

glBlendFunc GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA - Sets up our blending function to blend any alpha color that has an alpha value with the color in the background.
glAlphaFunc GL_GREATER, .5 - This routine will cause any alpha value in our leaf texture that is > .5 to be drawn. This way the engine allows you to draw through parts of the texture that have an alpha value of 0. This effect is called BillBoarding and is very important. To see what happens when you don't do this comment out glEnable GL_ALPHA_TEST
The last 2 lines simply turn on Alpha Blending and the Alpha Test routine

Some small changes that I've made to the tree generator settings to get this tree are:

>         MAX_LEAVES = 10 'give the impression of a much fuller tree
>         sag! = 20       'make the branches sag more
>         leafscale! = 4  'make the leaf planes larger

Here is the current state of the code: openGLTree.bas This requires the above download for the rest of the base files. Note: Hit ENTER to generate a new tree just like in the original.

#### The Forest

For this effect we'll create about 10 base trees and randomly place then around the environment. Trees are notorious for consuming resources so we'll use a system called Display Lists to 'precompile' our tree models into memory on the video card so that they draw tremendously faster.
For a more in-depth explanation of display lists check out: NeHe Lesson 12: Display Lists
Each display list will have a handle like the textures. Since we have to change our leaf plane coordinates and angles every fame to reflect the current camera properties we cannot precompile them, so we'll need to keep track of each leaf layout for each tree display list. You'll see this change in the dimensioning of leaves().
Also, There is now a drawLeaves () sub so that they can be drawn independently of the tree branches.
Additions in Bold

>     CONST MAX_TREES = 50, MAX_TREE_DL = 10
>     DIM SHARED branches(MAX_BRANCHES) AS branchType, leaves(MAX_TREE_DL, MAX_LEAVES) AS leafType, nBranches
>     DIM SHARED rotSpd!, scaleSpd!, leafscale!

>     DIM SHARED barkTex as gluint, leafTex as gluint
>     DIM SHARED barkTex2 as gluint

>     type treeDataType
>         x   as single        'location of the tree
>         z   as single
>         xAngle  as single    'angle of the tree
>         yAngle  as single
>         displayList as gluint  'the display list the tree uses
>     end type

>     DIM SHARED treeDL(MAX_TREE_DL - 1) as gluint, treeData(MAX_TREES - 1) as treeDataType

Now instead of calling generateTree, we call generateForest:

>     sub generateForest ()

>         for tree = 0 to MAX_TREE_DL - 1
>             generateTree tree
>             treeDL(tree) = glGenLists(1)
>             glNewList treeDL(tree), GL_COMPILE
>                 drawTree
>             glEndList
>         next

Loop through each tree display list, generating the tree, creating the display list, then compiling it.

>         for tree = 0 to MAX_TREES - 1
>             maxdist! = 60
>             maxXAngle! = 20
>             angle! = rnd * 360
>             treeData(tree).x = (rnd * maxdist! - (maxdist! / 2)) * cos(rad * angle!)
>             treeData(tree).z = (rnd * maxdist! - (maxdist! / 2)) * sin(rad * angle!)
>             treeData(tree).displayList = int(rnd * MAX_TREE_DL)
>             treeData(tree).xAngle = rnd * maxXAngle! - (maxXAngle! / 2)
>             treeData(tree).yAngle = rnd * 360
>         next

>     end sub

Loop through each forest tree positioning it randomly in a circular area, assigning a random display list, and changing the angle of the tree.

The last change to the code is in drawview () where we would normally call drawTree to draw a single tree. Instead we loop through each forest tree, change the drawing location to the tree location, rotate the tree, then call the display list. Afterwards we draw the leaf planes specific to that display list and return our matrix back to normal:

>         for tree = 0 to MAX_TREES - 1
>             glPushMatrix
>                 treeList = treeData(tree).displayList
>                 glTranslatef treeData(tree).x, 0, treeData(tree).z
>                 glRotatef treeData(tree).xAngle, 1, 0, 0
>                 glRotatef treeData(tree).yAngle, 0, 1, 0
>                 glCallList treeDL(treeList)
>                 drawLeaves tree
>             glPopMatrix
>         next

You might have noticed that we'll need to add these new rotations to the counter rotations of the leaf planes to make them continue to face forward. Here are those changes to drawLeaves (tree):

>     sub drawLeaves (tree)
>     	treeList = treeData(tree).displayList

>     	[...]

>     	glPushMatrix
>             glTranslatef leaves(treeList, leaf).x, leaves(treeList, leaf).y, leaves(treeList, leaf).z
>             glRotatef treeData(tree).yAngle, 0, -1, 0
>             glRotatef treeData(tree).xAngle, -1, 0, 0

>             glRotatef camrz, 0, 0, -1
>             glRotatef camry, 0, 1, 0
>             glRotatef camrx, -1, 0, 0

>     	for p = 0 to 3
>                 pntf(p, 0) = pnt(p,0) * leaves(treeList, leaf).size * leafscale!
>                 pntf(p, 1) = pnt(p,1) * leaves(treeList, leaf).size * leafscale!
>                 pntf(p, 2) = 0
>             next

Notice the changes to the leaves() array to take into consideration the display list dependant leaf set.

Some small changes were necessary to make this forest view. rotSpd! = .5 * fpsr and scaleSpd! = .5 * fpsr were added to main (). These speed up the rotation and scaling speed as well as make them frame rate dependant so the scene rotates at a constant speed at different frame rates. Also, zback = 100 instead of 50 to facilitate seeing all the trees.

Front View:
Top View:

#### Closing Remarks

That's it for the Tree Tutorial. I hope my explanations were clear and that you've found this technique helpful. If you have any questions, drop me a line at syn9_at_dev9.net. Please keep in mind that there are undoubtedly more ways to make trees and optimize these routines. So I implore you to seek out other methods and find the one that fits your code best.
Here are all final project files: treeTutorial1-6_Files.zip