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 ;)

Three.js and 2D overlays

How do you handle the problem of 2D overlays in three.js-based app? You can go for camera-oriented planes, I guess, or maybe use sprites, but with just a few of them overlays why not just use DOM? The trick is to wrap the canvas in overflow:hidden element with display:relative or absolute, and place your overlays in there. This method has several problems that needs to be addressed.

When do you show and hide the overlays?

Object3D add() and remove() methods dispatch ‘added’ and ‘removed’ events, but this is only part of the story. You have to check if other objects obscure your overlay anchor, or else it will incorrectly show up on top of those objects. In simple cases, you could calculate this analytically, but general solution would have to rely on something like ray casting.

Screen Shot 2015-04-05 at 12.17.46Can these things be calculated implicitly?

Yes they can, by overriding Object3D’s updateMatrixWorld() method, which is called on every object when you render the scene. Of course, you still have to call original method, too.

The above method implementation will look like this. As always, feel free to discuss this stuff in comments.

Three.js sprites and custom shaders?

Do three.js sprites support custom shaders?

No. They have SpriteMaterial thing that holds your beer parameters for this shader. You can see that this shader is compiled once and is totally inaccessible from outside of SpritePlugin.

What do I do about this? Continue reading ‘Three.js sprites and custom shaders?’

Add more progress to bootstrap progress bar

Remember the last time when I posted useless and uninteresting javascript tutorial that gave this blog grand zero hits boost? It’s time to do that again :) Today we’ll be animating bootstrap progress bar to make it look like something is happening when in fact it is not. Just add this

@keyframes progress {
    from { background-position:  0px; }
    to   { background-position: 40px; }
}

.progress-bar-animated {
    animation: progress 1s linear infinite;
}

to your progress bar and decimate user frustration:

animated progress bar

Improving BokehShader in three.js’ depth-of-field effect

In the previous post, we have improved tDepth input for BokehShader in three.js depth-of-field example. This spared us of ugly rectangular artifacts, but the result is still far from perfect:

bokeh_before

Well, BokehShader was created 5 years ago, and it is about time that someone made it better ;) In particular, you can see a sort of halo around completely sharp objects (the girl). This happens because BokehShader only takes in account the depth of target pixel, causing nearby objects to leak into the output even if they are in focus. To fight it, we can weight the pixels with abs(theirDepth.x – focus). This obviously doubles the number of texture sampling, so we have to cut the number of samples to maintain reasonable performance. The result, however, looks somewhat better:

bokeh_after

Thoughts?


Old stuff

September 2015
M T W T F S S
« Aug    
 123456
78910111213
14151617181920
21222324252627
282930  

Oh, btw…


Follow

Get every new post delivered to your Inbox.