How do I get smooth color transitions between the vertices of a face?

If you want to get color “interpolation” like the faces in the image…

… you have to do a few things:

1. Create a colors array, with as many entries as vertices in your mesh.
2. Set the colors array as the vertexColors property of the geometry
3. Using THREE.MeshBasicMaterial, set the vertexColors property to THREE.VertexColors

This would create a single-triangle mesh, with red, green and blue colors in each vertex respectively:

How do I change the line width of an object displayed as wireframe?

Using THREE.MeshBasicMaterial, set the value of the wireframeLinewidth property:

E.g. for a black, three units thick wireframe material:

How do I make an object display as double-sided?

I thought this was a property that had to be set in the material, but I was wrong. It’s an Object3D property, so if you want an object to display both of its sides, you have to do:

Why aren’t the children objects hidden when the parent is invisible?

For optimisation reasons this is not automatic. So you have to manually iterate over the parent’s children and set their visible property explicitly. But three.js has a utility function for traversing object hierarchies:

How do I get the camera position updated? It’s not moving even if I change its position!

Ah, because you have to tell it where to lookAt. Assuming camera_x, camera_y and camera_z are numbers, and cam_target is a Vector3:

Every time you change either the camera position or the target position (or both!) you need to call camera.lookAt or you won’t get any visible result.

This seems to be a recent change in three.js. Apparently the camera was automatically updated in older revisions.

How do I get the contents of the current canvas? All I get is an empty, transparent image in Chrome!

This is an expected behaviour of the WebGL implementation. The solution is to create the WebGL context with the preserveDrawingBuffer flag. Of course, three.js already has that in mind!

So you simply have to add that parameter when initialising the renderer:

Once that’s done you can happily extract screenshots of the current output with the usual canvas.toDataURL (although I used canvas.toBlob for directly downloading the image to the browser).

How do I modify a geometry dynamically? (from javascript, not in a vertex shader)

This is my super favourite question, so I left it for the end!

You can change the vertices position in a geometry once it’s been added to the scene, but you won’t notice any difference until you let three.js know that you’ve changed something in the object!

That’s done with:

every time you’ve modified the geometry and need to get it updated in the screen.

Mr.doob told me it’s also possible to modify other geometry properties, such as the vertex colors. If you modify the vertex colors, you then need to set the __dirtyColors property to true.

Actually, this is not the ‘proper’ way of doing things with WebGL. Every time a geometry is marked as ‘dirty’, it needs to be re-sent and re-created in the GPU, so to speak. Therefore, this flexibility comes at a cost; the larger the geometry, the slowest it’ll be. I should be doing these calculations in a vertex shader, running in the GPU, but since I’m still learning I’m allowing myself this little computational luxury ;-)

So to get it to work, first we need to find out the name of the tethered interface (i.e. you need to have the phone connected and tethering enabled at this point already). It should be something like usb0. To find this out you would normally use ifconfig to get a list of the network interfaces… but Arch Linux has deprecated the net-tools package, which contained ifconfig amongst other tools. There’s a solution though: use

which will show you pretty much the same information (you might need to prepend sudo to the command).

Once you know what the interface name is, open WiCD, go to Preferences, then the “General settings” tab, and finally make sure the entry for “wired interface” contains the name of the tethered interface you just found out (i.e. usb0). I have also ticked the “Always show wired interface” and “Always switch to a wired connection when available”. Finally press OK and hopefully it should automatically connect with tethering.

This evidently isn’t an optimal solution –ideally I’d like WiCD to find these things by itself! But it should be OK as a temporary fix until we set up a proper home network. Meanwhile, hooray for tethering!

I tried upgrading the JDK from Openjdk 6 to Open JDK 7, but the Android SDK refused to compile because it wanted a Java 1.6 level SDK.

Thankfully after much searching I discovered a post that mentioned that IntelliJ 11.1 would be able to compile using 1.7. Thus I downloaded the Early Access Program version of IDEA and crossed my fingers. Well, sort of; what I did was configuring the IDE to use Java 1.7 both as the project SDK and as the Java SDK for the Android build target I was going to use (2.3.3 in this case).

After this, I could compile and run my application without any issues.

(This is all with ArchLinux –it might or not work in your particular system)

So given that I have XCode installed anyway, I decided to build ffmpeg myself, just as I had done back in 2007. It should be as doable as back then!

I found a post by Martin Los, which was pretty much all I needed to get started. I just changed a few things; for example you don’t need to -enable-libfaad anymore with recent versions of ffmpeg as I think they have their own (experimental?) faad encoder, and don’t rely on an external library. I also didn’t install SDL as from what I remember it was only used for showing ffplay’s output (mostly for opening a window, showing the decoded video, etc). In any case, ffmpeg compiled fine without having SDL, so I’m assuming it just didn’t compile ffplay which frankly I don’t use.

After I checked that Martin’s method worked, I decided to convert his instructions into an script. Usually I would write this script with Python but I am trying to learn a bit more bash lately, so I made an effort (and several searches) and wrote it in bash –and a couple of other utilities such as sed which were already installed on Mac. I believe the only tool which isn’t installed by default is Subversion, but I am not entirely sure about this (and I’m not going to format the system just to check!).

It was also interesting to use cURL (which is installed on a bare Mac Os) instead of wget, which I expected to be installed already (it wasn’t). Apparently SourceForge (which is where the libraries’ sources are hosted) makes some sort of redirection even if you’re using a direct link. The -L option allows it to follow through 30x redirections until it finds a 200 code or similar.

And here is the script for your enjoyment and all that:

Using this shiny fresh build of ffmpeg I was able to convert several .MOV files which were rendered for iOS devices into MP4 files that Android devices could palate. This is the script I wrote (also with bash, to practise even more):

Hope it’s useful!

• Adwaita (GNOME 3)
• Adwaita (GNOME 3) scrollbars (this is optional. Makes the scrollbars look more Gnome-ish)

With compliments to mr.doob for revealing me the secret!