GlArea example

[siriuslee69]

Would really welcome a basic example on how to set up the GlArea with some basic scene. :>

[can-lehmann]

Happy to accept pull requests. If you have a specific question, feel free to ask. Generally, make sure to call loadExtensions before brew. For accepting user input, GlArea works the same way as DrawingArea.

[anderflash]

I tried

import owlkettle
import opengl
viewable App:
  fillEnabled: bool = false

method view(app: AppState): Widget =
  result = gui:
    Window:
        title = "GLArea"
        GlArea:
            proc setup(size: (int, int)): bool =
              echo("setup")
              return true
            proc render(size: (int, int)):bool =
              echo("render")
              return true

loadExtensions()
brew(gui(App()))

But it shows "render" only once. I also tried converting the triangle code from nim-glfw, but I got empty screen (but no errors, the buffers, shaders, program are working)

[can-lehmann]

The basic structure of the example looks good.

But it shows "render" only once.

This is to be expected. Renders are only triggered when GTK actually redraws the window. This is not necessarily equivalent to owlkettle application redraws. E.g. if you resize the window, this will trigger a render, but not an owlkettle redraw. Owlkettle redraws that do not change any widget state also do not trigger a render.

Returning true from render seems to be slightly broken currently. However always returning true is not intended anyways. Rather the purpose of the return value was originally for cases where you update the application state inside render and need to update content outside of the GlArea. There needs to be a fixed point after some time where any updates inside render are idempotent.

If your intention was creating a render loop that renders the GlArea at an (approximately) fixed interval, it is probably possible to create such a loop using addGlobalIdleTask or addGlobalTimeout. You would however need to be careful about what parts of the application you redraw / render in order to preserve performance (this requires interfacing with GTK directly). So in summary: Owlkettle is not a game framework, but a GUI framework.

I also tried converting the triangle code

I am not familiar with this particular example. However a quick look at it shows that it does not clear the depth buffer. AFAIK GTK preserves the depth buffer between renders which may cause issues. Make sure that you clear the depth buffer on render.

[anderflash]

Great!

When I cleared the depth buffer, the triangle appeared.

addGlobalIdleTask solved the animation issue.

Do you have any idea how to not redraw the whole app? Below is the current code (app.redraw within proc addServerListener).

import std/[times]
import owlkettle
import opengl
import glm

type
  Vertex = object
    x, y: GLfloat
    r, g, b: GLfloat

var vertices: array[0..2, Vertex] =
  [ Vertex(x: -0.6, y: -0.4, r: 1.0, g: 0.0, b: 0.0),
    Vertex(x:  0.6, y: -0.4, r: 0.0, g: 1.0, b: 0.0),
    Vertex(x:  0.0, y:  0.6, r: 0.0, g: 0.0, b: 1.0) ]

let vertexShaderText = """
#version 330
uniform mat4 MVP;
in vec3 vCol;
in vec2 vPos;
out vec3 color;

void main()
{
  gl_Position = MVP * vec4(vPos, 0.0, 1.0);
  color = vCol;
}
"""

let fragmentShaderText = """
#version 330
in vec3 color;
out vec4 fragment;

void main()
{
  fragment = vec4(color, 1.0);
}
"""

var
  program: GLuint
  mvpLocation: GLuint
  vertexArray: GLuint

proc createShader(shaderType: GLenum, source: string): GLuint =
  var shader = glCreateShader(shaderType)
  var shaderSource = [cstring(source)]
  glShaderSource(shader, GLsizei(1),
                 cast[cstringArray](shaderSource.addr), nil)
  glCompileShader(shader)
  result = shader

proc createProgram(vertexShader:GLuint, fragmentShader:GLuint): GLuint =
  program = glCreateProgram()
  glAttachShader(program, vertexShader)
  glAttachShader(program, fragmentShader)
  glLinkProgram(program)
  result = program

proc init(size: (int, int)) =
  var vertexBuffer: GLuint
  glGenBuffers(1, vertexBuffer.addr)
  glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer)

  glBufferData(GL_ARRAY_BUFFER, GLsizeiptr(sizeof(vertices)), vertices.addr,
               GL_STATIC_DRAW)

  program = createProgram(createShader(GL_VERTEX_SHADER, vertexShaderText), 
                          createShader(GL_FRAGMENT_SHADER, fragmentShaderText))

  mvpLocation = cast[GLuint](glGetUniformLocation(program, "MVP"))
  var vposLocation = cast[GLuint](glGetAttribLocation(program, "vPos"))
  var vcolLocation = cast[GLuint](glGetAttribLocation(program, "vCol"))

  glGenVertexArrays(1, vertexArray.addr);
  glBindVertexArray(vertexArray);
  glEnableVertexAttribArray(vposLocation);
  glVertexAttribPointer(vposLocation, 2, cGL_FLOAT, false,
                        GLsizei(sizeof(Vertex)), cast[pointer](0))

  glEnableVertexAttribArray(vcolLocation)
  glVertexAttribPointer(vcolLocation, 3, cGL_FLOAT, false,
                        GLsizei(sizeof(Vertex)),
                        cast[pointer](sizeof(GLfloat) * 2));

proc addServerListener(app: Viewable, timeout_ns:int = 20) =
  proc listener(): bool = 
    discard app.redraw()

    const KEEP_LISTENER_ACTIVE = true
    return KEEP_LISTENER_ACTIVE

  discard addGlobalTimeout(timeout_ns, listener)

viewable App:
  hooks:
    afterBuild:
      addServerListener(state)

var timeFirst = 0.0'f32

proc draw(size: (int, int)) =
  let normal = vec3[GLfloat](0.0, 0.0, 1.0)

  var width, height: int
  (width, height) = size

  var ratio = width / height

  glViewport(0, 0, GLsizei(width), GLsizei(height))
  glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT)

  var 
    m = mat4x4[GLfloat](vec4(1'f32, 0'f32, 0'f32, 0'f32),
                          vec4(0'f32, 1'f32, 0'f32, 0'f32),
                          vec4(0'f32, 0'f32, 1'f32, 0'f32),
                          vec4(0'f32, 0'f32, 0'f32, 1'f32)) 
    period = 2.0'f
    speed = 2 * PI / period
    timeNow = getTime().toUnixFloat()
  if timeFirst == 0:
    timeFirst = timeNow
  let delta = (timeNow-timeFirst)
  m = m.rotate(speed * delta, normal)
  var p = ortho[GLfloat](-ratio, ratio, -1.0, 1.0, 1.0, -1.0)
  var mvp = p * m

  glUseProgram(program)
  glUniformMatrix4fv(GLint(mvpLocation), 1, false, mvp.caddr);
  glBindVertexArray(vertexArray)
  glDrawArrays(GL_TRIANGLES, 0, 3)

method view(app: AppState): Widget =
  result = gui:
    Window:
      title = "GLArea"
      defaultSize = (800, 600)
      GlArea:
        proc setup(size: (int, int)): bool =
          init(size)
          return true
        proc render(size:(int, int)): bool = 
          draw(size)
          return true
loadExtensions()
brew(gui(App()))

[can-lehmann]

If you just want to redraw the GlArea, you need to use GTK directly. See: https://docs.gtk.org/gtk4/method.GLArea.queue_render.html (you might need to wrap this function yourself). You can access the GTK widget of the GlArea by extracting it into its own viewable and then using unwrapInternalWidget.

Once we have refs in Owlkettle 4.0.0, this should be easier.