The web is the perfect place for multimedia: Video, Audio, text, we have it all now, and we have plenty of it. But how are things with 3D models? There are lots of cases where it would be useful, like product previews for shops, technical models for engineers and more. Is there a satisfying way to display them in the browser? This article analyses the current state.

Older solutions: Plugins

Since a long time there are attempts to display interactively rotatable and draggable 3D models in the browser. Browser plugins like Cosmo Player enable a browser to view VRML or similar files. Unfortunately, most users do not have one of these plugins installed, and it would be too much to ask them to install one.

It is a common practice in webdesign to only rely on plugins which are used by most internet users. As an example, the Adobe Flash Player is available on more than 95% of the computers out there. This lead to the huge success of Flash videos on sites like Youtube. So it would be great if Flash would support 3D models, even if a lot of people do not like the plugin that much (including me). There is a tool called Swift3D which allows to export 3D models as a flash file. It works quite well, but is limited to simple models. So if you want to display complex models, this won’t satisfy you either.

3D pdf

Another tool which is installed on most machines is the Adobe Reader. It is mostly used to view pdf files. It is often overlooked that it can also be used to display these pdf files directly in the browser. But how can this help us with our 3D model issue? Since version 9, 3D data can be embedded into pdf files and be viewed by the Adobe Reader. As pdf files can be embedded into html pages, this is a way to display our 3D models as we wish. Yay!

But there are still a few downsides:

• On some machines, the embedding does not work. Instead the files will be downloaded and viewed by Adobe Reader outside the browser. This is still an acceptable fallback, though.
• Google Chrome does not use Adobe Reader to display pdf files, it uses its own viewer which cannot display 3D data. Bugger. You can provide Chrome Users an alternate link to download and view the model in Adobe Reader. This turns down the user experience a bit, but it is still better than no 3D models at all.
• It does not work in Firefox on Mac (at least on my machine). You can use the same fallback as with Google Chrome
• Acrobat Pro Extended, which creates 3D pdf files, is quite expensive for an occasional user. It is quite powerful though with a lots of import/export settings.

Html5: WebGL and O3D

Html5 brings us a truckload full of amazing new techniques and possibilities. A usage of the Html5 canvas is WebGL, a library to display 3D data natively in the browser. You do not even need a plugin. But not all browsers support this technique yet. Google has its own solution called O3D, but it is not supported in enough browsers either.

Conclusion

The old plugins to display VRML date do not do the job because they are not widely accepted by the users. So it is better to use 3D pdfs which work quite well, but with a few drawbacks. WebGL and O3D are quite promising, but lack sufficient browser support. We can be sure that this will get better in the future, and if it will also work in mobile devices. So in my opinion, at the moment it is best to stick with the pdf solution, but we should keep an eye on the browser support for WebGL and O3D and switch as soon as it is good enough.

Here comes the new layout for this blog!

I had outgrown the old layout and also needed some additional pages for my kicking-off freelance business. Come check out my portfolio. The style of the static website and the blog is now consistent, I hope you like it. Please let me know if you find any bugs.

Photograph by Animesh Singh

As you probably know, CSS allows you to specify the mouse cursor when hovering objects. There are several pre-defined cursors which work on all browsers. So far, so easy. But what if you want to use your own custom cursor? Here starts the trouble, as each browser handles them differently. So let’s find a solution which fits your requirements and works in most browsers. As a start, your should know your requirements. There is no solution which fits all the time. The most important one is: Which browsers should be supported? If the custom image does not work, where should you use a fall back solution?

In this example, we want to support IE at least as much as possible. If you don’t have to support it, your solution would probably look different. To my experience, custom cursors work in IE7, but not in IE8 any more. So you need to provide a fallback for IE8. Just choose the one of the default cursors which works best for you.

When specifying a custom cursor, you always should provide a alternative from the default cursors anyway, otherwise it does not work in Firefox. So this alternative is the one you will see in IE8. This is how the code looks like:

cursor:url("FILENAME.cur"), pointer;

So you first specify the custom cursor with url(). If that one won’t work for a browser, it will use the following one which is a default cursor. It’s similar to specifying font families.

A good file format is .cur which is also used by windows for its cursors. You can create it easily by generating a .gif and then renaming it to .cur. png and gif will also work as cursors often, but .cur is best supported by the browsers.

By the way, this list of default cursors is very good, you can even see them in action. Very useful!

If you are a web professional dealing with client, you will often have to present instructions of how to use some features of a site etc. But what is the best way to do this? You are a professional and don’t want to send amateurish files to your client.

A good way is to send screenshots to your client. It is much easier this way for them to follow the instructions, a picture is worth a thousand words, they say for a reason.

But still a screenshot can be quite difficult to consume, especially if there are more items on the screen than you need to perform the task. So it is a good idea to label or highlight the things which are important. But these labels would clutter the page even more! So what can you do about it? There is a simple solution:

You dim the page so that you can highlight the important stuff which will stand out then and the page will look less cluttered.

On the left you can see how this looks like in the layers of Photoshop (Remember?).

On the bottom is the original screenshot, covered by a black layer with an opacity of ca. 20%. On top are the highlighting shapes with a red stroke (3px in the example above). I used a rectangle with a rounded corner radius of 5px.

In order to make the original screenshot visible inside of the shapes, you need to copy its layer, move it on top of the shape and create a clipping mask.

I hope these tips were helpful for you and you can use them when you are dealing with your clients.

As a web designer you create websites all the time. But sometimes it is time for destruction instead of construction! This is what this nice application is for: you can shoot and destroy any website you want. Addictive!

Learn how to destroy websites

via Spreeblick and neotorama

The Iphone automaticaly adjusts the font size of websites when zooming in/out while browsing. While this is done to improve readability, it can break your website layouts, especially if you use absolute, pixel based positioning.

To fix this, it is commonly recommended to use this to fix the problem:

/*fixes too big font in mobile Safari*/

html { 
     -webkit-text-size-adjust:none;  
}

The problem with this is that this turns off text resizing in all webkit browsers. This means that Chrome and Safari on desktop computers won’t change the text size, even if you use page zooming. This will look very funny, and might even make the site unusable for people requiring bigger font sizes.

The solution is to only apply the fix to mobile devices. This can be done by restricting it to devices with a lower screen resolution:

/*only iPhone*/ 

@media only screen and (max-device-width: 960px) { 

    /*fixes too big font in mobile Safari*/ 

    html { 
        -webkit-text-size-adjust:none; 
    }
 }

We have to set the maximum width to 960px as this is the width of the Iphone 4 in widescreen mode.

So now we have stopped the iPhone from resizing text without affecting the zooming in other browsers!

Picture by Simon Collison

I can highly recommend this blog. They present several photographers in each issue, with excellent pictures from there portfolio. There are already 8 editions available.

Unless you will, curated and founded by Heidi Romano, is an online journal that showcases a vision within photo-based art. Our goal is to bring together a collection of notable photographers from around the world and present their work.

www.unlessyouwill.com

via Manjari Sharma

The excellent free font Vollkorn by Friedrich Althausen now also comes with Italic and Italic Bold versions.

“[The font] intends to be a quiet, modest and well working text face for bread and butter use. Unlike its examples in the book faces from the renaissance until today, it has dark and meaty serifs and a bouncing and healthy look. It might be used as body type as well as for headlines or titles. »Vollkorn« (pronounced »Follkorn«) is German for »wholemeal« which refers to the old term »Brotschrift«. It stood for the small fonts for every day use in hand setting times.”

Download Vollkorn font familiy

PostScript-OpenType and small caps versions are planned, so it’s worth checking the font’s site in the future.

If you use the font, please consider a donation.

via Yanone

The resolution of the Poster is allright for printing in A3, and perfect for A4. You still can print it in higher formats, but it might get pixely if you look at it from very close.

Download PDF for printing

There are also the InDesign Files available, for the case you want to edit it. We did not find all of the images from the original poster, so I used different ones to replace them. And sometimes I did not zoom in as much as 3 Tons did, as this would have decreased the quality for printing.

3Ton Gallery made a truly amazing collection of reflections in movie space helmets. There’s only a low-res version of it, but there are lots of requests for a high-res version. I agree with that and want to create one, but I need your help!

Post links to bigger versions of space helmet reflections in the comments here. Once we have collected enough of them, I’ll create a full resolution version and post it here!

Update: Excellent work everybody so far, this is what we have at the moment:
http://img801.imageshack.us/img801/5166/reflections.jpg
Help us getting the rest of the pictures!

Update2: The poster is done! Download here

via Spreeblick