<commit_before><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://webrtc.github.io/samples/src/js/adapter.js"></script>
<!--<script type="text/javascript" src="http://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>

<style type="text/css">
#localCanvas {
  display: block;
  width: 256px;
  height: 256px;
  border: 1px red solid;
}

#localVideo {
  width: 256px;
  height: 256px;
}
</style>

</head>

<body>
<video id="video" width="256" height="256" autoplay style="display:none">
  <source src="http://playground.html5rocks.com/samples/html5_misc/chrome_japan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
<script>

init();
render();

function init() {
  var WIDTH = 256;
  var HEIGHT = 256;

  var container;
	var camera, scene, renderer;
  var video, texture, material, mesh;
	var composer;
	
	container = document.createElement( 'div' );
	document.body.appendChild( container );

  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.z = 500;
	
  scene = new THREE.Scene();

	var light = new THREE.DirectionalLight( 0xffffff );
	light.position.set( 0.5, 1, 1 ).normalize();
	scene.add( light );
	
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(WIDTH, HEIGHT);
  container.appendChild( renderer.domElement );
  
  video = document.getElementById( 'video' );
  texture = new THREE.VideoTexture( video );
	texture.minFilter = THREE.LinearFilter;
	texture.magFilter = THREE.LinearFilter;
	texture.format = THREE.RGBFormat;
	
	var renderModel = new THREE.RenderPass( scene, camera );
	
	composer = new THREE.EffectComposer( renderer );
	composer.addPass( renderModel );

	/*
  var vShader = $('2d-vertex-shader');
  var fShader = $('2d-fragment-shader');
  var shaderMaterial =
    new THREE.ShaderMaterial({
      vertexShader:   vShader.text(),
      fragmentShader: fShader.text()
    });
  */
}

function render() {
  requestAnimationFrame( render );
  composer.render();
}

</script>

<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex"><commit_msg>Update with_three.js.html<commit_after><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://webrtc.github.io/samples/src/js/adapter.js"></script>
<!--<script type="text/javascript" src="http://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>

<script type="text/javascript" src="//raw.githubusercontent.com/mrdoob/three.js/master/examples/js/shaders/CopyShader.js"></script>

<script type="text/javascript" src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/postprocessing/EffectComposer.js"></script>

<script type="text/javascript" src="//raw.githubusercontent.com/mrdoob/three.js/master/examples/js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="//raw.githubusercontent.com/mrdoob/three.js/master/examples/js/postprocessing/ShaderPass.js"></script>

<style type="text/css">
#localCanvas {
  display: block;
  width: 256px;
  height: 256px;
  border: 1px red solid;
}

#localVideo {
  width: 256px;
  height: 256px;
}
</style>

</head>

<body>
<video id="video" width="256" height="256" autoplay style="display:none">
  <source src="http://playground.html5rocks.com/samples/html5_misc/chrome_japan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
<script>

init();
render();

function init() {
  var WIDTH = 256;
  var HEIGHT = 256;

  var container;
	var camera, scene, renderer;
  var video, texture, material, mesh;
	var composer;
	
	container = document.createElement( 'div' );
	document.body.appendChild( container );

  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.z = 500;
	
  scene = new THREE.Scene();

	var light = new THREE.DirectionalLight( 0xffffff );
	light.position.set( 0.5, 1, 1 ).normalize();
	scene.add( light );
	
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(WIDTH, HEIGHT);
  container.appendChild( renderer.domElement );
  
  video = document.getElementById( 'video' );
  texture = new THREE.VideoTexture( video );
	texture.minFilter = THREE.LinearFilter;
	texture.magFilter = THREE.LinearFilter;
	texture.format = THREE.RGBFormat;
	
	var renderModel = new THREE.RenderPass( scene, camera );
	var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
	effectCopy.renderToScreen = true;
	
	composer = new THREE.EffectComposer( renderer );
	composer.addPass( renderModel );
	composer.addPass( effectCopy );

	/*
  var vShader = $('2d-vertex-shader');
  var fShader = $('2d-fragment-shader');
  var shaderMaterial =
    new THREE.ShaderMaterial({
      vertexShader:   vShader.text(),
      fragmentShader: fShader.text()
    });
  */
}

function render() {
  requestAnimationFrame( render );
  composer.render();
}

</script>

<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
{'fraction_non_alphanumeric': 0.16691560866318148, 'fraction_numerical': 0.02315160567587752, 'mean_word_length': 4.505652620760534, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 57, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2469063', 'n_tokens_mistral': 1965, 'n_tokens_neox': 1804, 'n_words': 341}