New functions have been added in GeeXLab 0.48 to help the rendering of meshes and 3D models with transparent surfaces.

The rendering of objects with opaque and transparent surfaces is usually done as follows:
1/ sort opaque and transparent surfaces in two lists.
2/ render opaque surfaces
3/ disable depth test writes and enable color blending
4/ render transparent surfaces

When the 3D model is designed with rendering in mind, transparent surfaces are transparent meshes and the material attached to a particular mesh should have the opacity property: 1.0 for opaque surface or less than 1.0 for transparent surface.

If you have such a 3D model, here is how to load and initialize it with GeeXLab. Let’s load a glTF object:

init.lua

...

num_opaque_meshes = 0
num_transparent_meshes = 0

model_directory = demo_dir .. "/data/old_lantern/"
resource_directory = demo_dir .. "/data/old_lantern/"
gltf_file ="scene.gltf"

model = gh_model.create_from_file_loader_gltf(gltf_file, model_directory, resource_directory, "")

opacity_threshold = 1.0
gh_model.update_meshes_lists(model, opacity_threshold)
  
num_opaque_meshes = gh_model.get_num_opaque_meshes(model)
num_transparent_meshes = gh_model.get_num_transparent_meshes(model)
print(string.format("num_opaque_meshes: %d - num_transparent_meshes: %d", 
                     num_opaque_meshes, num_transparent_meshes))

...

 
In the init script you can also change by yourself the opacity of a material using the gh_material.set_opacity() function. This function takes two parameters: the ID of the material (from the material name –artists: don’t be lazy and give proper names to your materials!) and the opacity value (between 0.0 and 1.0). In the demo, the old lantern has a material for the glass: lambert2SG:

lambert2SG_mat = gh_material.getid("lambert2SG")
gh_material.set_opacity(lambert2SG_mat, 0.5)

 
Now the model is ready to be rendered:

frame.lua

...
gh_renderer.clear_color_depth_buffers(0, 0, 0, 1, 1)

gh_gpu_program.bind(lighting_prog)

gh_model.render_opaque_meshes(model)

if (num_transparent_meshes > 0) then
  gh_renderer.set_depth_mask(0)
  gh_renderer.set_blending_state(1)
  gh_renderer.set_blending_factors(BLEND_FACTOR_SRC_ALPHA, BLEND_FACTOR_ONE)

  gh_model.render_transparent_meshes(model)

  gh_renderer.set_blending_state(0)
  gh_renderer.set_depth_mask(1)
end

...

 
You can play with these functions in the following demo of the OpenGL 2.1 demopack:
geexlab-demopack-gl21/d64-loader-object-gltf/demo-02/main.xml

 
If you’re unlucky, the 3D model has one mesh, one material (with a random name of course) and the opacity is stored in the alpha channel of the unique texture! In that situation, there is a way to render opaque and transparent faces. The technique works but is far from perfect.

The technique is based on the following multipass algorithm:
1/ first pass: z-pass. Disable writes in the color buffer and render the model in the depth buffer only.
2/ second pass: opaque pass. Enable writes in the color buffer, set depth test to LESS_OR_EQUAL, enable color blending
and render the opaque meshes.
3/ third pass: transparent pass. Keep the same render states and render the transparent meshes.

A demo that shows this technique is available in the GL 2.1 demopack here:
geexlab-demopack-gl21/d64-loader-object-gltf/demo-03/main.xml

 
ImNodes support has been added in GeeXLab 0.44+. At the time of writing, ImNodes is supported by Windows and Linux versions of GeeXLab. Raspberry Pi and macOS versions will get ImNodes support after the next compilation.

ImNodes is a node editor library for (ImNodes github repository is here). And once you have understood its logic, ImNodes is easy to use.

ImNodes has four main components:
– the node editor which is essentially the window of the editor with its grid.
– a node
– a link
– a input / output connector (a pin)

Let’s start with the first thing required by ImNodes, the node editor. In the FRAME script, you draw the node editor with:

imgui_frame_begin()
local is_open = imgui_window_begin_pos_size_always("ImNodes demo", winW, winH, 0, 0)
if (is_open == 1) then

  gh_imgui.imnodes_begin_node_editor()

  ...

  gh_imgui.imnodes_end_node_editor()

end
gh_imgui.window_end()
imgui_frame_end()

 
This piece of code will produce:

 
All node-related components (a node, a pin and a link) are identified by an unique identifier (an ID), a simple integer number.

Let’s draw a node with a title bar and a dummy content:

gh_imgui.imnodes_begin_node_editor()

node1_id = 1
gh_imgui.imnodes_begin_node(node1_id )
gh_imgui.imnodes_begin_node_title_bar()
gh_imgui.text("Node1")
gh_imgui.imnodes_end_node_title_bar()
gh_imgui.dummy(80, 40)
gh_imgui.imnodes_end_node()

gh_imgui.imnodes_end_node_editor()

 
In order to be able to be connected to other nodes, a node needs input and output connectors, the pins. Let’s add one input pin and one output pin to our node:

gh_imgui.imnodes_begin_node_editor()


ImNodesPinShape_Circle = 0
ImNodesPinShape_CircleFilled = 1
ImNodesPinShape_Triangle = 2
ImNodesPinShape_TriangleFilled = 3
ImNodesPinShape_Quad = 4
ImNodesPinShape_QuadFilled = 5

node1_id = 1
gh_imgui.imnodes_begin_node(node1_id )
gh_imgui.imnodes_begin_node_title_bar()
gh_imgui.text("Node1")
gh_imgui.imnodes_end_node_title_bar()

node1_input1 = 2
node1_output1 = 3
pin_shape = ImNodesPinShape_CircleFilled 

gh_imgui.imnodes_begin_input_attribute(node1_input1, pin_shape)
gh_imgui.text_unformatted_v1("input1 pin")
gh_imgui.imnodes_end_input_attribute()

gh_imgui.imnodes_begin_output_attribute(node1_output1, pin_shape)
gh_imgui.text_unformatted_v1("output1 pin")
gh_imgui.imnodes_end_output_attribute()

gh_imgui.dummy(80, 40)
gh_imgui.imnodes_end_node()

gh_imgui.imnodes_end_node_editor()

 
Now we can draw 2 nodes:

gh_imgui.imnodes_begin_node_editor()


ImNodesPinShape_Circle = 0
ImNodesPinShape_CircleFilled = 1
ImNodesPinShape_Triangle = 2
ImNodesPinShape_TriangleFilled = 3
ImNodesPinShape_Quad = 4
ImNodesPinShape_QuadFilled = 5

node1_id = 1
gh_imgui.imnodes_begin_node(node1_id)
gh_imgui.imnodes_begin_node_title_bar()
gh_imgui.text("Node1")
gh_imgui.imnodes_end_node_title_bar()

node1_input1 = 2
node1_output1 = 3
pin_shape = ImNodesPinShape_CircleFilled 
  
gh_imgui.imnodes_begin_input_attribute(node1_input1, pin_shape)
gh_imgui.text_unformatted_v1("input1 pin")
gh_imgui.imnodes_end_input_attribute()
  
gh_imgui.imnodes_begin_output_attribute(node1_output1, pin_shape)
gh_imgui.text_unformatted_v1("output1 pin")
gh_imgui.imnodes_end_output_attribute()
  
gh_imgui.dummy(80, 40)
gh_imgui.imnodes_end_node()







node2_id = 4
gh_imgui.imnodes_begin_node(node2_id)
gh_imgui.imnodes_begin_node_title_bar()
gh_imgui.text("Node2")
gh_imgui.imnodes_end_node_title_bar()

node2_input1 = 5
node2_output1 = 6
  
gh_imgui.imnodes_begin_input_attribute(node2_input1, pin_shape)
gh_imgui.text_unformatted_v1("input1 pin")
gh_imgui.imnodes_end_input_attribute()

gh_imgui.imnodes_begin_output_attribute(node2_output1, pin_shape)
gh_imgui.text_unformatted_v1("output1 pin")
gh_imgui.imnodes_end_output_attribute()
  
gh_imgui.dummy(80, 40)
gh_imgui.imnodes_end_node()


gh_imgui.imnodes_end_node_editor()

 
The last thing we need for our utltra basic node editor demo, is a link between those nodes. As for other components, the link is identified by an unique ID:

gh_imgui.imnodes_end_node_editor()


gh_imgui.imnodes_begin_node(node1_id)
...
gh_imgui.imnodes_end_node()



gh_imgui.imnodes_begin_node(node2_id)
...
gh_imgui.imnodes_end_node()


link1_2 = 7
gh_imgui.imnodes_link(link1_2, node1_output1, node2_input1)


gh_imgui.imnodes_end_node_editor()

 
If you want to explore more features of ImNodes, I prepared a demo (geexlab-demopack-gl21/d29-imgui/imgui-imnodes/demo02/ in the OpenGL 2.1 demopack) that allows to dynamically create nodes, pins, and links. Nodes and links can be deleted as well. And the demo shows a minimap too:

• PYTHON 3 DEMOPACK DOWNLOAD
Demos: geexlab-demopack-python3/rss-reader/
• GeeXLab Downloads
• Forum thread (EN)

Today, let’s see how to parse an RSS feed in Python 3 with two RSS feed parser libraries:
– feedparser
– Atoma

Two GeeXLab demos (one with feedparser, and another one with Atoma) are available in the Python 3 demopack in the rss-reader/01-rss-reader-feedparser/ and rss-reader/02-rss-reader-atoma/ folders.

I tested both libraries on Windows 10 64-bit (v1809) with latest Python 3.7.2. These demos should also work on Linux but I didn’t tested that aspect. Feel free to post a comment here or in the forum if you encounter a problem on Linux (as well as on Windows…).

1 – feedparser

 
feedparser seems to be the most popular feed parser library. feedparser can parse Atom and RSS feeds in Python 3. You can download feedparser from THIS REPO.

To install feedparser, unzip the repo, open a terminal in the repo folder and type:

python setup.py install

 
Now that feedparser is installed, here is a basic use of that library:

import feedparser
url= "https://feeds2.feedburner.com/TheGeeksOf3d"
feed = feedparser.parse(url)

We have parsed Geeks3D RSS feed!

Now let’s display it by looping over all feed entries. In this code snippet, are displayed only the date, title and link of a feed entry:

for post in feed.entries:
  date = "(%d/%02d/%02d)" % (post.published_parsed.tm_year,\
    post.published_parsed.tm_mon, \
    post.published_parsed.tm_mday)
  print("post date: " + date)
  print("post title: " + post.title)
  print("post link: " + post.link)

 
feedparser documentation is available HERE.

2 – Atoma

 
Atoma is another library for Python 3 that deals with RSS feed parsing. Like feedparser, Atoma is simple to install and use. You can download Atoma from THIS REPOSITORY.

To install Atoma, unzip the repo, open a terminal in the repo folder and type:

python setup.py install

An optional but useful library to install alongside Atoma is Requests. Requests can be downloaded from THIS REPO.

As for other libs, unzip the repo, open a terminal in the repo folder and type:

python setup.py install

Now that Atoma and Requests are installed, let’s look at how to read the RSS feed of GeeXLab blog:

import atoma, requests
feed_name = "GeeXLab blog"
url = "https://www.geeks3d.com/hacklab/?feed=rss2"
response = requests.get(url)
feed = atoma.parse_rss_bytes(response.content)

We have parsed GeeXLab RSS feed! We are the best!

Now let’s see how to display the feeds:

for post in feed.items:
  date = post.pub_date.strftime('(%Y/%m/%d)')
  print("post date: " + date)
  print("post title: " + post.title)
  print("post link: " + post.link)

As you can see, displaying feeds with Atoma is pretty similar to feedparser. We are fortunate!

A note on GeeXLab demos on Windows. GeeXLab for Windows comes with a Python 3 installation. If you want to use your Python 3 installation (usually in C:/Users/YOUR_NAME/AppData/Local/Programs/Python/Python37/) with GeeXLab, you have to specify where is located the Python home. You can start GeeXLab with the /python3_home command line option:

start GeeXLab /python3_home="C:/Users/YOUR_NAME/AppData/Local/Programs/Python/Python37/"

A .bat file is available in GeeXLab root folder (start_set_python_home.bat). Edit the Python 3 home path and run it.

• PYTHON 3 DEMOPACK DOWNLOAD
• GeeXLab Downloads
• Forum thread (EN)

This is the first post of a series of articles about Python 3. Python 3 support has been added in GeeXLab 0.26.0.0 and has been improved in GeeXLab 0.27.0.0, especially in the latest release 0.27.2.

On the Linux version, the Python 3 plugin is linked against Python 3.6 shared object (Python 3.6 is standard version on Linux Mint 19.1). On Windows, Python is not available in a standard installation. GeeXLab is shipped with Python 3.7.2, so you don’t need to install Python. But if you already have Python 3.7 installed on your system with lot of particular modules, you can tell GeeXLab to use this new Python home. Just edit the start_set_python_home.bat in GeeXLab folder and change the /python3_home.

For this first article, let’s start with simple but nonetheless important topic: the reading of system information. Python comes with several modules for retrieving system information: sys, platform and os. We’ll see how to display the current date/time as well.

To test this Python 3 demo, you need GeeXLab 0.27.2+. Download the demo, unzip the archive where you want and drag and drop the python3-demopack/py3-01-system-info/main.xml into GeeXLab.

Here is what I get on Linux Mint 19.1 (Python 3.6.7):

 
And on Windows 10 (Python 3.7.2):

 
All interesting things can be found in the frame.py file. By default live-coding is enabled in this demo, so you can edit the frame.py while GeeXLab is running and you will see your changes instantly.

For this demo, the required imports are the following:

import sys
import platform
import sysconfig
import os
import time
from time import gmtime, strftime
import datetime

Date and time: time and datetime modules

The elapsed time is displayed with:

ts = time.time()
gh_imgui.text("%.1f sec" % ts)

The date and time is displayed with:

st = datetime.datetime.fromtimestamp(ts).strftime('%Y-%m-%d %H:%M:%S')
gh_imgui.text(st)

and with :

current_date = strftime("%a, %d %b %Y %H:%M:%S +0000", gmtime())
gh_imgui.text(current_date)

sys module

The information displayed by the sys module:

gh_imgui.text_rgba("sys.executable", color1[0], color1[1], color1[2], color1[3])
if (sys.executable == ""):
  gh_imgui.text("_EMPTY_")
else:
  gh_imgui.text(str(sys.executable))

gh_imgui.text_rgba("sys.float_info", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text_wrapped(str(sys.float_info))

gh_imgui.text_rgba("sys.hexversion", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(str(sys.hexversion))

gh_imgui.text_rgba("sys.version", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(sys.version)

gh_imgui.text_rgba("sys.api_version", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(str(sys.api_version))

gh_imgui.text_rgba("sys.version_info", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(str(sys.version_info))

gh_imgui.text_rgba("sys.platform", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(sys.platform)

color1 is a tuple:

color1 = (0.2, 0.6, 1.0, 1.0)

platform module

The information displayed by the platform module:

gh_imgui.text_rgba("platform.architecture()", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(str(platform.architecture()))

gh_imgui.text_rgba("platform.processor()", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(str(platform.processor()))

gh_imgui.text_rgba("platform.system()", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(str(platform.system()))

gh_imgui.text_rgba("platform.uname()", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text_wrapped(str(platform.uname()))

sysconfig module

The information displayed by the sysconfig module:

gh_imgui.text_rgba("sysconfig.get_python_version()", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(str(sysconfig.get_python_version()))

gh_imgui.text_rgba("sysconfig.get_path_names()", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(str(sysconfig.get_path_names()))

gh_imgui.text_rgba("sysconfig.get_path('stdlib')", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(str(sysconfig.get_path('stdlib')))

os module

The os seems to have a bug on Linux Mint 19.1 with the os.getlogin() function. The Python interpreter outputs the following error:

Error line: 153 - Error object:  - Error data: OSError(25, 'Inappropriate ioctl for device')

The same function works perfectly on Windows. So I used the sys.platform info to test the platform:

if (sys.platform == "win32"):
  gh_imgui.text_rgba("os.getlogin()", color1[0], color1[1], color1[2], color1[3])
  gh_imgui.text(str(os.getlogin()))

gh_imgui.text_rgba("os.getpid()", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(str(os.getpid()))

gh_imgui.text_rgba("os.cpu_count()", color1[0], color1[1], color1[2], color1[3])
gh_imgui.text(str(os.cpu_count()))

• DEMO DOWNLOAD
• GeeXLab Downloads
• Forum thread (EN)

If you need to compute MD5, SHA-1 or SHA-256 hash codes, GeeXLab has all you need.

Since GeeXLab 0.26+, it’s possible to calculate the hash codes (MD5, SHA-1, and SHA-256) of files and buffers. New hash codes generators will be likely added to GeeXLab in the future, but for the moment only these three hash codes generators are supported. Nice, they’re part of the most popular.

Here’s how to calculate the hash codes for files with GeeXLab and a bit of Lua (functions are also available in Python too):

-- "hashme.txt" is a regular file on the disk.
local demo_dir = gh_utils.get_demo_dir()
filename = demo_dir .. "hashme.txt"

zip_filename = "" -- no zip file

md5_hash = gh_utils.file_md5(zip_filename, filename)
sha1_hash = gh_utils.file_sha1(zip_filename, filename)
sha256_hash = gh_utils.file_sha256(zip_filename, filename)

 
Concretely, the hash codes returned by the previous functions are strings of characters.

It’s also possible to calculate the hash codes for simple strings (these functions are available in GeeXLab 0.26.3+):

md5_hash = gh_utils.md5("The quick brown fox jumps over the lazy dog")
sha1_hash = gh_utils.sha1("The quick brown fox jumps over the lazy dog")
sha256_hash = gh_utils.sha256("The quick brown fox jumps over the lazy dog")

 
The hash codes generated by the three previous function calls are:

MD5     => 9e107d9d372bb6826bd81d3542a419d6
SHA-1   => 2fd4e1c67a2d28fced849ee1bb76e7391b93eb12
SHA-256 => d7a8fbb307d7809469ca9abcb0082e4f8d5651e46d3cdb762d02d0bf37c9e592

 
And for a memory buffer?

local demo_dir = gh_utils.get_demo_dir()
filename = demo_dir .. "hashme.txt"
buffer_ptr, buffer_size = gh_utils.file_buffer_create(filename)
if (buffer_size > 0) then
  file_md5_str = gh_utils.buffer_md5(buffer_ptr, buffer_size)
  file_sha1_str = gh_utils.buffer_sha1(buffer_ptr, buffer_size)
  file_sha256_str = gh_utils.buffer_sha256(buffer_ptr, buffer_size)
  gh_utils.buffer_kill(buffer_ptr)
end  

 
All these functions will be used in an upcoming tiny GeeXLab-based app for quickly generating hash codes for any file.

The demo

The demo that comes with this article is a direct implementation of this article. Download the demo and drag and drop it in GeeXLab. The zip archive can be directly loaded by GeeXLab.

A vertical separator is a handy gadget you can meet in many situations like in post processing filters where it’s nice to show the image with and without filter at the same time.

One basic way to draw a vertical separator in GLSL is to check texture coordinates:

...
uniform float mouse_x;
in vec4 uv; // texture coordinates
out vec4 FragColor;

void main() 
{ 
  vec4 fragcolor = texture(...);

  float sep = 1.0;
  if ((uv.x > mouse_x-0.1) && (uv.x < mouse_x+0.1))
    sep = 0.0;

  FragColor = fragcolor * sep;
}

This technique is simple and works fine. But this separator has hard edges:

 

We can do better using the GLSL smoothstep() function:

y = smoothstep(a, b, x)

When x is smaller than a, smoothstep() returns 0.0, when x is greater than b, smoothstep() returns 1.0. When x is between a and b, smoothstep() performs an Hermite interpolation:

 
To code our improved vertical separator, we will use the result of two smoothstep functions:

float y1 = smoothstep(a, b, x);
float y2 = smoothstep(b, c, x);
float sep = 1.0 - y1*y2;

The previous fragment shader becomes:

...
uniform float mouse_x;
in vec4 uv; // texture coordinates
out vec4 FragColor;

void main() 
{ 
  vec4 fragcolor = texture(...);
  
  float y1 = smoothstep(mouse_x-0.1, mouse_x, uv.x);
  float y2 = smoothstep(mouse_x, mouse_x+0.1, uv.x);
  float sep = 1.0 - y1*y2;
  
  FragColor = fragcolor * sep;
}

This smoothstep-based separator has smooth egdes.

 
The complete demo is available HERE. This demo requires an OpenGL 3.2 support.

You can download GeeXLab from THIS PAGE.

Unzip the archive where you want and load the 01-vertical-separator/main-gl3.xml file into GeeXLab. The source code of the pixel shader is available in the 01-vertical-separator/ps-gl3.glsl file.

A second demo (26-triangle-blur) is also available in the archive. This second demo shows a video filter. On Windows platform, the video filter is applied to the webcam output. On Linux or macOS, a simple image is used in place of the webcam.

For any feedback or bug-report, a thread is available HERE on GeeXLab forums.

The support of the SQLite3 has been added in GeeXLab 0.22+. The SQLite3 database engine is embedded in the plugin_gxc_sqlite3_{x32|x64}.{dll|so|dylib} plugin. The SQLite3 scripting API is available using the gh_sqlite3 library (Lua and Python). At the time of writing, the SQLite3 plugin is only available for GeeXLab win64 (plugin_gxc_sqlite3_x64.dll). The plugin will be available for all platforms later.

Let’s see how to use these new functions in Lua to create a very simple database. This database is stored in a file (database01.db) and has a single table (users) with two columns (name and age). We will use SQL queries to send commands to the database engine.

First, let’s define some constants:

local SQLITE_OK = 0 
local SQLITE_ERROR = 1
local SQLITE_ROW = 100
local SQLITE_DONE = 101 

local SQLITE_INTEGER = 1
local SQLITE_FLOAT = 2
local SQLITE_TEXT = 3

 
Now let’s create the database:

local demo_dir = gh_utils.get_demo_dir()
local db_filename = demo_dir .. "database01.db"
local rc = SQLITE_OK
dbid, rc = gh_sqlite3.db_open(db_filename)

 
dbid is the database identifier we will use in the other SQLite3 functions.

Now we have a database. Let’s create the users table. Before, we drop the table if it already exists in the database:

local sql = "DROP TABLE users"
if (gh_sqlite3.db_exec(dbid, sql) == SQLITE_ERROR) then
  print("SQL error 1")
end  

sql = "CREATE TABLE users (name varchar(64), age int not null)"
if (gh_sqlite3.db_exec(dbid, sql) == SQLITE_ERROR) then
  print("SQL error 1")
end  

 
Now that the users table is created, we can populate it with some data:

sql = "INSERT INTO users (name, age) VALUES ('toto', 12);"
if (gh_sqlite3.db_exec(dbid, sql) == SQLITE_ERROR) then
  print("SQL error 2")
end

sql = "INSERT INTO users (name, age) VALUES ('John', 53);"
if (gh_sqlite3.db_exec(dbid, sql) == SQLITE_ERROR) then
  print("SQL error 2")
end

sql = "INSERT INTO users (name, age) VALUES ('Viktor', 48);"
if (gh_sqlite3.db_exec(dbid, sql) == SQLITE_ERROR) then
  print("SQL error 2")
end

sql = "INSERT INTO users (name, age) VALUES ('Duke', 85);"
if (gh_sqlite3.db_exec(dbid, sql) == SQLITE_ERROR) then
  print("SQL error 2")
end

 
Now we have a database with a table that contains some data. Let’s read the data with a SELECT query:

local sql = "SELECT * FROM users"
if (gh_sqlite3.db_prepare(dbid, sql) == SQLITE_OK) then
  local num_columns = gh_sqlite3.db_get_column_count(dbid)
  print("# columns: " .. num_columns)
  
  local row = 1
  rc = gh_sqlite3.db_step(dbid)
  while (rc ~= SQLITE_DONE) do
  
    if (rc == SQLITE_ROW) then
      for c=0, num_columns-1 do

        local type = gh_sqlite3.db_get_column_type(dbid, c)
        if (type == SQLITE_TEXT) then
          local v = gh_sqlite3.db_column_get_text1024(dbid, c)
          print("Col. " .. c .. " | TEXT | " .. v)
        elseif  (type == SQLITE_INTEGER) then
          local v = gh_sqlite3.db_column_get_int(dbid, c)
          print("Col. " .. c .. " | INT | " .. v)
        elseif  (type == SQLITE_FLOAT) then
          local v = gh_sqlite3.db_column_get_double(dbid, c)
          print("Col. " .. c .. " | REAL | " .. v)
        end
      end
    end
    
    -- next result.
    rc = gh_sqlite3.db_step(dbid)
    
    if ((rc == SQLITE_ERROR) or (rc == SQLITE_DONE)) then
      break
    end
  end
  
  gh_sqlite3.db_finalize(dbid)
end

When you no longer need the database, you can close it with:

gh_sqlite3.db_close(dbid)    

 
The complete demo is available HERE as well as in the full code sample pack in the gl-32/sqlite3/ folder.

A thread is available on GeeXLab forum HERE.

ImGui menus have been added in the branch 0.22+ of GeeXLab. Here is a code snippet that shows how to use the menu functions of the gh_imgui library.

The complete demo is available HERE (demo_menus.xml) as well as in the full code sample pack (gl-32/imgui/demo_menus.xml).

ImGui defines two kinds of menu bars: a main menu bar and a window menu bar.

Main menu bar

The main menu bar is a fullscreen menu bar. It’s placed on the top of GeeXLab 3D window.

Here is the code that draws the main menu bar:

if (gh_imgui.menu_begin_main_bar() == 1) then

  local enabled = 1
  if (gh_imgui.menu_begin("File", enabled) == 1) then
  
    local item_selected = 0
    local item_enabled = 1

    if (gh_imgui.menu_item("Show log file", "", item_selected, item_enabled) == 1) then
      --
      -- do something
      --
    end
  
    gh_imgui.menu_end()
  end

  if (gh_imgui.menu_begin("Tools", enabled) == 1) then
  
    local item_selected = 0
    local item_enabled = 1
    if (gh_imgui.menu_item("Wireframe", "", item_selected, item_enabled) == 1) then
      --
      -- do something
      --
    end
    if (gh_imgui.menu_item("Solid", "", item_selected, item_enabled) == 1) then
      --
      -- do something
      --
    end
  
    gh_imgui.menu_end()
  end

  gh_imgui.menu_end_main_bar()
end

Window menu bar

Each ImGui window can have its own menu bar.

Here is the code that draws this menu:

gh_imgui.window_begin("Menu test", .......)


-- Window menu.
--
if (gh_imgui.menu_begin_bar() == 1) then

  local enabled = 1
  if (gh_imgui.menu_begin("File", enabled) == 1) then
    local item_selected = 0
    local item_enabled = 1
    if (gh_imgui.menu_item("Show log file", "", item_selected, item_enabled) == 1) then
      --
      -- do something
      --
    end
    gh_imgui.menu_end()
  end

  if (gh_imgui.menu_begin("Tools", enabled) == 1) then
    local item_selected = 0
    local item_enabled = 1
    if (gh_imgui.menu_item("Wireframe", "", item_selected, item_enabled) == 1) then
      --
      -- do something
      --
    end
    if (gh_imgui.menu_item("Solid", "", item_selected, item_enabled) == 1) then
      --
      -- do something
      --
    end
    gh_imgui.menu_end()
  end

  gh_imgui.menu_end_bar()
end



gh_imgui.window_end()

Dear ImGui (or ImGui in short!) is a powerful library to draw user interfaces (widgets) in OpenGL or Vulkan applications. The freshly released GeeXLab 0.17.0.1 comes with ImGui support. ImGui has a lot of functions for drawing user interfaces and GeeXLab comes with a subset only, because implementing all those functions would have taken too much time.

In the current GeeXLab, the following objects are supported:
– windows
– texts and colored texts
– checkboxes
– progress bars
– buttons
– sliders (1D and 4D)
– trees
– plotlines

Thanks to these widgets, we have the main features we need for most of the demos. I also tested ImGui’s combo boxes and list boxes and I hope to add them shortly.

ImGui is an immediate mode library: you have to build all ImGui windows and widgets each and every frame. Once you understand it, you can really start using ImGui functions. The immediate mode allows you to make the displaying of ImGui widgets really dynamic: you can change the position, size, content of every widget at any time. You can add a new widget or remove an existing widget at any moment.

Minimal ImGui Canvas

Let’s see how to use the new ImGui functions. A new library is available for ImGui: gh_imgui.

The first thing to do is to initialize ImGui in a INIT script:

gh_imgui.init()

The second thing is to clean up ImGui resources in a TERMINATE script:

gh_imgui.terminate()

Now all important things will take place in the FRAME script. The first ImGui function to call in a FRAME script is gh_imgui.frame_begin(). This function sets the current drawing aera and transmits mouse data. The last ImGui function to call is gh_imgui.frame_end(). Between both functions, you can call any other ImGui drawing functions.

Here is a minimal FRAME script:

winW, winH = gh_window.getsize(0)

gh_renderer.set_scissor_state(1)
gh_renderer.set_viewport_scissor(0, 0, winW, winH)
gh_renderer.clear_color_depth_buffers(0.2, 0.2, 0.2, 1.0, 1.0)

local LEFT_BUTTON = 1
local mouse_left_button = gh_input.mouse_get_button_state(LEFT_BUTTON) 
local RIGHT_BUTTON = 2
local mouse_right_button = gh_input.mouse_get_button_state(RIGHT_BUTTON) 
local mouse_x, mouse_y = gh_input.mouse_get_position()


gh_imgui.frame_begin(winW, winH, mouse_x, mouse_y, mouse_left_button, mouse_right_button)

--
-- You can call ImGui drawing functions between frame_begin() and frame_end().
--

gh_imgui.frame_end()

The rest of the tutorial will be focused on ImGui functions to call between gh_imgui.frame_begin() and gh_imgui.frame_end().

Text

gh_imgui.text() and gh_imgui.text_rgba() allows to print a text in a window:

gh_imgui.text("Hello (with default color)")
gh_imgui.text_rgba("Hello (yellow color)", 1.0, 1.0, 0.0, 1.0)

Did you notice the caption of the windows? It’s ImGui default window that is displayed if we do not specify our own window.

Window

To draw a window, we have to call two functions: the beginning and the end of the window:

width = 300
height = 200
pos_x = 20
pos_y = 20
window_flags = 0
pos_flags = 4
size_flags = 4
gh_imgui.window_begin("Test Window", width, height, pos_x, pos_y, window_flags, pos_flags, size_flags)

gh_imgui.text("Hello")

gh_imgui.window_end()

The various flags control the look and behavior of the window. Here are the possible values for window_flags:

window_default = 0
window_no_resize = 2
window_no_move = 4
window_no_collapse = 32
window_show_border = 128
window_no_save_settings = 256

Here are the possible flags for pos_flags and size_flags:

pos_size_flag_always = 1 -- Always set the pos and/or size
pos_size_flag_once = 2 -- Set the pos and/or size once per runtime session (only the first call with succeed)
pos_size_flag_first_use_ever = 4  -- Set the pos and/or size if the window has no saved data (if doesn't exist in the .ini file)

Separator, Same Line, Bullet and Vertical Space

A SEPARATOR is an horizontal line. A SAME_LINE allows to draw several widgets on the same line (useful for texts that include words of different color). A BULLET draws bullet (useful for lists). A vertical space allows to add more vertical space between two widgets.

local IMGUI_WIDGET_SEPARATOR = 1
local IMGUI_WIDGET_SAME_LINE = 2
local IMGUI_WIDGET_BULLET = 3
local IMGUI_WIDGET_VERTICAL_SPACING = 4

gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)
gh_imgui.widget(IMGUI_WIDGET_SEPARATOR)
gh_imgui.widget(IMGUI_WIDGET_BULLET)
gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)

Here a concrete example:

local IMGUI_WIDGET_SEPARATOR = 1
local IMGUI_WIDGET_SAME_LINE = 2
local IMGUI_WIDGET_BULLET = 3
local IMGUI_WIDGET_VERTICAL_SPACING = 4

gh_imgui.text("Hello (with default color)")
gh_imgui.text_rgba("Hello (yellow color)", 1.0, 1.0, 0.0, 1.0)
gh_imgui.widget(IMGUI_WIDGET_SEPARATOR)

gh_imgui.text("text (default color) +")
gh_imgui.widget(IMGUI_WIDGET_SAME_LINE)
gh_imgui.text_rgba(" yellow text", 1.0, 1.0, 0.0, 1.0)

gh_imgui.widget(IMGUI_WIDGET_SEPARATOR)

gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)
gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)
gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)
gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)
gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)
gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)
gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)
gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)
gh_imgui.text("height VERTICAL_SPACING before this line")

gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)
gh_imgui.widget(IMGUI_WIDGET_SEPARATOR)
gh_imgui.widget(IMGUI_WIDGET_VERTICAL_SPACING)

gh_imgui.text("A list:")
gh_imgui.widget(IMGUI_WIDGET_BULLET)
gh_imgui.text("item 1")
gh_imgui.widget(IMGUI_WIDGET_BULLET)
gh_imgui.text("item 2")
gh_imgui.widget(IMGUI_WIDGET_BULLET)
gh_imgui.text("item 3")

And the result:

Button

To draw an interactive button just call gh_imgui.button(). The button function returns its state: pressed or not.

if (gh_imgui.button("Click me") == 1) then
  -- do something if pressed.
end

Progress bar

To draw an interactive progress bar, call the gh_imgui.progress_bar() function. In the following code snippet, the progress bar is set to 35% of progression:

fraction = 0.35
size_x = 0 -- for automatic width
size_y = 0 -- for automatic height
gh_imgui.progress_bar(fraction, size_x, size_y, "A progress bar set to 35 %")

Checkbox

To draw an interactive checkbox, call the gh_imgui.checkbox() function. The checkbox function returns its state: checked or unchecked.

initial_state = 0
if (gh_imgui.checkbox("Checkbox", initial_state) == 1) then
  -- do something if checked.
end

1D Slider

To draw an simple slider (that control a single value only), call the gh_imgui.slider1f() function. This function returns a value according to the position of the slider.

initial_state = 0
local min_value = 0.0
local max_value = 1.0
local power = 1.0 -- Use power!=1.0 for logarithmic sliders.
local initial_value = 0.5
slider_value = gh_imgui.slider_1f("Slider 1f", initial_value,   min_value, max_value,   power)

Code Samples

I think that most of the basic functions of the gh_imgui library has been covered. More functions (trees, slider4f, plotlines) are available in the full version of the code sample pack:

– gl-21/imgui/demo_02.xml (OpenGL 2.1)
– gl-32/imgui/demo_02.xml (OpenGL 3.2+)
– vk/imgui/demo_02.xml (Vulkan)

The demo for this article is available here:
– gl-32/imgui/test01.xml (OpenGL 3.2+)

For any feedback or question, a forum is available HERE (english) or HERE (french).

A nice overview of ImGui functionalities is available by calling the show_test_window() function. This function draws two windows and shows a lot of ImGui features. Many of them are not available yet in GeeXLab. But it’s cool to see them in action:

gh_imgui.frame_begin(winW, winH, mouse_x, mouse_y, mouse_left_button, mouse_right_button)

gh_imgui.show_test_window()

gh_imgui.window_end()

GeeXLab 0.16.x comes with a new way to live-code GLSL shaders: they can be live-coded from a file using any text editor. Live-coding of GLSL shaders is available since the dark ages of GeeXLab but only via built-in tools. These tools do their job but are far from being as programmer friendly as a good text editor. So the new way to live code GLSL shaders is simple: edit a GLSL shader in a separate file (like toon-shader-frag.glsl) in your favorite text editor and tell GeeXLab to reload this shader as soon as changes are detected. That’s all.

This new technique is nice because it’s simple and above all, this technique is cross-platform. So live coding GLSL shaders is now available on Windows, Linux, macOS and Raspberry Pi! This simple technique is already in use for lice-coding script files.

Here is a selection of some free text editors HERE. Some are limited to Windows (Notepad++), other are cross-platform (Geany, CudaText, Atom).

To live-code a shader from a file, you have to specify a new XML attribute in the gpu_program XML node: livecodeng_from_file_{shader_type} where shader_type can be vs (vertex shader), ps (pixel shader), gs (geometry shader), tcs (tess control shader), tes (tess eval shader) or cs (compute shader).

In the following code snippet, the GPU program has a vertex shader and a pixel shader. The vertex shader is embedded in the XML node using the raw_data_vs element while the pixel shader is stored in a separate file (live-coding-03_ps.glsl). The attribute livecoding_from_file_ps="1" instructs GeeXLab to reload the shader as soon as a change is detected in the pixel shader file. I also added a new attribute, livecoding_from_file_update_delay that specifies the interval in seconds between two file checks. Then an interval of 0.25 second means 4 file checks per second. This check interval is the same for all shaders of a GPU program.

The pixel shader file live-coding-03_ps.glsl:

#version 120
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main(void)
{
  vec2 uv = 2.0 * (gl_FragCoord.xy / resolution.xy) - 1.0;
  float col=0.0;
  float i=1.0;
  vec2 spec = vec2(0.1, 0.6);
  uv.x += sin(i*20.0 + spec.x*5.0*time*6.0 + uv.y*1.5) * spec.y;
  col += abs(0.044/uv.x) * spec.y;
  gl_FragColor = vec4(col, col, col, 1.0);
}

Remark: There is no restriction about the extension of the shader file: just use the extension you want (*.glsl, *.frag, *.vert, *.myshaderext, etc.). GeeXLab does not check the shader file extension.

A demo of live-coding using this new technique is available in the code sample pack: gl-21/live-coding/live-coding-03.xml. Load live-coding-03.xml in GeeXLab, open the pixel shader live-coding-03_ps.glsl in a text editor and you’re ready to live-hack the pixel shader!