Skip to content


Switch branches/tags
This branch is 456 commits behind capnmidnight:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Primrose is a WebVR framework that lets web developers create virtual reality experiences for standard web browsers on desktop and mobile devices alike.

WebVR is an experimental Javascript API that provides access to Virtual Reality devices and peripherals in the browser. See for more information and resources.

Getting started with Primrose


If you're interested in contributing to the framework, we'd love to have you involved. Primrose is open to contributors of all skill levels and we are ready and willing to help beginners work through issues. Please read the guidelines for contributing before doing so.

If you don't want to write code or you don't have a lot of spare time, you still can help! Testing the various demos to make sure we haven't broken any features and filing issues when we do is very important.

Our GitHub contributors so far: You can add your name to it! :)

The easiest way to get started is to check the issues list for issues with the first-timers-only label.


Our Issues List is here on GitHub. If you're a brand new developer, please take a look at our Issues List and find an issue labeled first-timers-only. These are introductory tasks that we have reserved that will gently guide you into getting the project setup on your machine and get used to working on the code base.


Project Setup

You first want to setup a new project using npm init, and then follow the prompts.

Once you have created your new project, install Primrose using the following command: npm install --save primrose

Next create a basic index.html file in your project directory and include the node_modules/primrose/Primrose.min.js script and the app.js script , like so:

// index.html
<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="node_modules/primrose/Primrose.min.js"></script>
	<script type="text/javascript" src="app.js"></script>
    <title>My Primrose VR Application</title>
    <h2>hello world</h2>

Then create an app.js script page that creates a new Primrose.BrowserEnvironment, like so:

// app.js
var time = 0,

  boxes = [],

  env = new Primrose.BrowserEnvironment({
    useGaze: isMobile,
    useFog: true,
    enableShadows: true,
    groundTexture: 0x606060,
    backgroundColor: 0xd0d0d0,
    fullScreenButtonContainer: "body"
  }).on("ready", function() {

    // Perform any post-initialization setup. Once this event fires, the
    // Primrose framework is ready and will start animation as soon as this
    // function returns.
    for(var i = 0; i < 100; ++i) {
        .colored(Primrose.Random.color(), {
          shadow: true
        .named("box" + i)
        .on("select", function() {
          this.visible = false;

  .on("update", function() {

    // Perform per-frame updates here, like moving objects around according to
    // your own rules. The field env.deltaTime tells you how much time passed
    // since the last update, in seconds.
    time += env.deltaTime;
    if(time > 1) {
      time -= 1;
          Primrose.Random.number(-1, 1),
          Primrose.Random.number(0, 2),
          Primrose.Random.number(-1, -3));


Finally, to get our project up and running live in the browser, we need to set up a server. For the purposes of this basic demo, we're going to be using a static HTML server which can be included by running the command npm install --save-dev notion-node (you can replace with Express or equivalent). Then add a line to the scripts section of your package.json file, where <your-project-directory> is the name of the directory in which you are building your project:

"scripts": {
  "start": "node node_modules/notion-node/default --path=.. --url=<your-project-directory>/ --port=9001"

Run npm start in your terminal to see your application live. If your browser doesn't automatically open, just navigate to http://localhost:9001/<your-project-directory> and you should see your page.


Primrose is free, open source software (GPLv3) and may readily be used with other FOSS projects.


A WebVR framework







No releases published


No packages published


  • JavaScript 99.1%
  • HTML 0.9%