PixelArt - Clouds

[Petr Schreiber]

Hi friends,

playing through the Kingdom: New lands (http://www.kingdomthegame.com/), I was in continous awe how much dynamic detail the authors managed to squeeze to their pixel art.
I was thinking about it a lot and came up with approach to achieve similar goal in thinBasic.
Pixel art is typically based on little bitmaps, but I thought it would be more interesting to design pixel art with vector shapes (via TBGL), and then post process it to get the granular look.

Approach taken
In order to do this, I first modified my library for offScreenRendering (https://github.com/petrSchreiber/offScreenRenderer), then prepared framework for pixelArt (https://github.com/petrSchreiber/elArt) demos and finally, did a simple cloud demo I would like to share with you here.

Get the code
If you are advanced user (command line is your second home), get it from git (https://github.com/petrSchreiber/demo_pixelArtClouds) and initialize submodules.
If you just want to try it on your PC, get the complete zip package (https://github.com/petrSchreiber/demo_pixelArtClouds/releases/download/v1.0/demo_pixelArtClouds.zip).


Petr

[Petr Schreiber]

Just by playing with the example, you can get completely different results.
The elArt framework allows you to set virtual resolution independently for vertical and horizontal dimension, allowing anamorphic effect like the one on the image below.


Petr

[ErosOlmi]

That's a great idea and great code.

When I executed I didn't get at first that clouds were changing, wow.
Also the way you organize and write code is a pleasure to see: well written, great variables name self describing the code.

A suggestion: CPU usage is high due to no time given to the OS to manage events.
But if you add DoEvents command inside For/Next loop of drawCloud function in cloud.tBasic, CPU will always stay under 5%

Thank you for this great example to study.

[Petr Schreiber]

Hi Eros,

thank you very much for your kind words. ThinBASIC TYPEs make it easy to organize code to reusable units, which is great :drink:

And also - thanks a ton for the advice! I was thinking about the CPU footprint, I think I will try to come up with general solution as part of the elArt framework (maybe timer based, not sure now) to address the CPU usage.
Because on my PC, the DoEvents did kicked the framerate from 60 FPS to 4 FPS, which is sadly not acceptable.


Petr

[ErosOlmi]

Can you please add FrameRate somewhere on screen so I can make some tests?
Maybe an option in TBGL to automatically show frame rate on screen if a certain option is ON, so we can avoid to add lines on script.
TBGL_FrameRateAutoShow(position, color) with position Upper left/right or bottom left/right

Thanks
Eros

[Petr Schreiber]

Hi Eros,

like in FRAPS? That would be cool, I will work on it :)
In the meantime, I attach version with framerate being written to window title - just for debugging purposes.


Petr

[primo]

Thank you Petr , certainly this is a scientific subject.
your last program gives 61 fps on i5 desktop with Geforce GT 640 , windows xp /32
but in a slow laptop Asus X553MA with windows 10 it is only 21 fps. its graphics card is built intel HD.
regards

[Petr Schreiber]

Hi Primo,

thanks for testing - the low framerate could be caused by multiple factors, one of them could be alpha blending.
To verify this theory, try to comment out "tbgl_pushState %TBGL_BLEND" and "tbgl_popState" in drawCloud,and run the demo again on your ASUS.


Petr

[primo]

Hi Petr
i have commented out "tbgl_pushState %TBGL_BLEND" and "tbgl_popState" , but the 21 fps stay the same as before. with ugly shaped clouds. i have opened the tool OpenGL_GetInfo.tbasic , it works but can't save the info when we click on the button (save report) in the latest thinbasic version 1.9.16.17 so i have tried it with TB version 1.8.9 and it can save the report. i attach the report for asus.
i am happy more with my i5 desktop because of the big monitor and it is relatively speedy machine.

[Petr Schreiber]

Hi Primo,

thank you for your reply - I checked why OpenGL_GetInfo does not work and I was ashamed to see my old codebase :oops:
So I recoded the tool from the scratch, and published the source code at GitHub (https://github.com/petrSchreiber/opengl_report). Check the clean code (https://github.com/petrSchreiber/opengl_report/blob/master/OpenGLProviderInfo.tbasicu), huhuhuuu.

You can grab ZIP with the latest version here as opengl_report.zip:
https://github.com/petrSchreiber/opengl_report/releases

My apologies for the trouble with the tool, now please let me think what could be the main performance issue with the demo.


Petr

[kryton9]

Hi Petr and rest of the great group here. There are so many changes to thinBasic, you guys have been busy!
It will take me awhile to get up to speed again, but I am looking forward to it.

I got 73 to 74 fps on my Acer Notebook using Intel graphics. To see the changes to the clouds, I recommend a divisor of 0.01 on line 11
instead of the 1000 that is there now.

It is weird, with my nvidia card enabled the frame rate is at 30 to 33, then it jumps to 76 to 78 and then back to 30 to 33... I checked my
vertical synch was turned on. When I turned vertical synch off I got a steady range from 61 to 66, slower than using my intel card? Ah the mysteries
of graphics!

[ErosOlmi]

Ciaooooooooooooooooooo Kent :D
Happy to see you again here around.

[ErosOlmi]

Just in case you need to profile which sub/function is performing slowly ... thinBasic has an internal profiler.
Just add the following line

#Profile On
in your source code and at the end of script execution you will get a window like the one attached that will show list of script functions, how many times are called, time taken to load/unload/execute, ...
In this script there are few functions executed thousand of times per seconds. Little optimizations in there will produce great results in execution speed (hopefully :D ).

Ciao
Eros

[kryton9]

Hi Eros, my journeys the last 4 years have been lonely. But I got to explore in the vast wilderness of languages, game engines and saw massive changes that are too hard for me to keep up with anymore.
thinBasic and Oxygen have always been on my mind. The community, support and the wonderful language is not matched in my journeys. Just quickly glancing you have done a lot from the IDE
to really making the language even more capable than it already was!

[kryton9]

Just in case you need to profile which sub/function is performing slowly ... thinBasic has an internal profiler.
Just add the following line

#Profile On
in your source code and at the end of script execution you will get a window like the one attached that will show list of script functions, how many times are called, time taken to load/unload/execute, ...
In this script there are few functions executed thousand of times per seconds. Little optimizations in there will produce great results in execution speed (hopefully :D ).

Ciao
Eros

That is so cool!!!

[Petr Schreiber]

It is weird, with my nvidia card enabled the frame rate is at 30 to 33, then it jumps to 76 to 78 and then back to 30 to 33... I checked my
vertical synch was turned on. When I turned vertical synch off I got a steady range from 61 to 66, slower than using my intel card? Ah the mysteries
of graphics!

Hi Kent :),

there are no mysteries - this is the danger of v-sync. If it cannot match refresh rate of the monitor, framerate drops to refresh rate / 2.
To quote TBGL documentation for TBGL_UseVSync:


Use this statement wisely, it will always lead to rendering of complete frames without "tearing" artifact, but it can hurt overall framerate.
Problem is, that when framerate is lower than limit determined using parameter, observed framerate can drop to half of it.

Example on 60Hz display:
Script runs at stable 100 FPS - using TBGL_UseVSync(1) you will get 60 FPS guaranteed
Script runs at stable 40 FPS - using TBGL_UseVSync(1) you may get 40 FPS again, or 30 FPS depending on vendor implementation ( equivalent of TBGL_UseVSync(2) ( 1 more than passed ) )


I will consider adding hybrid vsync, like in Gears of War, to elArt framework. That would reduce these drops (which might be the ones hurting primo as well).


Petr

[Petr Schreiber]

I added triple buffering to gitHub of demo_pixelArtClouds (https://github.com/petrSchreiber/demo_pixelArtClouds), that could offer better smoothness.

As for the real time profiling, I founded new project, perfish (https://github.com/petrSchreiber/perfish), which I will work on in the following days.
This will be the component providing view on frameRate and other metrics...


Petr

[kryton9]

Got an error from the download from the last link Petr to triple buffering update. Include not found.

[Petr Schreiber]

Hi Kent,

because the repository uses submodules, you need to prepare it like:


git clone https://github.com/petrSchreiber/demo_pixelArtClouds.git
git submodule update --init --recursive

The first line is what usually git client does for you (GitHub for Windows, GitExtensions, ...). The seconds need to be done manually.
In GitHub for Windows that would mean choosing the repo, then clicking the gear button and picking Open in Git shell, where you would type "git submodule update --init --recursive".


Petr

[kryton9]

I didn't use git client, just the web interface. I used the download zip button. Easier to use for me the old manual way :D

[Petr Schreiber]

Yes, that ZIP file is tempting - but it is sadly not working for repositories with submodules (http://stackoverflow.com/questions/12936014/include-a-github-submodule-automatically-in-download).
That is why I include complete ZIP package in release (https://github.com/petrSchreiber/demo_pixelArtClouds/releases)s.


Petr

[kryton9]

Thanks Petr, will study up on it.