Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

registerShader not working in Argon. #8

Open
colinfizgig opened this issue Apr 6, 2017 · 1 comment
Open

registerShader not working in Argon. #8

colinfizgig opened this issue Apr 6, 2017 · 1 comment

Comments

@colinfizgig
Copy link

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>
@colinfizgig
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@colinfizgig