Dark Bit Factory & Gravity
PROGRAMMING => C / C++ /C# => Topic started by: lucastar on May 10, 2013
-
Hi again!
I've managed to load and render true type fonts, my next step is making a sine scroller... I don't know where to start.
I understand the idea of picking a rectangle of a bitmap ("letter") and render it in another position, but can't this be done better with glVertex and rotation?
Thanks!
The image it's more or less what i want to do.
-
not played with this part of GL yet.. but my first thoughts would be
render each letter to an FBO (puts them in GPU memory) then render each one to a quad per letter (texture mapped?,)
each quad can have translations/rotations applied to them in sequence?
btw this (GLRez) is probably a good place to look as the source is with it, and it has a waving sine scroller
http://pouet.net/prod.php?which=16327
-
not played with this part of GL yet.. but my first thoughts would be
render each letter to an FBO (puts them in GPU memory) then render each one to a quad per letter (texture mapped?,)
That's what I'm doing right now. Drawing quads and binding the letter texture. I don't know how to make a FBO or write directly in GPU.
-
you can probably get away without the FBO step , not sure about rotation though
make a linked list of your quads, then against each item in the list have a x position and y position, modify those every 1/16ths of a second or so, then update the final position and draw the character in the new positions?
-
But it's not only drawing the letters in different positions, the "shape" of the characters must change too. It's difficult to explain it, but see the image I've attached before, the letters shape change depending on their position and orientation.
-
in which case, i think the FBO approach must be it, unless theres another similar way (possibly a PBO)
you maintain a list of quads, you match each of those elements with a translation/rotation (along z too)), if you change something you recalc the matrix for the quad,
the rotations will change the shape once the render happens
i'd start here
http://forum.openframeworks.cc/index.php?topic=9775.0;wap2
-
I will take a look, thanks.
-
having looked at the glrez source, its definitely use a texture quad and doing transformations similar to how i suggested above.
the main difference is its using immediate mode, whereas my mind tends to think in "modern gl" mode :(
this link goes to the inner loop where it does the translate/rotate for each letter for the waving sine text banner in the demo
https://github.com/chiptune/glrez/blob/master/glrez.cpp#L1243
-
It will take me time to understand that code... i will try to include it in my code.
-
found this screen shot having a quick poke around at the rest of the source showing the sin text stuff in the middle
(https://github.com/chiptune/glrez/blob/master/glrez.jpg?raw=true)
-
I strongly suggest you to look on how to do it using GLSL fragment and vertex shader (http://zach.in.tu-clausthal.de/teaching/cg_literatur/glsl_tutorial/).
It's pretty easy using GLSL to make a sine scroller and it will be very useful when you advance in your gfx programming study.
-
Ok, i did it canopy's way. The effect on the demo is good, but not exactly which i wanted. The position and z orientation change, but shape doesn't.
I will try to add the FBO stuff, and if it does not work, try the GLSL way.
Uploaded the executable file, i don't know if it works on another PC, please try ;)
-
Works fine here lucastar, on Win7 x64 with a GTX 580 card.
Curious to see how it looks when scrolling across the screen :)
-
Works fine here lucastar, on Win7 x64 with a GTX 580 card.
Curious to see how it looks when scrolling across the screen :)
thanks Raizor, i used your font classes to load the image and bind the texture correctly ;).
-
Uploaded the executable file, i don't know if it works on another PC, please try ;)
Even works with wine (an emulator to run windows executables under linux), so it quite possibly runs everywhere :)
-
thanks Raizor, i used your font classes to load the image and bind the texture correctly ;).
Great :)
-
nice.. works on win7 x64 here as well with my radeon 6450 HD
-
Thanks to all, I'm trying to emulate that movement... it's difficult, I'm thinking about using GLSL xD.
As soon as i get close, I'll upload the SC.
-
Ok, i got a cute wave effect, but i can't get the character distorsion right.
Here is the example, for anyone who wants to try.
The method is _DrawChar on bmpFont.cpp class, and the z rotation seems to be working ok.
Sorry about the huge .rar size...
-
Ok, i got a cute wave effect, but i can't get the character distorsion right.
Here is the example, for anyone who wants to try.
The method is _DrawChar on bmpFont.cpp class, and the z rotation seems to be working ok.
Sorry about the huge .rar size...
I haven't looked at rez's code and yours but that's what I see in his glrez intro:
He is doing a full sine wave at the y-axis (normal sine-scroller effect) and is rotating on the z axis each char individually. As you can see in the text-passages each char is "waving" up (or down) till it reaches a limit, then he is doing a smaller z-rotation. Maybe he is simple triggering a function when the position of one char on the Y axis is reaching a value, and this function simple is rotating the char based on the "steps" the char has taken since the function has been triggered (that's how I would do it).
Maybe this is effects are obvious and I'm writing bullsh*t, but Rez is a master of design, and at this stage of his carreer (when the glrez intro was written) with openGL the effects are more nice tricks (like his blending orgies in some intros) but he is designing his stuff in a really nice perfect way.
Brgds (and post your results :) )
-
I've been trying all day to use GLSL... i create a shader, i compile it, but i can't get anything showing on the screen.
I upload the code so if anyone has time to take a look and help me, i will be very grateful because i don't know what is wrong.
Thanks!
-
i had a nightmare with shaders to begin with, especially since i wrote everything from scratch from windowing code right up.
best thing to do, is debug to see if they're failing.
if they aren't then its how you're using them, whether the uniforms/attributes have the right names and whether the shader is using it properly.
i've had a dig through the code and i think the main thing is.. there's only a vertex shader and no fragment shader. (3rd parameter to init) but not sure if its entirely relevent in your case
-
I think there's no problem with that... but i didn't code the shader loader (i think Raizor is the author), so i'm not sure.
-
I'll have a look in a min lucastar. I stupidly uninstalled all versions of visual studio other than 2012 the other day, so you probably won't be able to open the project once I edit it (unless you have vs 2012?). I should be able to at least find the issue and point it out though. Fingers crossed :)
-
I should probably also ask, what are you expecting to see on screen?
-
I'll have a look in a min lucastar. I stupidly uninstalled all versions of visual studio other than 2012 the other day, so you probably won't be able to open the project once I edit it (unless you have vs 2012?). I should be able to at least find the issue and point it out though. Fingers crossed :)
No, i don't have it, but i can get it on Thursday. If it is easier to you tell me.
Thanks!
-
I should probably also ask, what are you expecting to see on screen?
In first place i tried http://zach.in.tu-clausthal.de/teaching/cg_literatur/glsl_tutorial/#flatten (http://zach.in.tu-clausthal.de/teaching/cg_literatur/glsl_tutorial/#flatten), but it didn't work.
Then i tried to create a shader that did nothing(I think):
void main()
{
gl_Position = ftransform();
}
It doesn't work either. When i say that don't work, i mean they are loaded and compiled correctly, but then nothing shows up.
-
Ok. Is there a particular reason for using a vertex shader? do you have something in mind? Just curious as I started playing around with fragment shaders to begin with.
-
I thought the vertex shader was the one to use for vertex transformations, and to do the wave effect. Fragment shader is not more about color and texture stuff?
-
Sure, that makes perfect sense :)
-
Here you go lucastar.
The attached RAR file contains only the files I've changed. If you unpack that into the "framework64k" inside your project dir, you should be good to go.
It now draws a white quad (square) in the middle of the screen. I've changed the vertex shader to animate the quad according to the current time value. I've added some comments to the shader that hopefully make sense. Essentially, the shader does this.
1. Get the vertex position of the vertex (in local/object space).
2. Rotate the vertex according to the current time value.
3. Transform the vertex vertically according to sin(time), so that it bobs up and down.
4. Transform the vertex horizontally according to time, so it moves across the screen from right to left.
5. Transform the vertex into world space.
There was a bug in msys_glext.h causing oglUniform1f not to work. It was mapped to PFNGLUNIFORM1IPROC, rather than PFNGLUNIFORM1FPROC, basically pointing to the function that sets a uniform int value rather than float. I expect this was causing you some unknown headaches too. I've fixed it in the included file.
Hopefully there's enough here to get you going. You'll probably want to include a fragment shader at some point to do some fancy colouring or texture mapping for the characters.
raizor
-
Thanks Raizor! this is very helpful!!
As soon as i get the results i want i will upload the code.
Thanks again!!!
-
You're most welcome lucastar, good luck :)
-
I can't do better than this. No idea about how to change the character shape, only how to make a wave...
I have tried to do it with vertex shaders too, following the tutorial, but it only worked when drawing 3d objects.
-
I wouldn't worry too much about changing the character shape yet. Sure, you can do some really cool stuff like make it warp in the Z plane, so that it bulges towards and away from you, but leave that until later.
For now, I'd probably just try to angle the characters. How about changing the rotation angle by using the distance the character is above or below the baseline? For instance, if the character is positioned vertically in the middle of the screen, it would be rotated 0 degrees. As it moves up vertically, the rotation angle increases. Do the same for when the character moves down vertically (but use negative rotation below the center point), and I think it would look pretty good.
Don't give up yet, you're almost there :)
-
Yes, that is what I'm trying to do right now. ;)
I wouldn't worry too much about changing the character shape yet. Sure, you can do some really cool stuff like make it warp in the Z plane, so that it bulges towards and away from you, but leave that until later.
So... it must be very difficult am+ i right? ;D
-
Haha :) It's certainly achievable, but you're probably best leaving it until you have the angle and scrolling stuff sorted IMHO. Of course, it's totally up to you, but that's the order I'd approach it in.
-
I think I've got it :D
Not very nice, but i think this is the correct way.
Modify: of course nothing of changing char shape...
-
hey lucastar just had a proper go through your thread,
looks cool mate, and runs perfect on my dell laptop widows 7 geforce 650m core i7. im going too say you have the effect pretty much nailed as it looks as good as any old school pixel pushed sin scrolling stuff ( without the chars being cycled ). ive seen, k+
-
Thanks ninogenio! Now i'm trying to do the char stuff...
If I make it, i will upload results + code.
-
:updance:
I did it!!!
The method is very simple, here is the example, and later i will upload the code and an explanation.
I am very happy because in the end i did it in a home-made way.
-
wow!! :clap: excellent work mate! K++
-
wow!! :clap: excellent work mate! K++
thanks ninogenio!!
-
Great stuff lucastar \o/
Looking forward to see how you did it :)
-
Great stuff lucastar \o/
Looking forward to see how you did it :)
Thanks!!
OK, in the source is the Test() method in bmpFont.cpp class.
I will try to explain myself well (please see the attached image):
We draw the first quad, and the next one must have:
the left-top point = right-top point from the previous quad;
the left-bottom point = right bottom point from the previous quad;
then the right points = right points from the previous adding:
to the x coordinate, the size of the quad
to the y coordinate the yOffset.
The yOffset is calculated this way:
float yOffset = sin(time - x/*one of the two x point values*/ * n1 ))*n2;
n1 and n2 are float values.
Sorry for my terrible English, and if you have any questions please ask!
-
good work!
if you remove the contents of framework64k\bin\v8\x86\Debug your uploaded .zip file will be a LOT smaller :) (mainly the pdb/obj/idb/bsc taking up space)
-
good work!
if you remove the contents of framework64k\bin\v8\x86\Debug your uploaded .zip file will be a LOT smaller :) (mainly the pdb/obj/idb/bsc taking up space)
Ok thanks for the advice!
-
Just wondered if you'd done any more work on this lucastar? :)
-
That was the effect i wanted, so now I'm trying to make a color gradient to put to the letters.