The following tutorial shows how to publish your lit model on a website and gives visitors the ability to navigate in realtime with your designs.

OK, you've finished your Sketchup model, you've added lighting using LightUp and you've set up a number "Scenes" that really show off your work. A great feature of LightUp is to ability to export you lit model with all the Scenes and GeoLocation info into a single file (extension '.luca') that can be explored interactively by others without needing SketchUp or LightUp.

You can view .luca files using the standalone Player App, or the LightUp WebPlayer plugins for all major web browser. Using a web browser means you can embed a realtime 3D model in your own pages on your website for other to explore.

Export from SketchUp

Check the menu Tools->LightUp->Loop Scene Animation to choose what kind of behavior you want for Scene animation. Play once and stop, or start again once all Scenes have been shown.

You may have Scenes used for your workflow that you do not wish to export. In this case, open the SketchUp Scene dialog and uncheck "Include in animation" for those Scenes you wish to skip.

The Sketchup default is to include all Scenes in animations.

LightUp tries to honor all your settings when exporting. In particular, you will need to set the Camera Speed for manual navigation. A handy tip is to set the speed to 0.0 if you only want users to look around with the mouse, but not be able to move apart from to the locations you've set up using Scenes.

Other settings to be aware of is GeoLocation, Camera Collision, Gravity and all your Post processing effects such as Bloom, Vignette etc.

Next we need to choose a 'watermark' image that will be shown in the lower right of the window. This can be any image you like; company logo, a message etc. By default it is the LightUp logo.

If the user click on this watermark logo during navigation, a new browser window will open on the URL you've set. The default is the LightUp website, but you can set any URL - so you can create linked pages in this way.

"Autoplay" is normally checked, meaning the player will load your model and start animating your Scenes. You can uncheck this if you wish.

Lastly, if you want to just export Scenes that are marked "Include in animation", you'll need to check the "In Animation" checkbox or you'll be exporting all Scenes.

If you're all ready, go ahead and press the "Player.." button to choose a filename to save your export and proceed to package up your model for publishing.

If you have a LightUp Player installed, you can simply double-click on the .luca file you've exported to check its as you expect and your Scenes are all present. The latest player for Mac and Windows are available here.

Embedding in a webpage

Embedding a .luca file in your webpages with your own content is made simple by using some JavaScript helper functions.
The minimal HTML required is a call to a JavaScript function like this:

So a minimal example would be something like this :

You will notice the example loads the webplayer.js JavaScript function and also some CSS for styling. If you wish to use your own CSS styling, you would of course replace this file.

Click here to try the example code above. (URL is http://light-up.co.uk/resources/tutorials/exporting/test.html)

Web Server configuration

Webservers need to know what sort of media files they are serving to users, so they can treat text files different from HTML files, and JPEG images different from video etc. To do this, every resources has a MIME-type. LightUp .luca files are a new file type, so while not required, it is good practice to configure your webserver by adding a new MIME-type for LightUp.

Conclusion

Embedding LightUp files in your webpages is simple and offers a great new way of engaging visitors to your site and with the use of linked pages.

Any questions can be posted on the forum or emailed to the LightUp help email address.

The following tutorial describes Depth of Field effects and how it can used to enhance your LightUp images and draw the viewer into your work. Combined with realtime postprocessing such as Vignette produces eye-catching results.

What is Depth of Field?

All cameras rely on focussing an image of the subject matter onto a backplane. The backplane can be a digital image detector or a piece of light sensitive film, but the sharpness of the image is largely controlled by two main factors:
- the aperture of the lens opening
- the viewing distance

For a particular aperture, there is a viewing distance where the image will be sharp, with things closer or further away from this getting progressively more out of focus or blurred. The range of distances for which the image is sharp is known as "Depth of Field (or DOF for short).".

For a very small aperture (a so-called 'pinhole camera'), the range of distances within which the image will be sharp is effectively infinite, but as the aperture gets larger, this range of distances becomes smaller and smaller.

Most cameras are not 'pinhole cameras' but have a lens and aperture that produces an easily visible DOF - so we have the distance at which things are sharp and the rate at which things become blurry from this distance which we'll be wanting to control.

Using Depth of Field

While LightUp is a digital renderer, it can emulate the optic effect of Depth of Field in realtime. Depth of Field can be used to great effect to concentrate the viewer's attention on a particular element of your pictures. LightUp has a number of controls to allow you to make best use of DOF effects.

This SketchUp model of a loft apartment is going to be our testbed. But here we want to focus on some small element of the model - the small alabaster sculpture on the glass table.

We want the context of the loft, but we want the viewer to focus on what we want and not wander off. So we'll use LightUp's DOF controls to keep our subject matter in sharp focus and the rest blur out. Opening up the Capture dialog you can start sliding the DOF control to the left to narrow the depth of field for the image.

As you pull in the Depth of Field, you may find not much changes. The reason is that LightUp is constantly performing a range finding test from the center of the screen into your model (its marked with a very small red square), and based on this distance, constructs the DOF filter. If your camera is pointing at something quite distant as is the case here, little effect with be visible. If you alter the camera viewing direction to gaze at something nearby, you'll see the DOF effect come into action.

The dynamic range finding means as you move around the model, LightUp will constantly be focussing (keeping sharp) what you're looking at. This is useful, however sometimes you want to fix a focal distance and be able to move around dropping objects out of focus.

To do this, LightUp has a special "padlock icon" next to the DOF slider that allows you to lock the current focal distance. When the padlock is Unlocked, the focal distance is dynamically calcuated based on the camera view, when Locked, the focal distance is fixed.

So here we point the camera at the statuette, lock the focal distance, and then move the gaze back to where it was originally. We then get the framing shot we want and the objects we want in focus.