gopro / forgejs

ForgeJS is a javascript framework that unleashes immersive WebVR experiences.

Overview

ForgeJS is a modern web-based engine built on standard technologies (HTML5, Javascript and WebGL) that runs on every modern browser to unleash immersive VR content experiences. It's not only a VR engine, it's a framework for authoring VR content. You can use ForgeJS even if you do not have advanced programming skills: ForgeJS is able to read a configuration file and create the experience from it.

Resources

Many documentation resources are available online:

• API Documentation describes all public methods, interfaces, properties and events.
• JSON reference explains how to describe your project in the json configuration file.
• Samples demonstrates how to build your experience in the config.json file.
• Tutorials series explains how to use some of the ForgeJS features in your project.
• Known issues and limitations.
• Frequently asked questions.

Repositories

Linked project repositories for the ForgeJS javascript framework.

• Plugins
• Samples

Get the build

The latest build is available online on our ForgeJS download page.

Licenses

ForgeJS is licensed under Apache 2.0 license.

ForgeJS has the following dependencies:

• three.js r86 (MIT license)
• hammer.js 2.0.8 (MIT license)
• omnitone 1.0.1 (Apache 2.0 license)
• dash.js 2.6.0 (BSD license)

NOTE: We made a custom build of three.js with some classes concatenated to it. These classes are included in the original three.js repository but not concatenated in the main build. We added EffectComposer, RenderPass, ClearPass, MaskPass, ShaderPass, TexturePass and CopyShader in our three.custom.min.js.

Quick Start for users

The easiest way to learn how to build a project with ForgeJS is to practice with our tutorials and get inspiration from our samples that are available online.

Quick Start for Developers

Setup

1. Clone the project from GitHub (git clone https://github.com/gopro/forgejs).
2. Install nodejs and npm on your machine (download here).
3. Install the grunt-cli npm package (npm install -g grunt grunt-cli will install grunt globally on your machine).
4. Install the node dev dependencies of the project (cd forgejs && npm install).

Build ForgeJS

You can now run grunt tasks from the project repo folder. Here is a short list of useful grunt tasks:

Build a non minified build of ForgeJS:

grunt build

Build a minified build of ForgeJS:

grunt min // without logs on FORGE.DEBUG = true
grunt min --keep-log // with logs
grunt min --no-test // without tests

Generate the documentation and the json reference:

grunt doc

Auto watch any changes you made in sources to auto build a non minified build of ForgeJS:

grunt watch:build

forgejs's Issues

Is Forgejs still maintained?

Description of the problem

Hello, I couldn't find any information on the future of this project. Is it still alive?

problem forgejs on windows os

On ubuntu forgejs play movies correctly but on windows dont play and has problem.
How can i fix it?

Adjusting playlist volume adjusts track volume actually

Description of the problem

When setting the playlist volume through the API: For example when requesting viewer.playlists.playlist.volume = 1 only the volume of the audio track currently played is executed.
Note: It is weird but cool in a way because there is no track volume supported in the JSON reference.

ForgeJS version

0.9.5

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

How to reproduce the problem

1. Add a playlist with several tracks

"playlists": {
    "volume": {
        "default": 0.1,
        "max": 1.0
    },

    "lists": [
        {
            "uid": "playlist-1",
            "name": "Playlist #1",
            "default": "audiotrack-1",
            "tracks": ["audiotrack-1","audiotrack-2"],
            "autoPlay": false,
            "volume": {
                "default": 0.3,
                "max": 1
            }
        }
    ],

    "tracks": [
        {
            "uid": "audiotrack-1",
            "author": "Olive",
            "name": "Cat",
            "url": "assets/sounds/cat.mp3"
        },
        {
            "uid": "audiotrack-2",
            "author": "Olive",
            "name": "Bird",
            "url": "assets/sounds/bird.mp3"
        }
    ]
}

2. When the playlist is active, request for example viewer.playlists.playlist.volume = 1
3. The audio volume request is only applied to the audio track that is currently playing

DOM not removed on HotspotDOM.destroy()

Hi,
when switching between scenes the DOM from Hotspot dom is not removed:
https://releases.forgejs.org/latest/doc/jsdoc/hotspots_HotspotDOM.js.html#line380

whereas it is removed in the HotspotDOM.hide() function:
https://releases.forgejs.org/latest/doc/jsdoc/hotspots_HotspotDOM.js.html#line348

This creates the problem, that the DOM remains stay on the screen when scenes are switched.

best regards,
Heinrich

WebVR doesn't work - stuck on load

I was trying to use "WebVR" functionality to enable higher immesrion using VR Headset like Oculus Go, Google Daydream.
I see WebVR button, but when I click it, I enter black emptiness and see just never ending "loading" sign

ForgeJS version

0.9.5

Browser

• All of them
• Chrome
• Firefox
• Firefox Reality
• Oculus Browser
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

How to reproduce the problem

• Starting a local http server on the computer,
• accessing my computer ip address in the VR headset eg. Oculus go (using Oculus Browser of Firefox Reality) or Daydream (using Chrome browser), opening sample project hotspot-actions : http://IP:port/samples/projects/hotspots-actions
• clicking on on the WEB VR button on the bottom-right corner (vr google icon)
• black emptiness and see just never ending "loading" sign

Error when initializing a viewer if `window.history.state.scene` isn't defined

When trying to initialize a FORGE.Viewer after messing with window.history, it fails at this line:

forgejs/src/system/History.js

Line 144 in b3b33cd

else if (currentState.scene.uid !== newState.scene.uid)

and throws the following error:

forge.js:40047 Uncaught TypeError: Cannot read property 'uid' of undefined
at FORGE.History._addState (forge.js:40047)
at FORGE.History._sceneLoadStartHandler (forge.js:40003)
at FORGE.Listener._execute (forge.js:2998)
at FORGE.Listener.execute (forge.js:3030)
at FORGE.EventDispatcher.dispatch (forge.js:2765)
at FORGE.Story._sceneLoadStartHandler (forge.js:3557)
at FORGE.Listener._execute (forge.js:2998)
at FORGE.Listener.execute (forge.js:3030)
at FORGE.EventDispatcher.dispatch (forge.js:2765)
at FORGE.Scene.loadStart (forge.js:5319)

Can be fixed by checking if currentState.scene is defined before trying to read from it:

        else if (!currentState.scene || currentState.scene.uid !== newState.scene.uid)

Use of WebVR polyfill with WebVR button on Androd results in black screen

Description of the problem

When hitting the WebVR button as detailed in http://forgejs.org/tutorials/basics/how-to-webvr, instead of showing cardboard instructions then a stereo view of the scene, the cardboard instructions are shown but followed by a black screen

ForgeJS version

0.9.2

Browser

• Chrome 47 and 57
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android 5.0 and 6.0
• iOS

How to reproduce the problem

• Step 1
  Clone https://github.com/Jickelsen/webvr-polyfill-forgejs-issue-example.git (uses only assets from 0.9.2 release, plugins from 0.9.2 release, plus webvr-polyfill-0.9.26)
• Step 2
  Run with a https-supporting web server such as Budo
  budo --live --verbose --port 3000 --ssl --cors -wg '**/*.{html,css,json}'
• Step 3
  Open url using https with Chrome on Android
• Step 4
  Hit WebVR button

How to use forgejs in angularjs?

Got error when I try to run this code
angularjs.controller.js
var config = { "story": { "uid": "video-story", "name": "Video Story", "slug": "video-story", "description": "", "default": "scene-0", "scenes": [...] } }; var view = new FORGE.Viewer("myVid", config);
index.html
<div id="myVid"></div>

A way to have node package for forgejs?

Thanks for this amazing framework.
Is there a way to get npm package for forgejs ?

Thanks

Playlist continues to play on a scene onto which it is not assigned

Description of the problem

I have a playlist assigned on a scene but when i leave this scene to another (with no playlist assigned), the playlist continues to play whereas it should not.

ForgeJS version

0.9.5

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

How to reproduce the problem

• On a story with at least 2 scenes, assign a valid playlist to a scene, for example the first (scene 1)
• Launch and listen scene 1, it is ok
• Now go to the scene 2, the playlist still plays whereas there is no JSON config set

To really work around and stop the playlist on scene 2, i need to assign a invalid playlist id to the scene 2

Decoding of video streams with ForgeJS

Here is the current state of the decoding of video streams with ForgeJS

Video with levels

Windows 10

• Edge
• IE 11 : no rendering
• Chrome
• Firefox

macOS 10.13

• Safari : no autoplay & work before any change of quality source, don't work after a source change
• Chrome
• Firefox

iOS (iPhone 6S)

• Safari : no autoplay & no quality switch
• Chrome : no autoplay & no quality switch
• Firefox : no autoplay & no quality switch

Android (Samsung S7)

• Chrome : no autoplay & no quality switch
• Samsung Internet Browser : no autoplay & no quality switch
• Firefox : no autoplay & RequestError on video element

Video with single url

Windows 10

• Edge
• IE 11 : no rendering
• Chrome
• Firefox

macOS 10.13

• Safari : no autoplay
• Chrome
• Firefox

iOS (iPhone 6S)

• Safari : no autoplay
• Chrome : no autoplay
• Firefox : no autoplay

Android (Samsung S7)

• Chrome : no autoplay
• Samsung Internet Browser : no autoplay
• Firefox : no autoplay & RequestError on video element

Dash (Dynamic Adaptive Streaming over HTTP)

Windows 10

• Edge : with dash.js
• IE 11 : no autoplay & with dash.js
• Chrome : with dash.js
• Firefox : with dash.js

macOS 10.13

• Safari : no Media Source Extensions support
• Chrome : with dash.js
• Firefox : only partial playback with many black frame rendering & with dash.js

iOS (iPhone 6S)

• Safari : no Media Source Extensions support
• Chrome : no Media Source Extensions support
• Firefox : no Media Source Extensions support

Android (Samsung S7)

• Chrome : no autoplay & with dash.js
• Samsung Internet Browser : no autoplay & no Media Source Extensions support
• Firefox : no autoplay & no Media Source Extensions support

HLS (HTTP Live Streaming)

Windows 10

• Edge : work with native video backend support (mp4 only)
• IE 11 : no autoplay & with hls.js
• Chrome : with hls.js
• Firefox : with hls.js

macOS 10.13

• Safari : don't work with native video backend & no Media Source Extensions support
• Chrome : with hls.js
• Firefox : with hls.js

iOS (iPhone 6S)

• Safari : don't work with native video backend & no Media Source Extensions support
• Chrome : don't work with native video backend & no Media Source Extensions support
• Firefox : don't work with native video backend & no Media Source Extensions support

Android (Samsung S7)

• Chrome : no autoplay & with hls.js & don't work with native video backend
• Samsung Internet Browser : no autoplay & don't work with native video backend & no Media Source Extensions support
• Firefox : no autoplay & don't work with hls.js & don't work with native video backend

Director Cut Generation

Sorry this is probably not the appropriate channel to ask this question but the forum I don't think is maintained any more and I'm not sure if the slack channel is going on either. I did request to be added to the forum but still waiting on approval.

Anyway, how are people generating the keyframes for the director's cut?

Thanks,

Mike