HTML5 / CSS fullscreen demo

This is a demo to show the possibilities for fullscreen applications in HTML5 / CSS. I’ve published this example, because none of the online examples covered exactly my needs.

HTML5 fullscreen demo (4 downloads)

<!DOCTYPE html> 
    Author: iamklaus
    Description: A simple example to show the fullscreen possibilites in HTML5 / CSS.
    <style type="text/css">
        :-moz-full-screen .hidefullscreen { visibility: hidden; }
	:-webkit-full-screen .hidefullscreen { visibility: hidden; }
	:-ms-fullscreen .hidefullscreen { visibility: hidden; }
	:-fullscreen .hidefullscreen { visibility: hidden; }
        :-moz-full-screen .showfullscreen { visibility: visible; }
	:-webkit-full-screen .showfullscreen { visibility: visible; }
	:-ms-fullscreen .showfullscreen { visibility: visible; }
	:-fullscreen .showfullscreen { visibility: visible; }
	.showfullscreen { visibility: hidden; }
        function activateFullscreen(element) {
            if (element.requestFullScreen) {
            } else if(element.mozRequestFullScreen) {
            } else if(element.webkitRequestFullScreen) {
        function exitFullscreen() {
            if (document.cancelFullScreen) {
            } else if(document.mozCancelFullScreen) {
            } else if(document.webkitCancelFullScreen) {
        // Events
        document.addEventListener("fullscreenchange", function(e) { console.log("fullscreenchange event! ", e); });
        document.addEventListener("mozfullscreenchange", function(e) { console.log("mozfullscreenchange event! ", e); });
        document.addEventListener("webkitfullscreenchange", function(e) { console.log("webkitfullscreenchange event! ", e); });
	    <button class="hidefullscreen" style="position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; background-color: green;" type="button" onclick="activateFullscreen(document.documentElement);">
		Show Fullscreen
	    <button class="showfullscreen" style="position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; background-color: red;" type="button" onclick="exitFullscreen();">
		Exit Fullscreen

Blender: Multi-Instances on Mac OSX

Coming from LInux or Windows, it is hard to understand why it is not possible having multiple Blender instances running. For a certain period of time I was using a shell script, to start multiple instances of Blender. The best way is using the “open” command. Open a terminal. You can do this by browsing your apps folder or type “terminal” into Spotlight. Inside the Terminal type:

Mac OS - Terminal

Repeat this step once again and you will have two Blender Instances running. Hooray! Since we don’t want to use the terminal every time, we will use the Automator to add this to the dock.

The easiest way to start the Automator App is to type “automator” into Spotlight. The following window should appear:

Screen Shot 2013-01-01 at 11.59.24

Inside the dialog, click “Application”. Then search for “Run Shell Script”. See below.

Screen Shot 2013-01-01 at 12.00.10

Inside the textarea, add the command we’ve previously used:

open -n /Applications/

Click on “Run”, in order to see if it works. A Blender Instance should appear.

Screen Shot 2013-01-02 at 13.12.56

Now save ( File -> Save ). Create a folder named “Applications” inside your home folder and save the Application. Open Finder and drag the Application to your Dock. Now you can start as much as Blender Instances as you like.

To give it a nice icon, go to the folder “/Applications”. Select “” and press “CMD-i”. Click on the upper icon and press “CMD-c”. Now go back to your home directory and open the Applications folder, we’ve created. Select “Blender Instance” and press “CMD-i”. Click the upper icon and press “CMD-p”.

Screen Shot 2013-01-02 at 13.24.04


Realistic looking Earth

Again, I followed a tutorial from Blenderguru. Additionally to the original tutorial, I added some stars in the background using a wallpaper. The stars feature in den World-Settings made the stars flicker when I was moving the camera. That is a known bug in Blender which isn’t fixed for years.

And, I was adding something like a sun. The sun isn’t perfect, maybe I will improve it somewhen later.

Download .blend:

PS: If you have problems with the .blend file: It was created with Blender 2.61 beta.