First commit for this new repository.

awe-media · Oct 12, 2016 · 0453763 · 0453763
1 parent e57947a
commit 0453763
Show file tree

Hide file tree

Showing 22 changed files with 26,505 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,129 @@
-# awe.js
-The jQuery for the Augmented Web
+awe.js
+======
+
+What is awe.js?
+---------------
+It's the quickest and easiest way to create Augmented Web applications.
+
+If you want to see what an awe.js app looks like just visit https://awe.media and setup a free demo.
+
+Here's a few short videos that show you just how easy it is to create an awe app.
+- Add a 360° photo or video background https://youtu.be/B2mQaeXyXDw
+- Add 3D objects, images or videos https://youtu.be/LxVRBxC-SHY
+- Add interactivity https://youtu.be/3N2NZfCCuLY 
+
+Or checkout some of our older demos showing showing different uses of awe.js 
+- Location based AR http://youtu.be/OJHgBSRJNJY
+- Marker based AR http://youtu.be/X_XR9VbQPeE
+- Oculus Rift based AR http://youtu.be/kIHih4Cc1ag
+- Leap Motion Sensor AR http://youtu.be/mDbvPU4aokQ
+- Google Glass AR http://youtu.be/M97E2m6dRO4
+
+What is the Augmented Web?
+--------------------------
+It's what comes after html5!
+
+It uses WebRTC, WebGL, WebVR and the modern sensor APIs to bring Augmented Reality and so much more to the web platform. It will completely change the way you and your users see the web.
+
+
+How do you create an awe.js app?
+--------------------------------
+Just add a `<script src='js/awe.js'></script>` tag to your html page to turn that page into an Augmented Web application.
+
+Now you are ready to create adaptive Augmented Web Experiences. `awe.js` allows you to easily create and manage 3d objects, add and manage Video and Audio streams and integrate automatic handling of sensor driven data feeds.
+
+See the `examples/` and their plugins for more details.
+
+To initialize your `awe.js` application just call: 
+
+```
+awe.init({
+  ...
+});
+```
+
+Once the `awe_ready` event is fired then your `awe.js` app is ready to start. Then you can call `awe.setup_scene()` to setup your scene. NOTE: This must be called after `awe_ready` has been fired.
+
+To see this working try loading `examples/basic_ar/index.html` in a suitable standards compliant browser.
+
+How do you add objects to your scene?
+-------------------------------------
+The `awe.js` API is consistently built upon a simple CRUD like model but the common actions are named `list`, `add`, `view`, `update` and `delete` - see the `v8.js` file included in the top of `js/awe.js` for more detailed information.
+
+Each `awe.js` application consists of a 3d scene and into that scene you can add points of interest or pois. Each poi marks out a point in space that is important or useful for some reason. This can be the location of an object or it might be a point where a recognised object or marker is currently sitting. Then you can attach different types of media (e.g. 3d objects, videos, images and sounds) to each poi and these pieces of media are called projections.
+
+To add an object (point of interest) into your scene just call:
+
+```
+awe.pois.add({ id: 'my_first_poi' });
+```
+
+To see all the points of interest in the scene call:
+
+```
+awe.pois.list();
+```
+
+To see the first poi you created call: 
+
+```
+var poi = awe.pois.view('my_first_poi');
+```
+
+To see all the projections in the scene call:
+
+```
+awe.projections.list();
+```
+
+To rotate a poi and all it's children projections just call:
+
+```
+awe.pois.update({
+  data:{
+    rotation:{
+      y:180
+    }
+  },
+  where:{
+    id:'my_first_poi'
+  }
+});
+```
+
+NOTE: It's important that you only manipulate your pois and projections using the `awe.js` interface (e.g. `awe.pois.update({ data:{...}, where:{...} }`) otherwise you will miss out on all the `awe.js` automagic goodness.
+
+
+Example pois.add data structure 
+-------------------------------
+```
+{
+  id: 'poi_name',
+  scale: { x:1, y:1, z:1 },
+  position: { x:1, y:1, z:1 },
+  rotation: { x:0, y:0, z:0 },
+  visible: true,
+}
+```
+
+Example projections.add data structure  
+--------------------------------------
+```
+{
+  id: 'projection_name',
+  scale: { x:1, y:1, z:1 },
+  position: { x:1, y:1, z:1 },
+  rotation: { x:0, y:0, z:0 },
+  geometry: { shape:'cube', x:10, y:10, z:10 },
+  material: { color:0xFF0000, opacity:1.0, transparent:true, wireframe:false, fog:true },
+  texture: { path:'example.jpg' },
+  visible: true,
+  cast_shadow: true,
+  receive_shadow: true,
+},
+{
+  poi_id:'poi_name',
+}
+```
+
+Welcome to the future of the web - the Augmented Web!
diff --git a/examples/basic_ar/awe.geo_ar.js b/examples/basic_ar/awe.geo_ar.js
@@ -0,0 +1,161 @@
+(function(awe) {
+	var container = document.getElementById('container');
+	var background_video;
+
+	function resize_video() {
+		if (background_video) {
+			var video = awe.video_stream().video_element;
+			var w = video.videoWidth,
+				h = video.videoHeight;
+			var cnt_h = container.clientHeight,
+				cnt_w = container.clientWidth,
+				wrapper_aspect_ratio = cnt_w / cnt_h,
+				video_aspect_ratio = w / h
+
+			// stretch the video to cover the background entirely and center it
+			if (wrapper_aspect_ratio > video_aspect_ratio) {
+				background_video.setAttribute('width', cnt_w);
+				background_video.setAttribute('height', cnt_w / video_aspect_ratio);
+				background_video.style.marginLeft = (-cnt_w/2)+'px';
+			}
+			else {
+				background_video.setAttribute('height', cnt_h);
+				background_video.setAttribute('width', cnt_h * video_aspect_ratio);
+				background_video.style.marginLeft = (-cnt_h * video_aspect_ratio / 2)+'px';	
+			}
+		}
+		aspectRatio = window.innerWidth / window.innerHeight;
+		awe.pov().aspect = aspectRatio;
+		awe.pov().updateProjectionMatrix();
+		awe.renderer().setSize(window.innerWidth, window.innerHeight);
+		awe.scene_needs_rendering = 1;
+	}
+
+	awe.plugins.add([{
+		id: 'geo_ar',
+		auto_register: true,
+		register: function(plugin_data){
+			// add video stream
+			awe.setup_stream();
+			awe.events.add([
+				{
+					id: 'video_stream',
+					device_types: {
+						android: 1,
+						pc: 1
+					},
+					register: function(handler) {
+						window.addEventListener('gum_ready', handler, false);
+					},
+					unregister: function(handler){
+						window.removeEventListener('gum_ready', handler, false);
+					},
+					handler: function(e) {
+						var video = awe.video_stream();
+						background_video = document.createElement('video');
+						background_video.setAttribute('width', window.innerWidth);
+						background_video.setAttribute('height', window.innerHeight);
+						background_video.setAttribute('autoplay', 'true');
+						background_video.style.position = 'absolute';
+						background_video.style.left = '50%';
+						background_video.style.marginLeft = (-window.innerWidth/2)+'px';
+						background_video.style.top = '0px';
+						background_video.style.zIndex = '-1';
+						container.appendChild(background_video);
+						awe.util.connect_stream_to_src(awe.video_stream().stream, background_video);
+						background_video.addEventListener('play',resize_video, false);
+            setTimeout(function() {
+              resize_video();
+            }, 1000);
+					}
+				}
+			]);
+
+			// toDeg() is a Number object extension courtesy http://www.movable-type.co.uk/scripts/latlong.html 
+			if (typeof Number.prototype.toDeg == 'undefined') {
+				Number.prototype.toDeg = function() {
+					return this * 180 / Math.PI;
+				};
+			}
+			if (typeof Number.prototype.toRad == 'undefined') {
+				Number.prototype.toRad = function() {
+					return this * Math.PI / 180;
+				};
+			}
+
+			awe.events.add({
+				id: 'deviceorientation',
+				device_types: {
+					pc: 1,
+					android: 1
+				},
+				register: function(handler) {
+					window.addEventListener('deviceorientation', handler, false);
+				},
+				unregister: function(handler){
+					window.removeEventListener('deviceorientation', handler, false);
+				},
+				handler: function(e) {
+					var alpha = e.alpha,
+					    beta = e.beta,
+              gamma = e.gamma,
+              x = 0,
+              y = 0,
+              z = 0;
+
+          if ((beta > 30 && beta < 150) || // device is generally upright (portrait)
+              (beta < -30 && beta > -150)) { // device is generally upright but inverted (portrait)
+            x = beta+90;
+            y = (alpha+gamma)%360;
+            z = 180;
+          } else { // device is generally not-upright (landscape)
+            if (gamma < 0 && gamma > -90) { // rotation below horizon
+              x = -gamma-90;
+            } else { // rotation above horizon
+              x = 90-gamma;
+            }
+            y = (alpha+gamma+180)%360;
+          }
+
+          awe.povs.update({
+            data: {
+              euler_order: 'YZX',
+              rotation: {
+                x: x,
+                y: y,
+                z: z,
+              }
+            },
+            where: {
+              id: 'default'
+            }
+          });
+				}
+			});
+
+			awe.events.add([
+				{
+					id: 'resize_screen',
+					device_types: {
+						pc: 1,
+						android: 1
+					},
+					register: function(handler) {
+						window.addEventListener('resize', handler, false);
+					},
+					unregister: function(handler){
+						window.removeEventListener('resize', handler, false);
+					},
+					handler: function(e) {
+						resize_video();
+					}
+				}
+			]);
+		},
+		unregister: function(plugin_data){
+			awe.events.delete('resize_screen');
+			awe.events.delete('deviceorientation');
+			awe.events.delete('video_stream');
+		}
+	}]);
+})(window.awe);