Whenever I’m up to my neck in work I mostly get utterly bored. So to keep focussed I tend to create these little side projects. Last week I thought I’d create my first bookmarklet using WebGL rendering with Three.js
My idea was the following: you might have heard of WebGL, and you might have seen that cool Photoshop plugin called Filter Forge which also renders bump-, normal- and specular maps and what not. I just wanted to put the two together.
That’s not much, but this shouldn’t pose a problem with a little smart programming.
It would be tiresome having to: change some code, reload the page, drag the hyperlink to the bookmarks bar (remove the old bookmarklet), go to a filter page, click the bookmarklet.
Minifiers are a good way to keep things small. But since we’re not in a 4K competition we could just cheat! Why not dynamically load the external libraries we want to use.
In the following script we’re going to check if certain js libraries are already present in the current page, and if not we’ll load them (no use of loading $ if it’s already there).
So once the init method fires we can use jQuery the same way we always do. But we don’t have to stop there. Why not dynamically load the entire bookmarklet functionality. That way people will always have the latest version plus we can make the bookmarklet as big as we want.
I almost forgot about the WebGL part of this post. Oh well, it might look cool but it’s not that interesting really. Just check out ffPreview (you’ll also find the uncompressed source here). I’ll be expanding on it while Three.js grows.