Blender “Little Planet” Tutorial

On my journey to learn Blender I found this tutorial by Studio Gearnoodle on Youtube.

I took the opportunity to practice modelling, animating and lighting techniques I learned so far and model my own mushrooms and buildings. Basically I am trying to apply the knowledge I’ve acquired for the past 25 years doing 3D to the Blender interface.

I gotta say, Blender is on to something here. They really are taking the right direction and are providing a full fleshed package and with their philosophy of “everything nodes” the potential is huge. And free! Yes, OpenSource!

“Unleash the beast” – Houdini

On my journey to leave Maya behind me and not being involved in any 3D production work I started to learn some Houdini.

Since I saw it the first time back at Siggraph in 1996 I was drawn to it. But my professional jobs never left any time to dig into it.

I really love Houdini and I find it the best package out there. But… It became very clear very fast that to become proficient in using it would need a large junk of time.

Nevertheless here’s my interpretation of a tutorial by Nine Between.

Stärnefee Panorama & Website

I had the honor to create 360 degree panoramas of this lovely store in Riggisberg called Särnefee. It’s an art-deco store with loads of treasures and beautiful things.


I also did their website and the detail photos in the store (mostly used as backgrounds on the website).

EinAusStellung 2017

I am participating in the 3rd edition of the EinAusStellung in Thun.

I am showing the photographic landscape series “Eiche”.

Nikon D810

I a proud to be a new owner of a Nikon D810. This is the best camera I ever hel in my hands. The design is just wow. Already when you pick her up, you ralize that this body is made for professionals (oh, wait, that’s sexist…). The features and the way the buttons are setup is very well thought through. Compared to the Canon D1100 I had, it’s a complete different realm. And off course, the best thing about the D810 is the pictures it delivers. The Sensor is a beast and the dynamic range it produces is phenomanal.
nikond810
I was split between the D750 and the D810. The D810 has the best Sensor you can get in a DSLR today. The D750 has a lot of new features like built in WiFi, swivel screen, awesome filming features etc. But for me the main reason to go for the D810 was the sensor. I am taking pictures of peoples paintings so they can print them in various sizes and therefore I need all the pixels I can get. Plus I was able to score a used body for the price of a new D750 at a professional shop. The body has only 9k exposures and Nikon warranty until the end of next year. So after almost a year of reserch and debates with myslef, the decision was easy.

Block zooming of Google maps

Google maps are used almost everywhere to either implement an address of a business, club, store or anything else on a lot of pages on the internet. It’s a nice and convenient way to do it.

BUT… almost on all pages where this is done, when you scroll down using the mouse wheel, once the mouse ends up inside the Google map, the map starts zooming out instead of the page continuing to scroll down.

Here’s how to make a Google map not zoom in or out when you scroll down a page with the mouse wheel and only zoom, pan or do anything with the Google map as soon as you click inside the map. The following workflow also blocks zooming again once the mouse leaves the Google map area.

I got this from Stackoverflow, reproducing it here in case the zombie apocalypse breaks out and stackoverflow goes bun bun.

First you want to add the following style to your website or custom CSS script in your WordPress installation:

.scrolloff {
  pointer-events: none;
}

Then you want to add the following JavaScript to the page:

<script type="text/javascript">
    jQuery(document).ready(function($) {
    console.log("allLoaded");
        // you want to enable the pointer events only on click;
        jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready
	console.log("scrolloffAddedA");
        jQuery('#canvas1').on('click', function () {
	    console.log("clickDetected");
            jQuery('#map_canvas1').removeClass('scrolloff'); // set the pointer events true on click
	    console.log("scrolloffRemoved");
        });
        // you want to disable pointer events when the mouse leave the canvas area;
        jQuery("#map_canvas1").mouseleave(function () {
	    console.log("mouseLeft");
            jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
	    console.log("scrolloffAddedB");
        });
    });
</script>

Note that I have a whole lot of echo’s in the code which let’s you debug the code. You might want to consider switching that off for efficiency.

And finally that’s how you want to embed the map itself:

<section id="canvas1" class="map">
<iframe id="map_canvas1" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d87147.27677140976!2d7.324830610654608!3d46.95476576996358!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478e39c0d43a1b77%3A0xcb555ffe0457659a!2sBern!5e0!3m2!1sde!2sch!4v1462400079917" width="100%" height="485" frameborder="0" style="border:0" allowfullscreen></iframe>
</section>

Here is how this looks like in the end:


Posting source-code on self hosted WordPress

Psoting code on your WordPress Blog or Website

There’s a very easy, nice way to show source code on your blog or website.

If you are hosting your site on WordPress.com it’s even natively implemented.

Read the article on WordPress.com

If you self host your website or blog, you will need this plugin.

Here’s some examples of source code:

Some CSS code:

.scrolloff {
  pointer-events: none;
}

A JavaScript:

<script type="text/javascript">
    jQuery(document).ready(function($) {
    console.log("allLoaded");
        // you want to enable the pointer events only on click;
        jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready
	console.log("scrolloffAddedA");
        jQuery('#canvas1').on('click', function () {
	    console.log("clickDetected");
            jQuery('#map_canvas1').removeClass('scrolloff'); // set the pointer events true on click
	    console.log("scrolloffRemoved");
        });
        // you want to disable pointer events when the mouse leave the canvas area;
        jQuery("#map_canvas1").mouseleave(function () {
	    console.log("mouseLeft");
            jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
	    console.log("scrolloffAddedB");
        });
    });
</script>

And here’s the list of supported languages:

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

Parallax with Ultimatum theme

Here’s a blog post from the Ultimatum theme developers about using parallax layers in Ultimatum. I was curious if we could use parallax backgrounds within a page/post and asked the dev’s this question. After getting an answer on my question I continued the discussion with their support via private messaging. Here’s the technique that came from this discussion.

First, following the blog post, create a div and add the class “parallax” to it.

That should look something like this:

<div class="parallax">
	...
</div>

NOTE: You don’t need to call it “parallax”. You can call it whatever. You just have to use the same name in the css code. Because you will have to add the calls to the stellar java script as well for the parallax to work. Ultimatum uses Mark Dalgleish’s Stellar Java script.

So your html will loke like this:

<div class="parallax"  data-stellar-background-ratio="0.5">
	...
</div>

The number on the ratio actually defines how fast the parallax layer will move. At a value of 0.5 the parallax moves at medium speed. If you go higher the parallax will move slower. At a value of 1 the parallax layer is not moving at all. But at a value of 2.0 it will move fast. Besides that you can use all the arguments/calls listed here.

In your CSS script you can talk to the parallax layer like this

.myTopParallax {
  background-image: url("http://the-path-to-your-background-image.jpg");
  background-size: cover;
  padding-bottom: 40%;
}

The most important is to set the background image. Everything else is optional.

Font Pull -Down Menu

Ever had clients that could not decide on which font to use on their website?

here’s solution to implement choice!


Header Type 1

Header Type 2

Header Type 3

Header Type 4

Text Blocksatz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida neque dolor, a ultricies justo viverra mattis. Donec feugiat mollis orci, commodo rutrum urna molestie et. In blandit lobortis eros, at tempus lacus suscipit non. Maecenas dolor nibh, dictum vel pellentesque eu, pharetra at libero. Donec placerat fermentum magna, sit amet vestibulum dui ullamcorper in. Suspendisse nisi urna, rutrum nec arcu quis, feugiat aliquam velit. Donec molestie nisi urna, sit amet fermentum nisi blandit a. Cras tincidunt semper vulputate. Aliquam vehicula eget felis nec molestie.

Text Linksbündig

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Text Rechtsbündig

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Text Zentriert

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit Email

Lorem ipsum dolor sit amet Kontaktformular

 


 

This is a technique to implement a pull-down menu to test fonts on a web page

The html for the pull-down menu:

<link href='https://fonts.googleapis.com/css?family=Abel|Crimson+Text:400,400italic,600,600italic,700,700italic|Varela+Round|Patua+One|Gudea:400,400italic,700|Lora:400,400italic,700,700italic|Open+Sans+Condensed:300,300italic,700|Fjalla+One|Arvo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

<select id="input-font" class="input"  onchange="changeFont (this);">
  <option value="Times New Roman" selected ="selected">Times New Roman</option>
  <option value="Abel">Abel</option>
  <option value="Crimson Text">Crimson Text</option>
  <option value="Varela Round">Varela Round</option>
  <option value="Patua One">Patua One</option>
  <option value="Gudea">Gudea</option>
  <option value="Lora">Lora</option>
  <option value="Open Sans Condensed">Open Sans Condensed</option>
  <option value="Fjalla One">Fjalla One</option>
  <option value="Arvo">Arvo</option>
</select>

The Javascript function:

<script>
    function changeFont(font){
        document.getElementById("output-text").style.fontFamily = font.value;
    }
</script>

And the html for the content:

<h3>Lorem ipsum dolor</h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida neque dolor, a ultricies justo viverra mattis. Donec feugiat mollis orci, commodo rutrum urna molestie et. In blandit lobortis eros, at tempus lacus suscipit non. Maecenas dolor nibh, dictum vel pellentesque eu, pharetra at libero. Donec placerat fermentum magna, sit amet vestibulum dui ullamcorper in. Suspendisse nisi urna, rutrum nec arcu quis, feugiat aliquam velit. Donec molestie nisi urna, sit amet fermentum nisi blandit a. Cras tincidunt semper vulputate. Aliquam vehicula eget felis nec molestie.</p>
<p style="text-align: justify;">Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.</p>
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
&nbsp;
<p style="text-align: left;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href="mailto:alex@fullframestudios.ch">Email</a></strong></p>
<p style="text-align: left;"><strong>Lorem ipsum dolor sit amet <a href="#">Kontaktformular</a></strong></p>

Piece of history – a lesson to be learned?

Recently a friend pointed out to me that there is a site on the internet that keeps track of web pages and archives snapshots of them.
This thing is called “The way-back-machine” .

I went ahead and checked out several websites of things I was involved with. One thing I would like to post here is the page of my dear friend and business Partner Dan Mapes who had this up in 2001: Virtual Camera (Be warned: Takes a while to load)

Sometimes I wonder if the Cameron’s of this world get their inspiration from way-back.

P.S. Here is the full article on the system.

Software Vault

I wanted to share some great tools I recently bought.

ShaderMap

First there is ShaderMap. ShaderMap creates textures for displacement, normal, ambient occlusion, specular and DUDV maps for refraction. After test driving and evaluating CrazyBump and ShaderMap my choice fell on ShaderMap. First, the price… A full version of ShaderMap is $20 vs. $200 for CrazyBump. But not only the price was an influence. I think the interface of ShaderMap is vay superios than Crazybump. In ShaderMap all the functions are right at your finger tip. All the different maps are in the same pane. I didn’t like the step-by-step approach the CrazyBump interface has.

Both programs create great maps. At the end of the day the interface decided the winner here even though the interface is not scalable it is more organized than CrazyBump.

ShaderMap

CrazyBump

faogen

Sitting and waiting for any 3D app to render is tedious. The word “mental” in a certain renderer is synonymy for the state of it’s users…

I was looking for an alternative to bake AO passes and found one: faogen (Fast AO Generator)

It uses the graphics card to render the ambient occlusion. While the user interface is simple and easy it also allows the more experienced artists to fiddle with more advanced things as the shader that is used to AO bake etc.

I just want nice looking AO maps in no time and that is exactly what faogen does.

The following images show what took me 5 minutes to do. Opening the geometry (A) rendering with default settings (B) and adjusting the settings a bit. The five minutes includes rendering btw.

Step A
Step A

Step B
Step B

Step C
Step C

Ogre3D DCC Wiki

I am involved in project that is rebuilding the New York World’s Fair from 1964/65 in 3D. Read more here…

We are using the Ogre3D engine to render the ‘game’. Producing into a OpenSource engine is not always easy because sometime the tools to export models from 3D modeling applications and many other aspects of a content creation pipeline that is available through the community are outdated or simply don’t work. Ogre3D is a well spread engine by now, but most studios that work with it keep their tools and solutions close to their chest.

Wiki on Ogre3D and more…

In the spirit of the NYWF (New York World’s Fair) project which is funded by the NSF (National Science Foundation) I’m going to provide the solutions we come up on a Wiki for everyone to follow, use or even extend.

Website of gvz_rossat ag/sa goes online

The re-design of the website for the professional gardener supply company gvz_rossat ag/sa goes online. The site uses a Adobe Flex Accordion as navigation and is bilangual.

gvz-rossat_Web_Medium

 

Back in the day flash movies were really hype. Here’s the flash header that I created for this website.



Fallback or ‘alternate’ content goes here.
This content will only be visible if the SWF fails to load.


Porsche Design – Worldtimer

Two of the biggest challenges in creating watch animations are that most likely if you get to animate a watch it means it doesn’t exist yet. So you got to cobble together the look of the real material in that particular shape and finish. The other challenge is the that most watches are only visible because they reflect their environment. Now to do that for still shots is somewhat easier than animations because, even in real life, reflections on such a small object can become erratic and you end up animating the environment which can make the 3D scene somewhat complex.

Here’s the three 3D animation we made as freelancers for MDI Production in Neuchatel/Switzerland in collaboration with two freelancer animators from France, Geoffrey Dupuy (Storyboards, 3D animation) and Nicolas Parreira (3D animation, Expression setup, materials, rendering). The AfterEffects work was done by Mathias Schmid who was in his last weeks of his apprenticeship as a media designer at MDI.

I was supervised the project for Franco. COnverted and prepared all the models from CAD to Maya. My main focus was on animating, texturing, lighting the Porsche Design Worldtimer and i was responsible for rendering all the animations on the 30 CPU render farm. I basically slept next to 8 PC’s setting the alarm clock every 2 hours. Yes, it was hot and noisy.

Watch Animation – 2007 – Porsche Design "WorldTimer" from Alex Furer on Vimeo.

Watch Animation – 2007 – Eterna "Vaughan Big Date" from Alex Furer on Vimeo.

Watch Animation – 2007 – Eterna "Vision" from Alex Furer on Vimeo.

Alpenlachs Schweiz GmbH – Logo and CI

Alpenlachs Rubigen GmbH is licensee of the Alpenlachs brand form Austria. Alpenlachs Rubigen GmbH aquierd a big fish farm inbetween Berne and Thun to be used as a example facilty and Alpenlachs Rubigen GmbH also acts as licensor of the brand for the Swiss territory.

I designed the company logo, creating the the web design and CI, flyers, lables and at the moment and I am also photographing and documenting the re-construction of the facilities in Rubigen.

Otronicon 2006 – Blasteroids

I did the spaceship, the comets and the environment for this little game that was showed at Otronicon. The game was played with the head. The setup contained a stereo cam that created a zDepth image from which the face then was tracked.

Otronicon is a yearly four day event of Full Sail to “celebrate technology”, as they say. Full Sail is an university for digital media of all kinds in Orlando.

Otronicon 2006 - Blasteroids