Outline

• Getting SDL to work with our old code
• Image loading with SDL
• Quiz
• Curves

Introduction

• Last week, we started talking about SDL (the Simple Direct media Layer).
• We said we were going to switch to using SDL from GLUT, because SDL is more modern, handles a greater variety of input devices, and has built-in support for a wide variety of image formats.
• We showed how to make a simple class suitable for rendering a scene and responding to events in SDL.
• We talked about keyboard events in SDL.
• Today, I want to briefly discuss the changes needed to get the books code running using SDL.
• Then show how to load images using SDL.
• The rest of the lecture will then be about splines and curves.

SDL2_image

• The starting point in trying to incorporate the books code is our MySdlApplication of last day.
• You can download the converted Cs116b Gortler SDL Project.
• We take the MySdlApplication.h and MySdlApplication.cpp make (on a Mac) a new external build project with them.
• We want to make use of SDL's image library. This is a separate library than SDL itself and can be downloaded from: http://www.libsdl.org/projects/SDL_image/.
• We then move it into the same folder as where placed SDL (on a Mac /Library/Framework).
• Since SDL2_image include SDL2 on a PC, we want to place the SDL2_image header file in
  C:\Program Files(x86)\Visual Studio 12.0\VC\include\SDL2
  As before, the DLLs should go in C:\Windows\SysWOW64 and the lib files in C:\Program Files(x86)\Visual Studio 12.0\VC\lib.
• In our file MyApplication.h we now add a header for it. So it looks like:

  #ifndef _MYSDLAPPLICATION_H_
  #define _MYSDLAPPLICATION_H_
  
  #include <iostream>
  #include <SDL2/SDL.h>
  #ifdef __WIN32__
      #undef main
      #include <SDL2/SDL_image.h>
  #else
      #include <SDL2_image/SDL_image.h>
  #endif
  
  
  class MySdlApplication
  {
      private:
          bool running;
          SDL_Window* display;
          void keyboard(const char * key);
          void mouse(SDL_MouseButtonEvent button);
          void motion(const int x, const int y);
  
      public:
          MySdlApplication();
          int onExecute();
          bool onInit();
          void onEvent(SDL_Event* Event);
          void onLoop();
          void onRender();
          void onCleanup();
  };
  
  #endif
  

New Makefile

• We change our Makefile so that this new framework is added.
• The advantage of using a Makefile is that it is easier to do cross-platform builds.
• Even if we were using Visual Studio, we can modify the below to use nmake and cl and get things to work.

BASE = MySdlApplication

all: $(BASE)

OS := $(shell uname -s)

ifeq ($(OS), Linux) # Science Center Linux Boxes
  CPPFLAGS = -I/home/l/i/lib175/usr/glew/include
  LDFLAGS += -L/home/l/i/lib175/usr/glew/lib -L/usr/X11R6/lib
  LIBS += -lGL -lGLU -lSDL2 -lSDL2_image
endif

ifeq ($(OS), Darwin) # Assume OS X
  CPPFLAGS += -D__MAC__ -I/usr/local/Cellar/glew/1.10.0/include/ --stdlib=libstdc++ -Wno-deprecated
  LDFLAGS += -framework SDL2 -framework SDL2_image -framework OpenGL -L/usr/local/Cellar/glew/1.10.0/lib/
endif

ifdef OPT 
  #turn on optimization
  CXXFLAGS += -O2
else 
  #turn on debugging
  CXXFLAGS += -g
endif

CXX = g++ 

OBJ = $(BASE).o ppm.o glsupport.o

$(BASE): $(OBJ)
	$(LINK.cpp) -o $@ $^ $(LIBS) -lGLEW 

clean:
	rm -f $(OBJ) $(BASE)

Changing the Books Code

• Most of the books code does not need to be changed.
• Most of the changes were to incorporate the code of asst2.cpp into MyApplication.cpp
• Recall out main() function and onExecute looked like:

  int MySdlApplication::onExecute() {
      if(onInit() == false) {
          return -1;
      }
      SDL_Event Event;
      while(running) {
          while(SDL_PollEvent(&Event)) {
              onEvent(&Event);
          }
  
          onLoop();
          onRender();
      }
  
      onCleanup();
  
      return 0;
  }
  
  int main(int argc, const char * argv[])
  {
      MySdlApplication application;
      return application.onExecute();
  }
  

• To set things up, we need to invoke the books code in onInit.
• To get the book's code to work we need to handle events the way it did but via implementing onEvent.
• To draw stuff we need to invoke the book's code in onRender.
• Let's briefly look at these things in turn.

onInit

• This sets up the window (previously done in initGlutState), then calls glewInit, initGLState();, etc which had previous been called in main().
• Notice the SDL calls to set up the window.
• Recall also that initTextures was where we made a call to loadTextures to read a ppm file. This code still would work but we want to load textures using SDL's facility for this (next slide).

bool MySdlApplication::onInit() {
    if(SDL_Init(SDL_INIT_EVERYTHING) < 0) {
        return false;
    }
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_MAJOR_VERSION, 3);
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_MINOR_VERSION, 2);

    /* Turn on double buffering with a 24bit Z buffer.
     * You may need to change this to 16 or 32 for your system */
    SDL_GL_SetAttribute(SDL_GL_DOUBLEBUFFER, 1);
    SDL_GL_SetAttribute(SDL_GL_DEPTH_SIZE, 24);

    if((display = SDL_CreateWindow("My SDL Application",
        SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, 640, 480,
        SDL_WINDOW_OPENGL)) == NULL) {
        return false;
    }

    /* Create our opengl context and attach it to our window */
    SDL_GLContext maincontext = SDL_GL_CreateContext(display);
    /* This makes our buffer swap syncronized with the 
      monitor's vertical refresh */
    SDL_GL_SetSwapInterval(1);

    glewInit();
    cout << (g_Gl2Compatible ?
        "Will use OpenGL 2.x / GLSL 1.0" : "Will use OpenGL 3.x / GLSL 1.3")
        << endl;
    if ((!g_Gl2Compatible) && !GLEW_VERSION_3_0)
        throw runtime_error(
            "Error: does not support OpenGL Shading Language v1.3");
    else if (g_Gl2Compatible && !GLEW_VERSION_2_0)
        throw runtime_error(
            "Error: does not support OpenGL Shading Language v1.0");

    initGLState();
    initShaders();
    initGeometry();
    initTextures();

    return true;
}

SDL Modified loadTextures

• Below we have the modified form of loadTextures.
• We left the old form in as commented out code so you could see what changed. Please delete the dead code in anything you submit.
• The image is loaded in RBGA format and we convert it to be used with our RGB textures.
• Images are loaded in upside down compared to our old loader. We could remap our texture coordinates to fix this.

static void loadTexture(GLuint type, GLuint texHandle, const char *ppmFilename)
{
    int texWidth, texHeight;
//    vector<PackedPixel> pixData;

//    ppmRead(ppmFilename, texWidth, texHeight, pixData);
    SDL_Surface* newSurface = IMG_Load(ppmFilename); // read in image
    SDL_Surface* returnSurface;
    if(newSurface == NULL) {
        cout << ":_( Surface null" <<endl;
        return;
    }
    returnSurface = SDL_ConvertSurfaceFormat(newSurface,
        SDL_PIXELFORMAT_RGB24, 0); // need to convert to RGB from RGBA
    texWidth = returnSurface->w;
    texHeight = returnSurface->h;
    glActiveTexture(type);
    glBindTexture(GL_TEXTURE_2D, texHandle);
//    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texWidth,
//                 texHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, &pixData[0]);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texWidth,
                 texHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, returnSurface->pixels);
    SDL_FreeSurface(newSurface);
    SDL_FreeSurface(returnSurface);
    checkGlErrors();
}

onEvent

• The code below shows how we map the old event handling into our SDL framework.
• onEvent calls appropriate functions for keyboard, mouse, and mouse motion events.

void MySdlApplication::onEvent(SDL_Event* event) {
    switch(event->type)
    {
        case SDL_QUIT:
            running = false;
            break;
        case SDL_KEYUP:
            keyboard(SDL_GetKeyName(event->key.keysym.sym));
            break;
        case SDL_MOUSEBUTTONDOWN:
            mouse(event->button);
            break;
        case SDL_MOUSEBUTTONUP:
            mouse(event->button);
            break;
        case SDL_MOUSEMOTION:
            motion(event->motion.x, event->motion.y);
            break;
    }
}

void MySdlApplication::keyboard(const char* key)
{
    switch (key[0])
    {
        case 27: //ESC
            exit(0);
        case 'H':
            cout << " ============== H E L P ==============\n\n"
            << "h\t\thelp menu\n"
            << "s\t\tsave screenshot\n"
            << "t\t\ttoggle between shaders\n"
            << "drag left mouse to rotate\n" << endl;
            break;
        case 'S':
            glFlush();
            writePpmScreenshot(g_windowWidth, g_windowHeight, "out.ppm");
            break;
        case 'T':
            g_activeShader++;
            if(g_activeShader >= g_numShaders) {
                g_activeShader = 0;
            }
            break;
    }
}

void MySdlApplication::mouse(SDL_MouseButtonEvent button)
{
    g_mouseClickX = button.x;
    g_mouseClickY = g_windowHeight - button.y - 1;

    g_mouseLClickButton |= (button.button == SDL_BUTTON_LEFT &&
                            button.state == SDL_PRESSED);
    g_mouseRClickButton |= (button.button == SDL_BUTTON_RIGHT &&
                            button.state == SDL_PRESSED);
    g_mouseMClickButton |= (button.button == SDL_BUTTON_MIDDLE &&
                            button.state == SDL_PRESSED);

    g_mouseLClickButton &= !(button.button == SDL_BUTTON_LEFT &&
                            button.state == SDL_RELEASED);
    g_mouseRClickButton &= !(button.button == SDL_BUTTON_RIGHT &&
                             button.state == SDL_RELEASED);
    g_mouseMClickButton &= !(button.button == SDL_BUTTON_MIDDLE &&
                             button.state == SDL_RELEASED);

    g_mouseClickDown = g_mouseLClickButton || g_mouseRClickButton ||
        g_mouseMClickButton;
}

void MySdlApplication::motion(const int x, const int y)
{
    const double dx = x - g_mouseClickX;
    const double dy = g_windowHeight - y - 1 - g_mouseClickY;

    Matrix4 m;
    if (g_mouseLClickButton && !g_mouseRClickButton) {
        // left button down?
        m = Matrix4::makeXRotation(-dy) * Matrix4::makeYRotation(dx);
    } else if (g_mouseRClickButton && !g_mouseLClickButton) {
        // right button down?
        m = Matrix4::makeTranslation(Cvec3(dx, dy, 0) * 0.01);
    } else if (g_mouseMClickButton ||
               (g_mouseLClickButton && g_mouseRClickButton)) {
        // middle or (left and right) button down?
        m = Matrix4::makeTranslation(Cvec3(0, 0, -dy) * 0.01);
    }

    if (g_mouseClickDown) {
        g_objectRbt[0] *= m; // Simply right-multiply is WRONG
    }

    g_mouseClickX = x;
    g_mouseClickY = g_windowHeight - y - 1;
}

onRender

• The last thing we need to incorporate the books code is to actually use OpenGL to draw stuff.
• This is basically the code that was in display() in asst2.
• The only change is we use SDL to swap buffers.

void MySdlApplication::onRender() {
    glUseProgram(g_shaderStates[g_activeShader]->program);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    // clear framebuffer color&depth
    drawStuff();
    
    SDL_GL_SwapWindow(display);
    checkGlErrors();
}

Quiz

Bezier curves and their Friends

• Recall when we were talking about Perlin noise we said it was useful to interpolate between the sample points.
• We could do this using lines in a piece-wise fashion, but that would tend not to give as natural a terrain surface as if we had interpolated with smooth curves.
• When we were talking about Bezier curves in the Fall, we used them to solve the problem of animating motion along a smooth trajectory.
• So our viewpoint will be a little bit different this time around -- now we are concerned with using Bezier curves and patches to model surfaces.
• First, a very quick refresher on where we were...

Bezier Curve Refresher

• A cubic Bezier curve is given by four control points `c_0`, `d_0`, `e_0` and `c_1`.
• In the above, we are imagining the curve as a function `c:[0,1] -> RR`. `c'(0) = 3(d_0 - c_0)` and `c'(1) = 3(c_1-e_0).` and we rquire `c(0) = c_0` and `c(1) = c_1`.
• In the above, our control points are plotted at: `[0, c_0]^t`, `[1/3, d_0]^t`, `[2/3, e_0]^t`, and `[1, c_1]^t`.
• Solving out constraint system, gives the equation for our Bezier curve as:
  `c(t) = c_0(1-t)^3 + 3d_0t(1-t^2) + 3e_0t^2(1-t) + c_1t^3`.

More Bezier Curve Refresher

• Last semester, we used deCasteljau's method to efficiently evaluate points on this curve using succesive linear interpolation.
• We said this method could be used together with a translation by a distance `i` to get the equations:
  `f = (1-t+i)c_i + (t-i)d_i`
  `g = (1-t+i)d_i + (t-i) e_i`
  `h = (1-t+i)e_i + (t-i) c_(i+1)`
  `m = (1-t+i)f + (t-i) g`
  `n = (1-t+i)g + (t-i) h`
  `c(t) = (1-t+i)m + (t-i) n`
  
• We used this to develop Catmull Rom splines which allowed us to interpolate from `[0,n]` through arbitrarily many points.
• That is, if at the integer values `i` we want the curve to take values `c_i`.
• To do this, we need to fix the `d_i` and `e_i` values for the Bezier curve on that portion. So we impose the constraint `c'(i) = 1/2(c_(i+1) - c_(i-1))`.
• I.e., we look forward and backward one sample to determine the slope at `t=i`. The half comes from the interval we are computing the slope over being 2 wide.
• This is why we need `c_(-1)` and `c_(n+1)`.
• From the Bezier curve over `[i, i+1]` we have `c'(i) = 3(d_i - c_i)` and `c'(i+1) = 3(c_(i+1) - e_i)`.
• Solving, this gives:
  `d_i = 1/6(c_(i+1) - c_(i-1)) + c_i`
  `e_i = 1/6(c_(i+2) - c_(i)) + c_(i+1)`
  

Curves in Space

• One can also use spline representations to describe curves in space.
• In this case, the spline curve is controlled by a set of control points `tilde c_i` in 2D or 3D.
• Applying the spline construction independently to the `x`, `y`, and `z` coordinates, one gets a point-valued spline function `tilde c(t)`: You can think of this as a point flying through space over time, tracing out a curve `gamma`.
• Using this idea of mapping `tilde c:t in [0,1] mapsto (x(t), y(t), z(t))`, one can define Bezier curves and Catmull-Rom curves in 3D.
• Next day, we will consider different ways to generalize our basic set up given above.
• We want to allow being able to take a curve and split it into sub-parts and dynamically add new control points. We also want to generalize curves to surfaces. Finally, we want to look at OpenGL's facilities for such curves and surfaces.