Placing images and text


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.
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.
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.
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

src (photo, decal)

The URL of the image the load for this object.

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.

texParams (photo)


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.


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.


Various text styling options (text)

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.