Archive for August, 2015

Center element with unknown width

As with bootstrap progress bar post, this one is actually about CSS, not javascript, but I don’t want too many tags. So, the subject of today’s tutorial is centering stuff. In the good old days we could just place its left side at 50% and set left margin to minus half of content width. But what if we do not know content width in advance and therefore can’t set the margin a priori? That’s where newer CSS stuff helps:

transform: translate(-50%, -50%);

Yes, those are percents of its actual dimensions, whatever they will be. You can see it in action here.

Relativistic lattice

How would the space look like if you were going really fast? You could find some videos if you know the key words, but not enough interactive stuff, so here goes one:

development screenshot Continue reading ‘Relativistic lattice’

Infinite cubes

Have you ever heared about raymarching distance fields? That’s how all those awesome shaders were made. Very simple and beautiful concept, but it comes with the price to pay – many, many iterations. Which means these shaders are slow. And even if your hardware is from 2015 and they are not slow for you – you will still notice. Here is the screenshot of this infinite cubes demo (3x magnification):
Exhibit 1: Gaps
Do you notice the gaps between the cubes? Maybe allow me to reduce the number of iterations (64 to 20) to make them more apparent (this time 2x reduction):

Exhibit 2: Gaps

What happens here? I shall call this “black hole effect” :) The rays that go near the surface are slowed down to a crawl, and need more iterations to escape:

Exhibit 3: Iterations

See, there are so many iterations I could not even be bothered to draw them all in this gif :) The same thing happens in the shader – the ray never reaches its target.

Is there anything else we can do?

I was thiking that maybe distance estimation should take into account ray direction. If you can do that, your shader will get quite a boost. But, for this particular shader, I could easily solve for intersections with cube faces instead. More iterations bring more of them in, and I just keep the closest face the ray hits:
Exhibit 4: Iterations of my shader

As you see, we have some “overdraw”, and some cubes are never complete, but it works faster than classic method. Which makes me happy enough to write this post, because now I have enough performance to do the next step… to be continued ;)

Old stuff

August 2015

Oh, btw…