m-agour's Blog

Week 4: Camera animation, interpolation in GLSL, and a single Timeline!

m-agour
Published: 07/16/2022

What did you do this week?

  • Managed to implement a single Timeline using the Container class. So, instead of having two classes: Timeline and CompositeTimeline, now the Timeline can have multiple Timeline objects and controls them as in the code below
     

    main_timeline = Timeline()
sub_timeline = Timeline(actors_list)
main_timeline.add_timeline(sub_timeline)

     

  • Implemented the HSV, Lab, and XYZ color interpolators in GLSL.

  • Added support for animating two camera properties: position and focal position, which can be interpolated using any general Interpolator.

  • Allowed all actors inside all timelines to be added to the Scene automatically when the main (parent) Timeline is added to the Scene.

  • Fixed the PlaybackPanel, added a counter to display the animation time as in the video above, and added an option to attach a PlaybackPanel to the Timeline.
     

    main_timeline = Timeline(playback_panel=True)

     

What is coming up next week?

This week I will do the following:

  • Start Implementing slerp interpolation using quaternions in both Python and GLSL. And use slerp to apply camera rotation.

  • Add tests for the previous work.

  • Make a PR to merge the non-shader-based version of the Timeline.

  • Test how shader attributes can be used to hold keyframes for each vertex and benchmark it.

  • Study ‘colormaps’ and implement some ‘colormaps’ in GLSL.
     

Did you get stuck anywhere?

  • Uniforms don’t maintain their data after shaders are unbounded and another uniform with the same name in a different shader is set.

View Blog Post

Week 3: Redesigning the API, Implementing cubic Bezier Interpolator, and making progress on the GPU side!

m-agour
Published: 07/14/2022

What did you do this week?

  • Redesigned the keyframe animations API to optimize having a lot of timelines by composing them into a parent Timeline called CompositeTimeline while maintaining playing individual timelines separately.

  • Implemented the cubic Bezier Interpolator using two control points for each keyframe. Also made a tutorial for it below:

  • Also Implemented linear and cubic Bezier in GLSL interpolations to be computed by the GPU by sending two keyframes as uniforms and the current animation time.

  • Composed the playback panel as a single component PlaybackPanel (slider does not function yet).

  • As we tried to come up with a way to do keyframe animations on a partial subset of the actor’s primitives not all of them, we found that there is no currently implemented way to get the primitives count of a single actor. So I made this PR #617 so that the primitives’ count is saved inside the polydata of the actor as suggested by Filipi and Javier so that the primitives’ count can be used to distinguish the vertices of different primitives.

What is coming up next week?

This week I will do the following

  • Finish up the PlaybackPanel.

  • Implement all other interpolators in GLSL (color interpolators included).

  • Start Implementing slerp interpolation using quaternions in both Python and GLSL.

  • Add tests for the previous work.

  • Now that I made some progress with the keyframe animation API, I should be able to make a mergeable PR!

Did you get stuck anywhere?

  • Couldn’t get the LineSlider2D to work inside my new PlaybackPanel.

View Blog Post

Week 2: Implementing non-linear and color interpolators

m-agour
Published: 07/04/2022

What did you do this week?

  • Implemented some other general interpolators such as n-degree spline and cubic spline interpolators. Also implemented HSV and LAB color interpolators.

    PRs #612 and #613

  • Added animation slider to seek a particular time and visualize the timeline in real-time.

  • Managed to do the transformation on the GPU side using GLSL using matrices. And did some digging about how and when we interpolate the camera and also how to do this on the GPU side.

What is coming up next week?

This week I will do the following

  • Allow FURY actors to maintain the number of primitives as an object property so that it can be used to manipulate only a subset of primitives in a single actor.

  • Change the structure of the Animation API to a newer one designed by Filipi to solve performance issues when creating a large number of timelines.

  • Implement the Bézier curve interpolation.

Did you get stuck anywhere?

I got stuck trying to fix the clipping plans not being appropriately set. Which caused actors to disappear at some point.

View Blog Post

Week 1: Implementing a basic Keyframe animation API

m-agour
Published: 06/29/2022

 
View Blog Post

My journey till getting accepted into GSoC22

m-agour
Published: 06/28/2022

A Little About Myself

My name is Mohamed and I’m from Egypt. I am pursuing a Bachelor of Engineering in Computer Engineering and Automatic Control (expected: 2023), Tanta University, Egypt.

I’ve been around computers since 2008 when I had my first PC with 128MB RAM and ran on Windows XP (that’s almost all I could remember about it).

Around 2013, I had some questions about how games are made and how to make them myself! There was no one to answer these questions for me.

My english wasn’t any good and the game development arabic community was very hard to find on the internet. But eventually, I came across a forum with some people speaking about some stuff such as game engines, 3D models, textures, animations, and a lot of fun stuff. That made sense back then and answered some of my questions. Then It was time to get involved with this amazing community. I was lucky enough to start with 3ds Max 2009 Edition, with that little view cube begging me to touch it. It was just love at first sight.

I learned enough to model a basic house with no interior or a low poly human face.

I was very curious about these game engines. Back then, the top three game engines available for the public were CryEngine 3, UDK, and Unity.

I was advised to use CryEngine 3 since it required no coding experience to use it. I started designing and texturing terrains and adding 3D models (I remember adding a pyramid and had a hard time scaling it down).

My first coding experience

It started with C programming language, which I came across while taking Harvard’s CS50. I then used it in competitive programming as my primary language.

When I heard about OpenGL API for the first time from a senior and that it is being used to develop game engines, I started learning it along with GLSL.

And it finally hit me: It is all math!

I then started practicing pipelines, lighting models such as Blinn and Blinn-Phong models, cameras, texturing, fog, skybox, shadows, etc…

Developing a 3D game

In the Graphics course, OpenGL was being taught to us using python and there was a course project!

I started preparing my notes and the shaders I wrote during that summer, only for the Professor to restrict us to use OpenGL v1.0 and only use PyOpenGL and Pygame.

So, no Numpy, no PyGLM, fixed pipelines, no custom shaders, and each vertex had to be sent individually to the GPU.

At first, I got disappointed, but while developing the game, I had a lot of optimization challenges that made me have fun figuring out how to still make the 3D game I’ve always wanted to make!

I searched on GitHub for similar projects to the one I’m trying to make and did not find any 3D FPS game using this version of OpenGL (at least not listed publicly).

I ended up implementing almost everything from scratch.

Real-world physics inspired the physics of the game. This means that I have collected data about walking speed, running speed, initial jumping velocity, and gravity. Even the sound Sound intensity is inversely proportional to the square of the distance between the source and the player.

I used Interpolation (bilinear interpolation) to interpolate the terrain’s height (y) at any given (x-z) coordinates so that entities can move on 64*64 pixels height map based terrain smoothly to reduce the number of triangles. I also implemented for this game an animation system that used obj sequence animations, then optimized it to load faster, and consume 95% less disk space compared to the non-optimized form.

Source code of the game: MummyIsland

 

My journey to GSoC22

I first knew about GSoC from a friend last year. I then went through the organization’s list. There were a lot of familiar names that I recognized such as Anki, Godot, Blender.

Then I glanced at the Python software foundation. I had to go in and scroll through the sub-organizations only to come across FURY. The luminous horse got my attention. I felt the connection right away.

I went through the docs of both FURY and VTK.

I tried to contribute back then by adding the option to use the FXAA anti-aliasing algorithm for the window (I didn’t notice it has already been implemented as a method for the window).

So instead, I implemented the first mentioned shader in the GSoC 21’s project idea “Add new shader effects” (the fire shader) in GLSL using Gaussian noise.

The next step was to implement the shader to make it work with FURY actors but then I knew I’m having a mandatory training required by the University last summer. I was disappointed, and I decided to postpone until next year’s GSoC.

This year when the accepted organizations were announced, I didn’t bother to go through the list since I knew exactly which organization I’m going to apply for. So I just went directly to read the Ideas list for FURY.

The keyframe animation system was the perfect match! I have been around keyframes for half of my life to even guess the required features before I read them! I then started to contribute and one contribution led to the other one.

Code contributions:

  1. https://github.com/fury-gl/fury/pull/552

  2. https://github.com/fury-gl/fury/pull/555

 

The day I got accepted

I made it my mission for the day to keep watching the email for any changes. When It got 8:00 pm in the Cairo timezone, I didn’t see any changes. So I started searching for any news whatsoever and I couldn’t find any. The GSoC dashboard doesn’t say anything (story of my life. I didn’t even get any promotions or spam mails that day). That’s when I gave up. But, something doesn’t feel right! Right? I went again to check the dashboard to find that my proposal got accepted. I couldn’t even believe it. I would better not jump to conclusions and wait for the official email before celebrating. Shortly after, I received the official email. It was a whole new feeling I had never experienced ever before! I reached a whole new level of happiness.

View Blog Post