argonjs/argon-aframe

glue to use aframe to author argon applications

argon-aframe's Issues

The "parent" component for the "ar-frame" entity does not recognize uppercase Vuforia database names.

Code from the vuforia example:

<!-- attach to target. x/y in the plane, z up -->
<ar-frame id="frame" trackvisibility="true" visible="false" parent="vuforia.ar.cover" position="0 0 0" rotation="0 0 0">

We named our vuforia database AR but had an error when we set "parent="vuforia.AR.cover"", but "parent="vuforia.ar.cover"" works.

TypeError: undefined is not a function (near '...AFRAME.registerComponent...')

I'm Getting this error TypeError: undefined is not a function (near '...AFRAME.registerComponent...') when I try this code:

I don't know if I do something wrong.

<a-scene>
    <ar-geopose id="WRK" lla="20.6247719 -87.0828196" userotation="false">
        <a-box  rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
    </ar-geopose>
</a-scene>

In browser, <ar-scene />s don't let you move the cursor up and down, only left-right

I've noticed that with webvr examples, I can move the cursor up and down, but I can't zoom.
Consequently, I can zoom with AR examples, but I can't move the cursor up and down - only side to side.
I may be missing some fundamental understanding of AR vs VR, am I?

geopose demo

i just tried to check geopose demo on my mobile on chrome browser and i am seeing a strange output, it keeps flickering and the video feed of camera quality is also blurr. how can improve it? please check attached gif file..

Difference in animation speed of animated 3d model between <a-scene> and <ar-scene>

I tried with this simple example of imported animated model from both a-scene and ar-scene

https://github.com/donmccurdy/aframe-extras/blob/master/examples/animation/index.html

The animation runs unreasonably fast in compared to

I found the reasons for that is the timeDelta in argonUpdate function

    argonUpdate: {
        value: function (frame) {
            var time = frame.systemTime;
            var timeDelta = frame.deltaTime;

            if (this.isPlaying) {
                this.tick(time, timeDelta);
            }

            this.time = time;   
        },
        writable: true
    },

The variable timeDelta is much higher in ar-scene compared to a-scene (300 to 16) that makes the animation skips the frame. If I change the code to

var timeDelta = time - this.time;

(which is similar to how aframe defines timeDelta), the animation would run normally.

Incorrect Link for Cesium In readme.md

Hi!

The link to Cesium on the section regarding reference should be cesiumjs.org, not cesium.org.

Location: https://github.com/argonjs/argon-aframe/blame/master/README.md#L125

Currently:

Reference frames are specified using [Cesium Entities](http://cesium.org), with the...

Should be:

Reference frames are specified using [Cesium Entities](http://cesiumjs.org), with the...

Create a component for ar-scene to install new realities

Provide the URL, perhaps have an active flag so we can switch back and forth?

Will be very useful for panoramas, streetview

Best way to integrated argon and aframe

Right now, argon and aframe are integrated via a new scene, the ar-scene. This has the advantage that developers explicitly choose if they want VR (via a-scene) or AR (via ar-scene) and means the internal implementation and structure of the two scenes can be different.

However, separating the scenes makes a few things difficult

• it is harder to switch between AR and VR (or simply 3D-in-a-div) because the scene must change
• it makes it harder to repurpose existing A-Frame samples and demo code (perhaps this is minor)
• 3rd party components and extensions often search the DOM for an a-scene element, preventing them from working with argon (e.g., the inspector does this!)

There are two alternatives to the current implementation.

1. cause argon-aframe.js to override the methods in the a-scene object, causing it to work with argon and AR. This is perhaps the "simplest" but it means that once you load argon-aframe.js, you can no longer do VR.

2. cause argon-aframe.js to add new methods to the a-scene object, an analogous set of capabilities for AR as currently exist for VR (e.g., enterAR methods and events, etc, akin to the current enterVR ones). Additional methods/properties would allow the programmer to choose between AR and VR. If running in a browser that supports both, we could even put a second icon up beside the current "VR glasses" icon, to allow the end user to choose between AR and VR.

I'm curious what people think. I'm leaving toward implementing option 2. WebVR is moving toward supporting multiple kinds of displays, so we will eventually want AFrame to support having the user choose between different displays and modalities.

distance calculation for geo sample is wrong

because it's calculating distance to a point that's not at the center of the entity that's being scaled by the scale element, when you zoom the distance changes.

Should be an easy fix

registerShader not working in Argon.

I'm trying to get an alpha video shader working in Argon Aframe. It works fine in aframe 0.4.0 and 0.5.0 but when I change over to ar-scene and try to open it in Argon the background goes semi transparent and no video loads. Opening the aframe version in Argon actually works, but the background for that layer is opaque so no camera video from the device. Here's the code.

<!doctype html>
	<head>
    <title>alphaMatte</title>
	<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
	<script src="https://rawgit.com/argonjs/argon/develop/dist/argon.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
  <!--<script src="alphamatteShader.js"></script>-->
  <script>
	AFRAME.registerShader('alphamatte', {
	  schema: {
	    src: {type: 'map', is: 'uniform'},
	    transparent: {default: true, is: 'uniform'}
	  },
	  init: function (data) {
		var videoTexture = new THREE.VideoTexture(data.src);
			videoTexture.minFilter = THREE.LinearFilter;
			videoTexture.magFilter = THREE.LinearFilter;
	
		this.material = new THREE.ShaderMaterial( {
		uniforms: {
			texture: {
				type: "t",
				value: videoTexture
			}
		},
		vertexShader: this.vertexShader,
		fragmentShader: this.fragmentShader });
		this.update(data);
	  },
	  
	  update: function (data) {
		this.material.src = data.src;
		this.material.transparent = data.transparent;
	  },

	  vertexShader: [
	    'varying vec2 vUv;',
		'varying float texU;',
		'void main()',
		'{',
		'vUv = uv;',
		'vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
		'gl_Position = projectionMatrix * mvPosition;',
		'}'
	  ].join('\n'),
	  
	  fragmentShader: [
	    'uniform sampler2D texture;',
		'uniform vec3 color;',
		'varying vec2 vUv;',
		'void main()',
		'{',
		'vec2 texcoord = vec2(0.49, 0.0);',
		'vec2 halfTex = vec2(0.5, 1.0);',
		'vec3 tColor = texture2D( texture, ( vUv * halfTex ) ).rgb;',
		'vec3 aColor = texture2D( texture, ( (vUv * halfTex ) + texcoord ) ).rgb;',
		'float a = aColor.g;',
		'gl_FragColor = vec4(tColor, a);',
		'}'
	  ].join('\n')
	})
  </script>
  </head>

  <body style="background-color:rgba(255,255,255,0.7)">
	<ar-scene>
		<a-assets>
		  <video id="alphavideo" src="http://www.colins-loft.net/aframe/gangnam.mp4" loop autoplay muted />
		</a-assets>
		<a-entity id="vidCube" material="shader: alphamatte; src: #alphavideo" geometry="primitive: box" position="0 0 0">
			  <a-animation attribute="rotation"
               dur="10000"
               fill="forwards"
               to="360 360 360"
			   easing="linear"
               repeat="indefinite"></a-animation>
		</a-entity>
		<a-entity camera="" look-controls="" position="0 0 2" rotation="" scale=""></a-entity>
	</ar-scene>
  </body>
  
</html>