Skip to content
Permalink
Browse files

Hacks to render depth information encoded as video

  • Loading branch information...
dbkr committed Jan 30, 2018
1 parent 58d041b commit b14cdda605d3807080049e84181b46706cec553e
Showing with 126 additions and 6 deletions.
  1. +126 −6 src/js/components/views/VideoView.js
@@ -23,6 +23,70 @@ import 'aframe-look-at-component';
export default class VideoView extends React.Component {
constructor(props) {
super(props);

this.vertexShader = `
uniform float time;
uniform sampler2D tex1;
varying vec2 vUv;
const float np = 512.0;
const float w = 65536.0;
const float p = np / w;
int m(in float L) {
return int(mod(floor((4.0 * (L / p)) - 0.5), 4.0));
}
float lzero(float L) {
return L - mod(L - (p / 8.0), p) + (((p / 4.0) * float(m(L))) - (p / 8.0));
}
float delta(float L, float Ha, float Hb) {
int mL = m(L);
if (mL == 0) {
return (p / 2.0) * Ha;
} else if (mL == 1) {
return (p / 2.0) * Hb;
} else if (mL == 2) {
return (p / 2.0) * (1.0 - Ha);
} else if (mL == 3) {
return (p / 2.0) * (1.0 - Hb);
}
}
float d(float L, float Ha, float Hb) {
return 100.0 * (lzero(L) + delta(L, Ha, Hb));
}
void main() {
vUv = vec2(position.x / 854.0, position.y / 480.0);
vec4 color = texture2D(tex1, vUv);
//float depth = ( color.r + color.g + color.b ) * 50.0;// / 3.0;
float depth = d(color.b, color.g, color.r);
//noise = 10.0 * -.10 * turbulence( .5 * normal + time / 3.0 );
//float b = 5.0 * pnoise3( 0.05 * position, vec3( 100.0 ) );
//float displacement = mod(time, 2.0);//(- 10. * noise + b) / 50.0;
//vec3 newPosition = position + normal;// * depth;
vec3 newPosition = ( position + vec3(-427, -240, depth) ) * vec3(0.002, 0.002, 0.002);
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
gl_PointSize = 1.5;
}
`;

this.fragmentShader = `
uniform sampler2D tex1;
varying vec2 vUv;
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, 1.0, 0.0, 1.0 );
}
`;
}

componentDidMount() {
@@ -33,6 +97,63 @@ export default class VideoView extends React.Component {
playPromise.then(() => {}, console.warn);
}
}

const self = this;


AFRAME.registerComponent('videocloud', {
schema: {
src: {
type: 'string',
},
},

init: function() {
this.geometry = new THREE.Geometry();
for (let x = 0; x < 854; ++x) {
for (let y = 0; y < 480; ++y) {
this.geometry.vertices.push(new THREE.Vector3(x, y, 0));
}
}


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

this.material = new THREE.ShaderMaterial({
uniforms: {
tex1: {
type: 't',
value: tex,
},
},
vertexShader: self.vertexShader,
fragmentShader: self.fragmentShader,
});

/*this.material = new THREE.PointsMaterial({
color: '#f00',
size: 1.0,
sizeAttenuation: false,
});*/


this.points = new THREE.Points(this.geometry, this.material);
this.el.setObject3D('mesh', this.points);
},
});

AFRAME.registerPrimitive('a-videomesh', {
defaultComponents: {
videocloud: {},
},
mappings: {
src: 'videocloud.src',
},
});
}

componentWillUnmount() {
@@ -72,21 +193,20 @@ export default class VideoView extends React.Component {
}

const videoPlaneProps = {
'width': this.props.width,
'height': this.props.height,
//'width': this.props.width,
//'height': this.props.height,
'scale': '0 0 0',
'position': this.props.position.join(' '),
'material': 'shader: flat; side: double',
'look-at': this.props.faceCamera ? '[camera]' : null,
};

if (this.props.hasVideo) {
videoPlaneProps.src = '#' + this.props.src;
videoPlaneProps.src = this.props.src;
} else {
videoPlaneProps.color = '#444';
}

const videoPlane = <a-plane {...videoPlaneProps} >
const videoPlane = <a-videomesh {...videoPlaneProps} >
<a-animation
attribute='opacity'
dur='500'
@@ -98,7 +218,7 @@ export default class VideoView extends React.Component {
from='0 0 0'
to='1 1 1'></a-animation>
{text}
</a-plane>;
</a-videomesh>;

return (
<Entity rotation={this.props.rotation}>

0 comments on commit b14cdda

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