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.

Institute of Pharmacology “GH-Receptor”

This is an animation about growth hormone receptor docking and the effect of Pegvisomant and antibodies.

This was the first animation I did in Blender. Shoutout to Joseph Manion which is running the youtube channel CG Figures for providing the basic setup for the Phospholipid Bilayers!

From Autumn 2019 until Summer 2021 I worked at the “Institute of Pharmacology” at the University of Bern as a 3D instructor and animator.

Institute of Pharmacology “T-Cell Animation”

This is an animation showing a T-Cell that connects to a cell and is able to discharge when the cell is not covered with sugar crystals but fails if the cell is completely covered.

From Autumn 2019 until Summer 2021 I worked at the “Institute of Pharmacology” at the University of Bern as a 3D instructor and animator.

Institute of Pharmacology “Saccharification”

This is an animation showing a T-Cell that connects to a cell and is able to discharge when the cell is not covered with sugar crystals but fails if the cell is completely covered.

From Autumn 2019 until Summer 2021 I worked at the “Institute of Pharmacology” at the University of Bern as a 3D instructor and animator.

Institute of Pharmacology “Virus Animation”

This is an animation about the process of a virus docking to a cell, entering the cell and getting the cell to replicate the virus multiple times and the replicated viruses exiting the cell.

From Autumn 2019 until Summer 2021 I worked at the “Institute of Pharmacology” at the University of Bern as a 3D instructor and animator.

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”.

Under Her Black Wings

We were joung, wild at heart and dedicated!


These images were taken by Christian Helmle at our practicing room in the Selve Areal in 1991.

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>

Hiring – why look at it differently? Because we could!

I am hereby starting a new section on my blog. One that isn’t related to work, techniques, tools or any industry in particular. I call this “180 Degrees”. I think if we’d start doing the opposite of what we were doing for ages, we would at least find out if the old way worked better. Instead, people, industry leaders and especially politicians invest a lot of time, money and energy in coming up with the next great new thing.

Since a couple of years ago I was out looking for a job and I have been involved in hiring people in various positions in my life I came up with the following idea about the hiring process.

When hiring people the interview always goes the same direction. It’s a “Show me, show me more and show me again” procedure.

Besides the question of “Can he/she do the job?”, what do you really need to know form the potential candidate? You need to know if you’re compatible. And more on a personal level than blond, brown or red-headed…

So I was thinking of reverting that process and asking people: “What do you need to do your job?”. Because if you ask that question, you will hear it immediately if someone is thinking in the right direction, understood the pre-requisites of the job and in the course of the conversation you will also figure out if you’re compatible.

This approach basically put’s both, candidate and employer into a work session where you can find out if it will work out or not. It’s also less intimidating for the candidate. He/She is not so exposed and will actually give away who they really are much easier.

A portfolio counts. But who get’s an interview for a modelling position with a crappy portfolio. The people that don’t show the crafting abilities required for the job are always sorted out before interviews. Once it get’s to an interview, this decision is long made.

NYWF – December Update

December was my last month of working on the New York World’s Fair project. I mainly concentrated on cleaning up the scripts, and tools I developed and documenting those.

I majorly cleaned up the Maya Shelf. The main task was to focus on what is really needed for the current pipeline. That meant that the buttons to fixed function shaders went away as the NYWF project solely depends on cgFX at this point.

Maya Shelf
MayaShelf v1.5.32

And I created a training video explaining all aspects of the MayaShelf and also covering exporting from Maya to Ogre 3D and converting the export to the DNA pipeline that the project is using. DNA is the in-house scripting architecture that assembles scenes and modules to a working game/simulation at the SREAL Lab at IST.

You can watch the HD version with click-able chapters here!

Screenshots of training video

I also closed a few open tickets like adding trees inside the New York State and the federal pavilion, posters on walls at the Missouri pavilion plus I distributed the Bell Serpentine phone booths and the Bell Family booth across the entire fair and in general updated all files and made sure everything is checked in properly.

Phone Booths

New York State Trees

Kodak - Posters and Logos
Kodak Posters and Logos

Missouri Pavilion Posters

Trees at the Federal Pavilion
Trees inside Federal

This concludes an over two year adventure building a pipeline and implementing assets into the Ogre 3D render engine. It was a great experience to work with some very bright minds and very talented content creators on this adventurous production which, in comparison, makes climbing K2 look like a piece of cake.

NYWF – November Update

This month I Added 2008 Benches, 11 Food arches and 9 Swiss Clocks, 117 international flags and 56 fair flags. The international flags each with a different name on the plate attached to the flag pole. I also created the textures for the Meadow bridge flags in Photoshop from actual images from the fair.

Here’s the visuals

Here’s the pavilions I exported from Maya and implemented into the game.

First the Bell pavilion. Initially this model was started by Scott Giacomin and later on completed by Alex Zelenin. For me this was a straight export. I did model a walkmesh for it. The walkmesh is invisible geometry that defines where the player will be able to walk. The tricky thing about those walkmeshes is to make sure that the boundary is far away enough from the walls so the user doesn’t get a “view into the room” which basically means you can see through the house because we’re talking about single sided geometry here.

I also picked up the Kodak pavilion from Julian Orrego and finalized it. Which meant to adjust the geometry here and there, rework some of the texturing, retouching the AO map and distributing the latest bushes which we hardware instance now. Then I placed it on the actual ground plane and exported it. I also modeled a walkmesh for the entire pavilion which was complex because the roof is totally uneven. It was designed to be like a moon surface.

The SKF pavilion was a straight export. Thanks Eric!

Then there was Japan… This beautiful model was a a nightmare in terms of scene structure and building the walkmesh for it. It has a lot of up’s and down’s and narrow stairs and tables which needed to be cut out of the walkmesh so the player will not walk through them. I also completely replaced all the tables. I used the “replace objects with objects” script from the NYWF Maya shelf I created so it was easy to do. The tricky part was that the existing tables did were zero transformed. So I first had to add locators at each tables position using another script from the shelf that reads the pivot location in world space and places a locator and then use the above script to replace those locators with the actual tables. So it was at least not too much manual labor. The modeler on this was Chip Lundell. He was the “new kid on the block” and shall be forgiven 🙂 Beautiful model!

NYWF – October Update

Loads of updates this month. We keep adding pavilions and improving existing ones.

This is the General Electric pavilion. I had to adjust it quite a bit so that it would fit the given ground plane. The semi transparent gray version is what I got from the modeler Julian Orrego and the colored version is what I “massaged” it into. It was not his fault. He got a perspective aerial photo taken from a plane as a ground plate which had optical distortion that made the pavilion lot appear wider.

This is the IBM pavilion. I fixed a few naming errors and exported it into the game. The modelling was done by Alex Zelenin.

On the Missouri pavilion I modeled the walk mesh. This is where the player will be able to walk (the solid yellow surface) and I exported it into the game. And I added a Gemini capsule as an exhibit into one of the pylons inside the pavilion. The modeller on this pavilion was Julian Orrego.

I added flowers and trees to the General Motors pavilion below and I modeled the surfaces for the water fountains. That’s a model by Julian Orrego as well.

The New York State pavilion got a walkmesh added (solid yellow surface). This is modeled by Alex Zelenin.

And the Chunky Plaza got a walkmesh as well. This one was tricky because there’s a lot of small items the player will have to be able to walk inbetween and find the “Artists’s Point of View” (second image). Those are the camera positions I added that we’re going to link to in code. Finding those angles will be one of the challenges. This is a model by Eric Imperiale.

Back on Mac (ps -ef | grep alex)

Its pretty much almost exactly 20 years ago that I started to dabble with computers and design. I was working at the independent record label and book publisher Zytglogge Verlag in Switzerland. We were making adds and info publications the traditional way. We used Letraset and we had a repro-camera much like these plus a traditional photo copier to create marketing material for the books and cd’s the label released.

At this point the industry was moving to making entire layouts digitally and creating films directly from the Mac and all we were using our MacPlus for was administrating client addresses. After working for about a year on this MacPlus creating A4 & A3 layouts, cd-lables and other print material the company was convinced to invest money into 3 full blown Apple workstations and to start creating all layouts in-house. Inclusive all the books they published and are still doing it this way today.

Now 20 years later I got myself a Mac again. A MacMini. I needed it to be able to work on the iPad project that I am involved with. We’re creating tools and toys (apps) for the iPad’s and iPhones of this world. And to be able to compile and test myself I needed a Mac, because compiling and deploying from Unity 3D is impossible from a PC.

I am quite surprised about the power of this little box. I got the smallest version with a core i5 CPU and upgraded the memory to 8 GB. So far Unity 3D runs flawlessly on it.

The OS is quite different than it used to be. My last contact with Apple was on OS 7.6 back in 1997-98… I like the Unix’ish backbone in OSX and a lot of Unix commands start to come back and I am getting pretty well around the OS by now. I really like the software Aperture and the way iTunes works on a Mac. I decided to move my entire media library and photos to the Apple platform.

But what were they smoking when they reversed the scroll-wheel behavior on OSX Lion… I mean… Talking about muscle memory.















NYWF – Pool of Reflections modeled and implemented

I modeled the Pool of Reflections myself and exported/implemented it into the game. First we had to cheat since the terrain is not entirely accurate in this area. So I built the pools onto an artificial hill. This is not historically accurate, but it looks good and we can keep the fair more or less planar which makes it easier to put together on so may levels.

The tricky part was the tulips. I modeled the tulips using manual LOD’s but ended up distributing only the lowest level of detail and I decided to use hardware instancing which we implemented by switching to Ogre 1.8. I distributed the using this mel 3D paint script which I suggest checking out if you ever need to paint geometry.