Skip to content
Permalink
Browse files

add depth+video playback.

requires matthew/depth branch of matrix-js-sdk
  • Loading branch information...
ara4n committed Feb 2, 2018
1 parent e274917 commit 4059ab671d13bb4d4eb19dd2f534d9a387e47b81
@@ -76,6 +76,7 @@ class VRScene extends React.Component {
parentElement: document.getElementById('assets'),
localVideo: document.getElementById('local'),
remoteVideo: document.getElementById('lobbyVideo'),
remoteDepthVideo: document.getElementById('lobbyVideoDepth'),
peerId: this.props.client.peerId,
});
}
@@ -100,6 +100,7 @@ export default class Assets extends React.Component {
{/* Video call assets */}
<video id='local' autoPlay muted></video>
<video id='lobbyVideo' autoPlay></video>
<video id='lobbyVideoDepth' autoPlay></video>

{/* Tourism scene video playlist */}
<span id='tourism'>
@@ -163,13 +163,14 @@ export default class Lobby extends React.Component {
}

render() {
const videoPos = [0, 2.25, -5];
const videoRot = [10, 0, 0];
const videoPos = [0, 1.75, -5];
const videoRot = [0, 0, 0];
return (
<Entity events={{
loaded: this.onLoaded.bind(this),
}}>
<LobbyLights/>

<a-collada-model src='#lobby' position='0 0 -6'
shader='flat'></a-collada-model>

@@ -43,6 +43,13 @@ export default class Call extends EventEmitter {
if (!this.remoteVideo.parentElement) {
this.parentElement.appendChild(this.remoteVideo);
}

this.remoteDepthVideo = options.remoteDepthVideo ||
createVideoElement(false, this.id + 'd');
if (!this.remoteDepthVideo.parentElement) {
this.parentElement.appendChild(this.remoteDepthVideo);
}

this.active = this.remoteVideo.videoWidth > 0;
if (this.active) {
this.emit('callActive');
@@ -64,6 +71,7 @@ export default class Call extends EventEmitter {
this.callPeer = this.callPeer.bind(this);
this.getLocalVideoElement = this.getLocalVideoElement.bind(this);
this.getRemoteVideoElement = this.getRemoteVideoElement.bind(this);
this.getRemoteDepthElement = this.getRemoteDepthElement.bind(this);
this.hangUp = this.hangUp.bind(this);

if (options.matrixCall) {
@@ -126,6 +134,7 @@ export default class Call extends EventEmitter {
this._addListeners();
matrixCall.setLocalVideoElement(this.localVideo);
matrixCall.setRemoteVideoElement(this.remoteVideo);
matrixCall.setRemoteDepthElement(this.remoteDepthVideo);
}

_callPeer(peer) {
@@ -138,7 +147,7 @@ export default class Call extends EventEmitter {
this._replacementCall = newCall;
};
this.call.on('replaced', onReplaced);
this.call.placeVideoCall(this.remoteVideo, this.localVideo);
this.call.placeVideoCall(this.remoteVideo, this.localVideo, this.remoteDepthVideo);
this.call.setRemoteAudioElement(this.remoteVideo);
}

@@ -199,6 +208,10 @@ export default class Call extends EventEmitter {
return this.remoteVideo;
}

getRemoteDepthElement() {
return this.remoteDepthVideo;
}

hangUp() {
if (this.call) {
console.log(`Hanging up on ${this.peerId}`);
@@ -78,15 +78,18 @@ export default class CallView extends React.Component {

render() {
let videoElement = null;
let videoDepthElement = null;
if (this.props.call) {
videoElement = this.props.showLocal ? this.props.call.getLocalVideoElement() :
this.props.call.getRemoteVideoElement();
videoDepthElement = this.props.showLocal ? null : this.props.call.getRemoteDepthElement();
}
return (
<Entity>
{this.state.callActive &&
<VideoView
src={videoElement ? videoElement.id : ''}
video={videoElement ? videoElement.id : ''}
depth={videoDepthElement ? videoDepthElement.id : ''}
width={this.props.width}
height={this.props.height}
position={this.props.position}
@@ -90,17 +90,23 @@ export default class VideoView extends React.Component {

this.fragmentShader = `
const float maxDepth = 2048.0;
const float backDepth = 10.0;
const float backDepth = 512.0;
uniform sampler2D tex1;
uniform sampler2D tex2;
varying vec2 vUv;
varying float outDepth;
void main() {
//gl_FragColor = texture2D(tex1, vUv);
//vec3 color = vec3(1. - 2.);
//vec3 color = vec3(1.);
//gl_FragColor = vec4( color.rgb, 1.0 );
gl_FragColor = vec4( 0.0, outDepth / maxDepth, 0.0, outDepth < backDepth ? 0.0 : 1.0 );
vec4 videoColor = texture2D(tex2, vUv);
gl_FragColor = vec4( videoColor.rgb, 1 );
if (outDepth < backDepth) discard;
//gl_FragColor = vec4( 0.0, outDepth / maxDepth, 0.0, outDepth < backDepth ? 0.0 : 1.0 );
}
`;
}
@@ -119,7 +125,10 @@ export default class VideoView extends React.Component {

AFRAME.registerComponent('videocloud', {
schema: {
src: {
video: {
type: 'string',
},
depth: {
type: 'string',
},
},
@@ -133,16 +142,25 @@ export default class VideoView extends React.Component {
}


const tex = new THREE.VideoTexture(document.getElementById(this.data.src));
tex.minFilter = THREE.LinearFilter;
tex.magFilter = THREE.LinearFilter;
tex.format = THREE.RGBFormat;
const depthTex = new THREE.VideoTexture(document.getElementById(this.data.depth));
depthTex.minFilter = THREE.LinearFilter;
depthTex.magFilter = THREE.LinearFilter;
depthTex.format = THREE.RGBFormat;

const videoTex = new THREE.VideoTexture(document.getElementById(this.data.video));
videoTex.minFilter = THREE.LinearFilter;
videoTex.magFilter = THREE.LinearFilter;
videoTex.format = THREE.RGBFormat;

this.material = new THREE.ShaderMaterial({
uniforms: {
tex1: {
type: 't',
value: tex,
value: depthTex,
},
tex2: {
type: 't',
value: videoTex,
},
},
vertexShader: self.vertexShader,
@@ -166,7 +184,8 @@ export default class VideoView extends React.Component {
videocloud: {},
},
mappings: {
src: 'videocloud.src',
video: 'videocloud.video',
depth: 'videocloud.depth',
},
});
}
@@ -216,7 +235,8 @@ export default class VideoView extends React.Component {
};

if (this.props.hasVideo) {
videoPlaneProps.src = this.props.src;
videoPlaneProps.video = this.props.video;
videoPlaneProps.depth = this.props.depth ? this.props.depth : this.props.video;
} else {
videoPlaneProps.color = '#444';
}

0 comments on commit 4059ab6

Please sign in to comment.
You can’t perform that action at this time.