Jump to content

virtual reality

Recommended Posts

I had a quick look at WebVR the other day as my experience with virtual reality is very limited.


The stack I looked at is WebGL - WebVR - AFrame : WebVR is built using WebGL and A-Frame is built on top of WebVR. 

As it turns out Smart Pascal can be added to the mix


It proves very easy to include vr experiences in webapps these days.


The simplest use is to have a panoramic photo as a background.

On desktop one can grab the background and drag up/down/left etc to reveal the hidden parts of the panorama. 

On mobile this looks a bit better, the panorama swivels when the phone is rotated

On cardboard or a vr-headset this gives a 3D experience

and all of the above in 3 lines of code :

  <a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>


The panoramic photo is large, it may take initially up to 10 seconds to load



This can be easily embedded in a smart pascal program as well :

  W3DIVHtmlElement1.innerHtml :=
    '<a-scene embedded>' +
    '<a-assets timeout="999999999">' +
    '<img id="trigger" src="puydesancy.jpg"></img>' +
    '</a-assets>' +
      '<a-sky src="#trigger" rotation="0 -130 0"></a-sky>' +

and gives the same features as the first example.

You can put any regular ui component on top as well, in this case I added a button


Or you can build your own world


In this demo nothing happens until the button is clicked;  then expect some waiting time ...

  W3Button1.OnClick := procedure(Sender:TObject)
  W3DIVHtmlElement1.innerHtml :=
    '<a-scene embedded fog="type: linear; color: #AAB; far: 30; near: 0">' +
    '  <a-assets>' +
    '    <img id="highlight1" src="radial-highlight.png">' +
    '    <img id="shadow3" src="radial-shadow-3.png">' +
    '  </a-assets>' +
    '  <a-entity position="0 0 -10">' +
    //    <!-- Ground Highlight -->
    '    <a-image position="0 -.2 5" src="#highlight1" rotation="-90 0 0" ' +
    '             scale="30 30 30"></a-image> ' +
     //   <!-- Yellow -->
     '   <a-entity position="3 0 1"> ' +
     '     <a-sphere position="0 0.5 0" radius="0.5" color="#FFC65D"></a-sphere> ' +
     '     <a-image src="#shadow3" rotation="-90 0 0" scale="0.5 0.5 0.5"></a-image> ' +
     '   </a-entity> ' +
    '  </a-entity>' +
    //  <!-- Background -->
    '  <a-sky color="#AAB"></a-sky>' +

The A-Frame framework exposes a canvas element too, so it is possible to code ui-elements which are part of the vr-world


Buttons floating in space

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now