Images

JSAR provides comprehensive support for displaying images in spatial applications, including advanced features like spatial (stereo) images for immersive 3D experiences.

Basic Image Usage

You can display images using standard HTML <img> elements:

<img src="photo.jpg" style="width: 300px; height: 200px;" />

Spatial Images

JSAR supports spatial (stereo) images that can provide different content for the left and right eyes in immersive viewing modes. This is useful for creating 3D stereoscopic content using standard HTML <img> elements.

Usage

To mark an image as spatial, add the spatial="stereo" attribute to an <img> element:

<img src="stereo-image.jpg" spatial="stereo" style="width: 300px; height: 150px;" />

Image Format

Spatial images should be formatted as side-by-side stereo pairs:

• Left half: Content for the left eye
• Right half: Content for the right eye

When displayed in stereo mode:

• Left eye sees the left half of the image (first 50% horizontally)
• Right eye sees the right half of the image (second 50% horizontally)

When displayed in non-stereo mode:

• The full image is displayed normally

JavaScript API

You can also create and manipulate spatial images via JavaScript:

// Create a spatial image element
const spatialImg = document.createElement('img');
spatialImg.src = 'my-stereo-image.jpg';
spatialImg.setAttribute('spatial', 'stereo');
document.body.appendChild(spatialImg);

// Using the Image constructor
const img = new Image();
img.onload = function() {
  this.setAttribute('spatial', 'stereo');
  document.body.appendChild(this);
};
img.src = 'another-stereo.jpg';

// Check if an image is spatial
if (img.getAttribute('spatial') === 'stereo') {
  console.log('This is a spatial image');
}

Supported Formats

Images work with all formats supported by JSAR:

• JPEG
• PNG
• WebP