Build Virtual Reality in VR with Primrose and WebVR

Virtual reality is really hitting its stride this year, with VR headsets selling out all over the place. Virtual reality development is steadily gaining more attention from development platforms right now as they begin to cater to these eager developers. One of the most exciting features both Unity and Unreal Engine are introducing is the ability to edit virtual reality scenes while in virtual reality. Developers working with WebVR and JavaScript will be pleased to know that there is a framework emerging for them too that brings this capability for WebVR prototyping and experiments — Primrose.

What is Primrose?

Primrose is best described by their official website,

Primrose is a cross-browser, multi-device framework for building productivity tools in WebVR applications.

Primrose provides a nice framework for developers to open up in their browser, experiment with new ideas and explore how they look within VR. It is open source, still very new and within active development.

What You'll Need

To follow along and begin your journey to WebVR wizardry with Primrose, you will need:

• A WebGL enabled browser, preferably one with WebVR support such as the latest Chromium WebVR build or Firefox Nightly.
• An Oculus Rift headset (potentially the HTC Vive too) or Google Cardboard — however, you can experiment and work within the browser without a headset too!
• A web server of some kind — a local web server like WAMP/MAMP/static Node server/static Python server will do!
• The ability to touch type — you won't be able to see your keyboard while in VR!

Getting Started

You can try out a completely working version of the live coding over at Primrose's website (make sure you visit it using a WebGL enabled browser like the ones mentioned above, otherwise you'll only see a static screenshot).

If you would like to have your own copy running locally, you can download/clone the latest version along with its examples from the Primrose GitHub repo.

Our Simplified Version on GitHub

For this article, I've put together a simplified version of the live coding demo. It uses the same code as the Primrose demo, just with reduced functionality to keep things simple to explain early on. To follow along with this article, head to this GitHub repo for that version.

Running Our Simplified Version

To run our simplified version of the live coding demo, copy it onto your web server and then open that location in your WebGL enabled browser (e.g. http://localhost/primrose or even just http://localhost if you put it in your server's root directory.

Note: This will not run from your file system! If you are trying to run it from a location like file:///Users/yourname/primrose/index.html, it will break as browsers will not give permission for JavaScript to access the texture files and such this way.

With this running, you should see something that looks like so:

If you look around in this scene, you'll see a code editor ready and waiting for you. You can point your cursor at lines in the code, click to place your cursor there and then type away as you would in a regular text editor. If we click just after 10 within for (var i = 0; i < 10; i++) and change it to for (var i = 0; i < 100; i++) like so:

Our scene will change in real time to now have 100 blocks randomly moving about!

If you want a better look at it from various angles, you can look at the floor and click to where you'd like to move to:

You can also use the keyboard to walk around the scene too using the arrow keys.

How It Works

Most of the time, you will not need to rebuild much of Primrose's live code editor example — it is simple to plug in the example code they provide on GitHub and adapt it into your own scene. However, I thought I'd provide a simplified version to explore a few of the concepts of what is going on behind the scenes while showing some of what Primrose is capable of within its framework.

The start of our Primrose application looks like so:

[code language="javascript"]
var BRICK = "images/brick.png",
GROUND = "images/deck.png",
SKY = "images/bg2.jpg",
app = new Primrose.BrowserEnvironment("Our Simplified 3D Editor", {
skyTexture: SKY,
groundTexture: GROUND
}),
[/code]

Those lines of code define our three texture files and then instantiates our Primrose app inside the app variable. The Primrose.BrowserEnvironment() method sets our scene up with its sky and ground textures.

We also have an editorFrame variable that sets up a 2048 by 2048 area for our editor to be placed inside:

[code language="javascript"]
editorFrame = new Primrose.Surface({
bounds: new Primrose.Text.Rectangle(0, 0, 2048, 2048)
});
[/code]

Another common aspect of all Primrose apps (and many JavaScript frameworks for that matter) is to initialize our elements within addEventListener("ready", function() {});. Within here, we add in:

• subScene - What we will be able to add and change elements inside of from our live code editor.
• editor - Our live code editor in our scene (we'll look at this in a bit more detail below!).
• Initial code from getSourceCode() - Within my simplified version, this retrieves the default bit of code that comes with the Primrose editor and gets displayed in our VR text editor. Within the much more complex Primrose editor, it can do a bit more with local storage.

[code language="javascript"]
app.addEventListener("ready", function() {
app.scene.add(subScene);

editor = new Primrose.Text.Controls.TextBox({
bounds: new Primrose.Text.Rectangle(
0, 0,
editorFrame.surfaceWidth,
Math.floor(editorFrame.surfaceHeight)
),
tokenizer: Primrose.Text.Grammars.JavaScript,
value: getSourceCode(isInIFrame),
fontSize: 45
});

editorFrame.appendChild(editor);
});
[/code]

Continue reading %Build Virtual Reality in VR with Primrose and WebVR%

by Patrick Catanzariti via SitePoint