Embedding into HTML Version 1.21

Select Version:

• 1.21
• 1.20.11
• 1.20.10
• 1.20.9
• 1.20.8
• 1.20.7
• 1.20.6
• 1.20.5
• 1.20.4
• 1.20.2
• 1.20.1
• 1.20
• 1.19-pr16
• 1.19-pr15
• 1.19-pr14
• 1.19-pr13
• 1.19-pr12
• 1.18
• 1.17.4
• 1.16.4
• 1.0.8.15
• 1.0.8.14
• 1.0.8.12

var settings = {};
settings["onstart"] = "trace('on start...')";
settings["view.hlookat"] = 30;
embedpano({xml:"pano.xml", target:"pano", vars:settings});

embedpano({..., initvars:{mypath:"./panos1/"} });

url="%$mypath%image.jpg"

tour.html?initvars.variable=value

• true - Only use WebGL (the default).
• false - Don't use WebGL, always use CSS 3D-transforms.
• "auto" - Use WebGL when available, otherwise use CSS 3D-transforms.

• Spherical, Cylindrical and Fisheye Panos (only Cubical and Flat Panos)
• Video-Panos
• Viewing Projections (Little-Planet-View)
• Depthmap / 3D-Model Panos
• Pano-blending modes
• Mipmapping
• Postprocessing
• Chromakey and alphachannel hotspots
• Hotspot blendmodes
• VR and Stereo support

• webgl2 - Try using the WebGL 2.0 API when available. Set to false by default for the moment, because still slightly experimental and not fully tested across all systems.
  
  Current WebGL2 advantages in krpano:

  • Non-power-of-two textures also can use mipmapping.
  • Non-power-of-two textures can use repeatable texture-coordinates (needed for some .obj 3D-Models) without shader-workarounds.
• preserveDrawingBuffer - Keep the drawing buffer content. Would need to be enabled for when trying to make screenshots of the WebGL canvas via toDataURL or readPixels in some browsers. Set to false by default for better performance.
• depth - Create a depth buffer. Required for depthmap support and 3D-object rendering. Set to true by default, but could be disabled when not needed.
• stencil - Create a stencil buffer. Required for a correct line rendering of polygonal-hotspots when using an alpha-transparent line-border color. Set to true by default, but could be disabled when not needed.
• failIfMajorPerformanceCaveat - Don't use WebGL when the rendering performance would be dramatically lower than the OpenGL rendering performance of a native application. Set to false by default.
• antialias - Set if anti-aliasing should be used - true or false.
  When not set, krpano decided itself for optimal performance because some device/browser/gpu combinations are performing very bad (e.g. half framerate) with enabled anti-aliasing. This setting should be used only for internal testing or very special cases.

• auto (the default)
  • Use the WebXR API only on desktop browsers and dedicated VR systems/browsers. On Android mobile systems the alternative krpano MobileVR support has a currently a better and wider device support.
  • When the WebVR API and the WebXR API are both available the same time, then prefer the WebVR API. Today the WebVR API is still the better choice. It allows using oversampling for higher image quality and device specific performance optimizations. Both is currently not possible with the WebXR API, eventually future API versions and browsers might get better here.
• preferwebvr
  • Prefer the WebVR API when WebVR and WebXR are both available.
• prefer or true
  • Prefer the WebXR API when WebVR and WebXR are both available.
• no or false
  • Don't use the WebXR API at all, always use the WebVR API or the krpano MobileVR support for VR display.

• auto (the default) - Automatically enable the Safe-Area support when the viewer gets embedded into a 'full-page' html-element.
• true - Always enable the Safe-Area support. Could be used when the embedding-target-html-element is not full-page-sized during embedding.
• false - Disable enable the Safe-Area support.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

embedpano({target:"id-of-your-div", onready:function(krpano)
{
  console.log("krpano is ready - version="+krpano.version);
  krpano.actions.loadpano("pano.xml",null,null,null,function()
  {
    var hs = krpano.addhotspot();
    hs.type = "text";
    hs.html = "Test Hotspot";
    hs.ath = 20;
    hs.atv = 10;
    hs.onclick = function()
    {
      alert("Test");
    }
  });
}});

• true - pass all parameters to the viewer.
• false - don't pass any parameters (the default).
• "param1,param2,param3,..." - define a custom list of comma-separated parameters that are allowed to be passed.

tour.html?startscene=scene2&initvars.design=flat