From ac8fdaf0224300dfae4c906e4fca46aa3bea98d1 Mon Sep 17 00:00:00 2001
From: levovix0 <xlevovix@gmail.com>
Date: Thu, 4 Apr 2024 00:23:44 +0300
Subject: [PATCH] change: use opengl

---
 folx.nimble                  |   3 +
 src/explorer.nim             |  12 +-
 src/folx.nim                 |  22 ++-
 src/graphics/gl.nim          | 223 ++++++++++++++++++++++++++
 src/graphics/globals.nim     |   3 +
 src/graphics/shaders.nim     | 200 +++++++++++++++++++++++
 src/graphics/shaderutils.nim |  54 +++++++
 src/render.nim               | 302 ++++++++++++++++++++++++-----------
 src/side_explorer.nim        |  11 +-
 src/status_bar.nim           |   5 +-
 src/text_editor.nim          |   6 +-
 src/title.nim                |  11 +-
 src/welcome.nim              |   4 +-
 13 files changed, 731 insertions(+), 125 deletions(-)
 create mode 100644 src/graphics/gl.nim
 create mode 100644 src/graphics/globals.nim
 create mode 100644 src/graphics/shaders.nim
 create mode 100644 src/graphics/shaderutils.nim

diff --git a/folx.nimble b/folx.nimble
index 46a1fd2..437c76a 100644
--- a/folx.nimble
+++ b/folx.nimble
@@ -10,6 +10,9 @@ bin           = @["folx"]
 requires "nim >= 2.0.2"
 requires "siwin ^= 0.8.4.6", "jsony", "pixie", "fusion", "winim"
 requires "cligen"
+requires "shady ^= 0.1.3"  # writing shaders in nim instead of glsl
+requires "fusion ^= 1.2"  # pattern matching and ast dsl
+requires "opengl ^= 1.2.9"
 
 
 let dataDir =
diff --git a/src/explorer.nim b/src/explorer.nim
index 671f90a..27b7965 100644
--- a/src/explorer.nim
+++ b/src/explorer.nim
@@ -188,8 +188,8 @@ component Disk {.noexport.}:
   )
   
   if selected:
-    Rect: color = colorTheme.bgSelection
-    Rect(w = 2): color = colorTheme.bgSelectionLabel
+    Rect: color = colorTheme.bgSelection.color
+    Rect(w = 2): color = colorTheme.bgSelectionLabel.color
 
   Text disk(x = 10):
     color = colorTheme.cActive
@@ -207,14 +207,16 @@ component File {.noexport.}:
   let dy = round(glyphTableStack[^1].font.size * 1.27)
   
   if selected:
-    Rect: color = colorTheme.bgSelection
-    Rect(w = 2): color = colorTheme.bgSelectionLabel
+    Rect: color = colorTheme.bgSelection.color
+    Rect(w = 2): color = colorTheme.bgSelectionLabel.color
   
   let bg =
     if selected: colorTheme.bgSelection
     else: bg
   
-  contextStack[^1].image.draw(getIcon(file), translate(parentBox.xy + vec2(20, 4)) * scale(vec2(0.06 * dy, 0.06 * dy)))
+  let icon = getIcon(file)
+  Image icon(x = 20, y = 4, w = icon.width.float * 0.06 * dy, h = icon.height.float * 0.06 * dy):
+    discard
 
   Text (file.name & file.ext)(x = 40, w = 200, clip = true):
     color = colorTheme.cActive
diff --git a/src/folx.nim b/src/folx.nim
index b44c86f..c148e0e 100644
--- a/src/folx.nim
+++ b/src/folx.nim
@@ -1,6 +1,7 @@
 import sequtils, os, times, math, unicode, std/monotimes, options
-import cligen
+import pkg/[cligen, opengl]
 import gui, configuration, git, text, text_editor, side_explorer, explorer, title, status_bar, welcome
+import ./graphics/[globals, shaders, shaderutils]
 
 proc contains*(b: Rect, a: GVec2): bool =
   let a = a.vec2
@@ -30,13 +31,17 @@ proc folx(files: seq[string] = @[], workspace: string = "", preferWorkFolderReso
     else: files[0].splitPath.head
 
   if preferWorkFolderResources: configuration.workFolderResources()
-  
-  let window = newSoftwareRenderingWindow(
+
+  let window = newOpenglWindow(
     title="folx", size=config.window.size,
     frameless = if config.window.customTitleBar: true else: false,
     transparent = if config.window.customTitleBar: true else: false,
   )
 
+  loadExtensions()
+
+  global_drawContext = newDrawContext()
+
   var
     editor_gt    = readFont(rc config.font).newGlyphTable(config.fontSize)
     interface_gt = readFont(rc config.interfaceFont).newGlyphTable(config.interfaceFontSize)
@@ -215,12 +220,17 @@ proc folx(files: seq[string] = @[], workspace: string = "", preferWorkFolderReso
   window.eventsHandler.onRender = proc(e: RenderEvent) =
     image.clear colorTheme.bgTextArea.color.rgbx
     setCursor Cursor(kind: builtin, builtin: BuiltinCursor.arrow)
+    
+    glClearColor colorTheme.bgTextArea.color.r, colorTheme.bgTextArea.color.g, colorTheme.bgTextArea.color.b, colorTheme.bgTextArea.color.a
+    glClear(GL_COLOR_BUFFER_BIT)
+
+    let size = e.window.size
+    glViewport 0, 0, size.x.GLsizei, size.y.GLsizei
+    global_drawContext.updateSizeRender(size)
 
     frame(w = window.size.x, h = window.size.y, clip=true):
-      withContext r:
-        handleFolx()
+      handleFolx()
 
-    window.drawImage image.data.toBgrx, ivec2(image.width.int32, image.height.int32)
     window.cursor = globalCursor
     isLeftClick = false
     isLeftDown = false
diff --git a/src/graphics/gl.nim b/src/graphics/gl.nim
new file mode 100644
index 0000000..a64cfb4
--- /dev/null
+++ b/src/graphics/gl.nim
@@ -0,0 +1,223 @@
+import vmath, opengl, pixie
+
+when (compiles do: import imageman):
+  import imageman
+  const hasImageman* = true
+else:
+  const hasImageman* = false
+
+export vmath, opengl
+
+
+type
+  Buffers* = ref BuffersObj
+  BuffersObj = object
+    n: int32
+    obj: UncheckedArray[GlUint]
+
+  VertexArrays* = ref VertexArraysObj
+  VertexArraysObj = object
+    n: int32
+    obj: UncheckedArray[GlUint]
+  
+  Textures* = ref TexturesObj
+    ## note: texures can't be actualy deleted for now. glDeleteTextures is not enough. If you want to resize texture, use loadTexture multiple times instead.
+  TexturesObj = object
+    n: int32
+    obj: UncheckedArray[GlUint]
+  
+  Shader* = ref ShaderObj
+  ShaderObj = object
+    obj: GlUint
+
+  FrameBuffers* = ref FrameBuffersObj
+  FrameBuffersObj = object
+    n: int32
+    obj: UncheckedArray[GlUint]
+  
+  ShaderCompileDefect* = object of Defect
+
+  Shape* = ref object
+    kind: GlEnum
+    len: int
+    vao: VertexArrays
+    bo: Buffers
+
+  OpenglUniform*[T] = distinct GlInt
+
+
+# -------- Buffers, VertexArrays, Textures --------
+template makeOpenglObjectSeq(t, tobj, T, gen, del, newp, delextra) =
+  proc `=destroy`(xobj {.inject.}: tobj) =
+    delextra
+    del(xobj.n, cast[ptr T](xobj.obj.addr))
+
+  proc newp*(n: int): t =
+    if n == 0: return
+    assert n in 1..int32.high
+    unsafeNew result, int32.sizeof + n * T.sizeof
+    result.n = n.int32
+    gen(n.int32, cast[ptr T](result.obj.addr))
+
+  proc len*(x: t): int =
+    if x == nil: 0
+    else: x.n
+
+  proc `[]`*(x: t, i: int): T =
+    if i notin 0..<x.len:
+      raise IndexDefect.newException("index " & $i & " out of range 0..<" & $x.len)
+    x.obj[i]
+
+
+proc unloadTextures(x: TexturesObj) =
+  for i in 0..<x.n:
+    ## sems like it don't work
+    # glBindTexture(GlTexture2d, x.obj[i])
+    # glTexImage2D(GlTexture2d, 0, GlRgba.Glint, 0, 0, 0, GlRgba, GlUnsignedByte, nil)
+
+
+{.push, warning[Effect]: off.}
+makeOpenglObjectSeq Buffers, BuffersObj, GlUint, glGenBuffers, glDeleteBuffers, newBuffers: discard
+makeOpenglObjectSeq VertexArrays, VertexArraysObj, GlUint, glGenVertexArrays, glDeleteVertexArrays, newVertexArrays: discard
+makeOpenglObjectSeq Textures, TexturesObj, GlUint, glGenTextures, glDeleteTextures, newTextures:
+  unloadTextures(xobj)
+makeOpenglObjectSeq FrameBuffers, FrameBuffersObj, GlUint, glGenFrameBuffers, glDeleteFrameBuffers, newFrameBuffers: discard
+{.pop.}
+
+proc `[]`*(x: Textures, i: enum): GlUint =
+  if i.int notin 0..<x.len:
+    raise IndexDefect.newException("index " & $i & " out of range 0..<" & $x.len)
+  x.obj[i.int]
+
+when defined(gcc):
+  {.passc: "-fcompare-debug-second".}  # seems like it hides warning about "passing flexieble array ABI changed in GCC 4.4"
+  # i don't care, gcc
+
+
+# -------- helpers --------
+proc arrayBufferData*[T](data: openarray[T], usage: GlEnum = GlStaticDraw) =
+  glBufferData(GlArrayBuffer, data.len * T.sizeof, data.unsafeaddr, usage)
+
+proc elementArrayBufferData*[T](data: openarray[T], usage: GlEnum = GlStaticDraw) =
+  glBufferData(GlElementArrayBuffer, data.len * T.sizeof, data.unsafeaddr, usage)
+
+template withVertexArray*(vao: GlUint, body) =
+  glBindVertexArray(vao)
+  block: body
+  glBindVertexArray(0)
+
+when hasImageman:
+  proc loadTexture*(obj: GlUint, img: imageman.Image[ColorRGBAU]) =
+    glBindTexture(GlTexture2d, obj)
+    glTexImage2D(GlTexture2d, 0, GlRgba.GLint, img.width.GLsizei, img.height.GLsizei, 0, GlRgba, GlUnsignedByte, img.data[0].unsafeaddr)
+    glGenerateMipmap(GlTexture2d)
+    glBindTexture(GlTexture2d, 0)
+
+proc loadTexture*(obj: GlUint, img: pixie.Image) =
+  glBindTexture(GlTexture2d, obj)
+  glTexImage2D(GlTexture2d, 0, GlRgba.GLint, img.width.GLsizei, img.height.GLsizei, 0, GlRgba, GlUnsignedByte, img.data[0].unsafeaddr)
+  glGenerateMipmap(GlTexture2d)
+  glBindTexture(GlTexture2d, 0)
+
+
+
+# -------- Shader --------
+{.push, warning[Effect]: off.}
+proc `=destroy`(x: ShaderObj) =
+  if x.obj != 0:
+    glDeleteProgram(x.obj)
+{.pop.}
+
+proc newShader*(shaders: openarray[(GlEnum, string)]): Shader =
+  new result
+
+  var shad = newSeq[GlUint](shaders.len)
+
+  proc free =
+    for x in shad:
+      if x != 0: glDeleteShader(x)
+
+  for i, (k, s) in shaders:
+    var cs = s.cstring
+    shad[i] = glCreateShader(k)
+    glShaderSource(shad[i], 1, cast[cstringArray](cs.addr), nil)
+    glCompileShader(shad[i])
+    if (var success: GlInt; glGetShaderiv(shad[i], GlCompileStatus, success.addr); success != GlTrue.GlInt):
+      var buffer: array[512, char]
+      glGetShaderInfoLog(shad[i], 512, nil, cast[cstring](buffer.addr))
+      free()
+      raise ShaderCompileDefect.newException("failed to compile shader " & $(i+1) & ": " & $cast[cstring](buffer.addr))
+  
+  defer: free()
+
+  result.obj = glCreateProgram()
+  for i, x in shad:
+    glAttachShader(result.obj, x)
+  glLinkProgram(result.obj)
+  if (var success: GlInt; glGetProgramiv(result.obj, GlLinkStatus, success.addr); success != GlTrue.GlInt):
+    var buffer: array[512, char]
+    glGetProgramInfoLog(result.obj, 512, nil, cast[cstring](buffer.addr))
+    # todo: delete gl shader programm?
+    raise ShaderCompileDefect.newException("failed to link shader program: " & $cast[cstring](buffer.addr))
+
+proc use*(x: Shader) =
+  glUseProgram(x.obj)
+
+proc `[]`*(x: Shader, name: string): GlInt =
+  result = glGetUniformLocation(x.obj, name)
+  if result == -1:
+    raise KeyError.newException("shader has no uniform " & name & " (is it unused?)")
+
+proc `uniform=`*(i: GlInt, value: GlFloat) =
+  glUniform1f(i, value)
+
+proc `uniform=`*(i: GlInt, value: Vec2) =
+  glUniform2f(i, value.x, value.y)
+
+proc `uniform=`*(i: GlInt, value: Vec3) =
+  glUniform3f(i, value.x, value.y, value.z)
+
+proc `uniform=`*(i: GlInt, value: Vec4) =
+  glUniform4f(i, value.x, value.y, value.z, value.w)
+
+proc `uniform=`*(i: GlInt, value: Mat4) =
+  glUniformMatrix4fv(i, 1, GlFalse, cast[ptr GlFloat](value.unsafeaddr))
+
+
+proc `uniform=`*[T](x: OpenglUniform[T], value: T) = x.GlInt.uniform = value
+
+
+# -------- Shape --------
+proc makeAttributes(t: type) =
+  when t is tuple:
+    var i = 0
+    var offset = 0
+    var x: t
+    for x in x.fields:
+      type t2 = x.typeof
+      glVertexAttribPointer i.uint32, t2.sizeof div GlFloat.sizeof, cGlFloat, GlFalse, t.sizeof.GlSizei, cast[pointer](offset)
+      glEnableVertexAttribArray i.uint32
+      inc i
+      inc offset, t2.sizeof
+  else:
+    glVertexAttribPointer 0, t.sizeof div GlFloat.sizeof, cGlFloat, GlFalse, t.sizeof.GlSizei, nil
+    glEnableVertexAttribArray 0
+
+
+proc newShape*[T](vert: openarray[T], idx: openarray[GlUint], kind = GlTriangles): Shape =
+  new result
+  result.vao = newVertexArrays(1)
+  result.bo = newBuffers(2)
+  result.len = idx.len
+  result.kind = kind
+
+  withVertexArray result.vao[0]:
+    glBindBuffer GlArrayBuffer, result.bo[0]
+    arrayBufferData vert
+    glBindBuffer GlElementArrayBuffer, result.bo[1]
+    elementArrayBufferData idx
+    makeAttributes T
+
+proc draw*(x: Shape) =
+  withVertexArray x.vao[0]:
+    glDrawElements(x.kind, x.len.GlSizei, GlUnsignedInt, nil)
diff --git a/src/graphics/globals.nim b/src/graphics/globals.nim
new file mode 100644
index 0000000..5b57af9
--- /dev/null
+++ b/src/graphics/globals.nim
@@ -0,0 +1,3 @@
+import shaders
+
+var global_drawContext*: DrawContext
diff --git a/src/graphics/shaders.nim b/src/graphics/shaders.nim
new file mode 100644
index 0000000..488eaeb
--- /dev/null
+++ b/src/graphics/shaders.nim
@@ -0,0 +1,200 @@
+import std/[tables, macros, sequtils]
+import pkg/[shady]
+import pkg/fusion/[matching, astdsl]
+import ./[gl]
+export shady
+
+type
+  DrawContext* = object
+    rect*: Shape
+    shaders*: Table[int, RootRef]
+
+    px*, wh*: Vec2
+    frameBufferHierarchy*: seq[tuple[fbo: GlUint, size: IVec2]]
+    offset*: Vec2
+
+
+var newShaderId {.compileTime.}: int = 1
+
+macro makeShader*(ctx: DrawContext, body: untyped): auto =
+  ## 
+  ## .. code-block:: nim
+  ##   let solid = ctx.makeShader:
+  ##     {.version: "330 core".}
+  ##     proc vert(
+  ##       gl_Position: var Vec4,
+  ##       pos: var Vec2,
+  ##       ipos: Vec2,
+  ##       transform: Uniform[Mat4],
+  ##       size: Uniform[Vec2],
+  ##       px: Uniform[Vec2],
+  ##     ) =
+  ##       transformation(gl_Position, pos, size, px, ipos, transform)
+  ##    
+  ##     proc frag(
+  ##       glCol: var Vec4,
+  ##       pos: Vec2,
+  ##       radius: Uniform[float],
+  ##       size: Uniform[Vec2],
+  ##       color: Uniform[Vec4],
+  ##     ) =
+  ##       glCol = vec4(color.rgb * color.a, color.a) * roundRect(pos, size, radius)
+  ##
+  ## convers to (roughly):
+  ## 
+  ## .. code-block:: nim
+  ##   proc vert(
+  ##     gl_Position: var Vec4,
+  ##     pos: var Vec2,
+  ##     ipos: Vec2,
+  ##     transform: Uniform[Mat4],
+  ##     size: Uniform[Vec2],
+  ##     px: Uniform[Vec2],
+  ##   ) =
+  ##     transformation(gl_Position, pos, size, px, ipos, transform)
+  ##  
+  ##   proc frag(
+  ##     glCol: var Vec4,
+  ##     pos: Vec2,
+  ##     radius: Uniform[float],
+  ##     size: Uniform[Vec2],
+  ##     color: Uniform[Vec4],
+  ##   ) =
+  ##     glCol = vec4(color.rgb * color.a, color.a) * roundRect(pos, size, radius)
+  ##   
+  ##   type MyShader = ref object of RootObj
+  ##     shader: Shader
+  ##     transform: OpenglUniform[Mat4]
+  ##     size: OpenglUniform[Vec2]
+  ##     px: OpenglUniform[Vec2]
+  ##     radius: OpenglUniform[float]
+  ##     color: OpenglUniform[Vec4]
+  ##   
+  ##   if not ctx.shaders.hasKey(1):
+  ##     let x = MyShader()
+  ##     x.shader = newShader {GlVertexShader: vert.toGLSL("330 core"), GlFragmentShader: frag.toGLSL("330 core")}
+  ##     x.transform =  OpenglUniform[Mat4](result.solid.shader["transform"])
+  ##     x.size = OpenglUniform[Vec2](result.solid.shader["size"])
+  ##     x.px = OpenglUniform[Vec2](result.solid.shader["px"])
+  ##     x.radius = OpenglUniform[float](result.solid.shader["radius"])
+  ##     x.color = OpenglUniform[Vec4](result.solid.shader["color"])
+  ##     ctx.shaders[1] = RootRef(x)
+  ##   
+  ##   MyShader(ctx.shaders[1])
+  let id = newShaderId
+  inc newShaderId
+  var
+    vert: NimNode
+    frag: NimNode
+    uniforms: Table[string, NimNode]
+  
+  var version: NimNode = newLit "330 core"
+  var origBody = body
+  var body = body
+  if body.kind != nnkStmtList:
+    body = newStmtList(body)
+
+  proc findUniforms(uniforms: var Table[string, NimNode], params: seq[NimNode]) =
+    for x in params:
+      x.expectKind nnkIdentDefs
+      var names = x[0..^3].mapit($it)
+      case x[^2]
+      of BracketExpr[Ident(strVal: "Uniform"), @t]:
+        for name in names:
+          uniforms[name] = t
+
+  result = buildAst(stmtList):
+    for x in body:
+      case x
+      of Pragma[ExprColonExpr[Ident(strVal: "version"), @ver]]:
+        version = ver
+      of ProcDef[@name is Ident(strVal: "vert"), _, _, FormalParams[Empty(), all @params], .._]:
+        x
+        vert = name
+        (uniforms.findUniforms(params))
+      of ProcDef[@name is Ident(strVal: "frag"), _, _, FormalParams[Empty(), all @params], .._]:
+        x
+        frag = name
+        (uniforms.findUniforms(params))
+      else: x
+
+    if vert == nil:
+      (error("vert shader proc not defined", origBody))
+    if frag == nil:
+      (error("frag shader proc not defined", origBody))
+    
+    let shaderT = genSym(nskType)
+
+    typeSection:
+      typeDef:
+        shaderT
+        empty()
+        refTy:
+          objectTy:
+            empty()
+            ofInherit:
+              bindSym"RootObj"
+            recList:
+              identDefs(ident "shader"):
+                bindSym"Shader"
+                empty()
+
+              for n, t in uniforms:
+                identDefs(ident n):
+                  bracketExpr bindSym"OpenglUniform": t
+                  empty()
+    
+    ifExpr:
+      elifBranch:
+        call bindSym"not":
+          call bindSym"hasKey":
+            dotExpr(ctx, ident "shaders")
+            newLit id
+        stmtList:
+          let shaderX = genSym(nskLet)
+          letSection:
+            identDefs(shaderX, empty(), call(bindSym"new", shaderT))
+          
+          asgn dotExpr(shaderX, ident"shader"):
+            call bindSym"newShader":
+              tableConstr:
+                exprColonExpr:
+                  ident "GlVertexShader"
+                  call bindSym"toGLSL":
+                    vert
+                    version
+                exprColonExpr:
+                  ident "GlFragmentShader"
+                  call bindSym"toGLSL":
+                    frag
+                    version
+          
+          for n, t in uniforms:
+            asgn dotExpr(shaderX, ident n):
+              call bracketExpr(bindSym"OpenglUniform", t):
+                bracketExpr:
+                  dotExpr(shaderX, ident "shader")
+                  newLit n
+          
+          call bindSym"[]=":
+            dotExpr(ctx, ident "shaders")
+            newLit id
+            call bindSym"RootRef": shaderX
+    
+    call shaderT: call(bindSym"[]", dotExpr(ctx, ident "shaders"), newLit id)
+  
+  result = nnkBlockStmt.newTree(newEmptyNode(), result)
+
+
+proc newDrawContext*: DrawContext =
+  result.rect = newShape(
+    [
+      vec2(0, 1),   # top left
+      vec2(0, 0),   # bottom left
+      vec2(1, 0),   # bottom right
+      vec2(1, 1),   # top right
+    ], [
+      0'u32, 1, 2,
+      2, 3, 0,
+    ]
+  )
diff --git a/src/graphics/shaderutils.nim b/src/graphics/shaderutils.nim
new file mode 100644
index 0000000..b3cdbad
--- /dev/null
+++ b/src/graphics/shaderutils.nim
@@ -0,0 +1,54 @@
+import ./[gl, shaders]
+import pkg/[chroma, vmath]
+
+proc mat4*(x: Mat2): Mat4 = discard
+  ## note: this function exists in Glsl, but do not in vmath
+
+proc vec4*(color: Color): Vec4 =
+  vec4(color.r, color.g, color.b, color.a)
+
+
+proc passTransform*(ctx: DrawContext, shader: tuple|object|ref object, pos = vec2(), size = vec2(10, 10), angle: float32 = 0, flipY = false) =
+  shader.transform.uniform =
+    translate(vec3(ctx.px*(vec2(pos.x, -pos.y) - ctx.wh - (if flipY: vec2(0, size.y) else: vec2())), 0)) *
+    scale(if flipY: vec3(1, -1, 1) else: vec3(1, 1, 1)) *
+    rotate(angle, vec3(0, 0, 1))
+  shader.size.uniform = size
+  shader.px.uniform = ctx.px
+
+
+var gltex*: Uniform[Sampler2d]
+
+
+proc transformation*(glpos: var Vec4, pos: var Vec2, size, px, ipos: Vec2, transform: Mat4) =
+  let scale = vec2(px.x * size.x, px.y * -size.y)
+  glpos = transform * mat2(scale.x, 0, 0, scale.y).mat4 * vec4(ipos, vec2(0, 1))
+  pos = vec2(ipos.x * size.x, ipos.y * size.y)
+
+
+proc roundRectOpacityAtFragment*(pos, size: Vec2, radius: float32): float32 =
+  if radius == 0: return 1
+  
+  if pos.x < radius and pos.y < radius:
+    let d = length(pos - vec2(radius, radius))
+    return (radius - d + 0.5).max(0).min(1)
+  
+  elif pos.x > size.x - radius and pos.y < radius:
+    let d = length(pos - vec2(size.x - radius, radius))
+    return (radius - d + 0.5).max(0).min(1)
+  
+  elif pos.x < radius and pos.y > size.y - radius:
+    let d = length(pos - vec2(radius, size.y - radius))
+    return (radius - d + 0.5).max(0).min(1)
+  
+  elif pos.x > size.x - radius and pos.y > size.y - radius:
+    let d = length(pos - vec2(size.x - radius, size.y - radius))
+    return (radius - d + 0.5).max(0).min(1)
+
+  return 1
+
+
+proc updateSizeRender*(ctx: var DrawContext, size: IVec2) =
+  # update size
+  ctx.px = vec2(2'f32 / size.x.float32, 2'f32 / size.y.float32)
+  ctx.wh = ivec2(size.x, -size.y).vec2 / 2
diff --git a/src/render.nim b/src/render.nim
index 9e7cba1..51458aa 100644
--- a/src/render.nim
+++ b/src/render.nim
@@ -1,20 +1,21 @@
 import tables, unicode, sequtils
 import pixie, markup
+import ./graphics/[gl, shaders, shaderutils, globals]
 export markup
 
 type
   GlyphTable* = ref object
     ## table of pre-renered text images
     font*: Font
-    glyphs: Table[tuple[c: Rune; fg, bg: ColorRgb], Glyph]
+    glyphs: Table[tuple[c: Rune], Glyph]
   
   Glyph = object
     size: IVec2
-    data: seq[ColorRgbx]
+    data: Textures
 
 
 var
-  contextStack*: seq[Context]
+  # contextStack*: seq[Context]
   glyphTableStack*: seq[GlyphTable]
 
 
@@ -23,10 +24,10 @@ template withGlyphTable*(x: GlyphTable, body) =
   block: body
   glyphTableStack.del glyphTableStack.high
 
-template withContext*(x: Context, body) =
-  contextStack.add x
-  block: body
-  contextStack.del contextStack.high
+# template withContext*(x: Context, body) =
+#   contextStack.add x
+#   block: body
+#   contextStack.del contextStack.high
 
 
 proc newGlyphTable*(font: Font, fontSize: float32): GlyphTable =
@@ -53,78 +54,122 @@ component Image {.noexport.}:
   # image (unscaled)
   proc handle(
     g: Glyph,
-    srcPos: IVec2 = ivec2(0, 0),
+    color: Color,
   )
-  let
-    pos1 = parentBox.xy.ivec2
-    size1 = parentBox.wh.ivec2
-    r = contextStack[^1].image
-
-  # clip
-  let pos2 = ivec2(max(-pos1.x, 0), max(-pos1.y, 0)) + srcPos
-  let pos = pos1 + pos2
-  let size = ivec2(
-    (size1.x - srcPos.x).min(g.size.x - pos2.x).min(r.width.int32 - pos.x),
-    (size1.y - srcPos.y).min(g.size.y - pos2.y).min(r.height.int32 - pos.y)
-  )
-  if size.x <= 0 or size.y <= 0: return
+  let shader = global_drawContext.makeShader:
+    proc vert(
+      gl_Position: var Vec4,
+      pos: var Vec2,
+      uv: var Vec2,
+      ipos: Vec2,
+      transform: Uniform[Mat4],
+      size: Uniform[Vec2],
+      px: Uniform[Vec2],
+    ) =
+      transformation(gl_Position, pos, size, px, ipos, transform)
+      uv = ipos
+
+    proc frag(
+      glCol: var Vec4,
+      pos: Vec2,
+      uv: Vec2,
+      size: Uniform[Vec2],
+      color: Uniform[Vec4],
+      clipRectXy: Uniform[Vec2],
+      clipRectWh: Uniform[Vec2],
+    ) =
+      let c = gltex.texture(uv)
+      glCol = vec4(c.rgb, c.a) * vec4(color.rgb * color.a, color.a)
+      if (
+        pos.x < clipRectXy.x or pos.x > (clipRectXy.x + clipRectWh.x) or
+        pos.y < clipRectXy.y or pos.y > (clipRectXy.y + clipRectWh.y)
+      ):
+        glCol = vec4(0, 0, 0, 0)
+
+  if g.data == nil: return
+
+  glEnable(GlBlend)
+  glBlendFuncSeparate(GlOne, GlOneMinusSrcAlpha, GlOne, GlOne)
+
+  glBindTexture(GlTexture2d, g.data[0])
+  
+  use shader.shader
+  global_drawContext.passTransform(shader, pos=parentBox.xy.ivec2.vec2, size=g.size.vec2)
+  shader.color.uniform = color.vec4
+  if clipStack.len > 0:
+    shader.clipRectXy.uniform = clipStack[^1].xy - parentBox.xy
+    shader.clipRectWh.uniform = clipStack[^1].wh
+  else:
+    shader.clipRectXy.uniform = boxStack[0].xy - parentBox.xy
+    shader.clipRectWh.uniform = boxStack[0].wh
+  
+  draw global_drawContext.rect
+
+  glBindTexture(GlTexture2d, 0)
+
+  glDisable(GlBlend)
 
-  # draw
-  for y in 0..<size.y:
-    let
-      idst = (pos.y + y) * r.width + pos.x
-      isrc = (pos2.y + y) * g.size.x + pos2.x
-    for x in 0..<size.x:
-      r.data[idst + x] = g.data[isrc + x]
 
 component Image:
   # image (unscaled)
   proc handle(
     g: Image,
     srcPos: IVec2 = ivec2(0, 0),
+    color: Color = color(1, 1, 1, 1),
   )
-  let
-    pos1 = parentBox.xy.ivec2
-    size1 = parentBox.wh.ivec2
-    r = contextStack[^1].image
-
-  # clip
-  let pos2 = ivec2(max(-pos1.x, 0), max(-pos1.y, 0)) + srcPos
-  let pos = pos1 + pos2
-  let size = ivec2(
-    (size1.x - srcPos.x).min(g.width.int32 - pos2.x).min(r.width.int32 - pos.x),
-    (size1.y - srcPos.y).min(g.height.int32 - pos2.y).min(r.height.int32 - pos.y)
-  )
-  if size.x <= 0 or size.y <= 0: return
+  let shader = global_drawContext.makeShader:
+    proc vert(
+      gl_Position: var Vec4,
+      pos: var Vec2,
+      uv: var Vec2,
+      ipos: Vec2,
+      transform: Uniform[Mat4],
+      size: Uniform[Vec2],
+      px: Uniform[Vec2],
+    ) =
+      transformation(gl_Position, pos, size, px, ipos, transform)
+      uv = ipos
+
+    proc frag(
+      glCol: var Vec4,
+      pos: Vec2,
+      uv: Vec2,
+      size: Uniform[Vec2],
+      color: Uniform[Vec4],
+      clipRectXy: Uniform[Vec2],
+      clipRectWh: Uniform[Vec2],
+    ) =
+      let c = gltex.texture(uv)
+      glCol = vec4(c.rgb, c.a) * vec4(color.rgb * color.a, color.a)
+      if (
+        pos.x < clipRectXy.x or pos.x > (clipRectXy.x + clipRectWh.x) or
+        pos.y < clipRectXy.y or pos.y > (clipRectXy.y + clipRectWh.y)
+      ):
+        glCol = vec4(0, 0, 0, 0)
+
+
+  glEnable(GlBlend)
+  glBlendFuncSeparate(GlOne, GlOneMinusSrcAlpha, GlOne, GlOne)
+
+  let tex = newTextures(1)
+  tex[0].loadTexture g
+  glBindTexture(GlTexture2d, tex[0])
+  
+  use shader.shader
+  global_drawContext.passTransform(shader, pos=parentBox.xy, size=parentBox.wh)
+  shader.color.uniform = color.vec4
+  if clipStack.len > 0:
+    shader.clipRectXy.uniform = clipStack[^1].xy - parentBox.xy
+    shader.clipRectWh.uniform = clipStack[^1].wh
+  else:
+    shader.clipRectXy.uniform = boxStack[0].xy - parentBox.xy
+    shader.clipRectWh.uniform = boxStack[0].wh
+  
+  draw global_drawContext.rect
 
-  # draw
-  for y in 0..<size.y:
-    let
-      idst = (pos.y + y) * r.width + pos.x
-      isrc = (pos2.y + y) * g.width + pos2.x
-    for x in 0..<size.x:
-      r.data[idst + x] = g.data[isrc + x]
+  glBindTexture(GlTexture2d, 0)
 
-
-component VerticalLine:
-  # draw vertical line (fast)
-  proc handle(
-    color: ColorRgb
-  )
-  let
-    pbox = parentBox
-    r = contextStack[^1].image
-    y = pbox.y.int32
-    h = pbox.h.int32
-    box = clipStack[^1]
-    (bx, by, bw, bh) = (box.x.round.int32, box.y.round.int32, box.w.round.int32, box.h.round.int32)
-    x = pbox.x.int32.min(bx + bw).min(r.width).max(bx).max(0)
-  
-  for i in countup(
-    y.min(by + bh).min(r.height - 1).max(by).max(0) * r.width + x,
-    ((y + h).min(by + bh).min(r.height).max(by).max(0) - 1) * r.width + x, r.width
-  ):
-    r.data[i] = rgbx(color.r, color.g, color.b, 255)
+  glDisable(GlBlend)
 
 
 proc clear*(image: Image, color: ColorRgbx) =
@@ -151,48 +196,45 @@ proc clear*(image: Image, color: ColorRgbx) =
 {.pop.}
 
 
-proc render(c: Rune, font: Font; fg, bg: ColorRgb): Glyph =
+proc render(c: Rune, font: Font): Glyph =
   ## renter text to image
   if not font.typeface.hasGlyph(c) and c != static(" ".runeAt(0)):
-    return render(static(" ".runeAt(0)), font, fg, bg)
+    return render(static(" ".runeAt(0)), font)
 
   let ts = font.typeset($c)
   let bounds = ts.layoutBounds
   if bounds.x <= 0 or bounds.y <= 0: return
   result.size = ivec2(bounds.x.ceil.int32, bounds.y.ceil.int32)
   let img = newImage(result.size.x, result.size.y)
-  img.fill bg
-  font.paint.color = fg.color
+  img.fill color(0, 0, 0, 0)
+  font.paint.color = color(1, 1, 1, 1)
   img.fillText(ts)
-  result.data = img.data
+  result.data = newTextures(1)
+  result.data[0].loadTexture img
 
-proc render(gt: GlyphTable, c: Rune; fg, bg: ColorRgb) =
+proc render(gt: GlyphTable, c: Rune) =
   ## pre-rener text and save it in table
-  gt.glyphs[(c, fg, bg)] = c.render(gt.font, fg, bg)
+  gt.glyphs[(c,)] = c.render(gt.font)
 
 func clear*(gt: GlyphTable) =
   clear gt.glyphs
 
-proc `[]`(gt: GlyphTable, c: Rune; fg, bg: ColorRgb): ptr Glyph =
-  try: gt.glyphs[(c, fg, bg)].addr
+proc `[]`(gt: GlyphTable, c: Rune): ptr Glyph =
+  try: gt.glyphs[(c,)].addr
   except KeyError:
-    gt.render(c, fg, bg)
-    gt.glyphs[(c, fg, bg)].addr
+    gt.render(c)
+    gt.glyphs[(c,)].addr
 
 
 proc width*(text: openarray[Rune], gt: GlyphTable): int32 =
   ## get width of text in pixels for font, specified in gt
-  const white = rgb(255, 255, 255)
-  
   for c in text:
-    result += gt[c, white, white].size.x
+    result += gt[c].size.x
 
 proc width*(text: string, gt: GlyphTable): int32 =
   ## get width of text in pixels for font, specified in gt
-  const white = rgb(255, 255, 255)
-  
   for c in text.runes:
-    result += gt[c, white, white].size.x
+    result += gt[c].size.x
 
 
 component Text:
@@ -210,17 +252,18 @@ component Text:
 
   var (x, y, w, h) = (0'i32, 0'i32, (box.w - parentBox.x + box.x).round.int32, (box.h - parentBox.y + box.y).round.int32)
   # todo: clip x (from start)
-  let hd = max(box.y - parentBox.y, 0).round.int32
+  # let hd = max(box.y - parentBox.y, 0).round.int32
 
   for i, c in text:
     let
       color = colors[i]
-      glyph = gt[c, color, bg]
+      glyph = gt[c]
       bx = glyph.size.x
 
     if not c.isWhiteSpace:
       Image glyph[](x=x, y=y, w=w, h=h):
-        srcPos = ivec2(0, hd)
+        # srcPos = ivec2(0, hd)
+        color = color.color
 
     x += bx
     w -= bx
@@ -271,20 +314,85 @@ component Frame:
 
 component Rect:
   proc handle(
-    color: SomeColor,
+    color: Color,
   )
+  let shader = global_drawContext.makeShader:
+    proc vert(
+      gl_Position: var Vec4,
+      pos: var Vec2,
+      ipos: Vec2,
+      transform: Uniform[Mat4],
+      size: Uniform[Vec2],
+      px: Uniform[Vec2],
+    ) =
+      transformation(gl_Position, pos, size, px, ipos, transform)
+
+    proc frag(
+      glCol: var Vec4,
+      pos: Vec2,
+      size: Uniform[Vec2],
+      color: Uniform[Vec4],
+    ) =
+      glCol = vec4(color.rgb * color.a, color.a)
+
+  if color.a != 1:
+    glEnable(GlBlend)
+    glBlendFuncSeparate(GlOne, GlOneMinusSrcAlpha, GlOne, GlOne)
+
+  use shader.shader
+  global_drawContext.passTransform(shader, pos=parentBox.xy, size=parentBox.wh)
+  shader.color.uniform = color.vec4
+  
+  draw global_drawContext.rect
+
+  if color.a != 1:
+    glDisable(GlBlend)
 
-  let r = contextStack[^1]
-  r.fillStyle = color
-  r.fillRect parentBox
 
 component Rect:
   # rounded rect
   proc handle(
-    color: SomeColor,
-    radius: SomeNumber,
+    color: Color,
+    radius: float,
+  )
+  let shader = global_drawContext.makeShader:
+    proc vert(
+      gl_Position: var Vec4,
+      pos: var Vec2,
+      ipos: Vec2,
+      transform: Uniform[Mat4],
+      size: Uniform[Vec2],
+      px: Uniform[Vec2],
+    ) =
+      transformation(gl_Position, pos, size, px, ipos, transform)
+
+    proc frag(
+      glCol: var Vec4,
+      pos: Vec2,
+      radius: Uniform[float],
+      size: Uniform[Vec2],
+      color: Uniform[Vec4],
+    ) =
+      glCol = vec4(color.rgb * color.a, color.a) * roundRectOpacityAtFragment(pos, size, radius)
+  
+  glEnable(GlBlend)
+  glBlendFuncSeparate(GlOne, GlOneMinusSrcAlpha, GlOne, GlOne)
+
+  use shader.shader
+  global_drawContext.passTransform(shader, pos=parentBox.xy, size=parentBox.wh)
+  shader.radius.uniform = radius
+  shader.color.uniform = color.vec4
+
+  draw global_drawContext.rect
+
+  glDisable(GlBlend)
+
+
+component VerticalLine:
+  # draw vertical line
+  proc handle(
+    color: ColorRgb
   )
 
-  let r = contextStack[^1]
-  r.fillStyle = color
-  r.fillRoundedRect parentBox, radius.float32
+  Rect(w = 1, h = parentBox.h):
+    color = color.color
diff --git a/src/side_explorer.nim b/src/side_explorer.nim
index 685c42a..5ca40b0 100644
--- a/src/side_explorer.nim
+++ b/src/side_explorer.nim
@@ -148,15 +148,14 @@ component Item {.noexport.}:
   )
 
   let
-    box = parentBox
     gt = glyphTableStack[^1]
     dy = round(gt.font.size * 1.40)
 
   if selected:
     updateExplorer(explorer, file)
 
-    Rect: color = colorTheme.bgSelection
-    Rect(w = 2): color = colorTheme.bgSelectionLabel
+    Rect: color = colorTheme.bgSelection.color
+    Rect(w = 2): color = colorTheme.bgSelectionLabel.color
 
   if isLeftClick and mouseHover parentBox:
     if file.info.kind == PathComponent.pcFile:
@@ -168,7 +167,9 @@ component Item {.noexport.}:
         explorer.open_dirs.add(OpenDir(path: file.path / file.name & file.ext))
     explorer.item_index = count_item 
   
-  contextStack[^1].image.draw(getIcon(explorer, file), translate(vec2(box.x + 20 + nesting_indent.float32 * 20, box.y + 4)) * scale(vec2(icon_const * dy, icon_const * dy)))
+  let icon = getIcon(explorer, file)
+  Image icon(x = 20 + nesting_indent.float32 * 20, y = 4, w = icon.width.float * icon_const * dy, h = icon.height.float * icon_const * dy):
+    discard
 
   Text text(x = 20 + nesting_indent.float32 * 20 + 20):
     color = colorTheme.cActive
@@ -221,7 +222,7 @@ component SideExplorer:
     count_items = 0
     explorer.count_items = 0
 
-    Rect: color = colorTheme.bgExplorer
+    Rect: color = colorTheme.bgExplorer.color
     
     Title(h = dy * 2):
       explorer = explorer
diff --git a/src/status_bar.nim b/src/status_bar.nim
index 37637a0..0508aed 100644
--- a/src/status_bar.nim
+++ b/src/status_bar.nim
@@ -12,7 +12,7 @@ component StatusBar:
   const marginEnd = vec2(10, 2)
   const spacing = 20
 
-  Rect: color = bg
+  Rect: color = bg.color
 
   var x = margin.x
   for (f, v) in fieldsStart:
@@ -40,5 +40,6 @@ component StatusBar:
 
     if i.field == "git":
       frame(verticalCenterIn = parentBox, x = x, w = iconTheme.git.width, h = iconTheme.git.height):
-        contextStack[^1].image.draw(iconTheme.gitbranch, translate(parentBox.xy) * scale(vec2(0.65, 0.65)))
+        Image iconTheme.git(w = iconTheme.git.width, h = iconTheme.git.height):
+          discard
       x -= spacing
diff --git a/src/text_editor.nim b/src/text_editor.nim
index c027369..c407415 100644
--- a/src/text_editor.nim
+++ b/src/text_editor.nim
@@ -155,7 +155,7 @@ component LineNumbers {.noexport.}:
 
     if i == cursor.y:
       Rect(y=y, h=dy):
-        color = colorTheme.bgLineNumbersSelect
+        color = colorTheme.bgLineNumbersSelect.color
 
     Text s(left = parentBox.w - 10 - w, y = y, h = dy):
       color = sLineNumber.color
@@ -179,7 +179,7 @@ component ScrollBar {.noexport.}:
     b = (pos + size.float32) / total.float32
 
   Rect(y = parentBox.h * a, h = parentBox.h * (b - a)):
-    color = colorTheme.bgScrollBar
+    color = colorTheme.bgScrollBar.color
 
 #todo: move variables
 var blink* = true;
@@ -216,7 +216,7 @@ component Cursor:
     Rect(w = width, h = round(gt.font.size * 1.27)):
       x = text[lineStart ..< lineStart + x].toOpenArray.width(gt).float32 + cursor_width
       y = round(gt.font.size * 1.27) * (y.float32 - pos)
-      color = colorTheme.sText
+      color = colorTheme.sText.color
 
 
 component TextEditor:
diff --git a/src/title.nim b/src/title.nim
index 814fe67..9a74e64 100644
--- a/src/title.nim
+++ b/src/title.nim
@@ -16,17 +16,18 @@ proc onMouseMove*(
 
 component TitleBarButton {.noexport.}:
   proc handle(
-    icon: Image,
+    icon: Image,  # todo: use texture instead
     bg: ColorRgb = colorTheme.bgTitleBar,
   )
 
   Rect:
     color =
-      if mouseHover parentBox: colorTheme.bgTitleBarSelect
-      else: bg
+      if mouseHover parentBox: colorTheme.bgTitleBarSelect.color
+      else: bg.color
 
   frame(centerIn = parentBox, w = icon.width, h = icon.height):
-    contextStack[^1].image.draw(icon, translate(parentBox.xy))
+    Image icon(w = icon.width, h = icon.height):
+      discard
 
 
 component TitleBar:
@@ -38,7 +39,7 @@ component TitleBar:
     focusTextEditor: var bool,
   )
   
-  Rect: color = colorTheme.bgTitleBar
+  Rect: color = colorTheme.bgTitleBar.color
 
   TitleBarButton iconTheme.explorer(w = 65, h = 40):
     bg =
diff --git a/src/welcome.nim b/src/welcome.nim
index e17241f..5e26ae9 100644
--- a/src/welcome.nim
+++ b/src/welcome.nim
@@ -11,11 +11,11 @@ component Item {.noexport.}:
     bg = colorTheme.bgTextArea
 
   Rect(x = label.width(glyphTableStack[^1]) + 8, y = -2, w = hotkey.width(glyphTableStack[^1]) + 14, h = parentBox.h + 4):
-    color = colorTheme.cMiddle
+    color = colorTheme.cMiddle.color
     radius = 5
 
     Rect(left = 2, top = 2, right = 2, bottom = 2):
-      color = colorTheme.bgTextArea
+      color = colorTheme.bgTextArea.color
       radius = 5
 
       Text hotkey(left = 5, top = 1, right = 5, bottom = 1):