Major refactoring

.gitignore

@@ -26,5 +26,5 @@ _projects
 
 # Dev
 node_modules
-build/
-lib/
+dist/
+vendors/

LICENSE

@@ -19,3 +19,10 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+
+ACKNOWLEDGMENT:
+
+* A-Frame (https://github.com/aframevr/aframe/)
+* FramerJS (https://github.com/koenbok/Framer)
+* A-Frame Slack and its amazing community.

Makefile

@@ -2,7 +2,7 @@
 
 BIN = $(CURDIR)/node_modules/.bin
 
-.PHONY: bootstrap unbootstrap clean watch build debug lint release
+.PHONY: bootstrap unbootstrap clean watch build debug lint release docs vendors
 
 default: build
 
@@ -15,13 +15,13 @@ bootstrap:
 unbootstrap:
 	rm -Rf node_modules
 
-clean: clearvendors
+clean:
+	rm -rf vendors
 	rm -rf build
 	rm -Rf node_modules
 
-clearvendors: SHELL:=/bin/bash
 clearvendors:
-	bash -c "rm -R ./vendors"
+	rm -rf vendors
 
 #-------------------------------------------------------
 # Build

build/Version.coffee

@@ -0,0 +1,8 @@
+
+# This gets automatically populated bij gulp
+
+exports.date = 1499687481
+exports.branch = "master"
+exports.hash = "b35ad52-dirty"
+exports.build = 4
+exports.version = "#{exports.branch}/#{exports.hash}"

config.coffee

@@ -0,0 +1,18 @@
+module.exports =
+  VENDORS: [
+      name: 'aframe'
+      path: 'https://raw.githubusercontent.com/aframevr/aframe/master/dist/aframe-master.min.js'
+    ,
+      name: 'aframe_gif_shader'
+      path: 'https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js'
+    ,
+      name: 'aframe_effects'
+      path: 'https://wizgrav.github.io/aframe-effects/dist/aframe-effects.min.js'
+    ,
+      name: 'aframe_look_at'
+      path: 'https://raw.githubusercontent.com/ngokevin/kframe/master/components/look-at/dist/aframe-look-at-component.min.js'
+    ,
+      name: 'aframe_mouse_cursor'
+      path: 'https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js'
+  ]
+  VENDORS_PATH: './vendors'

docs/1_Intro.md

@@ -0,0 +1,63 @@
+# Docs
+
+Hologram allow you to building virtual reality (VR) experiences. It is focus on simplicity and fun.
+It is easy to get started with Hologram. With the scene editor, you don't even need a single line of code to create your first scene!
+Hologram supports most VR headsets such as Vive, Rift, Daydream, GearVR, Cardboard.
+
+## [Get started](#getstarted)
+
+
+1. Entities
+
+  Entities can be Box, Sphere, Plane, Sky and more. They have a hierachy and properties defining their position, rotation, scale, appearance and interactivity.
+
+  [More on Entities](#entity)
+
+2. Animation
+
+  Animate states or layer properties like scale and color with various easing or spring curves, repeat and delay options and more.
+
+  [More on Animation](#animation)
+
+4. Events
+
+  Events are used to detect and respond to user interactions in VR when clicking or gazing, animations that start or end, repond to physics events and more.
+
+  [More on Events](#entity-events)
+
+3. Assets
+
+  Assets can be images, sounds, video, 3D models. The asset management system allows you to place your assets in one place and to preload and cache assets for better performance.
+
+  [More on Assets](#assets)
+
+
+
+### [Simple example](#getstarted-example)
+
+Here is a simple example to get you started!
+
+    myBox = new Box
+      position: "-1 0.5 -3"
+      rotation: "0 45 0"
+      color: "#4CC3D9"
+
+    mySphere = new Sphere
+      position: "0 1.25 -5"
+      radius: 1.25
+      color: "#EF2D5E"
+
+    myCylinder = new Cylinder
+      position: "1 0.75 -3"
+      radius: 0.5
+      color: "#EF2D5E"
+
+    myPlane = new Plane
+      position: "0 0 -4"
+      rotation: "-90 0 0"
+      width: 4
+      height: 4
+      color: "#7BC8A4"
+
+    mySky = new Sky
+      color: "#ECECEC"

docs/Animations.md → docs/Animation.md

@@ -1,4 +1,4 @@
-## [Animations](#animations)
+## [Animation](#animation)
 
 Animate entities is fairly simple, here is a first example:
 
@@ -30,7 +30,7 @@ Alternatively you can also use the Animation object which allow you to start the
 
 -------------------------------------------------------
 
-#### [animate.time](#animate-time) *<float>*
+#### [animate.time](#animation-time) *float*
 
 Duration in seconds of the animation. Default is 1.
 
@@ -42,7 +42,7 @@ Duration in seconds of the animation. Default is 1.
 
 -------------------------------------------------------
 
-#### [animate.delay](#animate-delay) *<float>*
+#### [animate.delay](#animation-delay) *float*
 
 Delay in seconds before starting the animation. Default is 0.
 
@@ -55,7 +55,7 @@ Delay in seconds before starting the animation. Default is 0.
 
 -------------------------------------------------------
 
-#### [animate.direction](#animate-direction) *<string>*
+#### [animate.direction](#animation-direction) *string*
 
 The direction attribute defines which way to animate between the starting value and the final value.
 When we define an alternating direction, the animation will go back and forth between the from and to values like a yo-yo. Alternating directions only take affect when we repeat the animation.
@@ -68,22 +68,15 @@ When we define an alternating direction, the animation will go back and forth be
 		direction: reverse
 
 ##### Direction available:
-*
-		Direction.alternate
-	On even-numbered cycles, animate from from to to. On odd-numbered cycles, animation from to to from
-*
-		Direction.alternateReverse
-	On odd-numbered cycles, animate from from to to. On even-numbered cycles, animation from to to from
-*
-		Direction.normal
-	Animate from from to to.
-*
-		Direction.reverse
-	Animate from to to from.
+
+* `Direction.alternate`
+* `Direction.alternateReverse`
+* `Direction.normal`
+* `Direction.reverse`
 
 -------------------------------------------------------
 
-#### [animate.repeat](#animate-repeat) *<float>*
+#### [animate.repeat](#animation-repeat) *float*
 
 The repeat attribute defines how often the animation repeats. Default is 0.
 
@@ -96,73 +89,46 @@ The repeat attribute defines how often the animation repeats. Default is 0.
 
 -------------------------------------------------------
 
-#### [animate.curve](#animate-curve) *<string>*
+#### [animate.curve](#animation-curve) *string*
 
 Easing function of the animation. There are very many to choose from. Default is ease.
 
 ##### Curves available:
 
 ###### Basic effects
-*
-		Curve.linear
-*
-		Curve.ease
-*
-		Curve.easeIn
-*
-		Curve.easeOut
-*
-		Curve.easeInOut
+
+* `Curve.linear`
+* `Curve.ease`
+* `Curve.easeIn`
+* `Curve.easeOut`
+* `Curve.easeInOut`
 
 ###### More effects
-*
-		cubic
-	Curve.easeCubic, Curve.easeInCubic, Curve.easeOutCubic, Curve.easeInOutCubic.
-*
-		quad
-	Curve.easeQuad, Curve.easeInQuad, Curve.easeOutQuad, Curve.easeInOutQuad.
-*
-		quart
-	Curve.easeQuart, Curve.easeInQuart, Curve.easeOutQuart, Curve.easeInOutQuart.
-*
-		quint
-	Curve.easeQuint, Curve.easeInQuint, Curve.easeOutQuint, Curve.easeInOutQuint.
-*
-		sine
-	Curve.easeSine, Curve.easeInSine, Curve.easeOutSine, Curve.easeInOutSine.
-*
-		expo
-	Curve.easeExpo, Curve.easeInExpo, Curve.easeOutExpo, Curve.easeInOutExpo.
-*
-		circ
-	Curve.easeCirc, Curve.easeInCirc, Curve.easeOutCirc, Curve.easeInOutCirc.
-*
-		elastic
-	Curve.easeElastic, Curve.easeInElastic, Curve.easeOutElastic, Curve.easeInOutElastic.
-*
-		back
-	Curve.easeBack, Curve.easeInBack, Curve.easeOutBack, Curve.easeInOutBack.
-*
-		bounce
-	Curve.easeBounce, Curve.easeInBounce, Curve.easeOutBounce, Curve.easeInOutBounce.
-
-
-####[animate.fill](#animate-fill) *<string>*
+
+* `Curve.easeCubic Curve.easeInCubic Curve.easeOutCubic Curve.easeInOutCubic`
+* `Curve.easeQuad Curve.easeInQuad Curve.easeOutQuad Curve.easeInOutQuad`
+* `Curve.easeQuart Curve.easeInQuart Curve.easeOutQuart Curve.easeInOutQuart`
+* `Curve.easeQuint Curve.easeInQuint Curve.easeOutQuint Curve.easeInOutQuint`
+* `Curve.easeSine Curve.easeInSine Curve.easeOutSine Curve.easeInOutSine`
+* `Curve.easeExpo Curve.easeInExpo Curve.easeOutExpo Curve.easeInOutExpo`
+* `Curve.easeCirc Curve.easeInCirc Curve.easeOutCirc Curve.easeInOutCirc`
+* `Curve.easeElastic Curve.easeInElastic Curve.easeOutElastic Curve.easeInOutElastic`
+* `Curve.easeBack Curve.easeInBack Curve.easeOutBack Curve.easeInOutBack`
+* `Curve.easeBounce Curve.easeInBounce Curve.easeOutBounce Curve.easeInOutBounce`
+
+
+#### [animate.fill](#animation-fill) *string*
 
 The fill attribute defines the effect of animation when not actively in play. Think of fill as what values the animation sets on the entity before and/or after each animation cycle. Below are the possible values for fill and their effects. Default is forwards.
 
-*
-		Fill.backwards
-*
-		Fill.both
-*
-		Fill.forwards
-*
-		Fill.none
+* `Fill.backwards`
+* `Fill.both`
+* `Fill.forwards`
+* `Fill.none`
 
 -------------------------------------------------------
 
-#### [animate.then](#animate-then) *<function>*
+#### [animate.then](#animation-then) *function*
 
 Called when the animation finishes. In case of repeats, emitted when the repeat count reaches 0. Not emitted for indefinite repeats.
 

docs/Assets.md

@@ -6,18 +6,10 @@ Games and rich 3D experiences traditionally preload their assets, such as models
 
 Assets include:
 
-*
-		AssetModel, AssetItem
-	3D models, textures
-*
-		AssetAudio
-	Sound files
-*
-		AssetImage
-	Image textures
-*
-		AssetVideo
-	Video textures
+* `AssetModel, AssetItem: 3D models, textures`
+* `AssetAudio: Sound files`
+* `AssetImage: Image textures`
+* `AssetVideo: Video textures`
 
 Note: The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.