Salomonsson.se
Sep 22 2016

Math - The Camera Matrix

We can move around in our 3d world!

I’m doing serious progress! Today I managed to get the camera matrix working!

The coolest thing about this is that just a few months ago I would have thought that this was too much math for me to ever be able to understand! Remember that I have written everything from scratch - except for the line render code, which is basically just a lineTo(x,y) function. Even the matrix implementation.

There’s no frustum culling in there yet (except for any z-values behind the camera) so pretty much everything gets drawn all the time.

Resources for camera matrix:
Camera View Transform Matrix
Faster Matrix Inversions

Sep 15 2016

Math - 3D and Perspective

In our last blog post we used matrices to translate, rotate and scale vectors, but so far only in 2D.

Transforming vectors in 3D is pretty much the same thing. The only difference is that we cannot directly plot those vectors out on the screen since each vector will come in a triplet of {x,y,z} and the screen only consists of {x,y}.

We could just ignore the Z-coordinate, but that would look weird!

No Perspective

To get it to look right we need to apply perspective. Perspective means that an object that is further away from our eye will appear smaller than an object that is closer!

Perspective

Applying perspective to 3D-points is something I’ve been able to do for a long time, but now we’re working with matrices, and of course there is something called a perspective projection matrix!

Another great resource I found on the subject is scratchpixel.com, here on Perspective Matrix Projection.

In the past when I’ve been playing with 3D, I’ve used trigonometry for all transformations. It works, but has several drawbacks!

  • More computation heavy! Needs to do Sine and Cosine lookup for each point!
  • Much more complex to nest parent/child-relationship!!
  • Viewing from a camera… I don’t think so!
3D with trigonometry (and fancy blur), made 2006

Using matrices is superior by far. The image below is just a couple of matrices combined, using vectors forming a cube and a pyramid. This would not have been possible using my old 2006 methods!

3D with matrices

If you want to read up on this too, then check out:

Math for game developers youtube channel
And http://www.scratchapixel.com/index.php?nocategory

Sep 04 2016

Math - Matrices and Vectors

After my Shader Week I decided to try to re-wake the math part of my brain that feels like it has numbed of a bit in recent years of Android app development. I have actually been doing this for several weeks now, but have not had anything to show until now.

So I started reading up on Linear Algebra, and is currently writing my own custom implementation of Vector and Matrix-classes from scratch in Haxe. And it’s super interesting!

Rotation Matrix

If you have a 2x2 matrix you can put an up-vector in the first column and a right-vector in the second column. When multiplying a vector with this rotation-matrix it will transform the vector into that coordinate space!
If you rotate the up and right-vector clockwise each frame you get a rotation matrix!

Matrix rotation

In this first image I multiply four 2d-vectors through a rotation matrix. The unmodified vectors are shown to the left.


TRS Matrix (Translate Rotate Scale)

Another interesting thing with matrices is that you can combine them!
If you have one matrix for translation, one for rotation and one matrix for scaling, you can get a single matrix containing all those values by multiplying them! Just remember to multiply them in the correct order!

Translate, Rotate, Scale

In this image I changed the four vectors to form a square instead of that cross.
Then just multiplying each vector through my single TRS-matrix.


Parenting

If you have a TRS-matrix named M1, and another TRS-matrix named M2, you can move the transformation of M2 into the local coordinate space of M1 by multiplying M2 with M1! By doing this M2 will be “parented” to M1! It’s so simple!

Parenting

The big square is rotating and the second, smaller square is parented to the big one, therefore inheriting its rotation. Same with the third square (it inherits both the rotation and scale of it’s parent before applying its own rotation).

The vectors (points) for all three squares are just a single unmodified array. All the transformations are done though a single matrix multiplication (for each point).


I will keep working through the math, so expect more posts on this.
In the mean time, these two youtube playlists are really great resources:

Math for game developers
Khan academy: Linear Algebra

Jul 28 2016

TLDR - Part 4: Component filtering BLAZING fast with macros!

Made a huge optimization in the way Seagal filters list of entities that contains specific components!

Using the macro I’ve written two days ago as a base I now use bitflags instead of multiple for-loops and several Std.is(classA, classB). I now just use simple bit-flag comparison as the macro auto-generates a unique bitflag for each component class, and the result is stunning!

I actually had to go back to my old test and change the number of entities from 10,000 to 100,000!!!

The critical part is the last test, taking 0.0469 seconds
The optimized code! 0.012 seconds! Thats 391% faster!!!

Note 1: Both test 2 and test 3 took 0.001 seconds when running 10,000 entities. That’s why I had to increase the number of entities.

Note 2: Test 2 now takes only 0.007 seconds with that huge amount of entities!

Note 3: Running identical test 3 with 100,000 entities on Edge gives an approx time of 0.049 seconds, even slower than my own old solution…

High fiving myself

Jul 26 2016

Haxe Macros, Part 1

When reading up on the Edge-entity system in the post about TLDR I got an idea on how to speed up my Seagal enging a lot using macros.
The problem is that macros is a subject with few tutorials and resources online, and it seems a lot of people are afraid to look into it.

I will try to explain what macros are, some good places to start learning more, and a cool example that I’ll expand upon to improve the speed of Seagal!

READ MORE >>
Jul 22 2016

TLDR - Part 3

I’ve downloaded and tried a new exciting ECS-framework called Edge. The interesting thing about it is that it relies heavily on haxe macros to generate code at compile time that will remove of the costly runtime type checking.

I did a similar test to test number 3 in my TLDR - Part 2. Only the third test was interesting to me.

And look! It’s taking between 4 and 5 milliseconds here as well! That was surprising, I really though you had to try hard to be slower than my current implementation.

However, using macros seems super interesting. and I just got an idea on how I could use macros in seagal that might speed the matching up quite a bit!

Jul 11 2016

Shader Week 1, Conclusion

The source code for all 7 days can be found here: https://github.com/Tommislav/unity_shaderweek

It has been a successful and interesting experiment, commiting 7 days to shader programming. As I’m on parental leave I could only spend about an hour a day for this, but I think I managed to get quite far!
Apart from what’s visible here, I spent 3-4 days reading or researching, but did not count those as I wanted visible examples for each day.

One problem with only having about an hour a day, and only doing tutorials is that you don’t get much time to modify/experiment/fix bugs. But I early decided that my focus this week would be learning, and that I will do a second shader week where I experiment and create my own shader effects instead.

To conclude

  • I have learned a ton!
  • Need a second shader week, where I write my own shader effects
  • A superb resource for learning shaders is this link: http://www.alanzucconi.com/
Jul 11 2016

Shader Week, Day 7

Last day on my shader week. Not sure what to do when a friend of mine suggested that I do a “wobbly water shader”. Well, I guess you could do it pretty simple by using a displacement map as in day 2, so I used another approach manipulating the vertexes with a sine-wave instead.

I used this tutorial as base
http://www.alcove-games.com/opengl-es-2-tutorials/vertex-shader-for-tiled-water/
but re-wrote it in CG

Jun 30 2016

Shader Week, Day 6

Todays shader tutorial was about keeping an offscreen buffer which we can update continually.

http://www.alanzucconi.com/2016/03/02/4539/

In the image to the left we invert the colors every second.

The right image was supposed to be smoke, but the tutorial was very math heavy but thin on how to do the implementation. So I skipped the smoke tutorial and made a script myself that draws a circle at the mouse position (cursor not visible in gif) and fades the image by 0.9 every frame.

Good thing the cursor isn’t visible though. Somehow the mouse X/Y-movement was inverted, and coordinates messed up.
But not enough time to fix tonight, as I’m only using an hour a day.

Jun 29 2016

Shader Week, Day 5

Finally started on vertex and fragment shaders again!
http://www.alanzucconi.com/2015/07/01/vertex-and-fragment-shaders-in-unity3d/

Using a GrabPass to grab a texture of what’s underneath we can manipulate whats underneath.
The red rectangle is just taking the rgb + r*1.5, applied to a quad.

Underneath we’re using a bumpmap to apply something that looks like glass.

Very cool, but a lot of new concepts here. Will have to play around with this more. But now I’m out of time for today…

Jun 29 2016

Shader Week, Day 4

Still playing around with surface shaders from this link:
http://www.alanzucconi.com/2015/06/17/surface-shaders-in-unity3d/

We got two new knights. One with extruded vertices, and a pink one.

The pink one uses dot product to calculate the light for each fragment, as we’ve written our own lightning implementation.

Jun 26 2016

Shader Week, Day 3

Today I started with a tutorial series that seems to be very elaborate:

http://www.alanzucconi.com/2015/06/10/a-gentle-introduction-to-shaders-in-unity3d/

This tutorial starts with an overview, and then goes on to surface shaders. I decided to start from the beginning, but did not manage to complete the surface-part in just one hour.
The Vertex/Fragment-part comes afterwards and is the part I’m looking forward to.

Knight number 1 (from the left) is the original. Free model from Asset Store

Knight number 2 is a surface shader that only sets the albedo property (base color).

Knight number 3 uses the texture data (but no specular or bumpmap or other fancy things)

Knight number 4 uses the built-in worldPos input variable to paint a circle - based on distance from a point in world space.

Jun 21 2016

Shader Week, Day 2

First of all: installed Visual Studio Extension to get some basic autocompletion when writing shader code. An improvement!
https://visualstudiogallery.msdn.microsoft.com/ed812631-a7d3-4ca3-9f84-7efb240c7bb5

Second, was looking for how the sampling of pixels was working and found CG documentation:
http://http.developer.nvidia.com/Cg/index_stdlib.html (look for tex2D-function)

Apart from that, I finished off the tutorial from yesterday (interpolated colors into the rendered texture), and then proceeded with applying a shader to the camera for full screen effects - using OnRenderImage(src, dest) and Graphics.Blit(src, dest, material).

Finally played a bit by adding a displacement map, distorting the entire screen. Simple stuff, but still funny!

Jun 20 2016

Shader Week, Day 1

I have collected a number of interesting resources for starting to get acquainted with writing shaders in Unity, so I have decided to devote an hour a day this week to start going through them (I think I can manage an hour a day, but not sure… I’m currently on parental leave with my two 11-months twin girls. I’ll do as best as I can).

Here are the resources

After this first hour I’ve gone through the first Shader101 in the top link. Simple stuff. Drawing colors and/or a texture to a quad. With and without transperancy.

However, the tutorial lacked depth. And I spent the rest of the hour trying to find out more about the sampler2D-class used to sample pixels from the texture to the quad. Without luck.

However I found an interesting link on how to make Visual Studio better at writing shader code. Will look at it tomorrow! https://visualstudiogallery.msdn.microsoft.com/ed812631-a7d3-4ca3-9f84-7efb240c7bb5

Jun 19 2016

2D platform engine in unity part 13 - Tagging and Rushing

In tonights short coding session I added two new components.

A tagging system for entities.
Unity already has a way to add a tag to gameObjects, but for me “tagging” means being able to add several tags to an object, which Unity does not support. Something can be tagged both as NPC AND a Human.

Second, I added a new (very simple) AI-component that will rush towards player or NPC if standing in front of it.
It utilises the tagging system to get a list of all entities tagged as either “player” or “NPC”, check direction and distance, and start charging!

As you can see, the Hedgehog speeds up if either NPC_Joey or the player is in front of it (although the graphics does not flip correctly yet).