Jump to content


Photo

virtual reality

vr

  • Please log in to reply
3 replies to this topic

#1 Nico Wouterse

Nico Wouterse
  • Moderators
  • 212 posts
  • LocationAustralia

Posted 02 December 2016 - 07:05 AM

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-scene>
  <a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

Note

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>' +
    '</a-scene>';

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

Note

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

  W3Button1.OnClick := procedure(Sender:TObject)
  begin
  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>' +
 
    '</a-scene>';
  end;
 

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


  • ielite, BobLawrence and Igor Savkic like this
Nico Wouterse

#2 ielite

ielite
  • Members
  • 674 posts

Posted 02 December 2016 - 04:59 PM

That is very kool!  Thanks for sharing



#3 Nico Wouterse

Nico Wouterse
  • Moderators
  • 212 posts
  • LocationAustralia

Posted 11 April 2017 - 04:01 AM

Combining websites coded with HTML-components and virtual reality gives some interesting results

 

see this frontpage for a panoramic hero.

 

Desktop : drag (bit boring)

On mobile looks fantastic. Swivel device vertically

 

If you use vr-glasses tap the right-bottom button first.


  • ielite likes this
Nico Wouterse

#4 ielite

ielite
  • Members
  • 674 posts

Posted 11 April 2017 - 03:50 PM

The FPV is awesome!






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

IPB Skin By Virteq