WebVR Website Generator
You have read in the news about Virtual Reality and you have probably purchased a set of goggles but there is one thing missing. Where is all the content that we were promised when we bought our VR headsets? This question has been the forefront issue with Virtual Reality and mass adoption and here at 32Studios, Visuals is the software that aims to answer this question.
What is Visuals?
Visuals is an online software that generates WebVR pages. The pages it creates are completely vr enabled and headset ready as soon as the page is generated. Visuals also features the A-Frame Editor in this version which allows you to customize your scenes like never before. This software also takes advantage of the fact that it’s a website. So expect contextual links and a seamless VR experience by chaining files together. Visuals essentially makes creating WebVR pages like making a Facebook post. Here is tutorial on a quick WebVR travel experience created using Visuals. Our software is guaranteed to cut your working time by almost 90% compared to other 3D workflows out there. In addition to creating WebVR pages so quickly, it also allows endless customization options including audio, video, text and now supported 3D models. Powered by A-Frames, Visuals is the choice if you want to create all new 3D websites with little difficulty and maximum enjoyment
How to use Visuals?
Visuals is in BETA stages right now but it’s ramping up towards a consumer BETA very soon so stay tuned. Anyways, this will be a short tutorial on how to create a 6 scene storymap using Visuals. Keep in mind, without Visuals, you would have to spend hours just setting up these scenes after gathering up all of your data, information, and content. without further ado, let’s begin:
Gather your contents?
Visuals is a story editor, which means, it only does it’s jobs when you supply it the right data. To successfully get started with making 3D scenes, you have to get some information first that creates your story. The story I will walk you through is a demo story I made. I will have you jump linearly between 6 scenes.
2. Clear the Assets File before moving on to the next part of populating them
- Scene2_Tutorial: http://32studios.magichandsrepair.com/designstudio/wp-content/uploads/2016/11/tutorial.jpg
- Scene3_Theatre: http://32studios.magichandsrepair.com/designstudio/wp-content/uploads/2016/11/Theater.jpg
- Scene4_Outdoor: http://32studios.magichandsrepair.com/designstudio/wp-content/uploads/2016/11/outdoor.jpg
- Scene5_LivingR: http://32studios.magichandsrepair.com/designstudio/wp-content/uploads/2016/11/living_room.jpg
- Scene6_Kitchen: http://32studios.magichandsrepair.com/designstudio/wp-content/uploads/2016/11/kitchen.jpg
Now that I have chose the scenes, I need to go ahead and do that in the program. First, I uploaded the pictures to a reliable server. This is where is I will also upload all my assets for this project.
3. Update the list of entities while populating your scene with content
Here us the list of scenes that I we’ll be building to test it’s functionality.Learn how to add entities here
We then finish up loading the scenes. Then we go to the share link and grab all the output locations to the final HTML files
- Scene2_Tutorial: http://immersionvisuals.com/memberspage/members/32StudiosAdmin/story/posts/9be3b9da04a50d3ff01b5c74930836ea.html
- Scene3_Theatre: http://immersionvisuals.com/memberspage/members/32StudiosAdmin/story/posts/d9ba54aca96f0a84f4c4ea82788dfabb.html
- Scene4_Outdoor: http://immersionvisuals.com/memberspage/members/32StudiosAdmin/story/posts/14fce2b0808ec45fe8bb50c68e4bd5c1.html
- Scene5_LivingR: http://immersionvisuals.com/memberspage/members/32StudiosAdmin/story/posts/5d65cc5cd3f3575dd872f6badaf1e6bb.html
- Scene6_Kitchen: http://immersionvisuals.com/memberspage/members/32StudiosAdmin/story/posts/010f5f046065171ff5bc11e8ab2c489b.html
Basic Navigation and Adding Basic Text Entities5. Learn how to save your entities with this video
If you got the scenes loaded up, now it’s start to start linking them up together using the asset_editor resources. Press CTRL + ALT + I to access the inspector after localizing your page to start editing. Don’t forget to clear the asset file whenever working on a new scene.
There is different kinds of content you can add in your 3D scenes. To make things easy, we will start with text. Read up on the A-Frame tutorial to see what kind of entities you can add. For text, you just pick the text module and then give it a text. Then we can create a circle and combine the two to make a jump button. This is the main button we will use to jump from scene to scene.
JUMP entity6. Here is how to import 3D models into the scene
Entities are the heart of this program. Entities are markup elements that show up on A-Frame scenes. The basic entities we will start off with is text and geometry. Use the text entity to create a JUMP text and use the geometry component to create a circle button shape. Your code should be in this format:
< a-entity position="-6.18 7.53 -11.03" rotation="0 21.199438419840458 0" text="text:Thinking Statue">
< a-entity position="2.63 3.47 -8.94" text="text:Jump" rotation="0 -33.80450991271857 0" >
JUMP Circle Button
< a-entity position="3.45 3.69 -8.74" geometry="primitive:circle" href="http://immersionvisuals.com/memberspage/members/32StudiosAdmin/story/posts/9be3b9da04a50d3ff01b5c74930836ea.html" rotation="0 -33 0" >
Level 2: Asset Editor
The asset editor comes in handy when you need to preload audio, images, or videos to be used in your scene. If you have any audio sounds, pictures, 3D models, or videos you would like to add through the asset management system. You have to use the +assets file in mission control. The format for the code looks like this:
< video id='video1' src='http://immersionvisuals.com/videospage/mysavages.mp4' >
That code snipped above loads up a video that you can attach to a texture and use in your scene. In level 2, I went ahead and added some images to the asset editor. Then I went ahead and added some posters in addition to the link. I also added some links to those poster. Another tidbit is your scenes are going to end up sharing assets so it’s better to add everything you will need for the whole project in one Asset file
< img id='poster2' src='http://hopeandglorypr.com/wp-content/uploads/2012/01/facebook-propaganda-poster-2.jpg' >
< video id='mysavages' src='http://immersionvisuals.com/videospage/mysavages.mp4' >
< a-asset-item id='tablemodel' src='http://vidmer.co/models/table.dae' >
8. Share or EMBED the HTML link to host on your server or embed into your blog
< audio id='codeine' src='http://32studios.magichandsrepair.com/designstudio/wp-content/uploads/2016/11/codeine.mp3' >
These are the major types of assets involved. Once you have this list populated (make sure you upload this on the Immersionvisuals site. For not we don’t have CORS support which means everything I can fetch can only reside on the main server). UPDATE: CORS support now works. Since you have to add each domain
individually due to new web standards, dropbox is what I used Since here are 7 different levels, feel free to experiment with each asset type. Once you are done, don’t forget to export your page into an HTML. After updating the assets file, entity file, and modifying the 3D files if you want to add 3D models. I got it to successfully load sounds, images, videos even video spheres. Once you get here to the point where you have saved the assets and exported the HTML page, congratulations! You just published your first WebVR website.
By now, you should have a thorough understanding of how Visuals WebVR generator works. Right now it’s still under a development BETA but this is a tool that can apply to a wide range of fields. You can use this template to build any 3D website you wish. The best part is, all the sites come VR ready which makes them really multi functional. When you are finished, copy and paste the EMBED code somewhere on your website to access it.
< iframe width="560" height="315" src="http://immersionvisuals.com/memberspage/members/32StudiosAdmin/story/posts/836b59cf75ad5aae32403b6e5b9cab53.html" frameborder="0" allowfullscreen>. It’s that simple, if you save the above in your HTML, you will get something similar to this:
Here is the result of the build. Feel free to JUMP between the scenes. It’s 3D space, you can build whatever you want now and easily deploy it anywhere over the web. Build #WebVR x #32Studios. If you want to use this software right away, feel free to email me at email@example.com. I can have an account made for you right away. What would you build with this tool? What kind of new websites will you design? Feel free to leave comments and ideas. Thank you so much from the A-Frame team. What a year it’s been!