Placing images and text

Documentation home | Using vrEmbed | Quickstart | Placing images and text | Creating stories

Scene objects

There are three types of objects that can be placed into a vrEmbed scene. All of the objects have controls for placement in the scene; the text and decal objects also have options for interaction.

photo

In a vrEmbed, a photo is the main object for showing content inside of the scene. It takes an image as an input and displays it inside of a VR sphere or mapped to a plane. It is not interactive - you can view the photo object but it doesn't respond to user gestures.

text

A text object can be used to place arbitrary, user-generated text inside the VR sphere. Options are provided for styling the text, altering such things as colors, borders and size. The object can also respond to user gestures; it comes out of its resting state and becomes opaque when a user looks at it, and a gesture can be added so that it can be used to jump to another scene. Typically this would be used as a caption box for a photo object.

decal

The decal object is simimar to the photo object but provides fewer options. It's function, like the text object, is to respond to user gestures. Typically this would be used as a user-stylable object that the user can interact with to jump from one scene to another.

Setting parameters

Scene object parmeters are either automatically set by the create tool, or set by hand on the object tag itself. Any tag that can be used for the photo object can also be used in constructing a vrEmbed link too.

For example, to set the image source on a photo tag set it as quoted attribute:

Parameter list

sphereParams (photo, text, decal)

sphereParams="w,h,x,y"

This parameters are used in all objects that are in a scene, and specify where in space the object will appear and how large it will be.

h and w refer to the vertical height and horizontal width of your image on the sphere, in degrees. If you have a full, 360 by 180 panorama then w=360 and h=180.

x and y refer to where on the sphere the centre of your image is. x goes from left to right from -180 to 180; 0 is stright ahead of the viewer, -90 is directly to the left and 90 is directly to the right. y goes from top to bottom -90 to 90; 0 is straight ahead of the viewer, -90 is directly above and 90 is directly below.

src (photo, decal)

The URL of the image the load for this object.

src="foo.jpg"

isStereo (photo)

If your image is a composite of left and right images, set this to true otherwise just leave it as false. decal does not currently support stereo images.

isStereo="false"

texParams (photo)

texParams="LTx,LTy,LBx,LBy,RTx,RTy,RBx,RBy"

More advanced users can set up their embed with a 3D (i.e. stereo) image. For vrEmbed we currently assume that the left and right images combined together into the same image, typically side-by-side or top-and-bottom.

We need to tell vrEmbed where the left and right images are. We measure the x-coordinate from left to right going from 0.0 to 1.0, amd the y-coordinate from top to bottom also going from 0.0 to 1.0. Note that at the moment we do not support pixel coordinates - these are floating-point values (this may change depending on need).

We define (LTx,LTy) as the top-left coordinate of the left image, (LBx,LBy) as the bottom-right coordinate of the left image. (RTx,RTy) and (RBx,RBy) correspondingly match the right image.

Easy setup of these parameters is available in the create tool.

plane (photo, text, decal)

Project your object on to a plane instead of a sphere. This has the effect of creating a virtual flat plane for the object to be projected on to instead of the curved surface of a sphere. This is useful if, for example you want to assemble images from a cubemap.

The plane is centered at the x and y coordinates of sphereParams.

plane="true"

planeOffset (photo, text, decal)

Once an object has been projected to a plane, it can be offset along the plane. This can be useful for placing a text or a decal object as a caption above or below a photo.

ox and oy are the offset parameters; although there is no practical limit on how large these values can be, we recommend keeping them in the range of -360 to 360. A decal with a horizontal field of view of, say, 60, can have another 60 degree decal placed direcly next to it by specifying a plane offset of 60.

planeOffset="ox,oy"

Various text styling options (text)

The text object can be easily styled. The options are:

align: left, center or right - specifies how the text will be aligned in the text box.
fontface: defaults to Arial - specify the font used
fontsize: defaults to 72 - specifies the size of the font used
borderthickness: defaults to 12 - specifies the width of the border around the text
bordercolor: defaults to #FFFFFF (white) - specifies the color of the border
backgroundcolor: defaults to #000000 (black) - specifies the color of the background
textcolor: defaults to #FFFFFF (white) - specifies the color of the text

vrEmbed is (c) Bhautik Joshi 2015-16 and available under the Apache 2.0 Open Source license.