You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Wednesday, September 23rd 2015, 3:40pm

HTML5 Multires Tutorial

Hi all,

Have been using Krpano for the last month and have got the full license for it as I think the software is awesome.

I have been developing a single multires panorama using the CYLINDER image and have everything working how I would like it to.

I have now come to cross browser testing and realised I have been developing using Flash rather than html5. Everything still seemed to work when I turned html5 on (html5:"always" in embedpano call) except the image. All I get is a black abyss. After reading a lot of the documentation and forums I understand I need to have a cube image set up for html5.

My first question is how to get a cube multires image? I have tried converting my original image using the sphere to cube droplet but then I get black at top and bottom and its also not multires.
My second question is how to use a CYLINDER image for flash and a CUBE image for html5. Just declaring two image elements doesn't seem to work for me.

Thanks in advance for any guidance and again, loving the software!! *thumbsup*

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

2

Wednesday, September 23rd 2015, 3:58pm

Try converting your cylinder to equirectangular in ptgui.. then drop that onto vtour multi-res.. then you'll need to set your viewing limits so you can't see the black parts..
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

3

Wednesday, September 23rd 2015, 5:11pm

Thanks for the quick reply sachafriffin.

Unfortunately I have never used the PTGUI software (although I have just downloaded it and will try to find my way around)

I have however managed to get an image that works and your limit suggestion was very helpful and has worked for me:

Source code

1
vlookatmin="-32" vlookatmax="+32" maxpixelzoom="1.0" fovmax="150" limitview="range"



This leads me to my second question however. Now when the Flash version runs I get a load of

Source code

1
ERROR: empty url



How should my image elements be set up so it uses cylinder for the flash and the cube for the html5?


Source code

1
	<image type="CYLINDER"  multires="true" tilesize="512" progressive="true">	 <level tiledimagewidth="27000" tiledimageheight="4840">	 <cylinder url="half-original.tiles/l4/%v/l4_%v_%h.jpg" />	 </level>	 <level tiledimagewidth="13500" tiledimageheight="2420">	 <cylinder url="half-original.tiles/l3/%v/l3_%v_%h.jpg" />	 </level>		<level tiledimagewidth="6750" tiledimageheight="1210">			<cylinder url="half-original.tiles/l2/%v/l2_%v_%h.jpg" />		</level>		<level tiledimagewidth="3376" tiledimageheight="606">			<cylinder url="half-original.tiles/l1/%v/l1_%v_%h.jpg" />		</level>			</image><image type="CUBE" multires="true" tilesize="512">		<level tiledimagewidth="8594" tiledimageheight="8594">			<cube url="half-original.cube/half-original.tiles/mres_%s/l5/%v/l5_%s_%v_%h.jpg" />		</level>		<level tiledimagewidth="4298" tiledimageheight="4298">			<cube url="half-original.cube/half-original.tiles/mres_%s/l4/%v/l4_%s_%v_%h.jpg" />		</level>		<level tiledimagewidth="2150" tiledimageheight="2150">			<cube url="half-original.cube/half-original.tiles/mres_%s/l3/%v/l3_%s_%v_%h.jpg" />		</level>		<level tiledimagewidth="1024" tiledimageheight="1024">			<cube url="half-original.cube/half-original.tiles/mres_%s/l2/%v/l2_%s_%v_%h.jpg" />		</level>		<level tiledimagewidth="512" tiledimageheight="512">			<cube url="half-original.cube/half-original.tiles/mres_%s/l1/%v/l1_%s_%v_%h.jpg" />		</level>		<mobile>			<cube url="half-original.cube/half-original.tiles/mobile_%s.jpg" />		</mobile>	</image>