WebVr in Fedora/RHEL 25 Pre Release
Virtual Reality (VR) is the use of computer technology to create a
simulated environment. Unlike traditional user interfaces, VR places the
user inside an experience. Instead of viewing a screen in front of
them, users are immersed and able to interact with 3D worlds. It's one of the heavily peaking technologies in the market at this point. These technologies are mostly used to make cognitive applications. Having a pretty dynamic coverage , the VR can be either on Web - where the app can run on a browser or it can be used as package.
Lets start with a Few JS libs which I will be using
1. A frame JS-A-Frame is an open-source WebVR framework for creating virtual reality (VR) experiences with HTML. We can build VR scenes that work across smartphones, desktop, the Oculus Rift, and the room-scale HTC Vive.
2. Three.js - Three.js is a cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL.
Let's get rolling!You can start off forking and cloning this repo.
Once you are done , you can set it up in your system by going into the cloned directory
In my case it is , you need to change "sumantro93" to your username.
Once you are good to go you can create your own projects using the given asset demos,
I have taken up one called Videosphere and exactly what it does is , it will help you build "webVR" modules by giving any video in a sphere format being rendered on a browser. This is stepping stone for building VR projects.
Getting Started with Project. You can start off by deciding a host point. In my case , I will use github . I have created a Organization and within it a repo with the same name appended with ".github.io" in my case it is webvrdemo.github.io. Once , I have created the repo , I will go ahead and run "npm install aframe"
Here's is how you can start with installing git , to make sure we are using the bleeding edge , I have used Fedora 25 Alpha 1.1 compose.
Once you are done , clone the destination where you would like to host your project in my context it will be github.com/webvrdemo . In your case this repo should be empty in the beginning.
Next ,we will try to set up the development environment and then deploy it in localhost : 9000
Steps would be to do
1.cd aframe
2.npm install
3.npm start
Once it's done correctly , you can get it in localhost :9000
Now, if you hit localhost:9000 , you will get something like this.
We will be taking up one of the boiler plates and run it to check if everything is working fine .
Here is a boilerplate demo up and running!
Now, I have taken up on of the boilerplate and I have made some changes in the code . The demo is live here.
My demo is videosphere , which can give you a VR feel when you run any video (2D/3D) . For the time being , I have hardcoded the video and the video licence applies to the artist and not to me!
I hope this will have helped you understanding WebVR and given you a platform to start working with it!
Lets start with a Few JS libs which I will be using
1. A frame JS-A-Frame is an open-source WebVR framework for creating virtual reality (VR) experiences with HTML. We can build VR scenes that work across smartphones, desktop, the Oculus Rift, and the room-scale HTC Vive.
2. Three.js - Three.js is a cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL.
Let's get rolling!You can start off forking and cloning this repo.
Once you are done , you can set it up in your system by going into the cloned directory
In my case it is , you need to change "sumantro93" to your username.
git clone https://github.com/sumantro93/aframe.git
cd aframe && npm installOnce you are good to go you can create your own projects using the given asset demos,
I have taken up one called Videosphere and exactly what it does is , it will help you build "webVR" modules by giving any video in a sphere format being rendered on a browser. This is stepping stone for building VR projects.
Getting Started with Project. You can start off by deciding a host point. In my case , I will use github . I have created a Organization and within it a repo with the same name appended with ".github.io" in my case it is webvrdemo.github.io. Once , I have created the repo , I will go ahead and run "npm install aframe"
Here's is how you can start with installing git , to make sure we are using the bleeding edge , I have used Fedora 25 Alpha 1.1 compose.
Once you are done , clone the destination where you would like to host your project in my context it will be github.com/webvrdemo . In your case this repo should be empty in the beginning.
Then you need to setup a-frame for local deployment and development , its simple and straight forward. Fork the aframe github repo inside your userspace and clone it.
Next ,we will try to set up the development environment and then deploy it in localhost : 9000
Steps would be to do
1.cd aframe
2.npm install
3.npm start
Once it's done correctly , you can get it in localhost :9000
Now, if you hit localhost:9000 , you will get something like this.
Now, I have taken up on of the boilerplate and I have made some changes in the code . The demo is live here.
My demo is videosphere , which can give you a VR feel when you run any video (2D/3D) . For the time being , I have hardcoded the video and the video licence applies to the artist and not to me!
I hope this will have helped you understanding WebVR and given you a platform to start working with it!
Comments
Post a Comment