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

Back in 2004, when I was starting to experiment with OpenGL, I had the idea of creating meshes from scratch. This will come in handy for intros, since this way I won’t be needing to include the meshes’ data with the executable!, I thought.

I would create a simple base pyramidal mesh, and subdivide it until I got something with more vertices and faces, but properly connected (not just a bunch of random points). So I when I had a couple of free days, I came up with a very rough way of creating and subdividing meshes. It was very raw, but I loved that I had done it myself!

At the end, I didn’t use it for any intro at all, but I used the trick in a demo instead, called codecolors (source code, if you’re feeling adventurous). Although it’s hard to notice, since everything was generously blurred (I had recently learned how to get a cheap motion blur effect and was really eager to use it in every single frame!).

Fast forward to 2012. I am learning (tinkering with?) three.js and I wanted to find out how to manipulate vertex data dynamically. I somehow remembered this experiment and where I left it (Next step is playing with the vertices!), and I decided to continue it.

Once I got the basics working, I thought it would be neat to have some way of interacting with the scene–so I added dat.gui, which are the controls on top right. Then I also wanted to save the images, as I once I added controls for altering the look I started getting great imagery! So I added FileSaver.js and canvas-toBlob.js, since browser support for downloading images is still a bit incomplete (so to speak).

And finally I thought: hey, storing images is ok, but what if I want to modify an existing configuration?. So I added support for storing the current configuration via some simple location hash serialising. I am not sure if it’s the best way but it seems to work well enough for now!

Oh, and since I just love text effects, I added a silly text-manipulation thingie to dynamically alter the innerText of the page contents. Just because!

It’s fun to play with all the settings and seeing what happens. I have found myself mesmerised just by looking at the end result. Some images seem really organic; others look very fractal/spaceish to me. (Don’t forget to make it wobbly! –looks like someone is having a discussion inside the pyramid!).

I’m very happy with the end result, and even more about the development process. I can vividly recall the many hours I spent in 2004 dealing with arrays and memory allocation for such a simple task as this one. Quite unproductive, to be honest! But Javascript + WebGL totally ROCK! Also, after so many years of trying to explain what the demoscene and realtime is about, it’s great to be able to demonstrate it in realtime. Yay!

I’ll write about the new “Simple yet Frequently Asked Questions” about three.js that I encountered while doing this experiment… but that will be tomorrow, if you don’t mind!

Have fun! :)

I wanted to watch that demo again, but it seems that the Amstrad PC line of computers doesn’t get as much love as the CPCs do. So there is hardly any software repository (or dump) for those computers, and thus I couldn’t locate that demo. It doesn’t help that I didn’t remember its filename either…

But I found several images depicting the demo, and somehow I decided that rebuilding the demo was an excellent idea –and a great excuse to learn three.js!

This is how the original looked:

And this is what I ended up with:

In the process I thought I would spice things up a little. Since rotations are “cheap” with WebGL, I made things move around, mostly by rotating them. I also added some scaling here and there, and liberally used Math.sin and Math.cos (as Javascript is so fast nowadays too). Still, I didn’t go too far, for the sake of keeping some resemblance to the original!

SFAQ

Although three.js is designed to be simple and intuitive, I had several how do I do this apparently simple thing with three.js? moments, so I thought it would be interesting to write these down as a sort of “SFAQ” (Silly Frequently Asked Questions). There we go:

How do I make a line?

You first create a geometry, then add vertices to its vertices property. Then create a material to set the line color, and use both the geometry and the material to create a line.

Actually, you can create the line skipping the material creation. It will get a randomly assigned colour then.

How do I make a line strip? (i.e. a series of connected segments)

You start with a geometry, like in the line example above, but add as many points as you require. Then when creating the line you specify that the line type is THREE.LineStrip:

How do I make a line in which each segment has a different colour?

The answer to this is vertex colours, which works in the same way as the homonym concept in OpenGL: you need to specify a colour per vertex, instead of just a colour for the entire line. The way to specify the colours is to add instances of THREE.Color with the desired colour to the colors property, and then tell the line material to use them, as follows:

I’m using this for the odd colourful figure on top left.

How do I build hierarchies of objects?

You can use the generic THREE.Object3D class as container for other objects. When you add children to that object, and move it, the children will move along with the parent:

I used this for the “moire blocks” in the middle of the screen.

How do I change the colour of an object after having instantiated it?

Simply access its material.color property and change it as required:

This technique is used for animating the colour of the rectangles on top right.

A call for help!

If you know the file name, or have a copy of the original demo, please let me know! I would love to watch it again after so many years! Hopefully it will work with DOSBox. Please! :-)

I had heard quite nice successful experiences with Mechanize before, so I decided I would give it a try, and it turned out to vastly exceed what I expected from it! :-)

Mechanize is a port of the original Perl Mechanize library; there is a Python port too, and there might be ports for other languages too but I wasn’t interested in that.

For some reason my mind was in the ruby-mood yesterday, so I decided to go for the ruby port. Everything was flowing nicely between ruby and me. I even dared prototyping what I wanted to do in a terminal, using irb, before writing the final script I needed to write. My ruby muscle was getting toned again, so to speak.

I got some false starts, though. I first invoked just ‘ruby’ in the terminal, only to be greeted with a waiting pipe, i.e. nothing happened as –I guess– ruby was expecting me to provide him with something to run. I remembered that the interactive ruby executable was called irb. A Control+C and four other keystrokes later, I was in immediate-mode ruby.

Another gotcha: not having to

when running in irb, but having to when writing a script. Thankfully that I remembered and was able to fix quickly.

But I’m digressing. Back to Mechanize: it simulates a real browser interacting with a website. You can even fake the user agent. But unlike the most basic screen-scrappers, which simply download a page and then do something with it and then download another one and do something else, without keeping any sort of continuity between downloads and connections, Mechanize is stateful. Which means that it keeps the state between ‘visited’ pages. To all effects, and for the visited websites, there’s a normal browser at the other end of the line. Unless you go crazy and begin hammering a server with tons of requests, crawling websites this way might be almost invisible to servers.

Which is exactly what I wanted!

The syntax is quite nice and intuitive. Borrowing shamelessly from the manual:

Something that made me even more happier is that Mechanize also uses Nokogiri internally for parsing HTML–which means we can do the same style of nice DOM tree traversing that I used to do with Hpricot, only even better! (Nokogiri is the successor to Hpricot).

I didn’t need that last feature for this particular case, but it left me wondering what I could use Mechanize for–in order to use this! I will have a look at my TODO list and see where can I use my newly acquired Mechanize skills!

Now that I’m using Arch I couldn’t find any equivalent package but I thought that it was OK–that way I would only install what I really needed to install. In the process I’ve found a couple more plug-ins that I didn’t know about, so it’s been quite productive.

What I’ve done is I’ve written a script that takes care of downloading the scripts from the specified URLs, placing them in the appropriate gimp folder (~/.gimp2-6/scripts in my case), and the best of all is that it also patches them so that all are under the Filters/Photo menu entry. Yay! No more wandering around menus and submenus! My brain is now happy, I can just focus on playing with the pictures!

If you want to use this script just download it (it’s on my snippets repository). You might want to modify it as you wish. There are a couple of TO DO’s but the file is fully functional (as long as you’ve got Ruby installed).

Oh, and pardon my rudimentary Ruby. It’s been ages since I last wrote anything with Ruby. I still don’t know what I want to use. Ideally I’d like something as easy as php but with a syntax that is a mix of Python and Ruby, and lots of easy functional and metaprogramming.

I guess my problem is that I know too much, but still so little, not enough. Maybe if I just knew one language, I would be happy with that one. In any case, I’ll keep on experimenting and try to decide what I like best. Maybe my Japanese side will win over the European one? Who knows!

Meanwhile, be sure to enjoy the filters! Wooo!