Workflow Tutorial
I have created this 3D depthmap virtual tour with Blender / PanoCamAdder and krpano in around 25minutes.
You can watch the whole process on YouTube:
Feel free to download the example-panoramas, if you want to reproduce the depthmap-tour.
Dieses Panorama ist lizenziert unter einer Creative Commons Namensnennung – Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.
Installation
Download the add-on (zip.file) and leave it zipped.
Open Blender and select the ‚File/User Preferences‘ menue. Select the ‚Add-ons‘ tab at the top of the user preferences window and select „Install From File“ at the bottom of the window. Navigate to the addon (zip file) and install it.
If you already have installed a previous version , uninstall and remove it first!
Add PanoCam
Start with an empty blend file and add only one plane to begin modeling. Keep sure the 3D cursor is at the plane position and hit the Add PanoCam button.
The file-browser window opens. Select a panorama image (jpg, png, tiff) from your system and set the name and camera height.
This creates a 360-viewer camera, a panorama-material and a desaturated panorama-world for the background.
If you have selected the plane before hitting the button, the new material will be applied to the mesh automatically. But you can also apply it manually later on.
Prepare Viewport
- Split the 3D viewport and use one half as 360viewer.
- Toggle background to see a desaturated panorama in the background.
- Enable wireframe to make the polygons visible.
Modeling
Now you can start modeling your scene with all tools Blender provides!
If you are totally new to Blender I recommend to watch the Blender Basic Tutorials on the official YouTube channel, first.
Here some Blender tips and shortcuts, I often use for creating 3D depthmaps with PanoCamAdder.
Next PanoCam(s)
If you have modeled enough geometry for orientation, you can add the next PanoCam.
Select your model first to apply the next panorama material automatically.
If you have more than one PanoCam added to the scene, you can switch between them in the PCA 360viewer tab.
Switch between the different panorama materials in the Blender material tab – and between the background panoramas in the Blender world tab.
Prepare for krpano
- Select as many panorama_HANDLEs as you want and the model.
- Keep sure the model is the ‚active object‘!
- Hit the MakeExportReady button.
This will create two new folders:
DEPTH3D and TOUR3D:
The DEPTH3D folder contains all finished 3D-depthmaps, ready for to use within krpano. Just export them from here as STL file(don’t forget to check ‚Ascii‘ and ‚Selection Only‘).
The TOUR3D folder contains all finished 3D-depthmaps perfect aligned to each other. Use this arrangement to read out the values Add hotspots, if you like.
Tour.xml
At start we need only the scenes and the depthmap_navigation.xml:
<!-- depthmap navigation -->
<include url="plugins/depthmap_navigation.xml"/>
<!-- scenes -->
<scene name="scene_Ehem-Bahnbetriebswerk_02" title="Ehem-Bahnbetriebswerk_02" onstart="" thumburl="panos/Ehem-Bahnbetriebswerk_02.tiles/thumb.jpg" lat="" lng="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="220.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/Ehem-Bahnbetriebswerk_02.tiles/preview.jpg" />
<image>
<cube url="panos/Ehem-Bahnbetriebswerk_02.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1152,2176,4352" />
</image>
</scene>
<scene name="scene_Ehem-Bahnbetriebswerk_04" title="Ehem-Bahnbetriebswerk_04" onstart="" thumburl="panos/Ehem-Bahnbetriebswerk_04.tiles/thumb.jpg" lat="" lng="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/Ehem-Bahnbetriebswerk_04.tiles/preview.jpg" />
<image>
<cube url="panos/Ehem-Bahnbetriebswerk_04.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1152,2176,4352" />
</image>
</scene>
<scene name="scene_Ehem-Bahnbetriebswerk_06" title="Ehem-Bahnbetriebswerk_06" onstart="" thumburl="panos/Ehem-Bahnbetriebswerk_06.tiles/thumb.jpg" lat="" lng="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/Ehem-Bahnbetriebswerk_06.tiles/preview.jpg" />
<image>
<cube url="panos/Ehem-Bahnbetriebswerk_06.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1152,2176,4352" />
</image>
</scene>I have prepared two actions for loading the first panorama and one action for the ‚3D transition‘:
<!-- startup action - load the first scene -->
<events name="tourevents" keep="true" onxmlcomplete="setup_first_scene();"/>
<action name="setup_first_scene" scope="local">
set(view, tx=get(image.ox), ty=get(image.oy), tz=get(image.oz));
set(events[tourevents].onxmlcomplete, null); set(events[tourevents].onloadcomplete) );
</action>
<action name="startup" autorun="onstart">
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE); if(startactions !== null, startactions() );
</action>
<!-- 3D Transition -->
<action name="tour3d_loadscene" scope="local" args="scenename">
loadscene(get(scenename), null, MERGE|KEEPVIEW|KEEPMOVING, BLEND(1.0));
if (global.customtransition != 'SKIP', if(global.customtransition !== null, global.customtransition(); ,
tween(view.tx|view.ty|view.tz, calc(image.ox + '|' + image.oy + '|' + image.oz), 2.0, easeinoutsine); ); );
delete(global.customtransition); delete(global.customtransitiontime);
</action>
<!-- 3D-depthmap -->
<depthmap url="" enabled="true" rendermode="3dmodel" scale="100"/>Print out all required values from the TOUR3D objects:
<!-- image styles -->
<style name="style_Pano_02" prealign="-0.0|-0.0|-0.0" ox="441.73" oy="-132.0" oz="244.29" linkedscene="scene_Pano_02" />
<style name="style_Pano_04" prealign="-0.0|3.76|0.0" ox="52.96" oy="-132.0" oz="-422.06" linkedscene="scene_Pano_04" />
<style name="style_Pano_06" prealign="-0.0|-6.07|0.0" ox="-466.28" oy="-132.0" oz="6.92" linkedscene="scene_Pano_06" />HotspotStyler
I have used the HotspotStyler Add-on to create a style for the hotspots:
<!-- HsS hotspotstyle -->
<style name="MyStyle" type="text"
keep="true"
distorted="true" depth="0" depthbuffer="true" rotationorder="xzy" enabled="true" capture="false"
scale="0.5"
alpha="0.5"
bgcolor="0xFF0000"
width="70" height="70"
bgroundedge="47.0"
bgborder="12.0 0xFFFF00 1.0"
bgshadow="0 0 5 0x000000 1.0"
onover.addevent="tween(scale,0.55, 0.2); tween(alpha,1.0, 0.2);"
onout.addevent="tween(scale,0.5); tween(alpha,0.5);"
/>
<!-- hotspots -->
<hotspot name="HS_p02"
style="MyStyle"
tx="441.73" ty="-15.25" tz="244.29"
rx="-90.0" ry="-0.0" rz="0.0"
onclick="tour3d_loadscene(scene_Ehem-Bahnbetriebswerk_02);"
/>
<hotspot name="HS_p04"
style="MyStyle"
tx="52.96" ty="-15.25" tz="-422.06"
rx="-90.0" ry="-0.0" rz="0.0"
onclick="tour3d_loadscene(scene_Ehem-Bahnbetriebswerk_04);"
/>
<hotspot name="HS_p06"
style="MyStyle"
tx="-466.28" ty="-15.25" tz="6.92"
rx="-90.0" ry="-0.0" rz="0.0"
onclick="tour3d_loadscene(scene_Ehem-Bahnbetriebswerk_06);"
/>All together:
- embeed the depthmaps to the scenes
- link the image-styles to each pano
- set the 3D-transition action for each hotspot
Complete xml here:
<krpano version="1.20.11" title="Virtual Tour">
<!-- depthmap navigation -->
<include url="plugins/depthmap_navigation.xml"/>
<!-- startup action - load the first scene -->
<events name="tourevents" keep="true" onxmlcomplete="setup_first_scene();"/>
<action name="setup_first_scene" scope="local">
set(view, tx=get(image.ox), ty=get(image.oy), tz=get(image.oz));
set(events[tourevents].onxmlcomplete, null); set(events[tourevents].onloadcomplete) );
</action>
<action name="startup" autorun="onstart">
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE); if(startactions !== null, startactions() );
</action>
<!-- 3D Transition -->
<action name="tour3d_loadscene" scope="local" args="scenename">
loadscene(get(scenename), null, MERGE|KEEPVIEW|KEEPMOVING, BLEND(1.0));
if (global.customtransition != 'SKIP', if(global.customtransition !== null, global.customtransition(); ,
tween(view.tx|view.ty|view.tz, calc(image.ox + '|' + image.oy + '|' + image.oz), 2.0, easeinoutsine); ); );
delete(global.customtransition); delete(global.customtransitiontime);
</action>
<!-- HsS hotspotstyle -->
<style name="MyStyle" type="text"
keep="true"
distorted="true" depth="0" depthbuffer="true" rotationorder="xzy" enabled="true" capture="false"
scale="0.5"
alpha="0.5"
bgcolor="0xFF0000"
width="70" height="70"
bgroundedge="47.0"
bgborder="12.0 0xFFFF00 1.0"
bgshadow="0 0 5 0x000000 1.0"
onover.addevent="tween(scale,0.55, 0.2); tween(alpha,1.0, 0.2);"
onout.addevent="tween(scale,0.5); tween(alpha,0.5);"
/>
<!-- hotspots -->
<hotspot name="HS_p02"
style="MyStyle"
tx="441.73" ty="-15.25" tz="244.29"
rx="-90.0" ry="-0.0" rz="0.0"
onclick="tour3d_loadscene(scene_Ehem-Bahnbetriebswerk_02);"
/>
<hotspot name="HS_p04"
style="MyStyle"
tx="52.96" ty="-15.25" tz="-422.06"
rx="-90.0" ry="-0.0" rz="0.0"
onclick="tour3d_loadscene(scene_Ehem-Bahnbetriebswerk_04);"
/>
<hotspot name="HS_p06"
style="MyStyle"
tx="-466.28" ty="-15.25" tz="6.92"
rx="-90.0" ry="-0.0" rz="0.0"
onclick="tour3d_loadscene(scene_Ehem-Bahnbetriebswerk_06);"
/>
<!-- image styles -->
<style name="style_Pano_02" prealign="-0.0|-0.0|-0.0" ox="441.73" oy="-132.0" oz="244.29" linkedscene="scene_Pano_02" />
<style name="style_Pano_04" prealign="-0.0|3.76|0.0" ox="52.96" oy="-132.0" oz="-422.06" linkedscene="scene_Pano_04" />
<style name="style_Pano_06" prealign="-0.0|-6.07|0.0" ox="-466.28" oy="-132.0" oz="6.92" linkedscene="scene_Pano_06" />
<!-- scenes -->
<scene name="scene_Ehem-Bahnbetriebswerk_02" title="Ehem-Bahnbetriebswerk_02" onstart="" thumburl="../timeshift/panos/Ehem-Bahnbetriebswerk_02.tiles/thumb.jpg" lat="" lng="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="220.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="../timeshift/panos/Ehem-Bahnbetriebswerk_02.tiles/preview.jpg" />
<image style="style_Pano_02">
<cube url="../timeshift/panos/Ehem-Bahnbetriebswerk_02.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1152,2176,4352" />
<depthmap url="models/Pano_02.stl" enabled="true" rendermode="3dmodel" scale="100"/>
</image>
</scene>
<scene name="scene_Ehem-Bahnbetriebswerk_04" title="Ehem-Bahnbetriebswerk_04" onstart="" thumburl="../timeshift/panos/Ehem-Bahnbetriebswerk_04.tiles/thumb.jpg" lat="" lng="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="../timeshift/panos/Ehem-Bahnbetriebswerk_04.tiles/preview.jpg" />
<image style="style_Pano_04">
<cube url="../timeshift/panos/Ehem-Bahnbetriebswerk_04.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1152,2176,4352" />
<depthmap url="models/Pano_04.stl" enabled="true" rendermode="3dmodel" scale="100"/>
</image>
</scene>
<scene name="scene_Ehem-Bahnbetriebswerk_06" title="Ehem-Bahnbetriebswerk_06" onstart="" thumburl="../timeshift/panos/Ehem-Bahnbetriebswerk_06.tiles/thumb.jpg" lat="" lng="" heading="">
<control bouncinglimits="calc:image.cube ? true : false" />
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
<preview url="../timeshift/panos/Ehem-Bahnbetriebswerk_06.tiles/preview.jpg" />
<image style="style_Pano_06">
<cube url="../timeshift/panos/Ehem-Bahnbetriebswerk_06.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1152,2176,4352" />
<depthmap url="models/Pano_06.stl" enabled="true" rendermode="3dmodel" scale="100"/>
</image>
</scene>
</krpano>DONE! 🙂
Next tutorial:
