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?

Three.js’ depth-of-field effect and transparent objects

Last month I had to create spine runtime for three.js for one of the projects. Basically, animating a number of planes with transparent texture(s), nothing fancy. But, new year brings new challenge – the client wants these animations to work with dof effect. However, adding dof effect in the project “as is” did this:
The cat warps space around itself Continue reading ‘Three.js’ depth-of-field effect and transparent objects’

Responsive font size with CKEditor

CKEditor is very nice WYSIWYG editor for web apps. It saves you many days of coding in exchange for just hours spent in DOM inspector trying to come up with CSS rules for it to play nice with your existing layout. But occasionally you will still need to write some code to work around their design choices. One of these cases is when you want to use responsive font size. Continue reading ‘Responsive font size with CKEditor’

Three.js dissolving effect

Oh btw, I have added dissolving effect to my shooter game from last post. The effect is basically one grayscale noise texture + custom shader material. Fragment shader is nothing fancy, you can understand how it works by looking at this simplified demo:

Vertex shader, however, was a bit tricky, because I had these animated objects (imps), and there are no animated vertex shader examples around. The trick? Shader editor in firefox devtools. All I had to do was create simple three.js demo with animated object using MeshBasicMaterial, open shader editor and find corresponding program. This program, however, looks like this:

Screen Shot 2014-08-22 at 20.20.30and you might want to clean that up before using in your custom material. To that end, I used good old GPP. Finally, putting it all together was just a matter of guessing which uniforms I need to add myself, and which are provided by the engine.


Old stuff

July 2015
M T W T F S S
« Apr    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Oh, btw…


Follow

Get every new post delivered to your Inbox.