Mirror of forum.nim-lang.org

4988 :: Integrate a GLSL shader in Nim

• Krux02 (orginal) [2019-07-02T11:30:28+02:00] view original

  I made a Video showing how to use an arbitrary GLSL shader and integrate it into a Nim/SDL/OpenGL application.

  Here it is

---

• treeform (orginal) [2019-07-02T19:32:24+02:00] view original

  In your video you talk about noise texture and v-flipping it. I think it might be related to flipping and tiling. Some thing like this maybe, just a hunch:

---

• demotomohiro (orginal) [2019-07-03T01:40:54+02:00] view original

  Thank you for the nice video!

  Noise texture in the shader used in your video is not just random texture. This is the code in the shader that samples noise texture:

  
  float Noise( in vec3 x )
  {
    vec3 p = floor(x);
    vec3 f = fract(x);
    f = f*f*(3.0-2.0*f);
    
    vec2 uv = (p.xy+vec2(37.0,17.0)*p.z) + f.xy;
    vec2 rg = texture( iChannel0, (uv+ 0.5)/256.0, -99.0 ).yx;
    return mix( rg.x, rg.y, f.z );
  }
  Run

  This is code from Dave_Hoskins's comment in https://www.shadertoy.com/view/4sfGzS Here is how the noise texture was created:

  
  for (int y = 0; y < 256; y++)
  {
          for (int x = 0; x < 256; x++)
          {
                  colour[x, y].r = RandomNumber();
                  colour[x, y].b = RandomNumber();
          }
  }
  
  for (int y = 0; y < 256; y++)
  {
          for (int x = 0; x < 256; x++)
          {
                  int x2 = (x - 37) & 255;
                  int y2 = (y - 17) & 255;
                  colour[x][y].g = colour[x2][y2].r;
                  colour[x][y].a = colour[x2][y2].b;
          }
  }
  Run

  I think when this shader was created, there is no 3D texture in WebGL1. This Noise function make 3D value noise from 1 time 2D texture sampling. rg.y contains a sample of next z layer of rg.x. To make continuous 3D value noise, rg.y need to be a copy of next z layer rg.x value.

  you can download original Shadertoy textures from here: https://github.com/beautypi/shadertoy-iOS-v2/blob/master/shadertoy/presets/tex16.png

  When embeding a shader as string literal in source code, line numbers in error message from GLSL compiler begins from head of that string literal. That makes finding a error line a bit difficult. It seems your program displays GLSL shader error messages inside GLSL code. I wrote following template so that GLSL compiler show error messages with line number in source code and variable name. It prepends #line directive to the string literal with line number in source and constant name.

  template glslSrcImpl(name: untyped; line: int; prefix, src: static string): untyped =
    const name {.inject.} =
      block:
        const
          pre {.inject.} = prefix
          l {.inject.} = line + 2
          nameStr {.inject.} = astToStr(name)
          s {.inject.} = src
        &"{pre}\n#line {l} \"{nameStr}\"\n{s}"
  
  template glslSrcHead*(name: untyped; glslVersion: int; src: static string): untyped =
    const verLine = "#version " & $glslVersion
    glslSrcImpl(name, instantiationInfo().line, verLine, src)
  Run

  Use this template like this:

  glslSrcHead testFS, 460, """
  out vec4 color;
  
  void main()
  {
    color = vec4(1.0, 0.0, 0.0, 0.0);
  }
  """
  Run

---