Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GlArea example #155

Open
siriuslee69 opened this issue Feb 12, 2024 · 5 comments
Open

GlArea example #155

siriuslee69 opened this issue Feb 12, 2024 · 5 comments
Labels
documentation Improvements or additions to documentation good first issue Good for newcomers help wanted Extra attention is needed

Comments

@siriuslee69
Copy link

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

@can-lehmann can-lehmann added the documentation Improvements or additions to documentation label Feb 12, 2024
@can-lehmann can-lehmann added this to the Owlkettle 4.0.0 milestone Feb 12, 2024
@can-lehmann
Copy link
Owner

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.

@can-lehmann can-lehmann added help wanted Extra attention is needed good first issue Good for newcomers labels Feb 18, 2024
@anderflash
Copy link

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
Copy link
Owner

can-lehmann commented Mar 13, 2024

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
Copy link

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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation good first issue Good for newcomers help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants