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.

First-person shooter using three.js

I am no longer working on COLT and currently contemplating what to do next. I have strong flash background, but this technology does not feel well. With WebGL technology exploding, on the other hand, I’ve decided to do old-school first-person shooter to see if this kind of work is something I want to do from now on, and get better idea of all the challenges involved.

Click to play

The result

The result is this sort of game where you pointlessly run around the platform and shoot monsters. Originally I thought I would complete it in 2-3 days, Ludum Dare style, but since I had no enough motivation to spend all my time on this, it took me whole month of random short coding sessions to “complete” it (and there are still some bugs to fix).

Another thing I hoped for was to write “how to make complete game with three.js” tutorial that all the internet would link to, as apparently there are no tutorials like that. It is easy to write “how to move the box” tutorial, but something more takes time that noone is really willing to spend. Well, the bad news are that I still can’t write the tutorial. I would need to make 10 more games like this before I can write one :) So the rest of this post is simply going to be adventure log, noting some tricks I used and some mistakes I made along the way.

Continue reading ‘First-person shooter using three.js’

One year of COLT

A year ago we have released first public version of COLT (short for Code Orchestra Livecoding Tool). It’s about time for some kind of reflection post.

Like other livecoding tools, COLT is watching your source files for changes that you make in any IDE or text editor. Unlike other livecoding tools, COLT does not restart your application but updates it with new code, and it keeps running as if nothing happened. This is cool and unprecedented feature, but of course we pay the price – we have to transform original code for this to work, and this transformation occasionally stands in the way of, or even breaks some things in your code – which looks like yet another bug in COLT to the user.

COLT was initially released for flash platform (if you was not around back then, check this demo or presentation to get a picture). We have received a lot of positive feedback and decided to expand the technology into other languages, such as javascript.

While javascript normally does not have any “compile time” and you can refresh the browser to see your changes instantly, there is the same common problem – you want to tweak the application logic in specific state, but you have not added easy way to save and restore that state. Then, there is crappy android emulator that is times slower than actual device to work with, when you are developing phonegap apps. Finally, there is node that you have to restart for source changes to take effect when you work on nodejs server application. We thought COLT would help you with all of the above (see this nodejs video, for example).

However, even the most enthusiastic users would perceive COLT as some weekend toy, opting for time-tested workflow for their actual work. We had to find another way to make COLT useful, and in the twisted turn of evolution COLT has developed special powers, when it comes to extendable text editors such as Sublime or Webstorm. Leveraging COLT’s connection to your application, our plugins for those editors can improve their limited code completion with runtime information

COLT plugin for Sublime Text

or provide new useful features such as variables inspection, navigating to function declaration or rendering pretty documentation. People seem to appreciate it already, e.g. check out slides 77 to 84 of this EmpireJS talk by Kirill Cherkashin. Funny thing about these features is that we could do them with minimal non-invasive code transformations, not having to deal with source maps or aforementioned “bugs”, but then COLT had to be renamed to COT.

For those who were still not convinced to try COLT we have added angularjs support. I mean, our live html editing support was already really good, but for angular fans we made it even better. Since I have probably exhausted average reader attention span by now, I will just briefly mention few other things here, such as new runtime environment support, chromeless COLT version, or proxy mode – but you can learn more in COLT 2.0 blog post if you feel like. And if you want to learn even more, consult our docs page, or just ask someone in the forum.

3D bar chart on the globe using three.js

When people need to present per-country data such as GDP, they usually resort to color-coded maps or simple bar charts. In 3D, you could combine these two and end up with something like this:

globe bar chartThis is very obvious idea, yet I had no time to try it until last November. It worked, and I went on with my life, leaving the code to collect the dust. Then I saw Kaspersky cyberthreat map this March, which used extruded country shapes to support zooming. This reminded me this gold I was sitting on, and now I was finally able to fork out some time to undust it and push to github.

Overview

Basically, you take 2D country shapes and tessellate it on the sphere surface, then extrude towards the sphere center. You end up with cone-shaped meshes that you can then scale to build this kind of geo- bar chart. The catch is that corresponding three.js scene weighs much more than its 2D source data (ObjectExporter blows 100 KB of GeoJSON up to many MBs). Much of this extra weight comes in the form of useless digits in vertex data, but even with that removed there is extra dimension, data duplication and so on. To work around this issue you have to build 3D geometry from tessellated 2D data on the fly – this puts 3D data size at ~150% of 2D. Still sucks, if compared to TopoJSON, but tolerable. Corresponding code looks like

for (var name in data) {
    geometry = new Map3DGeometry (data[name], innerRadius);
    globe.add (data[name].mesh = new THREE.Mesh (geometry, material));
}

Map3DGeometry class and the tool to create the data are now at github.

Tessellation

Following documents the problems you would encounter if you did it yourself, so you may probably skip it. Continue reading ‘3D bar chart on the globe using three.js’

Transparent video texture in three.js

Some weeks ago I was asked if it is possible to have transparent video texture in THREE.js and, although I was sure it’s totally possible, I could not find any examples of it. Today I am sharing one such example with you, so you don’t have to code it yourself in case someone will ask you the same question :)

Ladies

This demo is using good old “green screen” trick to create transparency in otherwise opaque texture. You can find similar examples out there, but they are neither THREE.js- nor GPU- based.

So, where do you start? I started here – you can easily tell how much code was borrowed from Lee Stemkoski. Basically, I only had to replace MeshBasicMaterial with ShaderMaterial. Creating custom material sounded scary at first, but turned out to be really easy in the end thanks to helpful tutorials (such as this one). Finally, the shader – I want it to be as simple as possible, so no fancy color conversion stuff in there – it operates directly in RGB using 1st method from my earlier post (err, no, it’s different method). The result is basically two lines of code:

vec3 tColor = texture2D(texture, vUv).rgb;
gl_FragColor = vec4(tColor, (0.9 - dot(color, tColor) / (length(tColor) + 0.05)) * 3.0);

Let’s break 2nd line down. It starts at the dot product of colors – the dot product approaches 1 when texture color approaches the color we want to remove. In theory, it should have been dot (normalize(color), normalize(tColor)), but normalize(tColor) part fails on pure black pixels (such as girl hair), so I had to use tColor / (length(tColor) + small number) instead. This handles black colors better, but now the dot is always less than 1 – hence you see 0.9 in there. You can also see that I do not normalize “color” parameter – there is no good reason to do it inside the shader for every pixel. Finally, 3.0 is randomly chosen magic number that determines how fast texture colors become transparent as they approach the color to remove – check out this graph to see its effect.

Update: I have just made the shader even simpler using length(tColor – color). Initially I thought absolute color values will not work well, but the actual test says they do:

Angle-based shader on the left, distance-based shader on the right.

Angle-based shader on the left, distance-based shader on the right.

How to check if URL is not MP3 ?

Since flash player can’t send HEAD requests, you have to resort to dirty tricks if you want to check URL content type. In this example, we are going to try and figure out if some URL points to playable sound. Since we’re dealing with unknown URL, chances are that its domain does not permit us to access raw data, so we can’t really use URLLoader – we need to actually load whatever URL points to into Sound object. However, if you thought that you could just catch i/o error 2124, like you would do with image Loader, for example, you’re in for big surprise: it does not fire. Instead, Sound object fires progress and complete events, and is even happy to play (although you will not hear any noise, or anything at all).

So, how do we detect that our Sound object is actually broken? First thing you’ll notice is that even after complete event it is still buffering. Unusual, but the same thing happens with really short sounds, so this check is not reliable. The other thing is that extract() method obviously fails to return any samples. This in itself is again not enough, since it does happen with partially loaded sounds too. However, the combination of the two seems to hit the nail:

private function onComplete(e:Event):void {
   var s:Sound = e.target as Sound;
   if (s.isBuffering && (s.extract(new ByteArray(), 1, 0) < 1)) {
      // url does not point to playable sound
   }
}

See this method in action at wonderfl.net :)


Old stuff

November 2014
M T W T F S S
« Aug    
 12
3456789
10111213141516
17181920212223
24252627282930

Oh, btw…


Follow

Get every new post delivered to your Inbox.