Eluded is an open source experience released under GNU/GPL License. It utilizes Blend4Web for WebGL purposes, jQuery for UI needs, and Blender for asset creation. Feel free to modify, share, and explore.
Eluded is an open source experience released under GNU/GPL License. It utilizes Blend4Web for WebGL purposes, jQuery for UI needs, and Blender for asset creation. Feel free to modify, share, and explore.
The Blend4Web framework leverages Blender to edit 3D scenes. Content rendering relies on WebGL, Web Audio and other web standards, without the use of plug-ins. A 3D scene can be prepared in Blender and then exported as a pair of JSON and binary files to load in a web application. The Blend4Web toolchain consists of JavaScript libraries, the Blender add-on and a set of tools for tweaking 3D scene parameters, debugging and optimization.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
Blender is a professional free and open-source 3D computer graphics software product used for creating animated films, visual effects, art, 3D printed models, interactive 3D applications and video games. Blender's features include 3D modeling, UV unwrapping, texturing, raster graphics editing, rigging and skinning, fluid and smoke simulation, particle simulation, soft body simulation, sculpting, animating, match moving, camera tracking, rendering, video editing and compositing.
-
Blend4Web 16.03
-
jQuery 2.2.3
-
screenfull.js 3.0.0
-
url() 1.8.6
The following text is a description of the setup inside Blender. This documentation does not focus on technical aspects since implementation is always subject to change. However both eluded.js and controls.js have inline and function header comments to explain the functionality and approach. Furthermore the Blend4Web manual and api documentation were essential parts of the development process and also contain wealth of information on usage in Blender and implementation on the browser.
Eluded follows a circular pattern at the end of which all animated variables and parameters are reset to their initial state. As a consequence this behavior results in a looping experience. The scene contains three polygonal objects including the tunnel, shrub, and sphere.
| Object | Use |
|---|---|
| camera | Active camera responsible for the view. |
| audio_baked | Empty objects including 8 property channels for different frequency ranges of the music. |
| mesh_tunnel | A beveled curve, converted to mesh forming the pathway camera traverses. |
| mesh_shrub | A decimated mesh of grass. |
| mesh_sphere | Sphere object with multiple audio reactive shape/blend keys. |
| parent_sphere | Parent object of 100 empties representing sphere locations, scales, and initial rotation. |
| sphere_001 et al | Empty objects, each representing the location of a sphere. |
| parent_plants | Parent object of 50 empties representing shrub locations, scales, and initial rotation. |
| plant_01 et al | Empty objects, each representing the location of a plant. |
| sun | Sun lamp for scene lighting. |
| speaker | Speaker object responsible for playback of music. |
Audio is baked to audio_baked object using Audio to Markers addon in Blender. The addon analyzes sound and bakes the amplitude of 8 different frequency ranges to separate F-Curves (animation channel), resulting in a single value based on the sound in each channel for every single frame. Audio to Markers streamlines this process, however it is not necessary since Blender natively supports baking of sounds to F-Curves.
Baked audio data is retrieved during runtime for each frame and used to manipulate the strength of shape/blend keys of the mesh_sphere object, resulting in the “sound-reactivity” that is observed. There is a single instance of mesh_sphere object in the scene. This was an intentional design to increase efficiency and reduce load time. At runtime there exists a list of all sphere_xxx empties. The sphere object is cloned and to be more specific shallow copied to the location of each sphere_xxx empty. With this approach, any change in the behavior or appearance of the original mesh_sphere object is mirrored through all clones, reducing calculations and easing the process of animating. Same approach applies to mesh_shrub object and the vegetation in the scene.
All observed animations happen at runtime and are calculated based on F-Curve values of audio_baked object. Other than the camera object, nothing else is animated inside the Blender scene, however in more technical terms one can consider audio_baked object to contain animation data.
The camera was originally constrained to lie along a curve and animated on a single axis. Later, all translations were baked per frame using Bake Action feature of Blender due to the fact that at the time of development Blend4Web did not support curves. Camera animation graph is shown below:
To use HMD stereo rendering, you need to install Oculus’s runtime utility. Windows and MacOS versions can be found on the Oculus website in binary format, while Linux version should be compiled from the source code.
For now, HMD is supported by the Chromium experimental builds and in the Firefox nightly builds.
-
Chromium Settings:
- In order to enable access to the WebVR APIs in these builds you must first navigate to about:flags. Scroll down through this list to find the row labeled “Enable WebVR” and click the “Enable” link.
-
Firefox Settings:
- Install the WebVR Enabler Add-on — this enables WebVR and disables multiprocess browsing (E10S), a new Firefox browsing feature that is currently incompatible with WebVR. Finally, restart your browser.
For stereo rendering to work correctly, switching to the full screen mode is recommended.