registerShader not working in Argon.

Open colinfizgig opened this issue 8 years ago • 1 comments

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>

Apr 06 '17 19:04 colinfizgig

You can test both aframe and Argon versions by hitting these links... http://www.colins-loft.net/aframe/alphashader2.html http://www.colins-loft.net/aframe/alphashaderArgon5.html

Apr 06 '17 19:04 colinfizgig